В данной статье хочу привести небольшой пример работы с кастомизацией ExpandableListView — двухуровневого списка.
То, что должно получиться в итоге
Приступим, создадим проект и добавим в активити данный код
public class ExpActivity extends Activity
{
@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
// Находим наш list
ExpandableListView listView = (ExpandableListView)findViewById(R.id.exListView);
//Создаем набор данных для адаптера
ArrayList<ArrayList<String>> groups = new ArrayList<ArrayList<String>>();
ArrayList<String> children1 = new ArrayList<String>();
ArrayList<String> children2 = new ArrayList<String>();
children1.add("Child_1");
children1.add("Child_2");
groups.add(children1);
children2.add("Child_1");
children2.add("Child_2");
children2.add("Child_3");
groups.add(children2);
//Создаем адаптер и передаем context и список с данными
ExpListAdapter adapter = new ExpListAdapter(getApplicationContext(), groups);
listView.setAdapter(adapter);
}
}
Добавляем в main.xml ExpandableListView
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<ExpandableListView
android:id="@+id/exListView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:indicatorLeft="250dp"
android:indicatorRight="300dp"
/>
</LinearLayout>
Теперь создадим класс адаптера
public class ExpListAdapter extends BaseExpandableListAdapter {
private ArrayList<ArrayList<String>> mGroups;
private Context mContext;
public ExpListAdapter (Context context,ArrayList<ArrayList<String>> groups){
mContext = context;
mGroups = groups;
}
@Override
public int getGroupCount() {
return mGroups.size();
}
@Override
public int getChildrenCount(int groupPosition) {
return mGroups.get(groupPosition).size();
}
@Override
public Object getGroup(int groupPosition) {
return mGroups.get(groupPosition);
}
@Override
public Object getChild(int groupPosition, int childPosition) {
return mGroups.get(groupPosition).get(childPosition);
}
@Override
public long getGroupId(int groupPosition) {
return groupPosition;
}
@Override
public long getChildId(int groupPosition, int childPosition) {
return childPosition;
}
@Override
public boolean hasStableIds() {
return true;
}
@Override
public View getGroupView(int groupPosition, boolean isExpanded, View convertView,
ViewGroup parent) {
if (convertView == null) {
LayoutInflater inflater = (LayoutInflater) mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
convertView = inflater.inflate(R.layout.group_view, null);
}
if (isExpanded){
//Изменяем что-нибудь, если текущая Group раскрыта
}
else{
//Изменяем что-нибудь, если текущая Group скрыта
}
TextView textGroup = (TextView) convertView.findViewById(R.id.textGroup);
textGroup.setText("Group " + Integer.toString(groupPosition));
return convertView;
}
@Override
public View getChildView(int groupPosition, int childPosition, boolean isLastChild,
View convertView, ViewGroup parent) {
if (convertView == null) {
LayoutInflater inflater = (LayoutInflater) mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
convertView = inflater.inflate(R.layout.child_view, null);
}
TextView textChild = (TextView) convertView.findViewById(R.id.textChild);
textChild.setText(mGroups.get(groupPosition).get(childPosition));
Button button = (Button)convertView.findViewById(R.id.buttonChild);
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Toast.makeText(mContext,"button is pressed",5000).show();
}
});
return convertView;
}
@Override
public boolean isChildSelectable(int groupPosition, int childPosition) {
return true;
}
}
Названия методов и параметров довольно информативны. Методы getGroupView и getChildView возвращают View для «родителей» и «детей» соответственно. Используя параметр isExpanded в методе getGroupView, можно, например, менять фон group при разных состояниях. С помощью LayoutInflater используем кастомные layout для нашего списка.
group_view.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/textGroup"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_marginLeft="5dp"
android:layout_marginTop="20dp"
android:textColor="@android:color/white"
android:textStyle="bold"
/>
</LinearLayout>
child_view.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/textChild"
android:layout_width="wrap_content"
android:layout_height="40dp"
android:layout_marginLeft="20dp"
android:layout_marginTop="20dp"
android:textColor="@android:color/white"
/>
<Button
android:id="@+id/buttonChild"
android:layout_width="100dp"
android:layout_height="40dp"
android:layout_marginLeft="150dp"
android:layout_marginTop="10dp"
android:text="Button"
android:focusable="false"
/>
</LinearLayout>
В child_view.xml добавлена кнопка, а в адаптере в методе getChildView обработали ее нажатие. Таким же образом можно добавлять кнопки и другие элементы в group_view.xml.
Так же списку можно «навесить» слушателей:
- OnChildClickListener — нажатие на элемент
- OnGroupCollapseListener – сворачивание группы
- OnGroupExpandListener – разворачивание группы
- OnGroupClickListener – нажатие на группу
Теперь рассмотрим groupIndicator — индикатор состояния группы. Его положение задано в main.xml параметрами indicatorLeft и indicatorRight — соответственно левой и правой границей. По умолчанию индикатор располагается слева, что не очень привычно. Также можно подставить свои изображения, для этого нужно создать indicator.xml в папке drawable с таким кодом
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_expanded="true"
android:drawable="@drawable/imageOpen">
</item>
<item android:state_empty="true"
android:drawable="@drawable/imageClose">
</item>
</selector>
Где imageOpen – будет отображаться при раскрытой группе, а imageClose – закрытой. Далее в main.xml нужно добавить строчку к параметрам нашего списка android:groupIndicator="@drawable/indicator". При подготовке изображений нужно учесть то, что они будут растянуты по всей высоте лэйаута group_view. Так что если нужен кастомный значок индикатора — лучше использовать пару изображений и контролировать их появления в методе getView. В этой статье хорошо описаны нюансы работы с адаптерами, а также хочу обратить ваше внимание на использование класса ViewHolder.
Ну вот и все, надеюсь, что пост поможет начинающим разработчикам.
Автор: zoo
