通过Fragment + Viewpager+Gridview实现Android Tab切换菜单

最新推荐文章于 2024-06-26 22:15:00 发布
最新推荐文章于 2024-06-26 22:15:00 发布
阅读量1.5k 收藏 4
点赞数
分类专栏： android开发 文章标签： android viewpager tab切换
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gsj4719896/article/details/48395807
版权

通过Fragment + Viewpager+Gridview实现Android Tab切换菜单

写在前面：

Android Tab切换菜单的实现，网络上也有很多相关的博文
，按自己的代码习惯实现自己的Tab切换，写下此博文用于记录笔记。

代码实现：

实现效果图，不会录制动态图，将就着贴张静态图片。实现点击tab切换，手势切换。实现思路，采用Fragment+Viewpager+Gridview
这里写图片描述

1、tab项封装

/**
 * TAB项封装类
 * 
 * @author gaoshanjiang
 * 
 */
public class TabItem {
    /**
     * 名称
     */
    private String tabTitle;
    /**
     * 正常时图标
     */
    private int iconNormal;

    /**
     * 选中时图标
     */
    private int iconSelected;

    /**
     * 正常时的title文字颜色
     */
    private int titleColorNormal = Color.BLACK;
    /**
     * 选中时的title文字颜色
     */
    private int titleColorSelected = Color.GRAY;
    /**
     * title文字size
     */
    private int titleSize = 18;
    /**
     * 是否被选中
     */
    private boolean isSelected = false;

    public boolean isSelected() {
        return isSelected;
    }

    public void setSelected(boolean isSelected) {
        this.isSelected = isSelected;
    }

    public int getTitleSize() {
        return titleSize;
    }

    public void setTitleSize(int titleSize) {
        this.titleSize = titleSize;
    }

    public String getTabTitle() {
        return tabTitle;
    }

    public void setTabTitle(String tabTitle) {
        this.tabTitle = tabTitle;
    }

    public int getIconNormal() {
        return iconNormal;
    }

    public void setIconNormal(int iconNormal) {
        this.iconNormal = iconNormal;
    }

    public int getIconSelected() {
        return iconSelected;
    }

    public void setIconSelected(int iconSelected) {
        this.iconSelected = iconSelected;
    }

    public int getTitleColorNormal() {
        return titleColorNormal;
    }

    public void setTitleColorNormal(int titleColorNormal) {
        this.titleColorNormal = titleColorNormal;
    }

    public int getTitleColorSelected() {
        return titleColorSelected;
    }

    public void setTitleColorSelected(int titleColorSelected) {
        this.titleColorSelected = titleColorSelected;
    }

    public TabItem() {
    }

    @Override
    public String toString() {
        return "TabItem [tabTitle=" + tabTitle + ", iconNormal=" + iconNormal
                + ", iconSelected=" + iconSelected + ", titleColorNormal="
                + titleColorNormal + ", titleColorSelected="
                + titleColorSelected + ", titleSize=" + titleSize
                + ", isSelected=" + isSelected + "]";
    }

}

2、在这里将viewpager和底部的Tabbar封装一个LinearLayout中，屏蔽内部实现细节，提供外部设置fragment和TabItem的方法，使用起来就很简单了。

