Добавление картинок к переключателю

Вы можете добавить изображение в левой, правой, верхней и нижней части переключателя, используя либо определённые атрибуты XML или программно.

Через атрибут drawableRight (свойство Drawable Right) и ему подобных:

<RadioButton android:id="@+id/radio0"... android:drawableRight="@drawable/ic_launcher" android:text="RadioButton" />

Программно через метод setCompoundDrawables(left, top, right, bottom):

radiobutton.setCompoundDrawables(null, null, getResources().getDrawable(R.drawable.rightpic), null);

В этом примере мы указали только одно значение для правого края, остальным присвоили значение null. Можно одновременно задействовать все стороны переключателя.

Пример

Создадим новую форму с четырьмя кнопками-переключателями, с помощью которых будем заливать фон приложения выбранным цветом. Сначала подготовим строковые ресурсы.

<?xml version="1.0" encoding="utf-8"?><resources> <string name="app_name">Пример с переключателями (RadioButton)</string> <string name="current_pick">Текущий выбор</string> <string name="color_red">Красный</string> <string name="color_green">Зеленый</string> <string name="color_blue">Синий</string> <string name="color_gray">Серый</string></resources>

Создадим простейшую разметку на основе LinearLayout. Заполним форму текстовым блоком определенного цвета и присвоим ему текст "Текущий цвет". В нижней части формы расположим четыре цветных текстовых блоока, а под ними четыре переключателя, с помощью которых мы будем менять цвет основного текстового блока.

<?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" > <TextView android:id="@+id/current_pick" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_weight="1" android:background="#666666" android:gravity="center" android:text="@string/current_pick" android:textColor="#ffffff" /> <LinearLayout android:id="@+id/linearLayout1" android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="horizontal" > <TextView android:id="@+id/textViewRed" android:layout_width="fill_parent" android:layout_height="20dp" android:layout_gravity="center" android:layout_weight="1" android:background="#ff0000" android:text="@string/color_red" android:textColor="#660000" /> <TextView android:id="@+id/textViewGreen" android:layout_width="fill_parent" android:layout_height="20dp" android:layout_gravity="center" android:layout_weight="1" android:background="#00ff00" android:text="@string/color_green" android:textColor="#006600" /> <TextView android:id="@+id/textViewBlue" android:layout_width="fill_parent" android:layout_height="20dp" android:layout_gravity="center" android:layout_weight="1" android:background="#0000ff" android:text="@string/color_blue" android:textColor="#000066" /> <TextView android:id="@+id/textViewGray" android:layout_width="fill_parent" android:layout_height="20dp" android:layout_gravity="center" android:layout_weight="1" android:text="@string/color_gray" /> </LinearLayout> <RadioGroup android:id="@+id/radioGroup1" android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="#333333" android:orientation="horizontal" > <RadioButton android:id="@+id/radio_red" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginLeft="24dp" android:layout_weight="1" /> <RadioButton android:id="@+id/radio_blue" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginLeft="24dp" android:layout_weight="1" /> <RadioButton android:id="@+id/radio_green" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginLeft="24dp" android:layout_weight="1" /> <RadioButton android:id="@+id/radio_gray" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginLeft="24dp" android:layout_weight="1" android:checked="true" /> </RadioGroup> </LinearLayout>

Обратите внимание, что элементы RadioButton помещаются в контейнер RadioGroup. Если теперь посмотреть на форму, то увидим одно большое серое поле. А снизу расположились в ряд четыре метки, а еще ниже также в ряд расположились четыре переключателя. Причем последний серый переключатель имеет выбранный статус (android:checked="true").

Переходим к программной части. Добавляем переменную класса для обработки щелчков на кнопках-переключателях.

OnClickListener radioListener;// а также переменную для TextViewTextView tvPick;

Теперь можно писать код для обработки щелчков у переключателей:

