Кастомизация интерфейса: CheckBox и RadioButton

В этой статье рассмотрим как можно кастомизировать такие элементы управления, как CheckBox и RadioButton. Отличия от обычных кнопок в том, что они имеют два состояния: check и uncheck.

Что  используется

Для наших целей используются виджеты CheckBox и RadioButton. Основное свойство для кастомизации в xml при создании этих виджетов для изменения внешнего вида:

• android:button – изображение кнопки элемента.          

Чтобы кастомизировать полностью поведение элементов необходимо использовать selector. Это xml-файл, который указывает, какое изображение использовать для разных состояний элемента.

Для примера, используем следующие элементы

• для CheckBox (скачать архивом):

• для RadioButton (скачать архивом):

Наш селектор будет выглядеть следующим образом (drawable/custom_checkbox_selector.xml):

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/checkbox_on"

android:state_checked="true" android:state_enabled="true"/>

    <item android:drawable="@drawable/checkbox_off"

android:state_checked="false" android:state_enabled="true"/>

    <item android:drawable="@drawable/checkbox_on_disable"

android:state_checked="true" android:state_enabled="false"/>

    <item android:drawable="@drawable/checkbox_off_disable"

android:state_checked="false" android:state_enabled="false"/>

    <item android:drawable="@drawable/checkbox_off"/>

</selector>

- android:state_checked ="true|false" указывает на состояние элемента: check или uncheck;

Остальные атрибуты были описаны в этой статье.

Селектор для RadioButton будет следующим (drawable/custom_radio_selector.xml):

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/radio_button_on_disable"

android:state_checked="true" android:state_enabled="false"/>

    <item android:drawable="@drawable/radio_button_off_disable"

android:state_checked="false" android:state_enabled="false"/>

    <item android:drawable="@drawable/radio_button_on"

android:state_checked="true" android:state_enabled="true"/>

    <item android:drawable="@drawable/radio_button_off"

android:state_checked="false" android:state_enabled="true"/>

</selector>

Практика

Теперь нам необходимо создать наш интерфейс. Мы будем изменять файл main.xml. Чтобы добавить селектор к элементу, достоточно использовать следующую конструкцию:

android:button="@drawable/custom_checkbox_selector"

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    android:orientation="vertical" >

    <CheckBox

        android:id="@+id/checkbox_1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:button="@drawable/custom_checkbox_selector"

        android:checked="false"

        android:text="@string/check_1" />

    <CheckBox

        android:id="@+id/checkbox_2"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:button="@drawable/custom_checkbox_selector"

        android:checked="false"

        android:enabled="false"

        android:text="@string/check_2" />

    <RadioGroup

        android:id="@+id/radioGroup"

        android:layout_width="fill_parent"

        android:layout_height="wrap_content" >

        <RadioButton

            android:id="@+id/radio_1"

            android:layout_width="fill_parent"

            android:layout_height="wrap_content"

            android:layout_weight="1"

            android:button="@drawable/custom_radio_selector"

            android:checked="true"

            android:text="@string/radio_1" />

        <RadioButton

            android:id="@+id/radio_2"

            android:layout_width="fill_parent"

            android:layout_height="wrap_content"

            android:layout_weight="1"

            android:button="@drawable/custom_radio_selector"

            android:checked="false"

            android:text="@string/radio_2" />

        <RadioButton

            android:id="@+id/radio_3"

            android:layout_width="fill_parent"

            android:layout_height="wrap_content"

            android:layout_weight="1"

            android:button="@drawable/custom_radio_selector"

            android:checked="false"

            android:enabled="false"

            android:text="@string/radio_3" />

    </RadioGroup>

</LinearLayout>

 Теперь нам необходимо добавить поведение для каждой кнопки в программе. В этом примере создаются следующие элементы: 2 CheckBox, 1 RadioGroup, который содержит 3 RadioButton.

 
public class CustomCheckExampleActivity extends Activity implements RadioGroup.OnCheckedChangeListener,
View.OnClickListener{
    
 private CheckBox check_1, check_2;
 private RadioGroup radioGroup;
 private Context context;
 
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        this.context = this;
        
        this.check_1 = (CheckBox)findViewById(R.id.checkbox_1);
        this.check_2 = (CheckBox)findViewById(R.id.checkbox_2);
        this.radioGroup = (RadioGroup)findViewById(R.id.radioGroup);
        
        this.check_1.setOnCheckedChangeListener(new OnCheckedChangeListener() {
   
   @Override
   public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
    check_2.setEnabled(isChecked);    
   }
  });
        this.check_2.setOnCheckedChangeListener(new OnCheckedChangeListener() {
   
   @Override
   public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
    RadioButton btn = (RadioButton)radioGroup.getChildAt(radioGroup.getChildCount() - 1);
    btn.setEnabled(isChecked);    
   }
  });
    }
 @Override
 public void onClick(View arg0) {
  radioGroup.clearCheck();
  
 }
 @Override
 public void onCheckedChanged(RadioGroup group, int checkedId) {
  Toast.makeText(context, "" + group.getCheckedRadioButtonId(), Toast.LENGTH_SHORT).show();
 }
}

Ссылки

• Исходные коды данного проекта можно скачать отсюда: zip