wowo0709

wowo0709

큰 사람이 되려면 큰 물에서 놀아라

[Android] 4(2). 화면에 그려지는 디자인 요소 위젯 - 1

8 minute read


화면에 그려지는 디자인 요소 위젯 - 1

위젯은 버튼, 텍스트뷰, 이미지뷰 등과 같이 화면에 그려지는 디자인 요소입니다.

이번 포스팅에서는 텍스트뷰, 에디트텍스트, 이미지버튼, 그리고 라디오그룹과 라디오버튼에 대해 알아보고 다음 포스팅에서 체크박스, 토글버튼, 스위치, 이미지뷰, 프로그래스바, 시크바, 레이팅바에 대해 알아보겠습니다.


위젯의 대표 메뉴

Common

텍스트, 버튼, 레이아웃 등에서 일반적으로 많이 사용되는 것들을 모아놓은 메뉴

Text

글자를 화면에 나타내거나 입력받을 수 있는 위젯을 모아놓은 메뉴

텍스트에는 글자를 보여주는 기능만 있는 텍스트뷰와 글자를 입력받을 수 있는 기능이 있는 에디트 텍스트 가 있습니다. 아이콘을 보면 텍스트뷰의 Ab 아이콘에는 언더바가 없고, 두번째부터는 Ab 아이콘에 언더바가 있습니다. Ab 언더바가 있는 것이 모두 에디트 텍스트입니다.

Button

사용자로부터 클릭 또는 터치 관련 이벤트를 받을 수 있는 위젯을 모아놓은 메뉴

대표적으로 버튼, 라디오버튼, 체크박스, 스위치 등이 있습니다.

터치란 손을 대는 순간 발생하는 것이고, 클릭은 특정 위치를 터치한 뒤 같은 위치에서 떼었을 때만 발생하는 것으로 다른 개념입니다.

Widget

위젯은 이미지, 웹 사이트, 별점 표시, 진행 상태 등의 정보를 화면에 그리는 위젯 모음입니다.



텍스트뷰

사용할 텍스트 정의 및 적용하기: text

text는 화면에 나타낼 텍스트(글자)를 입력하는 속성입니다.

text 속성에 직접 입력할 수도 있지만, 여러 이유로 strings.xml 파일에 사용할 텍스트를 미리 정의해놓고 가져다가 사용하는 것이 좋습니다.

  1. 프로젝트 탐색기의 뷰가 Android인 상태에서 App - res - values - string.xml 파일을 찾습니다.

  2. 파일을 열어 < resources > 태그 사이에 < string > 태그를 다음과 같이 추가합니다.

     <string name="스트링 이름">보여질 텍스트</string>

    같은 이름을 가질 수는 없으며 다른 이름을 갖고 같은 텍스트를 가질 수는 있습니다.

  3. 다시 activity_xml 파일로 돌아가 텍스트뷰를 선택하고, text 속성에 @string/스트링 이름을 입력합니다.


텍스트 생상 지정하기: textColor

안드로이드의 모든 색상은 RGB(+투명)를 기준으로 각각 0부터 255까지의 숫자를 16진수 (0~F)로 입력해서 표현합니다.

👍 예시

#FFFFFFFF (흰색), #FF888888(회색), #FFFF0000(빨간색)
// #FFFFFF (흰색), #888888(회색), #FF0000(빨간색)
색상 (투명) 빨간색 녹색 파란색
범위 00~FF 00~FF 00~FF 00~FF

FF에 가까울수록 불투명해지고 원색에 가까워집니다.

투명값이 FF이면 빼고 여섯자리만 입력해도 됩니다.


색상 또한 직접 입력하지 않고 colors.xml에 작성된 값을 참조해서 사용합니다.

colorx.xml 파일은 strings.xml 파일과 같은 디렉터리에 있으며, 혹시 파일이 없을 경우에는 values 디렉터리를 마우스 우클릭하면 나타나는 메뉴에서 New - Value Resource File 을 선택해 생성할 수 있습니다.

string과 마찬가지로 < resources > 태그 사이에 color 태그(< color name=”컬러이름”>컬러 값</ color>)를 삽입하고 xml 파일에서 텍스트뷰의 textColor를 설정(@color/컬러이름>)하면 됩니다.

✋ XML (리소스) 파일의 주석

xml 파일에서도 주석을 사용할 수 있습니다.

