안드로이드 토글버튼(ToggleButton) 기본

---

1. ToggleButton

토글버튼은 두 가지의 상태 중의 하나만 토글되도록 만들어진 버튼이다.

스위치의 ON/OFF와 비슷하게 서로 다른 두 가지 상태만을 가지는 경우 라디오버튼보다 간편하게 쓰인다.

---

2. 토글버튼 구현

안드로이드 토글버튼 예제를 만들어보자.

예제는 토글버튼을 누르면 이미지가 나타나고 다시 누르면 이미지가 사라지는 것을 만들어본다.

토글버튼 예제 테스트를 위해 다음과 같은 순서로 코드를 작성한다.

• drawable 디렉터리에 이미지파일 저장
• activity_main.xml 작성
• MainActivity.java 작성

구현하고자 하는 것은 다음과 같다.

• 토글버튼을 선택하기 전인 초기화면에서는 이미지가 보이지 않도록 한다.
• 토글버튼을 누르면 화면에 이미지를 보여준다.

 

1) image 파일 저장

가장 선택된 교통수단의 아이콘은 임의로 만든 이미지 파일을 연결해본다.

연결할 이미지를 프로젝트 디렉터리 창의 res - drawable에 복사한다.

아이콘으로 사용할 png 파일을 res - drawable 디렉터리로 이동하였다.

 

2) activity_main.xml

다음 작업으로 레이아웃을 구성해보자.

리니어 레이아웃을 기본으로하여 레이아웃을 작성한다.

레이아웃에 사용하는 위젯으로 <ToggleButton>, <ImageView>를 사용한다.

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

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

        <ToggleButton
            android:id="@+id/toggleBotton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_margin="30dp"
            android:textSize="30sp"
            android:textOn="IMAGE ON"
            android:textOff="IMAGE OFF"
            android:backgroundTint="#4444ffdc"/>

        <ImageView
            android:id="@+id/iv_logo"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:src="@drawable/name_logo"/>

    </LinearLayout>

</LinearLayout>

토글버튼 예제를 만들기 위해 토글버튼과 이미지뷰를 작성하고 각각의 id를 부여한다.

 

3) MainActivity.java

레이아웃 구성이 완료되었으니 이번에는 자바코드를 작성한다.

다음과 같이 자바코드를 작성한다.

public class MainActivity extends AppCompatActivity {

    ToggleButton toggleButton;
    ImageView imageView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initView();
    }

    private void initView() {
        toggleButton = findViewById(R.id.toggleBotton);
        imageView = findViewById(R.id.iv_logo);

        imageView.setVisibility(View.GONE);

        toggleButton.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton compoundButton, boolean isChecked) {
                if (isChecked) {
                    imageView.setVisibility(View.VISIBLE);
                    imageView.setImageResource(R.drawable.name_logo);
                } else {
                    imageView.setVisibility(View.GONE);
                }
            }
        });
    }
}

화면을 초기화하기 위해 initView() 메서드를 만들고 그 안에 토글버튼과 이미지뷰의 내용들을 작성한다.

모두 작성했다면 완성된 코드를 실행해보자.

---

3. 실행 결과

작성한 토글버튼 테스트 앱을 실행해보면 다음과 같이 구동되는 것을 확인할 수 있다.

구현하고자 했던대로 토글버튼을 눌러 ON으로 변경하면 이미지가 나타나고, 다시 눌러서 OFF로 변경하면 이미지가 사라진다. gif 파일로 변경하면서 이미지가 깨져서 조금 이상하지만 실제 앱에서는 정상적으로 작동한다.