public class TabView extends LinearLayout implements OnItemClickListener,
        OnPageChangeListener {
    private LinearLayout tabMenuContainer;
    private ViewPager tabViewpaPager;
    private List<Fragment> tabFragments;
    private ViewPagerAdapter tabPagerAdapter;

    //tab项
    private List<TabItem> tabItems;
    private QuickAdapter<TabItem> tabItemAdapter;
    private GridView tabItemGridview;
    //选中的Tab
    private int currentSelectedTabIndex = 0;

    public TabView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context);
    }

    public TabView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public TabView(Context context) {
        this(context, null);
    }

    /**
     * 初始化
     * @param context
     */
    private void init(Context context) {
        tabFragments = new ArrayList<Fragment>();
        LayoutInflater.from(context).inflate(R.layout.tab_view_layout, this);
        tabMenuContainer = (LinearLayout) findViewById(R.id.tab_menu_container);
        tabViewpaPager = (ViewPager) findViewById(R.id.tab_viewpager);
        tabItemGridview = (GridView) findViewById(R.id.menu_gridview);
        tabItemGridview.setOnItemClickListener(this);
        tabViewpaPager.setOnPageChangeListener(this);
    }

    /**
     * 设置底部TabBar背景
     * @param resId
     */
    public void setTabBarBackgroud(int resId) {
        if (tabMenuContainer != null) {
            tabMenuContainer.setBackgroundResource(resId);
        }
    }

    /**
     * 设置Fragment
     * @param fm
     * @param fragments
     */
    public void addFragments(FragmentManager fm, List<Fragment> fragments) {
        this.tabFragments = fragments;
        tabPagerAdapter = new ViewPagerAdapter(fm, tabFragments);
        tabViewpaPager.setAdapter(tabPagerAdapter);
    }

    /**
     * 添加TabItems
     * @param tabItems
     */
    public void addTabItems(List<TabItem> tabItems) {
        if (tabItems == null) {
            return;
        }
        tabItemGridview.setNumColumns(tabItems.size());
        this.tabItems = tabItems;
        tabItemAdapter = new QuickAdapter<TabItem>(getContext(),
                R.layout.item_tab_view_layout, this.tabItems) {

            @Override
            protected void convert(BaseAdapterHelper helper, TabItem item) {
                helper.setText(R.id.tab_title, item.getTabTitle());
                helper.setTextColor(
                        R.id.tab_title,
                        item.isSelected() ? item.getTitleColorSelected() : item
                                .getTitleColorNormal());
                helper.setTextSize(R.id.tab_title, item.getTitleSize());
                helper.setImageResource(
                        R.id.tab_icon,
                        item.isSelected() ? item.getIconSelected() : item
                                .getIconNormal());
            }
        };
        tabItemGridview.setAdapter(tabItemAdapter);
        setCurrentItem(0);
    }

    /**
     * 选中Tab
     * @param index
     */
    public void setCurrentItem(int index) {
        if (index < 0) {
            return;
        }
        if (tabViewpaPager != null && tabViewpaPager.getChildCount() > 0
                && index < tabViewpaPager.getChildCount()) {
            tabViewpaPager.setCurrentItem(index);
        }
        if (tabItems != null && tabItems.size() > 0 && index < tabItems.size()) {
            if (currentSelectedTabIndex < tabItems.size()) {
                TabItem item = tabItems.get(currentSelectedTabIndex);
                item.setSelected(false);
            }
            if (index < tabItems.size()) {
                TabItem item = tabItems.get(index);
                item.setSelected(true);
                currentSelectedTabIndex = index;
            }
        }
        if (tabItemAdapter != null) {
            tabItemAdapter.notifyDataSetChanged();
        }
    }

    @Override
    public void onItemClick(AdapterView<?> parent, View view, int position,
            long id) {
        tabViewpaPager.setCurrentItem(position);
        setCurrentItem(position);
    }

    @Override
    public void onPageScrollStateChanged(int arg0) {

    }

    @Override
    public void onPageScrolled(int arg0, float arg1, int arg2) {

    }

    @Override
    public void onPageSelected(int position) {
        setCurrentItem(position);
    }

}

3、使用：
在布局文件中引用TabView，Activity中引用，添加Fragments和Tabitems

//添加Fragments
bottomTabView.addFragments(getSupportFragmentManager(), fragments);
//添加tab项
bottomTabView.addTabItems(tabItems);

布局文件activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <com.glibrary.ui.tab.TabView
        android:id="@+id/tabview"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</RelativeLayout>

activity中使用

public class MainActivity extends FragmentActivity {
    private TabView bottomTabView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        bottomTabView = (TabView) findViewById(R.id.tabview);
        //设置TabBar背景色
        bottomTabView.setTabBarBackgroud(android.R.color.darker_gray);


        List<Fragment> fragments = new ArrayList<Fragment>();
        for (int i = 0; i < 4; i++) {
            fragments.add(new MyFragment());
        }
        //添加Fragment
        bottomTabView.addFragments(getSupportFragmentManager(), fragments);

