Android 개발(10) : RadioGroup과 RadioButton

한동안 바쁜 일이 많다보니 새로운 글을 포스팅한다 하고 못하고 있었네요. 그동안 포스팅하려 계획했던 것 중 하나인 RadioButton 관련된 것입니다.

RadioButton과 Checkbox를 혼동하여 사용하는 경우가 종종 있는데, RadioButton은 다수의 그룹에서 하나의 아이템만 택할 때 사용하고 CheckBox는 다수의 그룹에서 복수의 아이템을 택할 때 사용합니다. 이 점을 유의하여 알맞는 곳에 선택하여 쓰시면 됩니다.

이번 포스팅에서 할 내용은 RadioButton들을 클릭하여 액티비티의 색을 변경하는 것을 하려합니다.


1. 레이아웃 구성

RadioButton은 RadioGroup안에 넣어서 만들어야 클릭 시 체크 변경이 됩니다.

<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"
android:orientation="vertical"
tools:context=".MainActivity">
<RadioGroup
android:id="@+id/radioGroup"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<RadioButton
android:id="@+id/rb_red"
android:text="red"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:checked="true"/>
<RadioButton
android:id="@+id/rb_blue"
android:text="blue"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" />
<RadioButton
android:id="@+id/rb_green"
android:text="green"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" />
</RadioGroup>
<LinearLayout
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>

위에 RadioGroup을 배치하고 그 안에 색을 나타내는 RadioButton을 3개 넣었습니다. 그리고 아래에 레이아웃을 배치한 구조입니다. 이 때 RadioGroup과 RadioButton마다 전부 id 설정을 해줘야되는 점 잊지 마시고, RadioButton이 선택이 되있게 보이려면 Radiobutton 구성 안에 아래의 코드를 적어주시면 됩니다.

android:checked="true"

2. Activity 구현

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

RadioGroup group=(RadioGroup)findViewById(R.id.radioGroup);
RadioButton red=(RadioButton)findViewById(R.id.rb_red);
RadioButton blue=(RadioButton)findViewById(R.id.rb_blue);
RadioButton green=(RadioButton)findViewById(R.id.rb_green);
final LinearLayout container=(LinearLayout)findViewById(R.id.container);
if(red.isChecked())
container.setBackgroundColor(Color.rgb(255, 0, 0));
else if(blue.isChecked())
container.setBackgroundColor(Color.rgb(0, 0, 255));
else if(green.isChecked())
container.setBackgroundColor(Color.rgb(0, 255, 0));

group.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(RadioGroup group, int checkedId) {
switch (checkedId){
case R.id.rb_red:
container.setBackgroundColor(Color.rgb(255, 0, 0));
break;
case R.id.rb_blue:
container.setBackgroundColor(Color.rgb(0, 0, 255));
break;
case R.id.rb_green:
container.setBackgroundColor(Color.rgb(0, 255, 0));
break;

}
}
});

}

RadioButton의 체크 상태에 따라 변화값을 주고 싶다면 RadioGroup의 setOncheckedChangeLinstener()메소드를 사용하면 됩니다. RadioButton의 id를 사용하여 변경하고 싶은 액션을 취하면 됩니다. 이 코드는 레이아웃의 색을 변경하기 위해서 아래와 같은 코드를 사용하였습니다.

container.setBackgroundColor(Color.rgb(0, 255, 0));

Color.rgb메소드는 받는 3개의 인자 순서대로 red, green, blue 의 값을 0~255까지의 단계로 표시합니다.

각각의 RadioButton이 선택되어 있는지를 확인하여 초기에 색을 지정하기 위해 if문을 사용하여 각 RadioButton마다 isChecked()라는 메소드들을 사용하였습니다. 선택이 되어있다면 true, 아니라면 false를 반환하는 식의 메소드입니다.


RadioButton의 경우 자체로는 어렵게 사용되는 부분이 없으므로 편하게 사용하시면 될 듯합니다. 다만 그룹에서 단일의 아이템을 선택하는 조건인지 확실하게 생각하시고 사용하시면 좋을 듯합니다.

이번 포스팅에 쓰인 코드는 아래 주소로 가면 받아서 사용할 수 있습니다.

https://github.com/songmho/radiobutton

Show your support

Clapping shows how much you appreciated Myeong Ho Song’s story.