radioListener = new OnClickListener() { @Override public void onClick(View v) { // TODO Auto-generated method stub RadioButton rb = (RadioButton)v; switch (rb.getId()) { case R.id.radio_red: tvPick.setBackgroundColor(Color.parseColor("#ff0000")); break; case R.id.radio_green: tvPick.setBackgroundColor(Color.parseColor("#0000ff")); break; case R.id.radio_blue: tvPick.setBackgroundColor(Color.parseColor("#00ff00")); break; case R.id.radio_gray: tvPick.setBackgroundColor(Color.parseColor("#666666")); break; default: break; } }}; tvPick = (TextView)findViewById(R.id.current_pick); RadioButton rb_red = (RadioButton)findViewById(R.id.radio_red);rb_red.setOnClickListener(radioListener); RadioButton rb_green = (RadioButton)findViewById(R.id.radio_green);rb_green.setOnClickListener(radioListener); RadioButton rb_blue = (RadioButton)findViewById(R.id.radio_blue);rb_blue.setOnClickListener(radioListener); RadioButton rb_gray = (RadioButton)findViewById(R.id.radio_gray);rb_gray.setOnClickListener(radioListener);

Запустим приложение и посмотрим, что у нас получилось. Пощёлкаем по переключателям и убеждаемся, что всё работает.

Другой способ

Показанный выше способ использует щелчок, так как переключатели можно рассматривать как кнопки. Но на самом деле у переключателей есть свой слушатель setOnCheckedChangeListener(). Я расположил в новом проекте RadioGroup с тремя RadioButton и написал простенький пример. Ваша задача - переписать предыдущий пример на основе этого шаблона.

@Overridepublic void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); RadioGroup radiogroup = (RadioGroup) findViewById(R.id.radioGroup1); radiogroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() { @Override public void onCheckedChanged(RadioGroup group, int checkedId) { // TODO Auto-generated method stub switch (checkedId) { case -1: Toast.makeText(getApplicationContext(), "No choice", Toast.LENGTH_SHORT).show(); break; case R.id.radio0: Toast.makeText(getApplicationContext(), "Radio0", Toast.LENGTH_SHORT).show(); break; case R.id.radio1: Toast.makeText(getApplicationContext(), "Radio1", Toast.LENGTH_SHORT).show(); break; case R.id.radio2: Toast.makeText(getApplicationContext(), "Radio2", Toast.LENGTH_SHORT).show(); break; default: break; } } });}

Этот способ намного удобней. Вам даже не нужно объявлять ссылки на переключатели и назначать им слушатели. Код получается более компактным.

Обратите внимание, что метод onCheckedChanged() принимает параметр RadioGroup, что позволяет применять один и тот же слушатель OnCheckedChangeListener() для нескольких групп переключателей. Вариант -1 сработает, когда группа переключателей будет сброшена в коде с помощью метода clearCheck().

Метод clearCheck()

Когда пользователь выберет любой из переключателей, то он уже не сможет снять с него отметку. Какой-нибудь из переключателей обязательно будет выбран в одном контейнере с ним. Единственный способ очистить все переключатели - программно вызвать метод clearCheck(), который относится к классу RadioGroup.

RadioGroup radiogroup; // щелчок кнопкиpublic void onClick(View view) { // очистить все переключатели radiogroup.clearCheck();}

Метод getCheckedRadioButtonId()

У RadioGroup есть также метод getCheckedRadioButtonId(), который позволяет узнать идентификатор выбранного переключателя.

public void onClick(View view) { int checkedRadioButtonId = radiogroup.getCheckedRadioButtonId(); // Найдём переключатель по его id RadioButton myradiobutton = (RadioButton) findViewById(checkedRadioButtonId); Toast.makeText(getApplicationContext(), myradiobutton.getText(), Toast.LENGTH_SHORT).show();}

Также можно узнать индекс выбранного переключателя через метод indexOfChild():

OnCheckedChangeListener radioGroupOnCheckedChangeListener = new OnCheckedChangeListener(){ @Override public void onCheckedChanged(RadioGroup group, int checkedId) { RadioButton checkedRadioButton = (RadioButton)radioGroup.findViewById(checkedId); int checkedIndex = radioGroup.indexOfChild(checkedRadioButton); textCheckedIndex.setText("checkedIndex = " + checkedIndex); }};

Кот или муж?

Теперь, когда вы познакомились с новым элементом, то вам не составит труда написать программу для нелёгкого выбора.

Разметка:

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/linearLayout" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" android:padding="10dip" > <TextView android:id="@+id/textView1" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="" /> <RadioGroup android:id="@+id/radioGroup1" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="24dp" > <RadioButton android:id="@+id/radioHusband" android:layout_width="wrap_content" android:layout_height="wrap_content" android:checked="true" android:text="Муж" /> <RadioButton android:id="@+id/radioKitten" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Котёнок" /> </RadioGroup> </LinearLayout>

И код:

package ru.alexanderklimov.test; import... public class MainActivity extends Activity { TextView tvInfo; OnClickListener radioListener; /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); tvInfo = (TextView)findViewById(R.id.textView1); RadioGroup radiogroup = (RadioGroup) findViewById(R.id.radioGroup1); radiogroup.clearCheck(); radiogroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() { @Override public void onCheckedChanged(RadioGroup group, int checkedId) { // TODO Auto-generated method stub switch (checkedId) { case -1: tvInfo.setText(""); break; case R.id.radioHusband: tvInfo.setText("Подумайте ещё раз"); break; case R.id.radioKitten: tvInfo.setText("Отличный выбор!"); break; } } }); }}

Методы

-. В Android для кнопки используется класс android.widget.Button.. Альтернативой ей может служить компонент ImageButton (android.widget.ImageButton), у которого вместо текста используется изображение.

Основное событие ToggleButton — изменение состояния кнопки onCheckedChanged().

Напишем демонстрационную программу с использованием ToggleButton. Добавим на форму метку, изображение и кнопку-переключатель:

 

 

Компонент Button находится в папке Form Widgets:

 

Если вы растягиваете кнопку по всей ширине экрана (android:layout_width="match_parent"), то дополнительно рекомендую использовать атрибут android:layout_margin (или родственные ему layout_marginRight и layout_marginLeft) для создания отступов от краев экрана (веб-мастера знакомы с этими терминами).

Так как кнопка является наследником TextView, то использует многие знакомые атрибуты: textColor, textSize и др.

озволяет пользователю выбрать единственный вариант из группы доступных, когда используется вместе с другими элементами управления RadioButton.

 

работу c элементами Кнопка (Button) и МалаяКнопка (SmallButton) из группы Widgets, содержащей элементы управления приложением. Для этого надо вначале переключиться в конструкторский режим нажатием кнопки Design внизу вкладки Palette. Обычная сцена приложения представляет собой некоторый макет одного из типов Layouts, который заполнен дочерними элементами типа View или Text Fields.

Для начала рассмотрим создание на поле дисплея двух управляющих элементов Кнопка (Button) и МалаяКнопка (SmallButton). У них должны быть заданы следующие свойства:

1) расположение Кнопки - в нижнем левом углу поля дисплея,

2) цвет фона – желтый непрозрачный (без канала прозрачности),

3) на кнопке нанести текстовую надпись “Пуск” полным красным цветом с полным каналом прозрачности,

4) аналогично в нижнем правом углу расположить уменьшенную кнопку типа SmallButton с черным фоном и белой прозрачной текстовой надписью “Пуск”.

 

Рассмотрим поэтапное выполнение всех действий.

1. Перетаскиваем элемент Button из вкладки Palette на поле изображения дисплея. Его схематическое изображение появляется на нем. При этом в конце файла добавляется пустой тег Button, у которого заданы по умолчанию следующие атрибуты, задающие свойства кнопки:

<Button

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="New Button"

android:id="@+id/button"

android:layout_centerVertical="true"

android:layout_alignParentRight="true"

android:layout_alignParentEnd="true"

android:layout_marginRight="223dp"

android:layout_marginEnd="223dp" />

При помощи мыши перетаскиваем элемент в левый нижний угол поля дисплея. При этом его программное описание изменилось:

<Button

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="New Button"

android:id="@+id/button"

android:layout_alignParentBottom="true"

android:layout_alignParentLeft="true"

android:layout_alignParentStart="true" />

2. Фон элементов называется background. В Свойствах надо выбрать пункт background. В этой строке справа вызвать окно Resourses и выбрать в нем из опций Project, System, Color последнюю. Откроется окно настройки цветов. В нем вначале выбираем систему задания цвета - RGB (сумму красного, зеленого и синего цветов без использования канала прозрачности). Поскольку желтый цвет образуется сложением красного и синего, то для задания насыщенного желтого надо задать интенсивности 255 в окнах Red, Green и интенсивность 0 в окне Blue. В верхней строке будет выведен полученный цвет, а в текстовом поле с меткой # - его 16-ричная кодировка FFFF00, в которой каждое из соответствующих чисел в интервале от 0 до 256 представлено двумя 16-ричными цифрами (рис.2.3).

Рис.2.3. Задание желтого цвета фону элемента

Рис.2.4. Изменение цвета фона элемента на желтый

После нажатия OK: 1) на изображении устройства рамка, соответствующая элементу, станет желтой (рис.2.4), 2) в конце программного описания элемента (перед закрывающим тегом) появится соответствующая дополнительная строка:

