美文网首页
二级列表ExpandableListView

二级列表ExpandableListView

作者: 龙_君 | 来源:发表于2019-07-21 16:05 被阅读0次

    一.概述

    ExpandableListView 是什么?

    官方给出的解释是:

    A view that shows items in a vertically scrolling two-level list. This differs from the ListView by allowing two levels: groups which can individually be expanded to show its children. The items come from the ExpandableListAdapter associated with this view.

    简单翻译一下就是:

    [图片上传中...(二级.png-6c657e-1563696646492-0)]
    种用于垂直滚动展示两级列表的视图,组可以单独展开。这些选项的数据是通过 ExpandableListAdapter 关联的。

    二.如何使用

    1.定义xml布局

    <ExpandableListView
        android:id="@+id/contact_etv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
    

    2.定义要显示的数据

    //group数据
      private ArrayList<String> mGroupList;
    
    //item数据
    private ArrayList<ArrayList<String>> mItemSet;
    
    private void initData() {
    
        mGroupList = new ArrayList<>();
    
        mGroupList.add("我的家人");
    
        mGroupList.add("我的朋友");
    
        mGroupList.add("黑名单");
    
        mItemSet = new ArrayList<>();
    
        ArrayList<String> itemList1 = new ArrayList<>();
    
        itemList1.add("大妹");
    
        itemList1.add("二妹");
    
        itemList1.add("三妹");
    
        ArrayList<String> itemList2 = new ArrayList<>();
    
        itemList2.add("大美");
    
        itemList2.add("二美");
    
        itemList2.add("三美");
    
        ArrayList<String> itemList3 = new ArrayList<>();
    
        itemList3.add("狗蛋");
    
        itemList3.add("二丫");
    
        mItemSet.add(itemList1);
    
        mItemSet.add(itemList2);
    
        mItemSet.add(itemList3);
    }
    

    3.定义组视图和子选项的视图

    组视图

    
    <RelativeLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="50dp">
    
    
    <TextView
        android:layout_centerVertical="true"
        android:layout_marginLeft="50dp"
        android:id="@+id/tv_group"
        android:textSize="18sp"
        android:text="name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    
    
    
    <TextView
        android:layout_centerVertical="true"
        android:layout_alignParentRight="true"
        android:layout_marginRight="10dp"
        android:text="4/18"
        android:textSize="16sp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
        </RelativeLayout>
    

    子视图

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:padding="8dp">
    
        <ImageView
        android:layout_marginLeft="40dp"
        android:src="@mipmap/ic_launcher"
        android:layout_width="40dp"
        android:layout_height="40dp" />
        <LinearLayout
        android:layout_marginLeft="12dp"
        android:orientation="vertical"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
    
        <TextView
        android:id="@+id/tv_name"
        android:text="@string/app_name"
        android:textSize="16sp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
        <TextView
        android:text="@string/app_name"
        android:textSize="16sp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    </LinearLayout>
        </LinearLayout>
    

    4.自定义适配器,需要继承 BaseExpandableListAdapter 抽象类,重写相关的方法

    public class ContactAdapter extends BaseExpandableListAdapter {
    
        private Context mContext;
    
        private ArrayList<String> mGroup;
    
        private ArrayList<ArrayList<String>> mItemList;
    
        private final LayoutInflater mInflater;
    
        public ContactAdapter(Context context, ArrayList<String> group, ArrayList<ArrayList<String>> itemList){
    
            this.mContext = context;
    
            this.mGroup = group;
    
            this.mItemList = itemList;
    
            mInflater = LayoutInflater.from(context);
    
        }
    
            //父项的个数
        @Override
        public int getGroupCount() {
            return mGroup.size();
        }
    
            //某个父项的子项的个数
        @Override
        public int getChildrenCount(int groupPosition) {
            return mItemList.get(groupPosition).size();
        }
    
    
    
            //获得某个父项
        @Override
        public Object getGroup(int groupPosition) {
            return mGroup.get(groupPosition);
        }
    
    
    
            //获得某个子项
        @Override
        public Object getChild(int groupPosition, int childPosition) {
    
            return mItemList.get(groupPosition).get(childPosition);
    
        }
            //父项的Id
        @Override
        public long getGroupId(int groupPosition) {
            return groupPosition;
        }
            //子项的id
        @Override
        public long getChildId(int groupPosition, int childPosition) {
            return childPosition;
        }
    
    
        @Override
        public boolean hasStableIds() {
            return false;
        }
    
    
            //获取父项的view
        @Override
        public View getGroupView(int groupPosition, boolean isExpanded, View convertView, ViewGroup parent) {
            if (convertView == null){
                convertView = mInflater.inflate(R.layout.contact_group,parent,false);
            }
            String group = mGroup.get(groupPosition);
            TextView tvGroup = (TextView) convertView.findViewById(R.id.tv_group);
            tvGroup.setText(group);
            return convertView;
        }
    
    
            //获取子项的view
        @Override
        public View getChildView(int groupPosition, int childPosition, boolean isLastChild, View convertView, ViewGroup parent) {
    
            final String child = mItemList.get(groupPosition).get(childPosition);
    
            if (convertView == null){
                convertView = mInflater.inflate(R.layout.contact_item,parent,false);
            }
    
            TextView tvChild = (TextView)convertView.findViewById(R.id.tv_name);
            tvChild.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    Toast.makeText(mContext,child,Toast.LENGTH_SHORT).show();
                }
            });
    
    
            tvChild.setText(child);
            return convertView;
        }
            //子项是否可选中,如果要设置子项的点击事件,需要返回true
        @Override
        public boolean isChildSelectable(int groupPosition, int childPosition) {
            return true;
        }
    
    }
    

    5.为 ExpandableListView 设置适配器

        ContactAdapter adapter = new ContactAdapter(getContext(), mGroupList, mItemSet);
        mContactEtv.setAdapter(adapter);
    

    6.效果图:

    二级.png

    三.监听事件

    1.对于处理 Item 的点击事件,还是要设置监听器,常用的有这几类:

    •setOnChildClickListener//单击子选项
    •setOnGroupClickListener//单击组选项
    •setOnGroupCollapseListener//分组合并
    •setOnGroupExpandListener//分组合并

    注意:
    setOnChildClickListener,想要此回调有效,适配器的isChildSelectable()方法必须返回true

    四.属性

    divider 这个属性用于设置父选项之间的分割线样式

    childDivider 自选项之间分割样式

    dividerHeight 用于设置分割线的高度

    groupIndicator 这个属性是用于控制父项前面的小箭头用的,如果想要用自己的图片替换掉那个箭头可以这样写:
    1.android:groupIndicator="@drawable/indicator"

    indicator.xml

    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:state_expanded="true" android:drawable="@drawable/open"/>
        <item android:drawable="@drawable/close"/>
    </selector>
    

    indicatorLeft 箭头或者自己设置的图片的左边框距离手机左边边缘的距离,类似于marginLeft

    indicatorStart 箭头或者自己设置的图片的左边框距离手机左边边缘的距离,类似于marginLeft

    indicatorRight和indicatorEnd 暂时还用不上,因为箭头一般在列表的左边,使用方法应该和上面两个方法差不多

    childIndicator 用于设置子项前显示的图标,不设置的话默认是没有图标的

    相关文章

      网友评论

          本文标题:二级列表ExpandableListView

          本文链接:https://www.haomeiwen.com/subject/bxtvlctx.html