среда, 10 октября 2012 г.

Кастомизация интерфейса: 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