<!-- 주석 처리할 내용을 작성 -->


텍스트 크기 지정하기: textSize

안드로이드에서는 dp, px, sp 등고 같은 단위를 사용하는데, 텍스트가 입력되는 위젯은 주로 sp를 사용합니다.

다른 위젯이 모두 dp를 사용하는 것과 달리 텍스트 위젯이 sp 단위를 사용하는 이유는 같은 해상도에서 문자열의 크기를 다르게 사용하는 경우가 있기 때문입니다. sp(Scale-independent Pixels) 단위는 이름에서도 유추할 수 있듯 화면 스케일에 독립적으로 크기를 조절할 수 있습니다.

textSize 또한 dimens.xml이라는 파일에 별도로 입력한 후 참조해서 사용하는데, dimens.xml은 기본으로 제공되는 파일이 아니라 values 디렉터리에 따로 생성해야 합니다.

디렉터리 생성 후에는 마찬가지로 < resources > 태그 사이에 dimen 태그(< dimen name=”단위이름”>단위 값</ dimen>)를 삽입하고 xml 파일에서 텍스트뷰의 textSize를 설정(@dimen/단위이름>)하면 됩니다.


텍스트뷰의 다른 속성들

속성 설명
maxLines, minLines 각각 텍스트뷰에 입력 가능한 최대 줄 수와 최소 줄 수를 지정합니다.
singleLine 텍스트뷰의 텍스트를 모두 한 줄로 보이게 합니다.
ellipsize 텍스트뷰의 글자가 잘릴 때 기능합니다.
none: 설정하지 않습니다.
start: 텍스트의 첫 부분을 말줄임표로 바꿉니다.
middle: 텍스트의 중간 부분을 말줄임표로 바꿉니다.
end: 텍스트의 마지막 부분을 말줄임표로 바꿉니다.
marquee: 글자가 흐르는 효과를 줍니다. 이 효과를 쓰기 위해서는 singleLine을 ‘true’로 설정해야 합니다.
focusable 속성은 ‘auto’, FocusableTouchMode는 ‘true’로 설정하면 전광판처럼 텍스트가 움직입니다.
fontFamily 텍스트의 글꼴을 설정하고, [More Fonts…]로 사용할 글꼴을 추가할 수도 있습니다.
ems 텍스트뷰의 크기를 나타낼 때 현재 글꼴의 크기를 기준으로 설정합니다. 예를 들어 텍스트뷰에 설정된
크기가 12sp라면, 1em=12sp, 2em=24sp입니다. 즉, 글꼴 크기에 텍스트뷰를 맞춰 글꼴이 커질 때 텍스트와
텍스트뷰의 비율을 유지하는 것입니다.
lines 텍스트 뷰의 높이를 고정합니다.
maxLength 텍스트의 전체 길이를 제한하는 속성으로 설정한 값만큼의 글자만 보이고 나머지는 보이지 않습니다.


이외에도 많은 속성들이 있지만 위의 속성들만 잘 이해하고 있다면 나머지 속성들은 필요 시 검색을 통해 쉽게 사용할 수 있을 것입니다.



에디트 텍스트

에디트 텍스트는 앱 개발 시 많이 사용되기 때문에 기능에 따라 세부적으로 나뉘어 있습니다.

