Один аспект, который мы не рассматривали в предыдущих постах, — это то, как мы можем применить стиль или фон к элементам Listview (или строке). Мы можем настроить внешний вид ListView так, как нам нравится, например, можно использовать в качестве фона закругленный угол , альтернативный цвет и так далее. К настоящему моменту мы рассматривали только пользовательский адаптер без учета того, как мы можем настроить внешний вид каждого элемента в списке .
В этом посте мы хотим описать, как мы можем использовать ресурс для настройки внешнего вида элемента. В первом примере будет описано, как мы можем создать закругленные углы для каждого элемента внутри списка. Во втором примере мы покажем, как мы можем чередовать цвет фона .
ListView с закругленным углом
Предположим, мы хотим создать закругленный угол для каждого элемента. Как мы можем это сделать? … Нам нужно создать некоторые ресурсы для рисования и применить их к каждому элементу. Как вы уже знаете, мы должны создать собственный адаптер для реализации этого поведения. В этом посте мы не хотим тратить слишком много слов об адаптерах, потому что мы описали их здесь и здесь .
Как мы сказали, первое, что нам нужно, это ресурс, который можно извлечь. Как вы, возможно, уже знаете, это мощная функция Android, поскольку она позволяет нам создавать геометрические фигуры в стиле XML. Мы должны указать некоторую информацию для создания этой фигуры:
- размер и цвет границы
- цвет фона (в нашем случае сплошной цвет)
- углы
Нам нужно создать файл XML в каталоге res / drawable . Давайте назовем этот файл rounded_corners.xml . Этот файл содержит определение формы. Форма — это геометрическая фигура, которая описывается другими тегами:
- обводка — линия обводки для фигуры (witdh, color, dashWidth и dashGap)
- сплошной — сплошной цвет, который заполняет форму
- углы — радиус и т. д
Итак, файл roundnded_corners.xml выглядит следующим образом:
|
01
02
03
04
05
06
07
08
09
10
11
|
<?xml version="1.0" encoding="utf-8"?> <solid android:color="#00FF00"/> <corners android:radius="5dp" /> <padding android:left="3dp" android:top="3dp" android:right="3dp" android:bottom="3dp" /> <stroke android:width="3dp" android:color="#00CC00"/></shape> |
Как только мы создадим нашу форму, нам нужно применить ее к элементам. Чтобы сделать это, мы должны создать еще один XML-файл, который описывает, как мы применяем эту форму. В этом случае мы используем селектор тегов XML , чтобы указать, когда и как применять форму. Чтобы указать, когда применять форму, мы используем статус . Мы указываем применять эту форму, когда:
- статус = включить
- статус = выбранный
- статус = нажата
Итак, наш файл ( listview_selector.xml ) выглядит так:
|
1
2
3
4
5
6
7
8
9
|
<?xml version="1.0" encoding="utf-8"?> <item android:drawable="@drawable/rounded_corner" android:state_enabled="true"/> <item android:drawable="@drawable/rounded_corner" android:state_pressed="true"/> <item android:drawable="@drawable/rounded_corner" android:state_focused="true"/></selector> |
Теперь мы определили наш ресурс, нам просто нужно указать, чтобы применить его в нашем адаптере следующим образом:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
public View getView(int position, View convertView, ViewGroup parent) { View v = convertView; PlanetHolder holder = new PlanetHolder(); // First let's verify the convertView is not null if (convertView == null) { // This a new view we inflate the new layout LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE); v = inflater.inflate(R.layout.row_layout, null); // Now we can fill the layout with the right values TextView tv = (TextView) v.findViewById(R.id.name); holder.planetNameView = tv; v.setTag(holder); v.setBackgroundResource(R.drawable.rounded_corner); } else holder = (PlanetHolder) v.getTag(); Planet p = planetList.get(position); holder.planetNameView.setText(p.getName()); return v;} |
Если мы запустим приложение, у нас есть:
ListView с альтернативным цветом
Как мы описали выше, если мы хотим изменить внешний вид каждой строки внутри ListView, мы просто изменим ресурс и можем настроить его внешний вид.
Например, мы можем предположить, что мы хотим чередовать цвет строки. В этом случае нам нужно создать два ресурса для рисования по одному для каждого фона, вот так:
even_row.xml
|
1
2
3
4
5
6
7
8
9
|
<?xml version="1.0" encoding="utf-8"?> <solid android:color="#A0A0A0"/> <padding android:left="3dp" android:top="3dp" android:right="3dp" android:bottom="3dp" /> <stroke android:width="1dp" android:color="#00CC00"/></shape> |
odd_row.xml
|
1
2
3
4
5
6
7
8
9
|
<?xml version="1.0" encoding="utf-8"?> <solid android:color="#F0F0F0"/> <padding android:left="3dp" android:top="3dp" android:right="3dp" android:bottom="3dp" /> <stroke android:width="1dp" android:color="#00CC00"/></shape> |
Более того, нам нужны два селектора, которые используют доступные ресурсы, например
listview_selector_even.xml
|
1
2
3
4
5
6
7
8
9
|
<?xml version="1.0" encoding="utf-8"?> <item android:drawable="@drawable/even_row" android:state_enabled="true"/> <item android:drawable="@drawable/even_row" android:state_pressed="true"/> <item android:drawable="@drawable/even_row" android:state_focused="true"/></selector> |
listview_selector_odd.xml
|
1
2
3
4
5
6
7
8
9
|
<?xml version="1.0" encoding="utf-8"?> <item android:drawable="@drawable/odd_row" android:state_enabled="true"/> <item android:drawable="@drawable/odd_row" android:state_pressed="true"/> <item android:drawable="@drawable/odd_row" android:state_focused="true"/></selector> |
И наконец мы применяем их внутри нашего специального адаптера:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
public View getView(int position, View convertView, ViewGroup parent) { View v = convertView; PlanetHolder holder = new PlanetHolder(); // First let's verify the convertView is not null if (convertView == null) { // This a new view we inflate the new layout LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE); v = inflater.inflate(R.layout.row_layout, null); // Now we can fill the layout with the right values TextView tv = (TextView) v.findViewById(R.id.name); holder.planetNameView = tv; v.setTag(holder); if ( position % 2 == 0) v.setBackgroundResource(R.drawable.listview_selector_even); else v.setBackgroundResource(R.drawable.listview_selector_odd); } else holder = (PlanetHolder) v.getTag(); Planet p = planetList.get(position); holder.planetNameView.setText(p.getName()); return v;} |
Запустив приложение мы имеем:
Исходный код @ github