Android 实现仿QQ分组实现二级菜单展示

喜欢ヅ旅行 2021-11-05 13:46 353阅读 0赞

**首先展示下要实现的效果**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NDQ3J1bm5lcg_size_16_color_FFFFFF_t_70]  
动态查看请看链接[https://recordit.co/GHjVH9WMz6][https_recordit.co_GHjVH9WMz6]

**1.首先要定义item,也就是二级展示的item**

**child\_item.xml**

<?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout
        android:id="@+id/list_friend"
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    
        <com.makeramen.roundedimageview.RoundedImageView xmlns:app="http://schemas.android.com/apk/res-auto"
            android:id="@+id/iv"
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:gravity="center_horizontal"
            android:src="#000000"
            app:riv_border_color="#333333"
            app:riv_border_width="3dip"
            app:riv_corner_radius="10dip"
            app:riv_mutate_background="true"
            app:riv_oval="true" />
    
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:layout_toRightOf="@id/iv"
            android:orientation="vertical">
    
            <TextView
                android:id="@+id/friendname"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="好友1"
                android:textColor="#000000"
                android:textSize="30dp" />
    
            <TextView
                android:id="@+id/motto"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="这是好友1的签名"
                android:textColor="#000000"
                android:textSize="20dp" />
    
        </LinearLayout>
    </RelativeLayout>

效果如下图所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NDQ3J1bm5lcg_size_16_color_FFFFFF_t_70 1]  
2. **其次,设置分组item**  
**groupitem.xml**

<?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp">
    
        <ImageView
            android:id="@+id/triangle_right"
            android:layout_width="20dp"
            android:layout_height="40dp"
            android:layout_alignParentLeft="true"
            android:background="@drawable/triangle_right" />
    
        <TextView
            android:id="@+id/headtext"
            android:layout_width="match_parent"
            android:layout_height="40dp"
            android:layout_toLeftOf="@+id/online_people_num"
            android:layout_toRightOf="@+id/triangle_right"
            android:background="#E9E9E9"
            android:text="我的好友"
            android:textSize="25dp" />
    
        <TextView
            android:id="@+id/online_people_num"
            android:layout_width="60dp"
            android:layout_height="40dp"
            android:layout_alignParentRight="true"
            android:layout_marginRight="10dp"
            android:gravity="center_horizontal|center_vertical"
            android:text="0/15"
            android:textColor="#000000" />
    </RelativeLayout>

效果下图所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NDQ3J1bm5lcg_size_16_color_FFFFFF_t_70 2]  
**3. 创建相应的数据对象  
添加分组父菜单Group**

**Group.class**

package com.example.m1.QQGroup;
    
    public class Group {
        private int mGroupImage;
        private String mGroupName; //分组名
        private String mGroupNum; //分组人数
        private boolean isDown;
    
        public Group(int mGroupImage, String mGroupName, String mGroupNum) {
            this.mGroupImage = mGroupImage;
            this.mGroupName = mGroupName;
            this.mGroupNum = mGroupNum;
        }
    
        public Group() {
            this.isDown = false;
        }
    
        public void changeDownStatus(){
            isDown = !isDown;
        }
    
        public boolean isDown() {
            return isDown;
        }
    
        public void setDown(boolean down) {
            isDown = down;
        }
    
        public int getmGroupImage() {
            return mGroupImage;
        }
    
        public void setmGroupImage(int mGroupImage) {
            this.mGroupImage = mGroupImage;
        }
    
        public String getmGroupName() {
            return mGroupName;
        }
    
        public void setmGroupName(String mGroupName) {
            this.mGroupName = mGroupName;
        }
    
        public String getmGroupNum() {
            return mGroupNum;
        }
    
        public void setmGroupNum(String mGroupNum) {
            this.mGroupNum = mGroupNum;
        }
    }

**4. 添加子菜单Item**  
**Item.class**

package com.example.m1.QQGroup;
    
    public class Item {
        private String mName;//人名
        private String mMotto; //签名
        private int mPhoto; //头像
    
        public Item() {
    
        }
    
        public Item(String mName, String mMotto) {
            this.mName = mName;
            this.mMotto = mMotto;
    
        }
    
        public Item(String mName, String mMotto, int mPhoto) {
            this.mName = mName;
            this.mMotto = mMotto;
            this.mPhoto = mPhoto;
        }
    
        public String getmName() {
            return mName;
        }
    
        public void setmName(String mName) {
            this.mName = mName;
        }
    
        public String getmMotto() {
            return mMotto;
        }
    
        public void setmMotto(String mMotto) {
            this.mMotto = mMotto;
        }
    
        public int getmPhoto() {
            return mPhoto;
        }
    
        public void setmPhoto(int mPhoto) {
            this.mPhoto = mPhoto;
        }
    }