        List<TabItem> tabItems = new ArrayList<TabItem>();
        TabItem item1 = new TabItem();
        item1.setIconNormal(R.drawable.menu1_n);
        item1.setIconSelected(R.drawable.menu1_f);
        item1.setTitleColorNormal(Color.GRAY);
        item1.setTitleColorSelected(Color.RED);
        item1.setTabTitle("首页");

        TabItem item2 = new TabItem();
        item2.setIconNormal(R.drawable.menu2_n);
        item2.setIconSelected(R.drawable.menu2_f);
        item2.setTitleColorNormal(Color.GRAY);
        item2.setTitleColorSelected(Color.RED);
        item2.setTabTitle("音乐");

        TabItem item3 = new TabItem();
        item3.setIconNormal(R.drawable.menu3_n);
        item3.setIconSelected(R.drawable.menu3_f);
        item3.setTitleColorNormal(Color.GRAY);
        item3.setTitleColorSelected(Color.RED);
        item3.setTabTitle("发现");

        TabItem item4 = new TabItem();
        item4.setIconNormal(R.drawable.menu4_n);
        item4.setIconSelected(R.drawable.menu4_f);
        item4.setTitleColorNormal(Color.GRAY);
        item4.setTitleColorSelected(Color.RED);
        item4.setTabTitle("更多");
        tabItems.add(item1);
        tabItems.add(item2);
        tabItems.add(item3);
        tabItems.add(item4);
        //添加tab项
        bottomTabView.addTabItems(tabItems);
    }
}

可以看到activity中代码比较简单，给activity瘦身了。
代码已经经过测试，运行项目效果图如下：
这里写图片描述

代码中使用到的QuickAdapter出自开源代码：
https://github.com/JoanZapata/base-adapter-helper

Demo源码地址：
http://download.csdn.net/detail/gsj4719896/9101321

最后：
知道实现方法容易，形成文字有挑战，硬着头皮练习写吧。

