android ExpandableListView三级菜单的使用
2016-07-19 10:14
435 查看
由于本人所作的项目需要用到这种列表式的收缩与展开,因此,就好好研究了有关这方面的一些知识,当然,也借鉴了网上一些成功的案列。下面就是我模拟测试的一个展示界面。
实现上面的这些功能,我主要是通过ExpandableListView这一控件,以及BaseExpandableListAdapter适配器。这两者关联实现的。好的,那接下来,就对这些进行详细的展示。
所有的xml布局展示
## activity_main.xml##
接下来就是获取数据、适配数据,以及对控件的操作事件。首先是获取数据,由于项目接口不宜公开,固这里采用的是测试数据其主要代码如下。
由于是三级菜单,所以这里的实体用了3个,理论上,n级菜单的话,那就得n个实体,但是一般的app用到的至多就是3级,4级以上的都比较少见。其适配器那就得用两个。接下来讲解第一个适配器,它不是继承BaseAdapter,继承的是BaseExpandableListAdapter,通过重写它的方法能很好的把数据与控件结合在一起。其主要的方法有:getGroupView()、getChildView()….主要代码如下。
第二个适配器与上述差不多,也是主要通过以上的方法来实现的。在这里,我就不在贴出重复的的代码了,在下面的链接,就可以下载源代码。
源代码点此下载
实现上面的这些功能,我主要是通过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; }
第二个适配器与上述差不多,也是主要通过以上的方法来实现的。在这里,我就不在贴出重复的的代码了,在下面的链接,就可以下载源代码。
源代码点此下载
相关文章推荐
- Android ExpandableListView长按事件的完美解决办法
- Android中ExpandableListView的用法实例
- Android ExpandableListView展开列表控件使用实例
- 分享Android中ExpandableListView控件使用教程
- Android改变ExpandableListView的indicator图标实现方法
- android xml注意事项
- ExpandableListView的首次加载全部展开,并且点击Group不收缩、
- 用迭代法 解析 json 格式 数据
- ExpandableListView及其子项显示上下文菜单
- Android,三级列表实现
- xml文件的注意事项
- android聊天器(仿QQ)编写第一天__界面的搭建和主要的布局
- ExpandableListView 嵌套gridView使用
- ExpandableListView的用法
- ExpandableListView实现多级菜单
- ExpandableListView 的几个有用点的属性
- ScrollView中嵌套ListView/ExpandableListView显示问题
- ExpandableListView 默认打开 点击不可收回
- ExpandableListView组件中CheckBox全选的使用(使用观察者模式)
- ExpandableListView