**5. 添加适配器**

**MyBaseExpandableListAdapter.class**

package com.example.m1.QQGroup;
    
    import android.content.Context;
    import android.util.Log;
    import android.view.LayoutInflater;
    import android.view.View;
    import android.view.ViewGroup;
    import android.widget.BaseExpandableListAdapter;
    import android.widget.ImageView;
    import android.widget.TextView;
    
    import com.example.m1.R;
    
    import java.util.ArrayList;
    
    public class MyBaseExpandableListAdapter extends BaseExpandableListAdapter {
    
        private ArrayList<Group> gData; //分组
        private  ArrayList<ArrayList<Item>> iData; //长链表
        private Context mContext;
    
        public MyBaseExpandableListAdapter(ArrayList<Group> gData, ArrayList<ArrayList<Item>> iData, Context mContext) {
            this.gData = gData;
            this.iData = iData;
            this.mContext = mContext;
        }
    
        @Override
        public int getGroupCount() {
            return gData.size();
        }
    
        @Override
        public int getChildrenCount(int i) {
            return iData.get(i).size();
        }
    
        @Override
        public Object getGroup(int i) {
            return gData.get(i);
        }
    
        @Override
        public Object getChild(int i, int i1) {
            return iData.get(i).get(i1);
        }
    
        @Override
        public long getGroupId(int i) {
            return i;
        }
    
        @Override
        public long getChildId(int i, int i1) {
            return i1;
        }
    
        @Override
        public boolean hasStableIds() {
            return false;
        }
    
        /**
         * 取得用于显示给定分组的视图，这个方法仅返回分组的试图对象
         * @param i
         * @param b
         * @param view
         * @param viewGroup
         * @return
         */
        @Override
        public View getGroupView(final int i, boolean b, View view, final ViewGroup viewGroup) {
            final ViewHolderGroup groupHolder;
            if (view == null){
                view = LayoutInflater.from(mContext).inflate(R.layout.groupitem,viewGroup,false);
                groupHolder = new ViewHolderGroup();
                groupHolder.mGroupImage = view.findViewById(R.id.triangle_right);
                groupHolder.mGroupName = view.findViewById(R.id.headtext);
                groupHolder.mGroupNum = view.findViewById(R.id.online_people_num);
                view.setTag(groupHolder);
            }else{
                groupHolder = (ViewHolderGroup) view.getTag();
            }
            //groupHolder.mGroupImage.setImageResource(gData.get(i).getmGroupImage());
            Log.d("gData",gData.get(i).getmGroupImage()+"");
            Log.d("gData",gData.get(i).getmGroupName()+"");
            groupHolder.mGroupName.setText(gData.get(i).getmGroupName());
            groupHolder.mGroupNum.setText(gData.get(i).getmGroupNum());
    
            return view;
        }
    
        @Override
        public View getChildView(int i, int i1, boolean b, View view, ViewGroup viewGroup) {
            ViewHolderItem itemHolder;
            if (view == null){
                view = LayoutInflater.from(mContext).inflate(R.layout.child_item,viewGroup,false);
                itemHolder = new ViewHolderItem();
                itemHolder.mPhoto = view.findViewById(R.id.iv);
                itemHolder.mMotto = view.findViewById(R.id.motto);
                itemHolder.mName = view.findViewById(R.id.friendname);
                view.setTag(itemHolder);
            }else{
                itemHolder = (ViewHolderItem) view.getTag();
            }
    
            itemHolder.mPhoto.setImageResource(iData.get(i).get(i1).getmPhoto());
            itemHolder.mName.setText(iData.get(i).get(i1).getmName());
            itemHolder.mMotto.setText(iData.get(i).get(i1).getmMotto());
            return view;
        }
    
        /**
         * 设置子列表是否可以选中
         * @param i
         * @param i1
         * @return
         */
        @Override
        public boolean isChildSelectable(int i, int i1) {
            return true;
        }
    
        private static class  ViewHolderGroup{
            private ImageView mGroupImage;
            private TextView mGroupName; //分组名
            private TextView mGroupNum; //分组人数
            private boolean isDown;
    
            public ViewHolderGroup() {
                isDown = false;
            }
        }
        private  static class ViewHolderItem{
            private TextView mName;//人名
            private TextView mMotto; //签名
            private ImageView mPhoto; //头像
        }
    }

**6. Main5Activity中填充数据**  
**Main5Activity.class**