GaoSJiang
关注
专栏目录
Android开发之复杂布局嵌套(ScrollView+TabLayout+ViewPager+RecyclerView)导致冲突的解决办法
黄庆庆的世界
03-28 1万+
前言 最近在做一些项目和毕业设计，所以自从上次梳理完数据结构之后，一直想写些什么，但是又没有比较好的内容，所以博客从过完年之后就停更了很长很长很长一段时间，不过这次在做项目的时候，正好遇到一个我本以为很简单，结果折腾了好久的一个问题，其实这个问题对于做Android开发的同学来说，并不陌生，那就是滑动布局的互相嵌套。 当然并不仅限于标题中写的这种嵌套，只要是可滑动的布局，例如GridView，各种...
利用fragment实现listview和gridview的切换
08-29
主要利用fragment实现listview和gridview的切换，两种视图的显示，通过此程序可以初步了解fragment的实现过程，fragment的生命周期与Activity类似，它可以看作是Activity的一个模块。 -----互相学习，互相进步。
android控制文件：ViewPager+Fragment+GridView使用（与AndroidQuery框架结合）
weixin_34408717的博客
07-06 93
最近我看到一个AndroidQuery该框架。里面Demo，有一个屏幕，让博主喜欢。很顺利的左右滑动，感觉非常好，所以拿来和大家分享一下。看看结果图。：从图中能够看出。上面的布局是一个Layout里面嵌套有个ViewPager，ViewPager中包括着Fragment，Fragment的布局文件包括了一个简单的GridView，GridView的Item布局非常easy。就是一个100*10...
Fragment与ViewModel（MVVM架构）
最新发布
m0_74225871的博客
06-26 1315
在Android应用开发中，Fragment和ViewModel是两个非常重要的概念，它们分别属于架构组件库的一部分，旨在帮助开发者构建更加模块化、健壮且易维护的应用。如果你的布局是要直接设置为 Activity 的根布局，通常使用第一种方法，因为不需要考虑容器问题。如果你的布局是要作为子布局添加到某个容器中（比如在 Fragment 或者自定义 View 中），那么你应该使用第二种方法，并且要确保参数设置正确，以便于控制布局是否应该被自动添加到容器中。在大多数情况下，Activity。
GridView+Fragment+ViewPager最佳实践
jxq1994的博客
10-31 2812
概述GridView是一种有效显示大量图片的列表容器，用法也跟ListView类似，它的布局是一个网格，一行可以有多个项，并且整个视图可以滚动，我们常见的应用有手机中的图库、launcher里面的应用列表、类似微信多张图片等，总的来说，ListView主要应用于单列多行的列表，然而GridView主要应用于多行多列的网状布局，它能够一次显示许多图片，同时即将被显示的图片会处于准备显示的状态。Grid
Android控件Gridview实现仿支付宝首页，Fragment底部按钮切换和登录圆形头像
12-21
此案例主要讲的是Android控件Gridview（九宫格）完美实现仿支付宝首页，包含添加和删除功能；Fragment底部按钮切换的效果，包含四个模块，登录页面圆形头像等，一个小项目的初始布局。
GridView Fragment
weixin_42535797的博客
07-01 377
package com.bawei.eplus.fragment; import android.os.Bundle; import android.support.annotation.Nullable; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.vie...
ViewPager + GridView实现GridView分页首页导航栏布局分页效果
11-22
在实现`ViewPager + GridView`的分页效果时，我们通常会为每个`ViewPager`页面创建一个单独的`Fragment`，并在`Fragment`中嵌入`GridView`。每个`Fragment`的`GridView`显示一部分数据，这样就实现了分页的效果。 ...
ViewPager中加载GridView实现日历
02-28
在Android开发中，有时我们需要创建一个用户友好的界面来展示数据，这时`ViewPager`和`GridView`结合使用就能实现高效且美观的效果。本教程将详细讲解如何在`ViewPager`中加载`GridView`来构建一个日历应用，实现...
ViewPager+GridView实现GridView左右滑动翻页，实时动态读取数据
11-09
这种结合使用`ViewPager`和`GridView`的方式，既实现了页面间的滑动切换，又保持了每个页面内部数据的灵活性，是Android应用中常见的布局设计。对于初学者来说，这是一次很好的实践机会，可以提升对这两类组件的理解...
Android 利用ViewPager+GridView，仿美团首页导航栏分类布局界面
08-15
首先，`ViewPager`是Android SDK中的一个强大组件，主要用于展示多个页面并允许用户通过滑动在这些页面之间切换。它通常用于实现类似轮播图或者tab切换的效果。在美团首页的场景中，`ViewPager`可以用来展示不同的...
动态添加fragment和gridview的item，仿UC的动态添加
12-11
仿UC得动态添加item。动态添加fragment，通过viewpager和fragment实现。
android viewPage+fragment+GridView
12-01
利用viewPage+fragment+GridView 实现 页面滑动，点击GridView的item控制父类控件
Fragment+ViewPager+GridView最佳实践
11-01
Fragment+ViewPager+GridView最佳实践，可以看看这篇博文~ http://blog.csdn.net/jxq1994/article/details/52984062
Android fragment+viewpager+gridview
01-05
一个activity里面嵌套了fragment，fragment里面含有多张page，一个page里面又包含多个gridview，gridview实现动态加载
tabLayout与ViewPager联动嵌套listView
11-07
tabLayout与Viewpager联动，通过fragment实现listview数据加载
（1）使用GridView和Fragment实现Tab效果
qq983742902的专栏
11-18 1318
在商业Android项目中，底部Tab界面效果使用的频率非常频繁，我就趁此，说说我开发底部Tab界面效果的思路。 我是使用GridView和Fragment实现Tab效果的 GridView一般用于表格视图的显示，Tab可以看成是只有一行的表格，GridView的高度设置为一行Tab的高度即可。列数设置为Tab的个数。 在此，将Tab抽象为一个TabMenu的抽象类，成员变量有：选中状态，选
Fragment+ViewPage+GridView结合使用
03-16 665
Fragment+ViewPage+GridView结合使用，GridView的每一子项可以点击。
Fragment微信布局，ListView GridView，Gson解析展示
程序小白
12-30 297
1.首先写好Fragment布局，写权重 &amp;lt;android.support.v4.view.ViewPager android:id=&quot;@+id/parg&quot; android:layout_width=&quot;match_parent&quot; android:layout_height=&quot;0dp&quot;
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值