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

С этой статьи начинается цикл статей по кастомизации интерфейса приложения под Android. Сегодня поговорим, как можно изменить внешний вид кнопок и использовать ImageView в качестве кнопки.

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

В качестве кнопок мы будем использовать виджеты Button и ImageView. Основное свойство для кастомизации в xml при создании этих виджетов для изменения внешнего вида:

• для Button: android:background – фоновое изображение кнопки
• для ImageView:

- android:background – фоновое изображение кнопки;

- android:src – изображение для переднего плана элемента.

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

Для Button мы используем Nine-Patch изображения, которые были созданы в этой статье. 

Для примера, используем

• ex4_2.9.png для нормального состояния кнопки (переименуем в btn_normal.9.png);
• ex4_3.9.png для нажатой кнопки (переименуем в btn_pressed.9.png);
• ex4_4.9.png для неактивной кнопки (переименуем в btn_disable.9.png).

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

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

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

<item android:state_pressed="true"

android:drawable="@drawable/btn_pressed" />

      <item android:state_enabled="true"

            android:drawable="@drawable/btn_normal" />

      <item android:state_enabled="false"

            android:drawable="@drawable/btn_disable" />

</selector>

• android:state_pressed="true|false" указывает на нажатое или нормальное состояние кнопки;
• android:state_enabled="true|false" указывает на активное или неактивное состояние кнопки.

Атрибут android:drawable используется для установки конкретного изображения для выбранного состояния элемента.

Создадим теперь селектор для ImageView. Для этого элемента мы будем использовать только два состояния: нормальное и нажатое, и изображения возьмем обычные, а не Nine-Patch.

В этой статье рассказывалось, как оптимизировать такие изображения для разных разрешений экрана.

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

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

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

      <item android:state_pressed="true"

android:drawable="@drawable/img_pressed" />

      <item android:state_enabled="true"

android:drawable="@drawable/img_normal" />

</selector>

Практика

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

android:background="@drawable/btn_selector"

btn_selector – это название xml-файла нашего селектора.

<?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" >

    <LinearLayout

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:orientation="horizontal" >

        <Button

            android:id="@+id/btn_1"

            android:layout_width="fill_parent"

            android:layout_height="wrap_content"

            android:layout_weight="1"

            android:background="@drawable/btn_selector"

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

        <Button

            android:id="@+id/btn_2"

            android:layout_width="fill_parent"

            android:layout_height="wrap_content"

            android:layout_weight="1"

            android:background="@drawable/btn_selector"

            android:enabled="false"

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

    </LinearLayout>

    <Button

        android:id="@+id/btn_3"

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:background="@drawable/btn_selector"

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

    <ImageButton

        android:id="@+id/img"

        android:layout_width="100dp"

        android:layout_height="100dp"

        android:background="@drawable/img_selector"

        android:scaleType="fitXY"

        android:visibility="invisible" />

</LinearLayout>

Теперь нам необходимо добавить поведение для каждой кнопки в программе. В этом примере создается 4 элемента: 2 кнопки шириной на полэкрана, 1 кнопка шириной на весь экран и изображение размером 100 dp x 100 dp.

 
public class CustomButtonExampleActivity extends Activity{
    
 private Button btn_1, btn_2, btn_3;
 private ImageView img;
 private Context context;
 
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        this.btn_1  = (Button)findViewById(R.id.btn_1);
        this.btn_2  = (Button)findViewById(R.id.btn_2);
        this.btn_3  = (Button)findViewById(R.id.btn_3);
        this.img  = (ImageView)findViewById(R.id.img);
        this.context = this;
        
        this.btn_1.setOnClickListener(new OnClickListener() {
   
   @Override
   public void onClick(View v) {
    btn_2.setEnabled(true);
    v.setEnabled(false);
   }
  });
        
        this.btn_2.setOnClickListener(new OnClickListener() {
   
   @Override
   public void onClick(View v) {
    btn_1.setEnabled(true);
    v.setEnabled(false);
   }
  });
        
        this.btn_3.setOnClickListener(new OnClickListener() {
   
   @Override
   public void onClick(View v) {
    img.setVisibility((img.isShown()) ? View.INVISIBLE : View.VISIBLE);
   }
  });
        
        this.img.setOnClickListener(new OnClickListener() {
   
   @Override
   public void onClick(View v) {
    Toast.makeText(context, "Click", Toast.LENGTH_SHORT).show();
   }
  });
    }

Ссылки

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