Паттерн Selector в навигации

| 16.05.2014

Когда пользователь жмет на кнопку или какой-то пункт меню, то он ожидает получить обратную связь до того момента, когда нужный контент будет загружен. Особенно это актуально, если перемещение между экранами не осуществляется мгновенно. Но даже если бы так было, то «подсветить» выбранный пункт меню или нажатую кнопку — это как «правило хорошего тона». Все это улучшает usability вашего приложения. Для реализации подобной обратной связи в разработке приложений на Андроид используется паттерн Selector. Его суть — это задание различного стилевого оформления для различных состояний выбираемого пользователем элемента.

Реализуем паттерн Selector на простом примере. Мы создадим список, где при выборе того или иного пункта он будет изменять свой фон.

В res/layout/activity_main.xml создадим список ListView:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?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">
 
     <ListView
         android:id="@+id/list_view"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:listSelector="@drawable/selector">
     </ListView>
 
</LinearLayout>

Обратите внимание, что мы добавили атрибут android:listSelector к ListView. Этот атрибут ссылается на ресурс selector.xml, расположенный в папке drawable.

res/drawable/selector.xml

1
2
3
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:drawable="@drawable/bground"/>
</selector>

Мы видим здесь корневой элемент selector, внутри которого помещен один элемент item с атрибутом

1
android:state_pressed="true"

Этот атрибут означает, что при нажатии на элемент списка нужно использовать его стилевое оформление из ресурса bground.xml:

res/drawable/bground.xml

1
2
3
<shape xmlns:android="http://schemas.android.com/apk/res/android">
  <solid android:color="@color/green"/>
</shape>

Здесь у нас всего один элемент с описанием цвета фона (зеленый цвет). Цвет берем из ресурсов colors.xml

res/values/colors.xml

1
2
3
4
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="green">#00ff00</color>
</resources>

Добавим строковые ресурсы.

res/values/strings.xml

1
2
3
4
5
6
7
8
9
10
11
12
<?xml version="1.0" encoding="utf-8"?>
<resources>
 
    <string name="app_name">ListSelector</string>    
    <string name="action_settings">Settings</string>
    <string-array name="items">
        <item>Create</item>
        <item>Edit</item>
        <item>Delete</item>
    </string-array>
 
</resources>

Ну и, наконец, добавим код в MainActivity.java, который займется созданием списка.

MainActivity.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
package ru.androiddocs.listselector;
 
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ArrayAdapter;
import android.widget.ListView;
 
 
public class MainActivity extends Activity {
 
    String items[];
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        ListView listV = (ListView) findViewById(R.id.list_view);		
        items = getResources().getStringArray(R.array.items);
 
        listV.setAdapter(new ArrayAdapter<String>(this, 
            android.R.layout.simple_list_item_1, items));
 
        listV.setOnItemClickListener(new OnItemClickListener() {
 
            @Override
            public void onItemClick(AdapterView<?> arg0, View arg1,
                int pos, long id
            ) {
 
 
            }
        });
    }
}

В коде мы также добавили обработчик клика, но не стали его заполнять. Нам важно лишь увидеть само нажатие на пункт списка. Запускаем приложение и пробуем понажимать на пункты. При нажатии они будут изменять свой цвет, как мы и задумывали.

Паттерн Selector в навигации

Больше о различных состояниях android:state можно почитать здесь

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*