들어가기 전에

지금까지 화면 레이아웃을 만들면서 버튼이나 텍스트뷰, 이미지뷰를 사용해 보았습니다.

이 뷰들은 가로 크기와 세로 크기를 지정하기만 하면 화면의 일정 영역을 차지하면서 보이게 됩니다.

그런데 이미지뷰의 경우에는 어떤 이미지가 이미지뷰 위에 보일지를 지정해줘야 합니다.

이렇게 각각의 뷰마다 자신의 특성에 맞는 나름의 속성들을 가지고 있습니다.

그리고 이 속성들을 잘 알아두어야 화면을 만드는 일이 익숙해집니다.

화면을 만들 때 많이 사용하는 기본 위젯들이 가지고 있는 주요 속성들을 알아봅시다.

학습 목표

1. 기본 위젯들의 주요 속성들을 이해하고 추가해봅시다.
2. 텍스트뷰나 이미지뷰를 화면에 잘 보여주기 위해서는 어떻게 하면 되는지 설명해봅시다.

핵심 단어

• 버튼 (Button)
• 텍스트뷰 (TextView)
• 이미지뷰 (ImageView)
• 에디트텍스트 (EditText)

학습하기

텍스트뷰 (TextView)

프로젝트를 처음 만들었을 때부터 화면 레이아웃 안에는 텍스트뷰가 들어 있습니다.

텍스트뷰는 화면에 글자를 표시하도록 해줍니다.

텍스트뷰에 글자를 표시할 때는 text 속성에 직접 글자를 넣어줄 수도 있지만 /res/values 폴더 안에 들어있는 strings.xml 파일 안에 넣어둔 태그의 값으로 설정할 수도 있습니다.

다음과 같이 name 속성의 값을 strings.xml 파일 안에 넣어줍니다.

<resources>
  <string name="name">John</string>
</resources>

그러면 텍스트뷰의 text 속성 값으로 @string/name 을 넣어줄 수 있습니다.

이 방식은 다국어를 설정할 때도 유용합니다.

만약 /res/values-en 폴더와 /res/values-ko 폴더를 만들고 그 안에 strings.xml 파일을 같이 넣어주었다면 @string/name 으로 참조하는 글자는 단말의 로케일(Locale)에 따라 달라집니다.

단말이 한국어로 설정되어 있다면 /res/values-ko/strings.xml 파일 안에 들어있는 name 태그의 값을 가져오는 것이죠.

텍스트뷰에는 text속성과 함께 textColor, textSize, textStyle 속성도 많이 사용됩니다.

버튼 (Button)

버튼은 텍스트뷰를 상속하여 만들어졌기 때문에 XML 레이아웃에 들어있는 태그의 이름을 TextView에서 Button으로 바꾸기만 해도 버튼이 화면에 보이게 됩니다.

즉, 버튼은 텍스트뷰의 속성을 모두 가지고 있으면서 추가적인 기능이나 속성을 더 가지고 있습니다.

버튼은 다시 라디오버튼(RadioButton)이나 체크박스(CheckBox) 등으로 나누어 사용될 수 있습니다.

그중에서 라디오버튼은 라디오그룹(RadioGroup)을 이용해 하나의 그룹으로 묶어줄 수 있습니다.

남자와 여자를 선택하는 라디오버튼을 화면에 넣고 싶다면 다음과 같이 그룹으로 묶어줍니다.

<RadioGroup
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:orientation="horizontal"
>
<RadioButton
  android:id="@+id/radio1"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="남자" />
<RadioButton
  android:id="@+id/radio2"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="여자" />
</RadioGroup>

에디트텍스트 (EditText)

에디트텍스트는 입력상자의 역할을 합니다.

사용자가 입력한 글자를 받고 처리하는 기능을 제공하므로 상당히 많이 사용됩니다.

이 위젯에서 많이 사용되는 속성으로 inputType을 들 수 있습니다.

inputType은 어떤 유형의 글자를 입력할 지를 결정하는 속성으로 이 속성을 어떤 값으로 설정했는가에 따라 키패드의 형태가 달라집니다.

hint 속성을 설정하면 글자를 입력하지 않았을 때 희미하게 보이는 안내글을 표시해줍니다.

<EditText
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:inputType="number"
  android:hint="아이디" />

이미지뷰 (ImageView)

이미지뷰는 이미지를 보여줍니다.

프로젝트의 res 폴더 안에는 drawable 폴더가 들어있는데 이 폴더 안에 이미지 파일을 넣고 이미지뷰에 설정할 수 있습니다.

Drawable 폴더에 이미지를 넣을 때 이미지 파일의 이름은 소문자와 특수기호 중 언더스코어(_)만 넣을 수 있다는 점에 주의해야 합니다. 이미지 파일의 확장자는 jpg, png, gif 등이 가능하며 그중에서 png 형식의 이미지를 권장합니다.

예를 들어, drawable에 넣은 이미지 파일의 이름이 house.png라면 다음과 같이 src 속성으로 설정할 수 있습니다.

android:src="@drawable/house"

scaleType 속성은 이미지가 이미지뷰가 가지는 영역을 꽉 채울 것인지 아니면 이미지 원본의 크기대로 보여줄 것인지 등을 결정하는 데 사용됩니다. 직접 scaleType 속성의 값을 이것저것 바꾸어가면서 화면에 보이는 결과를 확인해보세요.

생각해보기

1. 다른 사람들이 Play스토어에 올려놓은 앱의 화면에서 볼 수 있는 버튼이나 텍스트뷰에는 얼마나 많은 속성이
   설정되어 있을까요?
2. 버튼의 background 속성을 이용해 배경으로 이미지를 설정하면 이미지뷰의 src 속성을 이용해
   이미지를 보여주었을 때와 다른 점이 있을까요?
3. 원본 이미지의 해상도가 각각 다른 여러 이미지를 하나의 이미지뷰에 번갈아 가면서 보여주려 할 때
   이미지뷰의 scaleType 을 어떻게 설정해야 제대로 보여줄 수 있을까요?

참고 자료