[Android] Palette (Button)

Button

 

Button은 사용자가 화면을 터치했을 때 발생하는 클릭 이벤트로 처리하는 기능을 가진

View위젯입니다. TextView와 마찬가지로 안드로이드 UI를 구성할 때 가장 많이 사용되는 위젯 중 하나입니다.

Button은 TextView로 부터 거의 모든 기능을 상속받고 있습니다.

 

간단히 버튼을 누르면 0부터 카운트를 세는 프로그램을 작성해 보았습니다.

        val counter_num = findViewById<TextView>(R.id.textView1)
        val btn_1 = findViewById<Button>(R.id.button1)
        var counter = 0

        btn_1.setOnClickListener {
            counter++
            counter_num.text=counter.toString()
        }

---

ImageButton

앞서 공부한 Button과 똑같은 기능을 수행하며 버튼에 이미지를 넣을 수 있습니다.

---

ChipGroup

 

다수의 Chip를 관리할 수 있는 Layout입니다.

<com.google.android.material.chip.ChipGroup
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        //Chip 추가
</com.google.android.material.chip.ChipGroup>

위와 같이 Chip를 추가할 수 있습니다.

---

Chip

 

버튼, 체크박스, 라디오 등 여러 기능을 가진 UI입니다.

ChipGroup을 통해 RadioButton처럼 구성할 수 있습니다.

Chip에는 네 가지의 Style을 알아보겠습니다.

• Action : 별도의 설정을 해주지 않을 경우 기본 설정이 되는 chip이며 어떤 Action을 수행하거나
  콘텐츠의 주제 등을 보여줄 때에 사용하는 것을 권장합니다. Chip아이콘 설정 가능하며 체크상태는
  지정할 수 없습니다.

• Entry : 복잡한 정보를 간략하게 보여줄 때 사용하도록 권장하고 있습니다.
  Chip아이콘과 닫기 아이콘을 별도로 설정이 가능하며 체크상태 또한 지정이 가능합니다.

• Filter : 검색 결과나 내용 등에 필터를 걸 때 사용하도록 권장하는 chip입니다.
  체크상태를 지정이 가능합니다.

• Choice : 한정된 chip개수 중에서 단일 선택을 수행할 때 사용하도록 권장하고 있습니다.
  항상 체크 상태를 지정하게 됩니다.

  <com.google.android.material.chip.Chip
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  style="@style/Widget.MaterialComponents.Chip.Action"
  android:text="Action"/>
  
  <com.google.android.material.chip.Chip
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  style="@style/Widget.MaterialComponents.Chip.Entry"
  android:text="Entry"/>
  
  <com.google.android.material.chip.Chip
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  style="@style/Widget.MaterialComponents.Chip.Filter"
  android:text="Filter"/>
  
  <com.google.android.material.chip.Chip
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  style="@style/Widget.MaterialComponents.Chip.Choice"
  android:text="Choice"/>

  위의 코드와 같이 xml에서 style을 지정해주면 됩니다.

터치 전

터치 후

---

CheckBox

 

CheckBox는 선택과 선택되지 않은 두 가지 상태를 표현하기 위한 뷰입니다.

터치 전

터치 후

---

RadioGroup / RadioButton

 

RadioGroup는 주로 여러 가지의 선택항목에서 한 가지만 선택하는 형태의 버튼입니다.

위와 같이 그룹 중 한 가지를 선택하면 다른 버튼의 체크가 풀리게 됩니다.

---

ToggleButton

 

환경설정 같은 화면에서 애플리케이션의 기능을 ON/OFF 하는 기능을 제공하고자 할 때 사용합니다.

* 지금은 더 좋은 view가 생겨 사용은 거의 안 합니다.

<ToggleButton
        android:id="@+id/toggleButton"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="ToggleButton"
        android:textOn="ON"
        android:textOff="OFF"/>

주요 속성인 textOn, textOff를 사용하여 버튼을 눌렀을 경우와 누르지 않을 경우 지정된

text 출력이 가능합니다.

누르기 전

누른 후

---

Switch

 

ToggleButton과 같은 원리로 동작을 합니다.

    <Switch
        android:id="@+id/switch1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Switch"
        android:showText="true"
        android:textOff="OFF"
        android:textOn="ON"
        />

textOff, textOn 속성을 이용하여 체크가 되었을 경우와 되지 않았을 경우에 따라 스위치 부분에

텍스트가 출력됩니다.

 

---

FloatingActionButton

 

FloatingActionButton이하 fab는 화면에 항상 떠 있는 버튼으로

이렇게 화면이 움직이더라고 fab버튼은 화면의 최상위에 고정되어 있는 것을 확인할 수 있습니다.

---