package com.example.m1.QQGroup;
    
    import android.content.Context;
    import android.os.Bundle;
    import android.support.v7.app.AppCompatActivity;
    import android.view.View;
    import android.widget.ExpandableListView;
    import android.widget.Toast;
    
    import com.example.m1.R;
    
    import java.util.ArrayList;
    
    public class Main5Activity extends AppCompatActivity {
    
        private ArrayList<Group> gData = null; //存储所有的分组信息
        private ArrayList<ArrayList<Item>> iData = null; //每个分组的子信息
        private ArrayList<Item> lData = null;
        private Context mContext;
        private ExpandableListView mQQlist;
        private MyBaseExpandableListAdapter myAdapter = null;
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main5);
            mContext = Main5Activity.this;
            mQQlist = findViewById(R.id.QQList);
            //数据准备
            gData = new ArrayList<Group>();
            iData = new ArrayList<ArrayList<Item>>();
            gData.add(new Group(R.drawable.triangle_right,"小学同学","1/7"));
            gData.add(new Group(R.drawable.triangle_right,"初中同学","2/7"));
            gData.add(new Group(R.drawable.triangle_down,"高中同学","3/7"));
            gData.add(new Group(R.drawable.triangle_right,"大学同学","4/7"));
    
            lData =new ArrayList<Item>();
    
            //小学组
            lData.add(new Item("朋友1","有志者事竟成",R.drawable.f015));
            lData.add(new Item("朋友2","有志者事竟成",R.drawable.f015));
            lData.add(new Item("朋友3","有志者事竟成",R.drawable.f015));
            lData.add(new Item("朋友4","有志者事竟成",R.drawable.f040));
            lData.add(new Item("朋友5","有志者事竟成",R.drawable.f015));
            lData.add(new Item("朋友6","有志者事竟成",R.drawable.f015));
            lData.add(new Item("朋友7","有志者事竟成",R.drawable.f040));
            iData.add(lData);
            //初中组
            lData =new ArrayList<Item>();
            lData.add(new Item("朋友1","我爱你，不是说说而已",R.drawable.f015));
            lData.add(new Item("朋友2","我爱你，不是说说而已",R.drawable.f015));
            lData.add(new Item("朋友3","我爱你，不是说说而已",R.drawable.f040));
            lData.add(new Item("朋友4","我爱你，不是说说而已",R.drawable.f015));
            lData.add(new Item("朋友5","我爱你，不是说说而已",R.drawable.f040));
            lData.add(new Item("朋友6","我爱你，不是说说而已",R.drawable.f015));
            lData.add(new Item("朋友7","我爱你，不是说说而已",R.drawable.f040));
            iData.add(lData);
            //高中组
            lData =new ArrayList<Item>();
            lData.add(new Item("朋友1","为赋新词强说愁",R.drawable.f015));
            lData.add(new Item("朋友2","为赋新词强说愁",R.drawable.f040));
            lData.add(new Item("朋友3","为赋新词强说愁",R.drawable.f015));
            lData.add(new Item("朋友4","为赋新词强说愁",R.drawable.f040));
            lData.add(new Item("朋友5","为赋新词强说愁",R.drawable.f015));
            lData.add(new Item("朋友6","为赋新词强说愁",R.drawable.f040));
            lData.add(new Item("朋友7","为赋新词强说愁",R.drawable.f015));
            iData.add(lData);
            //大学组
            lData =new ArrayList<Item>();
            lData.add(new Item("朋友1","I love you ",R.drawable.f015));
            lData.add(new Item("朋友2","I love you ",R.drawable.f015));
            lData.add(new Item("朋友3","I love you ",R.drawable.f040));
            lData.add(new Item("朋友4","I love you ",R.drawable.f015));
            lData.add(new Item("朋友5","I love you ",R.drawable.f040));
            lData.add(new Item("朋友6","I love you ",R.drawable.f015));
            lData.add(new Item("朋友7","I love you ",R.drawable.f015));
            iData.add(lData);
            myAdapter = new MyBaseExpandableListAdapter(gData,iData,mContext);
            mQQlist.setAdapter(myAdapter);
    
            mQQlist.setOnChildClickListener(new ExpandableListView.OnChildClickListener() {
                @Override
                public boolean onChildClick(ExpandableListView parent, View v, int groupPosition, int childPosition, long id) {
                    Toast.makeText(mContext, "你点击了：" + iData.get(groupPosition).get(childPosition).getmName(), Toast.LENGTH_SHORT).show();
                    return true;
                }
            });
    
        }
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NDQ3J1bm5lcg_size_16_color_FFFFFF_t_70]: /images/20211105/517219c6fe584259a40224a991ee1d17.png
[https_recordit.co_GHjVH9WMz6]: https://recordit.co/GHjVH9WMz6
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NDQ3J1bm5lcg_size_16_color_FFFFFF_t_70 1]: /images/20211105/b31d0e6f13f344dd99b00eeabeb1a033.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NDQ3J1bm5lcg_size_16_color_FFFFFF_t_70 2]: /images/20211105/88c9850cb5664f76853957bccb62f178.png