[30일차 Android] ToggleButton과 Switch

 

 

 

출처 : 안드로이드 앱스쿨 2기 윤재성 강사님 수업 PPT

 

 

 

📖 ToggleButton

• 환경설정 같은 화면에서 애플리케이션의 기능을 ON/OFF 하는 기능을 제공하고자 할 때 사용한다.
• 지금은 보기 좋은 View들이 생겨 많이 사용하지는 않는다.

주요 속성

속성	설명
textOn	ON 상태일 때 표시할 문자열을 설정
textOff	OFF 상태일 때 표시할 문자열을 설정

주요 프로퍼티

프로퍼티	설명
isChecked	ON/OFF 상태 여부 값을. ON 이면 true, OFF 면 false

주요 메서드

메서드	설명
toggle	현재의 토글 상태를 반전시킨다.

주요 이벤트

메서드	설명
click	Toggle 버튼을 클릭하면 발생하는 이벤트

---

📖 Switch

• ON/OFF 상태를 좌우로 이동하면서 설정할 수 있는 View

주요 속성

속성	설명
text	Switch 좌측에 표시되는 문자열을 설정
thumb	버튼 부분의 이미지를 설정
track	트랙 부분의 이미지를 설정
textOn	on 상태일 때 표시되는 문자열을 설정
textOff	off 상태일 때 표시되는 문자열을 설정
showText	textOn, textOff에 설정한 문자열을 보여줄 것인가를 설정
checked	ON/OFF 상태를 설정

주요 프로퍼티

프로퍼티	설명
isChecked	Switch의 ON/OFF 상태 값(ON - true / OFF - false)

주요 이벤트

이벤트	설명
checkedChange	Switch의 ON/OFF 상태가 변경되었을 때 발생하는 이벤트

---

📖 예제 코드

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity" >

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical" >

            <TextView
                android:id="@+id/textView"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="TextView"
                android:textAppearance="@style/TextAppearance.AppCompat.Large" />

            <TextView
                android:id="@+id/textView2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="TextView"
                android:textAppearance="@style/TextAppearance.AppCompat.Large" />

            <TextView
                android:id="@+id/textView3"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="TextView"
                android:textAppearance="@style/TextAppearance.AppCompat.Large" />

            <Button
                android:id="@+id/button"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Button" />

            <Button
                android:id="@+id/button2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Button" />

            <Button
                android:id="@+id/button3"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Button" />

            <Button
                android:id="@+id/button4"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Button" />

            <ToggleButton
                android:id="@+id/toggleButton"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="ToggleButton"
                android:textOff="Off 상태 입니다"
                android:textOn="On 상태 입니다" />

            <Switch
                android:id="@+id/switch1"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:showText="true"
                android:text="스위치"
                android:textAppearance="@style/TextAppearance.AppCompat.Large"
                android:textOff="OFF"
                android:textOn="ON"
                android:thumb="@mipmap/ic_launcher"
                android:track="@android:drawable/bottom_bar" />
        </LinearLayout>
    </ScrollView>
</LinearLayout>

 

 

 

MainActivity.kt

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import com.test.android21_compountcomponent2.databinding.ActivityMainBinding

class MainActivity : AppCompatActivity() {

    lateinit var activityMainBinding: ActivityMainBinding

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

        activityMainBinding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(activityMainBinding.root)

        activityMainBinding.run {
            button.run {
                setOnClickListener {
                    
                    if (toggleButton.isChecked) {
                        textView.text = "ON 상태입니다\n"
                    } else {
                        textView.text = "OFF 상태입니다\n"
                    }

                    if (switch1.isChecked) {
                        textView.append("Switch : ON 상태입니다\n")
                    } else {
                        textView.append("Switch : OFF 상태입니다\n")
                    }
                }

                button2.run {
                    setOnClickListener {

                        toggleButton.isChecked = true
                        
                        switch1.isChecked = true
                    }
                }

                button3.run {
                    setOnClickListener {

                        toggleButton.isChecked = false

                        switch1.isChecked = false
                    }
                }

                button4.run {
                    setOnClickListener {

                        toggleButton.toggle()

                        switch1.toggle()
                    }
                }

                toggleButton.run {
                    setOnCheckedChangeListener { compoundButton, b ->
                        if (isChecked == true) {
                            textView2.text = "Toggle 버튼이 ON 상태입니다\n"
                        } else {
                            textView2.text = "Toggle 버튼이 OFF 상태입니다\n"
                        }
                    }
                }

                switch1.run{
                    setOnCheckedChangeListener { compoundButton, b ->
                        if (isChecked == true){
                            textView2.append("Switch가 ON 상태 입니다.\n")
                        } else {
                            textView2.append("Switch가 OFF 상태 입니다.\n")
                        }
                    }
                }
            }
        }
    }
}

코드 리뷰

• button.run { ... }
  • if(toggleButton.isChecked) { ... } : Toggle Button 의 ON/OFF 상태를 가져온다.
  • if (switch1.isChecked) { ... } : Switch의 ON/OFF 상태를 가져온다.

 

• button2.run { ... }
  • toggleButton.isChecked = true : Toggle Button을 ON 상태로 설정한다.
  • switch1.isChecked = true : switch를 ON 상태로 설정한다.

 

• button3.run { ... }
  • toggleButton.isChecked = false : Toggle Button을 OFF 상태로 설정한다.
  • switch1.isChecked = false : switch를 OFF 상태로 설정한다.

 

• button4.run { ... }
  • toggleButton.toggle() : Toggle Button을 반전시킨다.
  • switch1.toggle() : Switch를 반전시킨다.

 

• toggleButton.setOnCheckedChangeListener { ... } : Toggle Button의 ON/OFF 상태가 변경될 때의 리스너
• switch1.setOnCheckedChangeListener { ... } : Switch의 ON/OFF 상태가 변경될 때의 리스너