[모든 팔레트 정복] 2. Button(버튼)

안녕하세요? 닉네임간편입니다. 이번 시간에는 팔레트 중 Button(버튼)에 대해서 알아보겠습니다.

1. Button

탭하거나 클릭해서 특정 행동을 취할 수 있도록 하는 요소입니다. 가장 흔하게 사용되는 위젯 중 하나입니다.

View.OnClickListener를 설정해서 특정 동작을 수행할 수 있도록 설정할 수 있습니다.

TextView를 상속받은 위젯이며, 따라서 버튼에 문자열을 표시할 수 있습니다.

2. ImageButton

ImageView를 상속받았으며, 문자열 대신 이미지를 표시할 수 있는 버튼입니다.

Button과 마찬가지로 View.OnClickListener를 설정하면 클릭되었을 때 특정 동작을 수행할 수 있습니다.

이미지를 설정하기 위해선 background와 src를 사용할 수 있습니다. 그러나 이때 둘 간에 차이가 있고, 이를 유의해서 설정해야 의도한 대로 동작할 수 있습니다.

1) background

설정하려는 이미지가 ImageView 사이즈에 맞춰집니다. 즉, 문자 뜻 그대로 배경으로 설정됩니다.

2) src

이미지가 마치 ImageButton 위에 올려놓아지는 것과 비슷합니다.

왼쪽 예시는 src로, 오른쪽 예시는 background로 이미지를 설정했습니다. background로 설정한 이미지 버튼의 경우 이미지가 뷰에 딱 맞게 조절되는 것을 볼 수 있습니다. 반대로 src의 경우 이미지의 원래 크기가 적용되기 때문에 가운데 초록색 부분만 보이는 걸 알 수 있습니다.

또한 src는 마치 요소를 ImageButton 위에 올려놓는 것과 같다고 했기 때문에, padding을 적용해 화면 가운데에 이미지를 배치할 수 있습니다.

또한 버튼이 클릭되었을 때와 일반적인 상태일 때를 구분하기 위해 각 상태마다 다른 이미지를 적용할 수 있습니다. 이는 drawable 중 selector를 이용해 설정할 수 있습니다.

3. Chip 및 ChipGroup

Chip은 어떤 동작이나 속성 등을 나타내는 요소입니다. 이 요소는 사용자로 하여금 정보를 입력하거나 선택사항을 선택하고, 내용을 필터링하거나 어떤 행동을 취하도록 도와줍니다.

Chip에는 선택가능 여부, 문자, (왼쪽에 표시되는) 아이콘, (오른쪽에 표시되는) 삭제 아이콘이 있습니다. 또한 checkedIcon과 checkedIconEnabled를 사용하면 Chip이 선택되었을 때의 아이콘을 커스텀하여 설정할 수 있습니다.

이를 표시하면 다음과 같습니다.

이때 CheckedIcon이 있는 위치는 선택이 되지 않은 상태에서는 일반 아이콘이 표시됩니다.

여러 개의 Chip은 ChipGroup으로 관리할 수 있습니다. ChipGroup을 이용해 자식 Chip을 나란히 정렬할 수 있으며, 마치 RadioGroup처럼 같은 그룹 내에서 한 번에 하나의 Chip만 선택될 수 있도록 설정할 수 있습니다.

또한 Chip만 여러 개를 사용하다가 화면 범위를 벗어나면 아래로 내려가지 않고 계속해서 옆으로 생성되는데, ChipGroup을 사용하면 자식 Chip들은 화면 범위를 벗어나기 전에 다음 줄에 생성됩니다.

4. CheckBox

선택 여부를 나타낼 수 있는 버튼이며, 선택 여부를 나타내는 네모 버튼 옆에 문자열을 표시할 수 있습니다.

선택한 상태에서 한 번 더 클릭하면 선택이 해제되며, 일반적으로 다양한 선택지 옵션을 선택해야 할 때 사용됩니다.

5.  RadioButton 및 RadioGroup

선택 여부에 따라 두 상태로 표시되는 버튼입니다. CheckBox와는 다르게 선택된 상태에서 한 번 더 클릭했다고 해서 uncheck 되지 않습니다.

RadioGroup을 통해 관리하며, 이 그룹 내에서 한 RadioButton이 선택되면 다른 버튼은 모두 uncheck됩니다.

일반적으로 다양한 옵션 중 하나만 선택해야 할 때 사용됩니다.

6. ToggleButton

전원을 on/off 하는 것처럼 두 상태 사이에서 설정을 변경할 때 사용되는 버튼입니다. 버튼을 클릭하면 텍스트와 버튼 하단 색상이 변경하며, 이를 통해 현재 상태를 알 수 있습니다.

일반적으로 on/off 상태를 알 필요가 있을 때 사용되며, 따라서 기본적으로 on/off로 문자열이 설정되어있습니다.

7. Switch

앞선 Toggle Button처럼 두 상태 중 하나를 지정할 수 있는 요소입니다. Toggle Button처럼 클릭하면 상태가 변하며, 또한 사용자는 'thumb'이라는 요소를 앞뒤로 드래그함으로써 상태를 변경할 수도 있습니다.

8. FloatingActionButton

앱 UI의 기본 작업을 유발하는 원형 버튼입니다.

특히 화면에서 주요하고 흔하게 사용되는 동작을 수행하는 기능을 담고 있습니다. 일반적으로 화면 우측 하단에 원형의 형태로 있습니다.

아래 구글 지도에서는 두 개의 FAB이 있습니다. 이러한 양식은 사실 권장되진 않지만 두 FAB이 동일하게 중요할 경우 다음과 같이 사용할 수 있습니다.

9. 마무리

이번 시간에는 Button 팔레트에 대해 알아보았습니다. 총 8개의 버튼 관련 위젯들에 대해서 정리해보았는데, 생각보다 그동안 쓰지 않았던 요소들이 많은 것 같습니다. 이것도 한 번 정리하면 추후에 사용하거나 사용해야 할 상황이 생길 때 좀 더 쉽게 적용할 수 있을 것이라고 생각합니다.

그럼 긴 글 읽어주셔서 감사합니다.