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

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

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

实现步骤:

  1. 布局文件创建(由于上面图不是很清楚,这里就把全部布局代码)
  2. 自定义适配器
  3. 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();
    }

完。

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Android中高级开发

Android开发之漫漫长途 Ⅲ——Activity的显示之Window和View(2)

该文章是一个系列文章,是本人在Android开发的漫漫长途上的一点感想和记录,我会尽量按照先易后难的顺序进行编写该系列。该系列引用了《Android开发艺术探索...

1153
来自专栏何俊林

Android View框架总结(一)

View和Activity的区别 View有哪些? ViewGroup是什么? 为什么Google产生ViewGroup? View的层级结构是什么? View...

1875
来自专栏Android点滴积累

Android 7.0 PopupWindow 又引入新的问题,Google工程师也不够仔细么

Android7.0 PopupWindow的兼容问题 Android7.0 中对 PopupWindow 这个常用的控件又做了一些改动,修复了以前遗留的一些...

26310
来自专栏Android干货园

Android动态加载布局

版权声明:本文为博主原创文章,转载请标明出处。 https://blog.csdn.net/lyhhj/article/details/48...

1342
来自专栏自动化测试实战

Appium定位 5 ——xpath

3205
来自专栏图像识别与深度学习

《Android》Lesson05-Intent1

1196
来自专栏刘望舒

Android 屏幕适配从未如此简单

一个月前看了今日头条新的屏幕适配方案,对此不禁拍案叫绝,为此我想把这种方案融入到我工具类中直接一行代码即可适配,如今最新 1.18.0 版 AndroidUti...

1182
来自专栏Android干货

安卓开发_慕课网_百度地图_实现模式转换

4148
来自专栏codelang

打造万能的EmptyLayout

1402
来自专栏分享达人秀

AdapterViewFlipper轻松完成图片轮播

上一期学习了ExpandableListView的使用,你已经掌握了吗?本期开始学习AdapterViewFilpper的使用。 一、认识Adapter...

2345

扫码关注云+社区