[Android] 안드로이드 정리 (2) - 기본 위젯과 드로어블

출처 : Do it! 안드로이드 앱 프로그래밍 / 정재곤

 

TextView

텍스트뷰는 화면을 구성할 때 가장 많이 사용되는 기본 위젯이다. 텍스트뷰는 화면에서 글자를 보여주는 역할을 한다. 

> text

텍스트뷰의 문자열을 설정할 수 있다. text 속성 값으로 직접 문자열을 넣는 방법과 /app/res/values 폴더의 strings.xml 파일에 작성한 문자열을 지정하는 방법이 있다. 다국어 지원을 위해 strings.xml 파일을 사용하는 것이 좋다. 다국어를 지원할 때는 /app/res/values-en/strings.xml 이런 식으로 파일을 관리한다. strings.xml 파일에 정의된 문자열은 text 속성에서 @string/... 와 같은 형식으로 참조해야 한다.

> textColor

텍스트뷰에서 표시하는 문자열의 색상을 설정한다. 색상 설정은 일반적으로 '#AARRGGBB' 포맷을 사용한다.

> textSize

텍스트뷰에서 표시하는 문자열의 크기를 설정한다. 크기의 단위는 "dp"나 "sp" 또는 "px" 등을 사용할 수 있다. "sp" 단위가 단말의 해상도에 따라 글자의 크기를 일정한 크기로 보일 수 있게 하며 폰트를 변경했을 때 해당 폰트도 반영이 된다.

> testStyle

textStyle은 문자열의 스타일 속성을 설정한다. "normal", "bold", "italic" 등의 값을 지정할 수 있으며, | 기호를 사용해서 여러 개의 속성 값을 함께 지정할 수 있다. 

> typeFace

typeFace는 텍스트뷰에서 표시하는 문자열의 폰트를 설정한다. 기본적으로 제공되는 폰트는 4가지밖에 없지만, 다른 폰트가 필요하다면 폰트를 앱에 추가하고 따로 설정할 수도 있다.

> maxLines

maxLines는 텍스트뷰에서 표시하는 문자열의 최대 줄 수를 설정한다. 특히 한 줄로만 표시하고 싶을 때는 값을 1로 설정하면 된다.

 

 

Button

버튼은 사용자가 클릭하면 클릭에 대한 반응을 하는 위젯이다. 또 안드로이드는 다양한 유형의 버튼을 제공한다. 체크 박스, 라디오 버튼도 모두 버튼의 속성을 그대로 가진다. 버튼 위젯에 발생한 이벤트를 가장 간단하게 처리할 수 있는 방법은 OnClickListener를 정의하여 버튼에 설정하는 것이다. 

체크 박스와 라디오 버튼은 단순히 클릭 이벤트만 처리하는 것이 아니라 상태 값을 저장하고 선택/해제 상태를 표시할 수 있다. 라디오 버튼은 하나의 버튼이 선택되면 다른 버튼의 선택이 해제되어야 한다. 

 

 

EditText

에디트텍스트는 사용자에게 값을 입력받을 때 사용한다. 한글, 영문, 숫자 등 입력하는 문자의 유형도 다양하다. hint 속성을 사용하면 에디트텍스트에 간단한 안내글이 표시된다. 안내글은 사용자의 입력이 진행되면 사라지게 된다. 에디트텍스트에 들어 있는 글자를 복사하거나 붙여 넣으려면 안드로이드에서 지원하는 기본 기능을 그대로 사용하면 된다.

 

 

ImageView와 ImageButton

이미지뷰와 이미지 버튼은 이미지를 화면에 표시할 때 사용하는 위젯이다. 이미지뷰에 이미지를 나타내려면 먼저 /app/res/drawable 폴더에 저장한 이미지 파일을 복사하여 넣은 후 src 속성 값을 @drawable/이미지명 방식으로 지정해주면 된다.

> src

src 속성은 원본 이미지를 설정한다. 이미지뷰는 내용물이 지정되지 않으면 이미지뷰의 크기를 확인할 수 없다. 

> maxWidth, maxHeight

두 속성은 이미지가 표시되는 최대 폭, 높이를 설정한다. 이미지의 원본이 너무 크면 이 속성으로 최대 크기를 제한할 수 있다.

> tint

tint 속성은 이미지뷰에 보이는 이미지의 색상을 설정할 수 있다. 예를 들어, 반투명으로 이미지의 색상 값을 적용하면 원본 이미지의 느낌과 다른 느낌을 연출할 수 있다.

> scaleType

scaleType 속성은 이미지뷰의 크기에 맞게 원본 이미지의 크기를 자동으로 늘리거나 줄여서 보여줄 때 사용한다. 

 

아래의 예시는 이미지버튼과 이미지뷰를 사용한 예시다. 2번째와 3번째의 이미지버튼을 보면 app:srcCompat에 이미지 경로를 설정하면 버튼 모양 위에 이미지가 그려지게 되는데, background에 설정하면 이미지가 바로 버튼으로 그려지게 된다.

 

 

