[Kotlin] 위젯 - 텍스트뷰(TextView)

화면상에 보이는 텍스트 뷰나 버튼 같은 것들을 위젯이라고 합니다. 사실 '위젯'이라는 단어는 워낙 다양한 곳에서 활용되기 때문에 혼동하기 쉬울 수 있으므로 상황에 따라 잘 이해해야 할 필요가 있습니다.

 

우리가 사용할 수 있는 위젯은 Android Studio에서 팔레트(Palette)에 있으며 종류에 따라 아래의 형태로 분류되어 있습니다.

 

Common	자주 사용되는 위젯들의 모음입니다.
Text	텍스트와 관련된 위젯입니다. 해당 메뉴앞에 ab라고 되어 있는것은 텍스트를 표시하기 위한 위젯이며 ab에 밑줄이 있는 위젯은 텍스트를 입력받기 위한 위젯입니다.
Buttons	버튼이나 라디오, 스위치같이 클릭이나 터치이벤트를 받은 위젯입니다.
Widgets	이미지나 진행상태등 화면에 표시되는 위젯입니다.
Layout	화면 자체를 구성하기 위한 위젯입니다.
Container	주로 다른 위젯을 담아두는 역활을 하는 위젯입니다.
Google	구글관련 서비스 이용을 위한 위젯입니다.
Legacy	예전버전의 Android Studio부터 존재했었던 위젯입니다. 과거 만들어진 앱과의 호환성 문제로 여전히 존재하긴 하지만 더 이상 지원되지는 않으므로 되도록 사용하지 않는 것이 좋습니다.

 

각 분류에 해당하는 여러가지 위젯이 있는데 이번에는 Text에 있는 TextView라는 위젯을 사용해 보고 간단히 몇가지 관련 속성을 함께 알아보고자 합니다.

 

1. text

 

텍스트뷰는 텍스트를 화면에 표시하는 위젯입니다. 처음 위젯을 올려놓고 보면 아래와 같은 경고를 볼 수 있는데

 

이 말은 화면에 표시할 내용을 담는 text속성에 직접 값을 입력하지 말고 resource를 통해서 표시하라는 것입니다. 직접 속성에 내용을 입력하기보다는 미리 표시할 내용을 정의해 두고 가져다 사용하는 것이 앱을 관리하는데 더 용이하기 때문입니다.

 

내용 설정을 위해 우선 Android Studio에서 프로젝트 탐색기에서 app -> src -> main -> res -> values -> setting.xml 파일을 찾아 열어봅니다. 만약 탐색기의 설정이 Android라면 res -> values -> setting.xml 파일을 찾으면 됩니다.

 

파이을 열어보면 이미 앱의 제목이 저장되어 있는걸 볼 수 있는데 그 밑에 다음과 같은 내용으로 하나더 추가해 봅니다.

<string name="my_value">안녕하세요.</string>

그리고 디자인 화면으로 돌아와 위에서 추가한 TextView위젯을 선택하고 text속성 옆에 작은 버튼을 눌러주면 사용 가능한 텍스트 리소스 목록이 나타나게 되는데

 

여기서 조금전에 추가한 리소스를 선택하면 text속성의 설정이 완료됩니다.

 

혹은 text속성에 바로 '@string/my_value'처럼 값을 입력할 수도 있습니다. 여기서 my_value는 조금 전에 resource에 추가할 때 사용한 ID와 같은 값입니다.

---

2. textColor

 

조금전에 setting.xml 파일을 찾을 때 보니 color.xml이라는 파일도 같이 있는 것을 볼 수 있었습니다. 파일명처럼 색상을 지정하는 것 같은데 한번 열어보겠습니다.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#6200EE</color>
    <color name="colorPrimaryDark">#3700B3</color>
    <color name="colorAccent">#03DAC5</color>
</resources>

색상도 고유 ID와 함께 색상값을 통해 저장하고 있는데 색상값이 16진수입니다. HTML을 사용해 봤다면 HTML에서 색상을 지정하는 방식과 동일하다는 것을 알 수 있습니다.

 

이번에는 새로운 색상을 추가하는 대신 기존에 저장된 색상을 사용해 보도록 하겠습니다. 디자인으로 돌아와 속성창의 All Attributes옆에 있는 삼각형 버튼을 눌러 모든 속성을 나열한 뒤 textColor속성을 찾아봅니다. 물론 돋보기 모양을 눌러 'textColor'를 입력해 속성을 찾을 수도 있습니다.

 

속성을 찾았으면 이번에도 text를 설정할때와 동일한 방식으로 textColor값을 설정합니다.

 

텍스트 크기는 testSize속성을 통해 설정가능합니다. 기본적으로 화면 해상도 따라 독립적으로 크기 조절이 가능한 sp단위를 사용하며 이 값 역시 직접 입력되거나 설정 파일을 통해 설정할 수 있습니다.

---

3. textSize

 

기본적으로 제공되는 설정파일은 color, setting, style이므로 새로운 설정 파일을 추가하여 testSize속성을 변경해 보도록 하겠습니다. 이를 위해 Project 탐색기 -> values폴더에서 마우스 오른쪽 버튼을 눌러 New -> Values  resource File 을 선택합니다.

 

파일명은 'dimens'로 하고 확장자인 xml은 입력하지 않습니다. 파일을 생성한 후 설정내용은 다음과 같이 추가합니다.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <dimen name="testSize">50sp</dimen>
</resources>

위와 같이 입력한 후 위젯의 textSize설정에서 '@dimen/testSize'를 입력하면 다음과 같이 글자의 크기가 변경되는 것을 알 수 있습니다.

 

---

4. maxLines, minLines, singleLine, lines

 

어떤 text를 여러줄에 걸쳐 표시하려면 내용 중간에 \n문자를 삽입하면 됩니다.

<resources>
    <string name="app_name">My Application</string>
    <string name="my_value">안녕하세요.\n반갑습니다.\n행복하세요.</string>
</resources>

이때 maxLines는 최대로 표시할 줄 수를 의미하므로 만약 이 값을 2로 설정하면 testView는 2줄 이상은 표시하지 않게 됩니다.

 

minLines는 반대로 최소한의 라인수를 의미하며 이 값을 설정하면 설정한 값만큼 미리 설정치에 해당하는 크기를 확보하게 됩니다.

 

만약 \n문자에 의한 줄바꿈을 무시하고 오로지 한 줄로만 표시하고자 한다면 singleLine을 true로 설정하고

 

특정 라인수만큼 크기를 고정하려면 line을 설정하면 됩니다.

 

 

---

5. ellipsize

 

위에서 singleLine을 true로 설정했더니 내용이 너무 길어져서 끝에... 말줄임 처리가 되었습니다. 이러한 줄임 표현을 사용하지 않으려면 ellipsize를 none으로 설정합니다.

 

이 외에 start는 시작부분에, end는 끝부분, middle는 중간 부분을 말줄임을 처리하도록 합니다.

---

6. maxLength

 

이 설정은 지정한 수만큼의 글자수만 표시하도록 합니다.