에디트 텍스트에 입력되는 글자를 실시간으로 처리하기

  1. activity_main.xml 파일에 플레인 텍스트를 드래그해서 화면에 배치합니다.

  2. id 속성은 editText로 설정합니다. (id 변경 시 Rename 팝업이 나타나며 [Refactor] 버튼을 클릭해서 적용합니다. )

  3. text 속성은 아무것도 없게 삭제해줍니다.

  4. build.gradle(Module: 프로젝트명.app) 파일을 열고 android 스코프에 다음과 같이 view Binding true 설정을 해줍니다. 이것은 뷰 바인딩을 설정하는 것으로, 거의 항상 나오기 때문에 코드는 외워둡시다.

     buildFeatures{
   viewBinding true
 }

    ❗ 주의 사항

    코드 변경 후에 우측 상단의 [Sync Now]를 클릭하는 것을 잊으면 안됩니다.

  5. 다시 MainActivity.kt 파일로 이동합니다. class MainActivity에 binding 프로퍼티를 하나 생성하고 by lazy를 사용해서 안드로이드가 생성해둔 ActivityMainBinding을 inflate합니다.

    ```kotlin class MainActivity: AppCompatActivity(){ val binding by lazy {ActivityMainBinding.inflate(layoutInflater)} … }

  6. 이제 onCreate() 메서드 안에 작성되어 있는 setContentView에 binding.root를 전달합니다.

    ```kotlin class MainActivity: AppCompatActivity(){ val binding by lazy {ActivityMainBinding.inflate(layoutInflater)}

    override fun onCreate(savedInstanceState: Bundle?){ super.onCreate(savedInstanceState)

     setContentView(binding.root)
 ...    }  }

  7. 이어서 binding으로 앞에서 작성해둔 에디트텍스트의 id에 연결하고, 에디트 텍스트의 변경 사항을 캐치할 수 있는 리스터를 달아줍니다.

    ```kotlin class MainActivity: AppCompatActivity(){ val binding by lazy {ActivityMainBinding.inflate(layoutInflater)}

    override fun onCreate(savedInstanceState: Bundle?){ super.onCreate(savedInstanceState)

     setContentView(binding.root)
    
 binding.editText.addTextChangedListener{
      
 }    }  }

  8. 추가된 리스너 스코프 안에서 로그를 출력하는 코드를 작성해줍니다.

     Log.d("EditText", "현재 입력된 값 = ${it.toString()}")

    ❗ 주의사항

    Log 를 사용하려면 android.util.Log 를 import 해야 합니다. 직접 코드를 입력해도 되고, Log를 클린한 후 [Alt] + [Enter]를 눌러서 import를 선택해도 됩니다.

  9. 에뮬레이터를 실행한 후 에디트 텍스트에 글을 입력하면 로그가 실시간으로 발생합니다.


클릭하면 사라지는 미리보기: hint

클릭하면 사라지는 미리보기를 작성할 수 있습니다. 다른 프로그래밍 툴에서는 ‘place holder’라고 불리기도 합니다.

image-20210727215813381


키보드 모양 설정하기: inputType

inputType을 설정하여 입력 가능한 값을 제한하거나, 입력 형식을 지정할 수 있습니다.

텍스트 카테고리에 있는 플레인텍스트 아래의 대부분이 에디트텍스트에서 inputType의 옵션값만 바꾼 형태입니다.

inputType 옵션값
textUri URI 형식의 문자 입력
textEmailAddress email 주소 형식의 문자 입력
textPostalAddress 우편 번호 형식의 문자 입력
textPassword 비밀번호 입력
textVisiblePassword 비밀번호를 문자열 그대로 표시
number 숫자 형식
numberPassword 숫자로만 구성된 비밀번호 입력
phone 전화번호 형식
date 날짜 형식


이벤트 설정하기: imeOptions

입력 완료 후 실행할 이벤트를 설정합니다.

imeOptions 옵션값
normal 특별한 기능 없음
actionUnspecified 특별한 액션 없음
actionNone 액션을 사용하지 않음
actionGo 어딘가로 넘어감. URL 입력 후 해당 페이지로 넘어가기
actionSearch 검색하기, 구글, 네이버, 다음 검색
actionSend 메일, 메시지 보내기
actionNext 다음으로 넘어가기, 다음 입력창으로 이동
actionDone 입력 완료, 키보드 숨김
actionPrevious 이전 단계로 돌아가기, 이전 입력창으로 이동



이미지 버튼

버튼, 이미지버튼 둘 다 백그라운드 속성으로 이미지를 부여할 수 있는데 버튼은 백그라운드 이미지 위에 텍스트만, 이미지버튼은 백구라운드 이미지 위에 아이콘과 같은 아미지를 추가할 수 있습니다.

버튼과 이미지버튼의 차이는 클릭을 받아주는 리스너를 텍스트에 구현했느냐, 이미지뷰에 구현했느냐 정도이며 버튼은 텍스트뷰의 속성을, 이미지 버튼은 이미지뷰의 속성을 거의 그대로 사용합니다.


기본 이미지 사용하기

이미지 버튼을 화면에 가져다 놓으면 사용할 이미지를 선택하는 창이 나타납니다. 그 중 하나를 선택하면 샘플 이미지를 사용할 수 있습니다.


새로운 이미지 사용하기

  1. 사용할 png 이미지를 drawable 디렉터리에 붙여넣기(또는 드래그 앤 드롭) 한 다음 아래와 같은 팝업창이 나타나면 [Refactor]를 클릭해 drawable 디렉터리에 저장합니다.

image-20210727221932123

  1. 이미지버튼을 UI 편집기에 가져다 놓습니다. 이미지 버튼을 선택한 상태에서 속성 영역의 src(srcCompat) 옆의 버튼을 클릭하면 이미지를 선택할 수 있는 팝업 창이 다시 나타납니다. 앞에서 붙여넣기 했던 이미지를 선택합니다.
  2. 선택한 이미지가 나타납니다.

이 때 이미지의 크기가 너무 커서 일부만 보일 수 있는데, 이는 scaleType 속성을 지정하면 해결할 수 있습니다. scaleType에 대한 설명은 뒤에서 합니다.


투명 배경 설정하기: background

이미지 버튼은 기본적으로 배경에 회색 영역을 포함하는데, background 속성에 ‘@android:color/transparent’를 적용하면 배경을 투명하게 만들 수 있습니다.


이미지 크기 설정하기: scaleType

속성 값 설명 예시
matrix 실제 이미지를 좌측 상단부터 이미지버튼 크기만큼 보여줍니다. image-20210727223455072
fitXY 상하좌우를 이미지뷰 또는 이미지버튼 크기에 맞춰 늘려줍니다. image-20210727223524760
fitStart 좌측 상단부터 시작해서 비율에 맞게 이미지를 조절하여 위젯 안에 채워줍니다. image-20210727223704875
fitCenter 중앙을 기준으로 비율에 맞게 이미지 크기를 조절하여 위젯 안에 채워줍니다. image-20210727223615450
fitEnd 우측 하단부터 시작해서 비율에 맞게 이미지 크기를 조절하여 위젯 안에 채워줍니다. image-20210727223641082
center 실제 이미지 사이즈대로 정중앙에 위치 시킵니다. 이미지가 위젯보다 크면 위아래가 잘립니다. image-20210727223724499
centerCrop 가로세로 사이즈 중 근접한 길이를 기준으로 나머지 한쪽을 잘라 비율을 맞춰줍니다.
뷰에 이미지를 가득 채워주기 때문에 앨범 이미지를 썸네일로 보여줄 때 많이 사용합니다.		 image-20210727223747442
centerInside 이미지가 위젯보다 크면 fitCenter와 동일하게 동작하고, 작으면 위젯의 중앙에 위치시킵니다. image-20210727223810848


이미지 영역에 색 채우기: tint

tint는 이미지 영역에 색을 채우는 속성입니다.

image-20210727223909653

tint 속성의 경우 이미지의 투명도를 기준으로 색이 적용되기 때문에 일반적으로 투명 배경을 가진 이미지에 사용합니다.

image-20210727224050925


투명도 조절하기: alpha

alpha는 버튼의 투명도를 결정하며, 1부터 0까지의 값을 입력하여 0에 가까울수록 투명한 상태가 됩니다.



라디오그룹과 라디오버튼

라디오버튼은 여러 개의 선택지 중에서 하나만 선택할 때 사용합니다.

라디오버튼을 단독으로 사용할 수도 있지만 라디오그룹과 함께 사용하면 다루기가 더 쉽습니다.


라디오그룹과 라디오버튼 사용하기

  1. UI 편집기에 [Button] 카테고리에 있는 라디오그룹을 가져다 놓고 id를 ‘radioGroup’으로 설정합니다. 이후에 컨스트레인트를 모두 연결해줍니다.

  2. 라디오 그룹 안에 3개의 라디오버튼을 가져다 놓습니다. UI 편집기에서 라디오그룹의 선택이 잘 안되기 때문에 컴포넌트 트리를 활용합니다. 라디오 버튼의 id 속성은 각각 radioApple, radioBanana, radioOrange라고 입력하고 text 속성은 각각 사과, 바나나, 오렌지라고 입력합니다.

  3. 레이아웃을 연결하기 위해 build.gradle 파일에 가서 viewBinding true 설정을 추가합니다. 설정 후에는 [Sync Now]를 클릭하는 것을 잊으면 안됩니다.

  4. MainActivity.kt 로 가서 소스코드를 다음과 같이 수정하여 레이아웃을 연결합니다.

    ```kotlin class MainActivity : AppCompatActivity() {

     val binding by lazy {ActivityMainBinding.inflate(layoutInflater)}

 override fun onCreate(savedInstanceState: Bundle?) {
     super.onCreate(savedInstanceState)
     setContentView(binding.root)

 }  }

  5. 이제 라디오그룹 리스너를 추가합니다. 다음 코드를 setContentView 함수 아래에 추가합니다.

     binding.radioGroup.setOnCheckedChangeListener { group, checkedId ->
    
 }

    이제 radioGroup이라는 id를 가진 위젯에 클릭과 같은 변경 사항이 생기면 코드 블록이 실행되면서 group에는 변경된 라디오그룹 위젯이, checkedId에는 라디오그룹 안에서 클릭된 라디오버튼의 id가 전달됩니다.

  6. 최종적으로 코드를 다음과 같이 수정하고 에뮬레이터를 실행하여 라디오버튼을 클릭해보면 로그캣 창에 메시지가 출력되는 것을 확인할 수 있습니다.

     class MainActivity : AppCompatActivity() {
    
     val binding by lazy {ActivityMainBinding.inflate(layoutInflater)}
    
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
         setContentView(binding.root)
    
         binding.radioGroup.setOnCheckedChangeListener { group, checkedId ->
             when(checkedId) {
                 R.id.radioApple -> Log.d("RadioButton", "사과가 선택되었습니다.")
                 R.id.radioBanana -> Log.d("RadioButton", "바나나가 선택되었습니다.")
                 R.id.radioOrange -> Log.d("RadioButton", "오렌지가 선택되었습니다.")
             }
         }
     }
 }