텍스트뷰와 에디트텍스트의 다른 기능들

> 자동 링크 관련 속성

autoLink 속성을 true로 설정하면 문서에 포함된 웹피이지 주소나 이메일 주소를 링크 색상으로 표시하고 링크를 누르면 웹페이지에 바로 접속하거나 메일 편집기를 띄워주는 기능을 간단하게 넣을 수 있다.

> 줄 간격 조정 관련 속성

줄 간격 조정 관련 속성을 이용하면 텍스트뷰의 줄 간격을 조절하여 가독성을 높일 수도 있다. 줄 간격은 lineSpacingMultiplier와 lineSpacingExtra로 설정할 수 있다. lineSpacingMultiplier는 줄 간격을 기본 줄 간격의 배수로 설정할 때 사용하고 lineSpacingExtra는 여유 값으로 설정할 때 사용한다.배수로 설정할 때는 기본 값을 1.0로 놓고 값을 조절하면 된다.

> 줄임 표시 관련 속성

텍스트뷰에 많은 문자를 입력하면 입력한 내용의 뒷부분은 잘리고 말줄임표(...)로 표시된다. 이때 ellipsize 속성을 사용하면 입력한 내용의 생략 부분을 설정할 수 있다. 디폴트 값인 "none"은 뒷부분을 자르고 "start", "middle", "end"값들은 각각 앞부분, 중간부분, 뒷부분을 잘라서 보여준다. maxLine="1"에서는 동작하지 않고 singleLine="true"에서만 동작한다.

> 편집 가능 관련 속성

에디트텍스트에 입력되어 있는 문자열을 편집하지 못하게 하고 싶다면 editable 속성 값을 false로 설정하면 된다. 기본 값은 문자열을 편집할 수 있는 true다.

> 문자열 변경 처리 관련 속성

에디트텍스트에 입력된 문자를 확인하거나 입력된 문자가 필요한 포맷과 맞는지 확인할 때 getText() 메소드를 사용한다. 이 메소드를 리턴하는 것은 Editable 객체인데 이 객체의 toString() 메소드를 이용하면 일반 String 타입의 문자열을 확인할 수 있다.

만약 문자열이 사용자의 입력에 의해 바뀔 때마다 확인하는 기능을 넣고 싶다면 TextChangedListener를 사용할 수 있다. addTextChangedListener() 메소드를 사용하면 TextWatcher 객체를 설정할 수 있다. 이 객체는 텍스트가 변경될 때마다 발생하는 이벤트를 처리한다. 

 

 

드로어블 만들기

> 뷰의 배경 이미지

만약 버튼이 눌렸을 때 눌린 이미지가 보이게 하고 싶다면 어떻게 할까? 이럴 땐 드로어블을 사용하면 된다. 드로어블은 상태에 따라 그래픽이나 이미지가 선택적으로 보이게 할 수 있게 한다.

드로어블은 뷰에 설정할 수 있는 객체이며 그 위에 그래픽을 그릴 수 있다. 드로어블에는 이미지 파일을 보여줄 때 사용하는 비트맨 드로어블, 상태별로 다른 그래픽을 참조할 수 있는 상태 드로어블, 두 개의 드로어블이 서로 바뀌도록 만들 수 있는 전환 드로어블, 색상과 그라데이션을 포함하여 도형 모양을 정의할 수 있는 셰이프 드로어블 등이 있다. 앱을 만들 때 가장 많이 사용하는 드로어블은 상태 드로어블과 셰이프 드로어블이다.

 

> 상태 드로어블 만들기

드로어블을 만들려면 XML 파일을 만들어야 한다. drawable 폴더에서 오른쪽 마우스를 누른 뒤 New -> Drawable Resource File을 눌러보면 화면이 나오는데 여기서 파일명을 입력한 뒤 OK 버튼을 누르면 된다.

XML 파일을 생성했으면 이제 아래의 소스 코드를 입력하여 상태 드로어블을 만들어준다. 

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true"
        android:drawable="@android:drawable/btn_star"/>
    <item android:drawable="@drawable/finger"/>
</selector>

버튼이 눌리면 btn_star 이미지가 그려지게 되고, 평상시에는 finger 이미지가 그려지게 된다.

 

> 셰이프 드로어블 만들기

셰이프 드로어블은 도형을 만들거나 그라데이션 효과를 줘야할 때 많이 사용한다.

아래의 코드는 하늘색의 사각형을 만드는 드로어블이다.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <size android:width="200dp" android:height="120dp"/>
    <stroke android:width="1dp" android:color="#0000ff"/>
    <solid android:color="#aaddff"/>
    <padding android:bottom="1dp"/>
</shape>

아래의 코드는 앱의 배경에 그라데이션 효과를 넣는 드로어블이다.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:angle="90"
        android:startColor="#7288DB"
        android:centerColor="#3250B4"
        android:endColor="#254095"
        android:centerY="0.5"/>

    <corners android:radius="2dp"/>
</shape>

결과물