[ 안드로이드 개발 2.0 ] 폼 구성요소(Form Stuff) 5 - 토글버튼(ToggleButton)

토글버튼은 클릭할때 마다 텍스트가 변경되는 버튼을 말합니다. 즉 on <-> off 가 서로 교대로 나타나게 됩니다.

이번 강좌 역시 안드로이드 개발자 사이트의 내용을 토대로 살펴봅니다.

1. 다음과 같이 이클립스에서 프로젝트를 생성합니다.

2. 왼쪽 프로젝트 탐색기 에서 res -> layout -> main.xml 파일을 열어서 다음 코드를 붙여넣기 합니다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
<ToggleButton android:id="@+id/togglebutton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />
</LinearLayout>

위 코드에서 토글버튼에 나타나는 Text를 지정하지 않았음을 기억하기 바랍니다.


3. 다음에는 왼쪽 프로젝트 탐색기에서 src -> my.HelloFormStuff5 -> HelloFormStuff5.java 를 열어서 다음을 덮어쓰기 합니다.

package my.HelloFormStuff5;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Toast;
import android.widget.ToggleButton;

public class HelloFormStuff5 extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
       
        final ToggleButton togglebutton = (ToggleButton) findViewById(R.id.togglebutton);
        togglebutton.setOnClickListener(new OnClickListener() {
            public void onClick(View v) {
                // Perform action on clicks
                if (togglebutton.isChecked()) {
                    Toast.makeText(HelloFormStuff5.this, "ON", Toast.LENGTH_SHORT).show();
                } else {
                    Toast.makeText(HelloFormStuff5.this, "OFF", Toast.LENGTH_SHORT).show();
                }
            }
        });
    }
}

코드를 살펴보면

if (togglebutton.isChecked()) {
                    Toast.makeText(HelloFormStuff5.this, "ON", Toast.LENGTH_SHORT).show();
                } else {
                    Toast.makeText(HelloFormStuff5.this, "OFF", Toast.LENGTH_SHORT).show();
                }

이 부분에서 토글버튼이 체크되면 ON 이라는 글자를, 체크되지 않으며 OFF 라는 글자를 출력함을 알 수 있습니다.

이클립스에서 코드를 편집할 때 Ctrl+Shift+O 를 누르면 필요한 패키지가 자동으로 입력됩니다. 이 때 다음과 같은 창이 나오면 첫번째 항목을 선택하세요.

4. Ctrl+F11 로 실행합니다.

토글버튼의 텍스트는 지정하지 않을 경욱 기본 값으로 ON, OFF 를 갖습니다.  토글버튼을 클릭할 때마다 아랫쪽 메세지가 ON <-> OFF 로 바뀝니다.

이번에는 토글버튼에 나타나는 텍스트와 클릭했을 때 나타나는 메세지를 변경해 보겠습니다.
다음은 수정한 코드와 결과 입니다.

먼저 main.xml 에서 변경한 부분입니다.

<ToggleButton android:id="@+id/togglebutton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textOff="선택"
    android:textOn="해제"     />

위 코드에서 굵은 부분 두줄을 추가했습니다.

다음에 HelloFormStuff5.java 에서 변경한 부분입니다.

if (togglebutton.isChecked()) {
                    Toast.makeText(HelloFormStuff5.this, "선택", Toast.LENGTH_SHORT).show();
                } else {
                    Toast.makeText(HelloFormStuff5.this, "해제", Toast.LENGTH_SHORT).show();
                }
위 코드에서 나타나는 메세지를 굵은 부분과 같이 수정했습니다.

다음은 실행결과 입니다.