android ExpandableListView三级菜单的使用
由于本人所作的项目需要用到这种列表式的收缩与展开，因此，就好好研究了有关这方面的一些知识，当然，也借鉴了网上一些成功的案列。下面就是我模拟测试的一个展示界面。
实现上面的这些功能，我主要是通过ExpandableListView这一控件，以及BaseExpandableListAdapter适配器。这两者关联实现的。好的，那接下来，就对这些进行详细的展示。
- 所有的xml布局展示
## activity_main.xml##
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.example.administrator.expandablelistviewdemo1.MainActivity">
<ExpandableListView android:id="@+id/expand_list" android:layout_width="match_parent" android:layout_height="match_parent" android:groupIndicator="@null"/>
</RelativeLayout>## parent_group_item.xml##
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:paddingLeft="10dp" >
<TextView android:id="@+id/title" android:layout_width="wrap_content" android:layout_height="50dp" android:gravity="center_vertical" android:text="121"/>
<TextView android:id="@+id/kpi_score" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_toRightOf="@id/title" android:layout_centerVertical="true" android:layout_marginLeft="10dp" android:text="80分"/>
<ImageView android:id="@+id/kpi_back_img" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/up" android:layout_alignParentRight="true" android:layout_centerVertical="true" android:layout_marginRight="20dp" />
</RelativeLayout>## child_adapter.xml##
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" >
<RelativeLayout android:layout_width="match_parent" android:layout_height="50dp" >
<TextView android:id="@+id/childGroupTV" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_centerVertical="true" android:paddingLeft="40dp" />
<ImageView android:id="@+id/kpi_back_img" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/up" android:layout_alignParentRight="true" android:layout_centerVertical="true" android:layout_marginRight="20dp" />
<TextView android:id="@+id/score_value" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_centerVertical="true" android:gravity="center" android:visibility="gone" android:background="@drawable/score_bg" android:text="10分" android:layout_marginRight="50dp" />
</RelativeLayout>
</LinearLayout>## child_child.xml##
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" >
<RelativeLayout android:layout_width="match_parent" android:layout_height="50dp" >
<TextView android:id="@+id/childGroupTV" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_centerVertical="true" android:paddingLeft="60dp" />
<TextView android:id="@+id/score_value" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_centerVertical="true" android:gravity="center" android:visibility="gone" android:background="@drawable/score_bg" android:text="10分" android:layout_marginRight="50dp" />
</RelativeLayout>
</LinearLayout>## activity_content.xml##
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.example.administrator.expandablelistviewdemo1.ContentActivity">
<TextView android:id="@+id/content" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="20dp" android:textSize="40dp" android:textColor="#ff0000" />
</RelativeLayout>- 接下来就是获取数据、适配数据，以及对控件的操作事件。首先是获取数据，由于项目接口不宜公开，固这里采用的是测试数据其主要代码如下。
/** * 初始化数据 */
private void initData() {
for(int i=0;i<4;i++){
FirstBean firstBean = new FirstBean();
ArrayList<SecondBean> mArrlistSecondBean = new ArrayList<SecondBean>();
if(i==0){
firstBean.setScore("80分");
firstBean.setTitle("KPI 关键能力");
}else if(i==1){
firstBean.setScore("10分");
firstBean.setTitle("API 工作态度");
}else if(i==2){
firstBean.setScore("10分");
firstBean.setTitle("LPI 团队建设");
}else if(i==3){
firstBean.setScore("5分");
firstBean.setTitle("WPI 特殊事件");
}
for(int j=0;j<3;j++){
SecondBean secondBean = new SecondBean();
secondBean.setTitle("第"+i+"个二级标题");
ArrayList<ThirdBean> mArrlistBean = new ArrayList<ThirdBean>();
for(int k=0;k<2;k++){
ThirdBean thirdBean = new ThirdBean();
thirdBean.setTitle("第"+k+"个三级标题");
mArrlistBean.add(thirdBean);
}
secondBean.setSecondBean(mArrlistBean);
mArrlistSecondBean.add(secondBean);
}
firstBean.setFirstData(mArrlistSecondBean);
mDatas.add(firstBean);
Log.e("xxx",mDatas.get(i).getTitle());
}
}- 由于是三级菜单，所以这里的实体用了3个，理论上，n级菜单的话，那就得n个实体，但是一般的app用到的至多就是3级，4级以上的都比较少见。其适配器那就得用两个。接下来讲解第一个适配器，它不是继承BaseAdapter,继承的是BaseExpandableListAdapter，通过重写它的方法能很好的把数据与控件结合在一起。其主要的方法有：getGroupView()、getChildView()….主要代码如下。
/** * 第一级菜单适配器布局 * @param parentPosition * @param isExpanded * * @param convertView * @param viewGroup * @return */
@Override
public View getGroupView(int parentPosition, boolean isExpanded, View convertView, ViewGroup viewGroup) {
if (convertView == null) {
convertView = LayoutInflater.from(mContext).inflate(
R.layout.parent_group_item, null);
holder = new ViewHolder();
holder.upImg = (ImageView) convertView.findViewById(R.id.kpi_back_img);
holder.score = (TextView) convertView.findViewById(R.id.kpi_score);
holder.title = (TextView) convertView.findViewById(R.id.title);
convertView.setTag(holder);
} else {
holder = (ViewHolder) convertView.getTag();
}
//区分箭头往上还是
if(isExpanded){
holder.upImg.setImageResource(R.drawable.dowm);
}else{
holder.upImg.setImageResource(R.drawable.up);
}
holder.title.setText(mData.get(parentPosition).getTitle());
holder.score.setText(mData.get(parentPosition).getScore());
return convertView;
}
class ViewHolder{
private TextView title;
private TextView score;
private ImageView upImg;
}
public ExpandableListView getExpandableListView() {
ExpandableListView mExpandableListView = new ExpandableListView(
mContext);
AbsListView.LayoutParams lp = new AbsListView.LayoutParams(
ViewGroup.LayoutParams.MATCH_PARENT, (int) mContext
.getResources().getDimension(
R.dimen.parent_list_height));
mExpandableListView.setLayoutParams(lp);
mExpandableListView.setDividerHeight(0);// 取消group项的分割线
mExpandableListView.setChildDivider(null);// 取消child项的分割线
mExpandableListView.setGroupIndicator(null);// 取消展开折叠的指示图标
return mExpandableListView;
}
/** * 第二级菜单式配 * @param parentPosition * @param childPosition * @param isExpanded * @param view * @param viewGroup * @return */
@Override
public View getChildView(final int parentPosition, final int childPosition, boolean isExpanded, View view, ViewGroup viewGroup) {
final ExpandableListView childListView = getExpandableListView();
//获取子菜单的数据
final ArrayList<SecondBean> childData = new ArrayList<SecondBean>();
final SecondBean bean = getChild(parentPosition,childPosition);
childData.add(bean);
ChildAdapter adapter = new ChildAdapter(mContext,childData,parentPosition);
childListView.setAdapter(adapter);
/** * 点击最小级菜单，调用该方法 * */
childListView.setOnChildClickListener(new ExpandableListView.OnChildClickListener() {
@Override
public boolean onChildClick(ExpandableListView arg0, View arg1,
int groupIndex, int childIndex, long arg4) {
if(mListener != null){
mListener.onclick(parentPosition,childPosition, childIndex);
//点击三级菜单，跳转到编辑菜单界面
Intent intent = new Intent(mContext, ContentActivity.class);
intent.putExtra("content","你点的位置是: "+"parentPosition>>"+parentPosition+
"childPosition>>"+childPosition+"childIndex>>"+childIndex);
mContext.startActivity(intent);
}
return false;
}
});
/** *子ExpandableListView展开时，因为group只有一项，所以子ExpandableListView的总高度= * （子ExpandableListView的child数量 + 1 ）* 每一项的高度 * */
childListView.setOnGroupExpandListener(new ExpandableListView.OnGroupExpandListener() {
@Override
public void onGroupExpand(int groupPosition) {
Log.e("xxx",groupPosition+"onGroupExpand>>");
AbsListView.LayoutParams lp = new AbsListView.LayoutParams(
ViewGroup.LayoutParams.MATCH_PARENT,
(bean.getSecondBean().size() + 1)* (int) mContext
.getResources().getDimension(R.dimen.parent_list_height));
childListView.setLayoutParams(lp);
}
});
/** *子ExpandableListView关闭时，此时只剩下group这一项， * 所以子ExpandableListView的总高度即为一项的高度 * */
childListView.setOnGroupCollapseListener(new ExpandableListView.OnGroupCollapseListener() {
@Override
public void onGroupCollapse(int groupPosition) {
Log.e("xxx",groupPosition+">>onGroupCollapse");
AbsListView.LayoutParams lp = new AbsListView.LayoutParams(
ViewGroup.LayoutParams.MATCH_PARENT, (int) mContext
.getResources().getDimension(R.dimen.parent_list_height));
childListView.setLayoutParams(lp);
holder.upImg.setImageResource(R.drawable.up);
}
});
/** * 在这里对二级菜单的点击事件进行操作 */
childListView.setOnGroupClickListener(new ExpandableListView.OnGroupClickListener() {
@Override
public boolean onGroupClick(ExpandableListView parent, View v, int Position, long id) {
// if(isClick){
// holder.mUpImg.setImageResource(R.drawable.dowm);
// isClick = false;
// }else{
// holder.mUpImg.setImageResource(R.drawable.up);
// isClick = true;
// }
Log.e("Xxx","恭喜你,点击了"+parentPosition+"childpos>>>"+childPosition);
return false;
}
});
return childListView;
}第二个适配器与上述差不多，也是主要通过以上的方法来实现的。在这里，我就不在贴出重复的的代码了，在下面的链接，就可以下载源代码。
源代码点此下载