관리 메뉴

moozi

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

안드로이드개발강좌

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

moozi 2010. 1. 8. 13:44

토글버튼은 클릭할때 마다 텍스트가 변경되는 버튼을 말합니다. 즉 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();
                }
위 코드에서 나타나는 메세지를 굵은 부분과 같이 수정했습니다.

다음은 실행결과 입니다.





 
6 Comments
  • 프로필사진 열시미 배우는 사람 2010.01.14 16:51 도움이 마니 되고 있습니다...감사 합니다.
  • 프로필사진 solkit 2010.02.18 07:10 여기에 Radio 버튼 두개를 달아서 1번을 선택하면 ToggleButton이 on이 되고 2번을 선택하면 off가 되게 하려면 어떡하죠? ToggleButton을 누르지 않고 라디오 버튼 누르면 강제로 ToggleButton 현재 상태가 바뀌게 하려면......
    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"
    android:textOff="선택"
    android:textOn="해제"
    />

    <RadioGroup
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <RadioButton android:id="@+id/radio_on"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="선택" />

    <RadioButton android:id="@+id/radio_off"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="해제" />
    </RadioGroup>
    </LinearLayout>

    이렇게 하고 HelloFormStuff5.java파일에는

    package my.HelloFormStuff5;

    import my.HelloFormStuff5.HelloFormStuff5;
    import android.app.Activity;
    import android.os.Bundle;
    import android.view.View;
    import android.view.View.OnClickListener;
    import android.widget.Button;
    import android.widget.RadioButton;
    import android.widget.Toast;
    import android.widget.ToggleButton;

    public class HelloFormStuff5 extends Activity {

    private ToggleButton togglebutton;
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);

    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, "켜짐", Toast.LENGTH_SHORT).show();
    } else {
    Toast.makeText(HelloFormStuff5.this, "꺼짐", Toast.LENGTH_SHORT).show();
    }
    }
    });


    final RadioButton radio_on = (RadioButton) findViewById(R.id.radio_on);
    final RadioButton radio_off = (RadioButton) findViewById(R.id.radio_off);
    radio_on.setOnClickListener(radio_listener);
    radio_off.setOnClickListener(radio_listener);
    }

    OnClickListener radio_listener = new OnClickListener() {
    public void onClick(View v) {
    // Perform action on clicks
    RadioButton rb = (RadioButton) v;
    if (rb.getText().equals("선택")) {
    Toast.makeText(HelloFormStuff5.this, "선택했다", Toast.LENGTH_SHORT).show();
    } else {
    Toast.makeText(HelloFormStuff5.this, "안했지롱", Toast.LENGTH_SHORT).show();
    }
    //
    }
    };
    }

    이렇게 했는데요...
    위에 "선택했다" 하고 "안했지롱" 나오는 부분에 ToggleButton On,Off로 만들어 주는 메소드 찾아서 넣으면 될 것 같은데...

    어떻게 해야하죠?

    참고로 제 email은 solwoong@naver.com입니다.

    참 그리고 강좌 정말 잘 배우고 있습니다. 소스를 나름대로 고쳐보면 더 공부가 잘 될거 같아서 도전했는데... 저기서 막히네요.. 그럼.... 부탁드립니다.
  • 프로필사진 moozi 2010.02.18 14:04 신고 다음과 같이 해보세요

    package my.HelloFormStuff5;

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

    public class HelloFormStuff5 extends Activity {
    private ToggleButton togglebutton= null ;
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);

    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, "선택", Toast.LENGTH_SHORT).show();
    } else {
    Toast.makeText(HelloFormStuff5.this, "해제", Toast.LENGTH_SHORT).show();
    }
    }
    });

    final RadioButton radio_on = (RadioButton) findViewById(R.id.radio_on);
    final RadioButton radio_off = (RadioButton) findViewById(R.id.radio_off);
    radio_on.setOnClickListener(radio_listener);
    radio_off.setOnClickListener(radio_listener);
    }

    OnClickListener radio_listener = new OnClickListener() {
    public void onClick(View v) {
    // Perform action on clicks
    RadioButton rb = (RadioButton) v;
    if (rb.getText().equals("선택")) {
    togglebutton.setChecked(true);
    } else {
    togglebutton.setChecked(false);
    }
    //
    }
    };



    }


    ^^
  • 프로필사진 solkit 2010.02.19 02:16 정말 감사합니다.
    여기서 ToggleButton 에 setChecked() 메소드가 있다는 것은 어떻게 아나요?
    안드로이드 API는 어디에서 볼 수 있죠?
  • 프로필사진 moozi 2010.02.19 10:14 신고 안드로이드 개발자 사이트 http://d.android.com 에 reference 메뉴를 보시면 됩니다.

    ^^
  • 프로필사진 solkit 2010.02.20 01:47 정말 감사합니다... ^^
댓글쓰기 폼