1) 기본 위젯들

들어가기 전에

​

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

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

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

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

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

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

학습 목표

​

1) 기본 위젯들의 주요 속성들을 이해하고 추가해봅시다.

2) 텍스트뷰나 이미지뷰를 화면에 잘 보여주기 위해서는 어떻게 하면 되는지 설명해봅시다.

핵심 단어

​

· 버튼 (Button)

· 텍스트뷰 (TextView)

· 이미지뷰 (ImageView)

· 에디트텍스트 (EditText)

학습하기

위젯들 중에서도 가장 기본이라고 할 수 있는 텍스트뷰(TextView)에 대해 살펴보도록 하겠습니다.

​

텍스트뷰의 기본적인 속성들

버튼은 텍스트뷰를 상속하여 만들어진 위젯입니다.

텍스트뷰의 모든 속성들은 물론, 추가적인 속성들까지 사용할 수 있다는 뜻이죠!

​

버튼 안에는 라디오버튼(RadioButton)이나 체크박스(CheckBox) 등도 포함되어 있습니다.

그 중에서 라디오버튼(RadioButton)은 보통 라디오그룹(RadioGroup)으로 묶어 하나의 버튼만 선택되게 설정한답니다!

에디트텍스트는 일종의 입력상자입니다.

사용자가 입력한 글자를 읽어와 처리하는 기능을 제공합니다!

​

검색창, 로그인 id / password창 등을 봐보면, 입력상자들이 보일거에요!

​

EditText에서 많이 사용되는 속성으로는 inputType 속성이 있습니다.

inputType은 어떤 유형의 글자를 입력할지를 결정하는 속성입니다.

이 속성을 어떤 값으로 설정했는가에 따라 키패드의 형태가 달라진답니다!

​

EditText에는 hint 속성도 있는데요!

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

이미지뷰는 말 그대로 이미지를 보여주는 뷰입니다.

drawable 폴더 안에 이미지 파일을 넣으면 이미지뷰를 통해 이미지를 보여줄 수 있습니다!

​

※ 여기서 주의할 점! ※

drawable 폴더 안에 이미지를 넣을 때 이미지 파일의 이름은 소문자와 숫자, underbar('_') 기호의 조합으로만 설정할 수 있어요!

​

또한, 이미지 파일의 확장자는 jpg, png, gif 등이 가능하지만 그 중 png 형식의 이미지를 권장합니다!

​

이미지뷰에는 src 라는 속성이 있는데요.

이 속성을 사용하여 이미지를 설정할 수 있답니다!​

scaleType 속성은 이미지가 이미지뷰의 영역을 꽉 채울 것인지, 원본의 크기 그대로 보여줄 것인지, 아니면 가운데 부분만 잘라서 보여줄 것인지 등을 결정하는데 사용됩니다!

생각해보기

​

1. 다른 사람들이 Play스토어에 올려놓은 앱의 화면에서 볼 수 있는 버튼이나 텍스트뷰에는 얼마나 많은 속성이

설정되어 있을까요?

​

텍스트의 크기, 스타일, 폰트, 색 등부터 시작해 버튼의 배경색, 스타일 등의 많은 속성들이 설정되어 있겠죠?

​

2. 버튼의 background 속성을 이용해 배경으로 이미지를 설정하면 이미지뷰의 src 속성을 이용해

이미지를 보여주었을 때와 다른 점이 있을까요?

​

scaleType 등의 속성은 사용할 수 없게 됩니다.

​

3. 원본 이미지의 해상도가 각각 다른 여러 이미지를 하나의 이미지뷰에 번갈아 가면서 보여주려 할 때

이미지뷰의 scaleType 을 어떻게 설정해야 제대로 보여줄 수 있을까요?

​

fitCenter나 centerCrop이 적당할 것 같습니다.

비율은 유지하되 imageView의 가로, 세로 크기에 맞추어 이미지를 표현해주기 때문입니다.

다음 포스팅에서는 상태 드로어블에 대해 알아보도록 할게요!