android:background="#ffffff00">

3. Свойство, определяющее текст на элементах, называется Text. В Свойствах надо выбрать этот пункт и ввести в нем слово Пуск. При этом соответственно изменится третий атрибут программного описания кнопки (android:text="Пуск"). Для задания полного красного цвета с полным каналом прозрачности задаем в окне Color цветовую модель ARGB и указываем интенсивность 255 в Аlpha-канале и пункте Red. При этом в коде элемента добавится последний атрибут вида:

android:textColor="#ffff0000" />

5. Аналогично создаем и задаем свойства кнопке SmallButton - черный фон (модель ARGB, распределение: 255-0-0-0), расположение - нижний правый угол (перетаскивание) с белой непрозрачной (модель ARGB, распределение: 255-255-255-255)текстовой надписью “Cтоп”.

Итоговый общий вид экрана устройства после выполнения всех действий дан на рис.2.5.

При этом в файле будут добавлены два пустых тега с атрибутами кнопок:

<Button

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Пуск"

android:id="@+id/button"

android:layout_alignParentBottom="true"

android:layout_alignParentLeft="true"

android:layout_alignParentStart="true"

android:background="#ffffff00"

android:textColor="#ffff0000" />

 

Рис.2.5.Общий вид экрана устройства после выполнения всех действий

При этом в файле будут добавлены два пустых тега с атрибутами кнопок:

<Button

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Пуск"

android:id="@+id/button"

android:layout_alignParentBottom="true"

android:layout_alignParentLeft="true"

android:layout_alignParentStart="true"

android:background="#ffffff00"

android:textColor="#ffff0000" />

<Button

style="?android:attr/buttonStyleSmall"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Стоп"

android:id="@+id/button2"

android:layout_alignParentBottom="true"

android:layout_alignParentRight="true"

android:layout_alignParentEnd="true"

android:background="#ff000000"

android:textColor="#ffffffff" />

Таким образом, можно было бы набрать вышеуказанный программный код в XML-файле и не пользоваться вкладками Palette и Properties. Для проверки этого можно скопировать данный кусок файла activity_main.xml в буфер, а затем удалить его. После этого кнопки исчезнут с дисплея. После вставки кода они снова появятся.