ExpandableListView控件实现二级列表,解决嵌套ScrollView二级菜单不显示问题

效果图如下:

二级列表附有点击事件。

1、布局文件:

此处加了一个自定义的导航RelativeLayout,记得注activity的时候添加 android:theme="@style/Theme.AppCompat.Light.NoActionBar" 去掉自带的导航。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="@dimen/dimen_55"
        android:background="@color/main_title"
        >
        <TextView
            android:layout_centerVertical="true"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="取消"
            android:textColor="@color/white"
            android:textSize="@dimen/dimen_18"
            android:layout_marginLeft="@dimen/dimen_13"
            android:onClick="goBack"
            />
        <TextView
            android:layout_centerVertical="true"
            android:layout_centerHorizontal="true"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="安卓二级列表"
            android:textColor="@color/white"
            android:textSize="@dimen/dimen_18"/>
    </RelativeLayout>

    <!--二级菜单-->
    <ExpandableListView
        android:id="@+id/expandableListView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    </ExpandableListView>

</LinearLayout>

2、一级列表布局:

ImageView是用来自定义打开闭合图标的(不自定义也可以,箭头会默认在最左边),建议自己用一个ImageView控件来控制上下箭头。图标可以去阿里巴巴矢量图上下载。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal" android:layout_width="match_parent"
    android:layout_height="wrap_content">
<!--一级列表 item布局-->

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <TextView
            android:id="@+id/tv_group"
            android:layout_width="wrap_content"
            android:layout_height="30dp"
            android:gravity="center"
            android:text="group text"
            />
        <ImageView
            android:id="@+id/iv_group"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:layout_marginRight="@dimen/dimen_20"
            android:layout_width="20dp"
            android:layout_height="20dp" />
    </RelativeLayout>
    
</LinearLayout>

3、二级列表布局:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal" android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center">
<!--二级列表 item布局-->

    <ImageView
        android:id="@+id/iv_child"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:src="@mipmap/ic_launcher" />
    <TextView
        android:id="@+id/tv_child"
        android:layout_marginLeft="@dimen/dimen_20"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="item text" />
    
</LinearLayout>

4、activity代码:

private ExpandableListView expandableListView;

    //一级列表数据源
    private String[] groups = {"软件设计", "数据库技术", "操作系统"};
    //二级列表数据源
    private String[][] childs={{"架构设计","面向对象","设计模式","领域驱动设计"},{"SQL Server","Oracle","MySql", "Dameng "},{"Linux","Windows","嵌入式"}};


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_expandable_listview);

        initView();
    }
    private void initView() {
        expandableListView = (ExpandableListView)findViewById(R.id.expandableListView);
        //#TODO 去掉自带箭头,在一级列表中动态添加
        expandableListView.setGroupIndicator(null);
        expandableListView.setAdapter(new MyExpandableListView());
            
    }
    public void goBack(View view) {
        finish();
    }

5、ExpandableListView适配器:

继承自BaseExpandableListAdapter,重写ExpandableListAdapter中的10个方法
class MyExpandableListView extends BaseExpandableListAdapter {

        /*一级列表个数*/
        @Override
        public int getGroupCount() {
            return groups.length;
        }

        /*每个二级列表的个数*/
        @Override
        public int getChildrenCount(int groupPosition) {
            return childs[groupPosition].length;
        }

        /*一级列表中单个item*/
        @Override
        public Object getGroup(int groupPosition) {
            return groups[groupPosition];
        }

        /*二级列表中单个item*/
        @Override
        public Object getChild(int groupPosition, int childPosition) {
            return childs[groupPosition][childPosition];
        }

        @Override
        public long getGroupId(int groupPosition) {
            return groupPosition;
        }

        @Override
        public long getChildId(int groupPosition, int childPosition) {
            return childPosition;
        }

        /*每个item的id是否固定,一般为true*/
        @Override
        public boolean hasStableIds() {
            return true;
        }

        /*#TODO 填充一级列表
        * isExpanded 是否已经展开
        * */
        @Override
        public View getGroupView(int groupPosition, boolean isExpanded, View convertView, ViewGroup parent) {
            if (convertView == null) {
                convertView = getLayoutInflater().inflate(R.layout.list_item_expandablelistview,null);
            }
            TextView tv_group = (TextView) convertView.findViewById(R.id.tv_group);
            ImageView iv_group = (ImageView) convertView.findViewById(R.id.iv_group);
            tv_group.setText(groups[groupPosition]);
            //控制是否展开图标
            if (isExpanded) {
                iv_group.setImageResource(R.drawable.expand_iv_up);
            } else {
                iv_group.setImageResource(R.drawable.expand_iv_down);
            }
            return convertView;
        }

        /*#TODO 填充二级列表*/
        @Override
        public View getChildView(int groupPosition, int childPosition, boolean isLastChild, View convertView, ViewGroup parent) {
            if (convertView == null) {
                convertView = getLayoutInflater().inflate(R.layout.list_item_expandablelistview_child,null);
            }
            ImageView image = (ImageView) convertView.findViewById(R.id.iv_child);
            TextView tv = (TextView) convertView.findViewById(R.id.tv_child);
            tv.setText(childs[groupPosition][childPosition]);
            return convertView;
        }

        /*二级列表中每个能否被选中,如果有点击事件一定要设为true*/
        @Override
        public boolean isChildSelectable(int groupPosition, int childPosition) {
            return true;
        }


    }

到这里基本就完成了,最后再配置一下每个二级列表的点击事件即可:

expandableListView.setOnChildClickListener(new ExpandableListView.OnChildClickListener() {
            @Override
            public boolean onChildClick(ExpandableListView parent, View v, int groupPosition, int childPosition, long id) {
                TextView childAt = (TextView)((LinearLayout) v).getChildAt(1);//获得点击列表中TextView的值,需要强转一下,否则找不到getChildAt方法
                Toast.makeText(ExpandableListViewActivity.this, "点击了 "+childAt.getText()+" 列表", Toast.LENGTH_SHORT).show(); 
                return true; 
             } 
 });

设置默认全部展开

  int groupCount = expandableListView.getCount();

  for (int i=0; i<groupCount; i++) {
     expandableListView.expandGroup(i);
 };

ExpandableListView如果嵌套在ScrollView中则二级菜单不显示,需要重新写ExpandableListView

public class NestedExpandaleListView extends ExpandableListView {
    public NestedExpandaleListView(Context context, AttributeSet attrs){
        super(context,attrs);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

        int expandSpec = MeasureSpec.makeMeasureSpec(Integer.MAX_VALUE >> 2,

                MeasureSpec.AT_MOST);

        //将重新计算的高度传递回去
        super.onMeasure(widthMeasureSpec, expandSpec);
    }
}

猜你喜欢

转载自blog.csdn.net/weixin_42325340/article/details/81111619