GridView结合tablayout实现展开收缩功能

原创

cMusketeer

发布于 2018-04-15 16:14:20

3K8

文章被收录于专栏：Android机器圈

PS：最近有一些粉丝给我留言说怎么实现那种上面多个item，然后可以展开收缩，当点击了item后下方会出现一些数据，而且item对应多个型号，我当时看到这也就明白了他的意思，我上个图大家就明白了，这是腾讯云文章里的一个，这是网页端的，意思一样，就不再上移动端的图了

然后点击上面的按钮下方会有相应的文章出现，这个就是展开收缩功能，所谓item对应的型号可以这样理解，当点击了上面的item分类后，如车，那么下方就要出现适合该车的轮胎，对应多个厂家的轮胎，就用tablayout来实现，这里我写的效果图界面很丑，但功能是可以的。由于上传大小有限，只能压缩小了，但是不清楚了，抱歉。

实现步骤：

布局文件创建（由于上面图不是很清楚，这里就把全部布局代码）
自定义适配器
tablayout的使用，gridview折叠展开，并且调出数据

1：布局文件创建

这里需要注意的是TabLayout，要添加依赖
    compile 'com.android.support:design:25.3.1'

里面一个GridView，一个tablayout，一个listview

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:layout_height="match_parent">
    <TextView
        android:id="@+id/id_title_show"
        android:layout_width="match_parent"
        android:layout_height="70px"
        android:gravity="center_vertical"
        android:text="当前分类为:"/>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

    <GridView
        android:id="@+id/id_gridview"
        android:layout_width="0dp"
        android:numColumns="4"
        android:visibility="gone"
        android:layout_height="wrap_content"
        android:layout_weight="0.8">

    </GridView>
    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="0.2"
        android:id="@+id/id_btn"
        android:text="展开"/>

    </LinearLayout>
   <android.support.design.widget.TabLayout
       android:layout_width="match_parent"
       android:layout_height="wrap_content"

       android:id="@+id/id_tablayout"></android.support.design.widget.TabLayout>
    <ListView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/id_gl_lv"></ListView>
</LinearLayout>

2：自定义适配器

这里的groupitem是我写的适配器item的布局，里面只要一个textview，这里就略。

package com.gridview;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.TextView;

import java.util.List;

import mus.cn.expandablelistviewdemo.R;

public class MyGVAdapter extends BaseAdapter {
    public List<String> list;
    public Context context;

    public MyGVAdapter(Context context, List<String> list) {
        this.context = context;
        this.list = list;
    }

    @Override
    public int getCount() {
        return list.size();
    }

    @Override
    public Object getItem(int position) {
        return list.get(position);
    }

    @Override
    public long getItemId(int position) {
        return position;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {


        convertView=LayoutInflater.from(context).inflate(R.layout.groupitem,null);
        TextView tv1= (TextView) convertView.findViewById(R.id.id_group_tv);
        tv1.setText(""+list.get(position));



        return convertView;
    }
}

3：tablayout的使用，gridview折叠展开，并且调出数据

实现展开收缩的方法可能有很多，今天这个方法个人感觉还是简单易懂的，就是获取到全部数据，然后再定义个只现实的listRow用来存放显示的数据，咱们是一行四列，所以，需要在全部数据中拿出前四个数据，放在list中，然后通过适配器把list传进去显示，当点击展开按钮时，再去除全部数据放在listRow中，同时调用myGVAdapter.notifyDataSetChanged();这里也可以直接把listDataAll传进去，但传进去还要再new一个适配器，这就不如直接notifyDataSetChanged（）了。


 public List<String> listDataAll = new ArrayList<>();//全部数据
 public List<String> listRow = new ArrayList<>();//显示数据        
        for (int i = 0; i < 13; i++) {
            listDataAll.add("汽修厂" + i + "");
        }

        for (int i = 0; i < 4; i++) {

            listRow.add(listDataAll.get(i));
        }

        gv.setVisibility(View.VISIBLE);
        myGVAdapter = new MyGVAdapter(this, listRow);
        gv.setAdapter(myGVAdapter);
               
        public boolean FLAG = false;//默认关闭
        //btn点击事件
        btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                listRow.clear();
//                myGVAdapter=new MyGVAdapter(GridViewHide.this,listDataAll);
//                gv.setAdapter(myGVAdapter);
                if (!FLAG) {
                    for (int i = 0; i < listDataAll.size(); i++) {
                        listRow.add(listDataAll.get(i));
                    }
                    myGVAdapter.notifyDataSetChanged();
                    FLAG = true;
                    btn.setText("收缩");
                } else {
                    for (int i = 0; i < 4; i++) {
                        listRow.add(listDataAll.get(i));
                    }
                    myGVAdapter.notifyDataSetChanged();
                    FLAG = false;
                }

            }
        });

到这里GridView就已经可以展开和收缩了。下面是关联tablayout，先添加tablayout一些信息，具体代码有注释，一定要定义两个获取ID 的变量，这样子才会知道用户点击了什么。

//定义在方法外
         public List<String> listS = new ArrayList<>();//显示tablayout下listview数据
    public static int carID = 0;//点击tabID
    public static int gvID = 0; //点击GVID。
  
    
  //方法里：      
    //一开始listS为空，直接添加上，没有数据就不显示。
     myGVAdapter2 = new MyGVAdapter(this, listS);
        gllv.setAdapter(myGVAdapter2);
     
     
     
     //tab可滚动
        tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
        //tab居中显示
        tabLayout.setTabGravity(TabLayout.GRAVITY_CENTER);
        //tab的字体选择器,默认黑色,选择时红色
        tabLayout.setTabTextColors(Color.BLACK, Color.RED);
        //tab的下划线颜色,默认是粉红色
        tabLayout.setSelectedTabIndicatorColor(Color.BLUE);

        for (int i = 0; i < 20; i++) {
            //添加tab
            tabLayout.addTab(tabLayout.newTab().setText("TAB" + i));
        }
        tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                Toast.makeText(GridViewHide.this, tab.getPosition() + "/" + tab.getText(), Toast.LENGTH_SHORT).show();
                carID = tab.getPosition();
                dataShow(carID,gvID);//配合GridView调出数据

            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {

            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
        });        
        
        
        //GV点击ID 事件，同时设置title显示第几个分类
         gv.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                Toast.makeText(GridViewHide.this, "" + listRow.get(position), Toast.LENGTH_SHORT).show();
                showTV.setText("当前分类为:" + listRow.get(position));
                gvID=position;
                dataShow(carID,gvID);
            }
        });

写到这里，就已经GV和tablayout关联起来了，因为他们都调用了dataShow()方法。

myGVAdapter2.notifyDataSetChanged();这里只通知listview就可以了，GV通知要在btn（展开收缩按钮）中添加。

public void dataShow(int c,int  fenlei){
        listS.clear();

        for (int i = 0; i < 10; i++) {
            listS.add("车型" + carID + "-----" + showTV.getText() + "------i");
        }
        myGVAdapter2.notifyDataSetChanged();
    }

完。

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

android

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

android

登录后参与评论

0 条评论

热度