이렇게 라디오 버튼은 각각의 버튼에 따로 리스너 처리를 할 필요 없이 버튼을 감싸고 있는 그룹에만 리스너를 연결해주면 코드를 간단하게 처리할 수 있습니다.

✋ R.id 접두어

우리가 레이아웃 파일에 id를 입력하면 모든 아이디에는 R.id 라는 일종의 접두어가 붙어서 코드로 생성됩니다. 구체적으로는 안드로이드가 리소스를 관리하는 R이라는 클래스를 생성하고, 그 안에 리소스 아이디를 관리하는 id 클래스가 추가되는 것이지만 접두어라고 알고 있어도 무방합니다. 위젯의 id를 소스 코드에서 입력할 때는 R.id.위젯아이디가 됩니다.


라디오버튼 배치하기: orientation

라디오그룹의 orientation 속성을 설정하여 라디오 버튼들을 가로로 정렬할 건지 세로로 정렬할 거지 결정할 수 있습니다.


선택된 라디오버튼 설정하기: checkedButton

미리 선택되어 있는 라디오버튼을 설정할 수 있습니다.



정리

  • 문자열이나 색상, 단위 값들은 속성 값에 바로 지정하지 않고 App - res - values 디렉터리 밑에 각각 string.xml, colors.xml, dimens.xml에 정의하고 가져다 쓰도록 합니다. 이때 xml 파일에 추가되는 태그는 < string[color, dimen] name = “문자열[색상, 단위] 이름” >문자열[색상, 단위] 값< /string[color, dimen] > 처럼 쓰고, id를 참조할 때는 @string[color. dimen]/문자열[색상, 단위] 이름 을 입력합니다.

  • 뷰 바인딩
    1. build.gradle(Module: 프로젝트명.app) 파일에서 view Binding true 설정
    2. MainActivity.kt 파일에서 class MainActivity에 binding 프로퍼티를 하나 생성하고 by lazy를 사용해서 안드로이드가 생성해둔 ActivityMainBinding을 inflate
    3. onCreate() 메서드 안에 작성되어 있는 setContentView에 binding.root를 전달

  • 새로운 이미지를 사용할 때는 App - res - drawable에 이미지를 저장해놓고 사용합니다.

  • 라디오 버튼을 사용할 때는 라디오 그룹을 이용합니다. 소스 코드 상에서는 라디오그룹의 리스너만 만들면 각각의 라디오 버튼이 선택되었을 때의 처리를 할 수 있습니다.

  • 위젯의 id를 소스 코드에서 입력할 때는 ‘R.id.위젯아이디’가 됩니다.

Categories:

Updated:

Leave a comment

You may also enjoy