Android进阶——Material Design新控件之TabLayout制作可滚动的Tabs页面（二）

最新推荐文章于 2024-06-27 22:16:57 发布
最新推荐文章于 2024-06-27 22:16:57 发布
阅读量5.2k 收藏 1
点赞数
分类专栏： Android 进阶 # Android Material Design 文章标签： android ViewPager TabLayout Tab 滚动
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CrazyMo_/article/details/51997817
版权

文章大纲

引言

上一篇总结讲解了下TabLayout的基本特点、属性和简单的应用步骤，相信大家已经对于TabLayout已经不再陌生，这篇就结合Fragment+ViewPager的架构开发一个主流App的主要框架，进一步学习下TabLayout的操作和监听，同时分享一些注意事项和非常见错误的处理方案，系列文章链接：

一、使用TabLayout的项目配置

要使用android.support.design.widget.TabLayout ，需要在自己的工程项目中引入Android的两个库android.support.design.widget.TabLayout在Android扩展（extras）支持（support）包design中，但是design又依赖另外一个support v7包中的appcompat库，因此需要事先导入。Android Studio的添加依赖库很简单，我只需要在我们Module的build.gradle脚本文件中添加如下的（PS:这是使用Android Studio1.4开发的，如果你还使用着Eclipse那么第一步你应该换成Android Studio）

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:support-v4:23.1.1'
    compile 'com.android.support:appcompat-v7:23.1.1'
    compile 'com.android.support:design:23.1.1'
}

二、结合ViewPager+Fragment打造绚丽的Tabs切换页面

1、首先，还是定义MainActivity的主布局和Fragment对应的布局（略）

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical">
    <android.support.design.widget.TabLayout
        android:id="@+id/id_tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabMode="scrollable"
        app:tabGravity="center"
        />
    <android.support.v4.view.ViewPager
        android:id="@+id/id_viewPager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="#ffffff"
        />
</LinearLayout>

2、然后初始化ViewPagerAdapter和ViewPager

private ViewPagerAdapter mAdapter;
private List<Fragment> mFragments=new ArrayList<Fragment>();
//初始化ViewPagerAdapter
MainFragment mainTab = new MainFragment();
DiscoveryFragment discTab = new DiscoveryFragment();
Tab3Fragment tab3Fragment=new Tab3Fragment();
Tab4Fragment tab4Fragment=new Tab4Fragment();
Tab5Fragment tab5Fragment=new Tab5Fragment();
Tab6Fragment tab6Fragment=new Tab6Fragment();

mFragments.add(mainTab);
mFragments.add(discTab);
mFragments.add(tab3Fragment);
mFragments.add(tab4Fragment);
mFragments.add(tab5Fragment);
mFragments.add(tab6Fragment);
//初始化ViewPager
mAdapter=new ViewPagerAdapter(getSupportFragmentManager());
mViewPager.setAdapter(mAdapter);

private class ViewPagerAdapter extends FragmentStatePagerAdapter{

        public ViewPagerAdapter(FragmentManager fm) {
            super(fm);
        }
        @Override
        public Fragment getItem(int position) {
            return mFragments.get(position);
        }
        @Override
        public int getCount() {
            return mFragments.size();
        }
        @Override
        public CharSequence getPageTitle(int position) {
            return mTabTitles[position];
        }
    }

3、接着，初始化TabLayout，包括设置一些属性和添加Tab

private static String[] mTabTitles={"Tab1","Tab2","Tab3","Tab4","Tab5","Tab6"};

mTabLayout.setTabMode(TabLayout.MODE_FIXED);
mTabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
mTabLayout.setBackgroundColor(Color.parseColor("#2b2b2b"));
mTabLayout.setTabTextColors(Color.parseColor("#236f28"), Color.parseColor("#bc6e1c"));mTabLayout.addTab(mTabLayout.newTab().setText(mTabTitles[0]));
mTabLayout.addTab(mTabLayout.newTab().setText(mTabTitles[1]));
mTabLayout.addTab(mTabLayout.newTab().setText(mTabTitles[2]));
mTabLayout.addTab(mTabLayout.newTab().setText(mTabTitles[3]));
mTabLayout.addTab(mTabLayout.newTab().setText(mTabTitles[4]));
mTabLayout.addTab(mTabLayout.newTab().setText(mTabTitles[5]));

4、再把ViewPager和TabLayout管理起来

mTabLayout.setupWithViewPager(mViewPager);//mViewPager必须非null

5、再把ViewPager的适配器设置到TabLayout上

mTabLayout.setTabsFromPagerAdapter(mAdapter);

6、设置Tab事件监听

//设置Tab监听
        mTabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                Log.d("TAG","Selected Tab Index为："+tab.getPosition());
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
                Log.d("TAG","Unselected Tab Index为："+tab.getPosition());
            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {
                Log.d("TAG","Reselected Tab Index为："+tab.getPosition());
            }
        });

7、完整MainActivity的实现

package com.crazymo.tablayoutviewpager;

import android.graphics.Color;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;

import java.util.ArrayList;
import java.util.List;


public class MainActivity extends AppCompatActivity {
    private TabLayout mTabLayout;
    private ViewPager mViewPager;
    private ViewPagerAdapter mAdapter;
    private List<Fragment> mFragments = new ArrayList<Fragment>();
    private static String[] mTabTitles = {"Tab1", "Tab2", "Tab3", "Tab4", "Tab5", "Tab6"};

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

    //初始化
    private void init() {
        getView();
        initTab();
    }

    //找到View
    private void getView() {
        mTabLayout = (TabLayout) findViewById(R.id.id_tabLayout);
        mViewPager = (ViewPager) findViewById(R.id.id_viewPager);
    }

    //初始化Tab
    private void initTab() {
        MainFragment mainTab = new MainFragment();
        DiscoveryFragment discTab = new DiscoveryFragment();
        Tab3Fragment tab3Fragment = new Tab3Fragment();
        Tab4Fragment tab4Fragment = new Tab4Fragment();
        Tab5Fragment tab5Fragment = new Tab5Fragment();
        Tab6Fragment tab6Fragment = new Tab6Fragment();

        mFragments.add(mainTab);
        mFragments.add(discTab);
        mFragments.add(tab3Fragment);
        mFragments.add(tab4Fragment);
        mFragments.add(tab5Fragment);
        mFragments.add(tab6Fragment);
        //设置TabLayout的一系列属性
        mTabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
        mTabLayout.setBackgroundColor(Color.parseColor("#2b2b2b"));
        mTabLayout.setTabTextColors(Color.parseColor("#236f28"), Color.parseColor("#bc6e1c"));
        mTabLayout.addTab(mTabLayout.newTab().setText(mTabTitles[0]));
        mTabLayout.addTab(mTabLayout.newTab().setText(mTabTitles[1]));
        mTabLayout.addTab(mTabLayout.newTab().setText(mTabTitles[2]));
        mTabLayout.addTab(mTabLayout.newTab().setText(mTabTitles[3]));
        mTabLayout.addTab(mTabLayout.newTab().setText(mTabTitles[4]));
        mTabLayout.addTab(mTabLayout.newTab().setText(mTabTitles[5]));

        mAdapter = new ViewPagerAdapter(getSupportFragmentManager());
        mViewPager.setAdapter(mAdapter);
        mTabLayout.setupWithViewPager(mViewPager);
        mTabLayout.setTabsFromPagerAdapter(mAdapter);

        //设置Tab监听
        mTabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                Log.e("TAG", "Selected Tab Index为：" + tab.getPosition());
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
                Log.e("TAG", "Unselected Tab Index为：" + tab.getPosition());
            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {
                Log.e("TAG", "Reselected Tab Index为：" + tab.getPosition());
            }
        });


    }

    private class ViewPagerAdapter extends FragmentStatePagerAdapter {

        public ViewPagerAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int position) {
            Log.e("TAG", "获取的Fragement的索引值为：" + position);
            return mFragments.get(position);
        }

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

        @Override
        public CharSequence getPageTitle(int position) {
            Log.e("TAG", "返回Tab的标题");
            return mTabTitles[position];
        }
    }
}

三、 运行结果

1、初始化进入到主界面时

这里写图片描述
说明ViewPagerAdapter被执行了两次
这里写图片描述

2、 滑动TAB1到TAB2时

仅仅触发的是Tab事件，TAB2到TAB3也是如此。
这里写图片描述

3、 往回滑动TAB3到TAB2时

仅仅触发的是Tab事件，TAB3返回TAB2也是如此。
这里写图片描述
按主页键之后再返回也并未触发任何Tab或者ViewPagerAdapter事件，并且还是返回到原来选中的页面。
这里写图片描述

四、TabLayout的不常见错误及处理方案

1、提示res下某些属性找不到

在导入库过程中，如果某些res目录下的value值过高比如value-23（Android SDK 23）但不巧发生错误如提示说找不到某某值，可以整个删除掉，或者打开SDK下载最新的相关库

2、java.lang.NoClassDefFoundError:android.support.v7.internal.widget.TintManager

发生这个或者类似的，包里的某个类找不到，一般都是因为冲突了，解决办法之一就是，统一使用支持包的版本比如：

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:support-v4:23.1.1'
    compile 'com.android.support:appcompat-v7:23.1.1'
    compile 'com.android.support:design:23.1.1'
}

如果还不行就把该工程引入的library moudule的 suppor v4 v7t的版本也改成一致的

3、空指针异常

参照上一篇初始TabLayout的那两个方法的非空声明去排查。

public void setupWithViewPager(@NonNull ViewPager viewPager)	//设置与ViewPager关联起来，注：不允许传递空的ViewPager，否则会异常

public void setTabsFromPagerAdapter(@NonNull PagerAdapter adapter)//设置TabLayout的适配器，注：不允许传递空的PagerAdapter，否则会异常

小结

Android Material Design 滑动指示选项卡TabLayout，就是当用户在该TabLayout的选项卡子item中选择触摸时候，文字和下方的指示器横条滑动指示。最后附上完整demo免费下载。

CrazyMo_
关注
专栏目录
tablayout 滚动模式_scrollview+tablayout实现联动
weixin_29201313的博客
12-24 543
一、需求：项目开发中的需求，需要scrollview和tablayout实现联动：1、点击tablayout的tab，scrollview滑动到指定的位置2、scrollview滑动到某位置时tablayout切换到对应的tab效果如下：效果.gif二、开始撸代码布局文件：xmlns:app="http://schemas.android.com/apk/res-auto"android:layo...
Android Material Design控件之TabLayout
Happy的博客
12-08 835
tablayout、tablayout基本使用、tablayout设置图片和文字、tablayout设置自定义视图
Material Design风格动画效果Tabs选项卡特效
06-09
这是一款基于jQuery+CSS3实现的Material Design风格Tabs动画选项卡特效，蓝色扁平风格网页标签选项卡动画切换代码。
Android Material Design 实践(四)--MaterialTabs
04-16 141
MaterialTabs 介绍：https://github.com/neokree/MaterialTabs   效果图： Fixed and Scrollable tabs. With text tabs [1 - 3] Fixed Tabs [4 - ∞] Scrollable Tabs With icon tabs [1 - 5] Fixed Tabs [6 - ∞...
【Android】Material TabLayout使用详解
天天向上 Up Up Up (*^▽^*)
06-27 431
这样padding就无效果了，所以设置padding时，要给定一个最小宽度。TabItem可以设置text，icon，layout三个属性。其它属性都通过TabLayout来统一设置。未指定宽度时，TabItem会使用默认宽度。
Material Design之TabLayout
leigo
05-04 848
提供一个水平方向标签栏。 TabLayout tabLayout = ...; tabLayout.addTab(tabLayout.newTab().setText("Tab 1")); tabLayout.addTab(tabLayout.newTab().setText("Tab 2")); tabLayout.addTab(tabLayout.newTab().setText("Ta
vue2+viewDesign实现tabs动态增减
qq_39203889的博客
11-29 1229
vue2&viewDesign Tabs背景准备工作备用组件导航组件delete tab完 背景 上次写了个vue3+element-ui版本的，其实已经够用了，不过闲来无事就想琢磨一下，弄了一个vue2+viewDesign的实现，原理差不多。 准备工作 备用组件 准备几个备用的用来切换的组件，如下： <!-- 第一个组件 --> <template> <div>组件一</div> </template> <!-- 第二个组件 -
Android Material Design控件 --TabLayout 使用demo
12-04
首先，TabLayout是Android支持库中的一个控件，它是Material Design设计风格的一部分，主要用于展示多个页面或视图，每个页面通常对应一个Tab。TabLayout可以方便地与ViewPager配合使用，实现滑动切换不同Tab内容的...
Android Material Design 系列之 TabLayout + ViewPager + Fragment 使用详解
一名互联网时代苟且偷生的 Android码农
06-20 4801
前言 本文是 Material Design 系列第三篇：TabLayout + ViewPager + Fragment 基本使用，Material Design 所有控件属于高级 UI，所以 Material Design 控件是中高级工程师必备技能。现在市面上很多主流界面效果都是采用 Material Design 风格控件完成。希望博主 Material Design 系列文章对各位初学者有所帮助，也为自己学习做详细笔记。 一、TabLayout 方法介绍 1、addTab（TabLayout.T
Android控件-TabLayout使用介绍
热门推荐
csdnxia的博客
05-08 6万+
TabLayout简述简单示例属性介绍tabIndicatorFullWidthtabRippleColortabTextAppearancetabModetabIndicatorColortabIndicatorHeighttabIndicatorGravity 简述 TabLayout是Android support中的一个控件android.support.design.widget.Tab...
Android用TabLayout实现类似网易选项卡动态滑动效果
圆静居士的专栏
11-11 1392
此前我们用HorizontalScrollView也实现了类似网易选项卡动态滑动效果，详见 Android选项卡动态滑动效果这篇文章 这里我们用TabLayout来实现这一效果。TabLayout是Android Design Support Library库中的控件。 Google在2015的IO大会上，给我们带来了更加详细的Material Design设计规范，同时，也给我们带来了全
com.google.android.material.tabs.TabLayout 选择tab 加粗字体加大
01-03
引用: https://blog.csdn.net/qq_34906385/article/details/93524163 app:tabIndicatorColor ：指示线的颜色 app:tabIndicatorHeight ： 指示线的高度 app:tabIndicatorFullWidth=false 指示线是否铺满宽度 app:tabSelectedTextColor ： tab选中时的字体颜色 app:tabTextColor=@color/colorPrimary ：未选中字体颜色 app:tabBackground=color ： 整个tablayout颜色
AndroidStudio-Tablayout滑动TAb
10-21
AndroidStudio-Tablayout滑动TAb Android Material Design控件 TabLayout的用法 ---
com.google.android.material.tabs.TabLayout自定义Item布局
ms
06-28 1896
TabLayout 自定义Item布局
android ------ AndroidX的 Tablayout（com.google.android.material.tabs.TabLayout） 的使用
切切歆语的博客
11-04 1万+
前面呢，有写过TabLayout的博客，最近开发用到了AndroidX来解决前面的问题，不要工具类设置下划线的问题了，来总结一下 Android--------TabLayout实现新闻客户端顶部导航栏 Android中Tablayout设置下划线宽度 和 dp和px之间进行相互转换 AndroidX效果图 首先添加依赖： 以前...
Android的Tab控件（一）
lhp1331的专栏
02-14 5292
Tab控件即标签页，可以在一页中切换显示n页内容，要使用此效果，需要用到TabHost和Tabwidget类。 Tab控件具有两种实现过程，一是在同一个Activity中切换显示不同的标签页，二是每个标签页都由独立的Activity实现。我们首先用第二种方法来实现。 新建一个TabHostActivity，它继承自TabActivity， public class TabHostAc
Android tab切换控件
abliudede的博客
02-09 1554
基于viewpager，实现了可以点击tab，可页面左右滑动，tab变化，tab下标动画等。   分为四个部分：   第一个FragTabsViewPager，让您想要实现的页面继承它。 package com.base; import java.util.List; import com.shennongshi.dingdong.R; import com.third.widget.P
Android中实现可滑动的Tab的3种方式
hongkonglife的专栏
06-18 672
1. 第一种，使用 TabHost + ViewPager 实现 该方法会有一个Bug，当设置tabHost.setCurrentTab()为0时，ViewPager不显示（准确的说是加载），只有点击其他任意一个tab后才会加载。 有解的同学吼一声~~~~~~~ Activity: 复制代码 代码如下: package com.swordy.demo.android.fr
android studio com.google.android.material.tabs.TabLayout的所有设置参数
最新发布
09-15
`TabLayout` 是 Android Material Design 中用于创建标签页布局的组件。在 Android Studio 中使用 `com.google.android.material.tabs.TabLayout` 时，可以设置一系列参数来调整其外观和行为。以下是一些常用参数： 1. `app:tabMode`：设置标签页的模式，可以是 `fixed` 或 `scrollable`。`fixed` 模式下所有标签页宽度相同，而 `scrollable` 模式允许标签页根据内容宽度自动调整，超出屏幕宽度的标签页可以通过滚动查看。 2. `app:tabGravity`：设置标签页的对齐方式，可选值有 `fill` 和 `center`。`fill` 值会使得标签页均匀分布填充整个 `TabLayout`，而 `center` 值则会使得标签页居中显示。 3. `app:tabIndicatorColor`：设置标签页指示器的颜色。 4. `app:tabIndicatorHeight`：设置标签页指示器的高度。 5. `app:tabTextAppearance`：设置标签页文本的外观，可以通过引用一个文本样式来改变字体大小、颜色等。 6. `app:tabSelectedTextColor`：设置被选中的标签页文本的颜色。 7. `app:tabTextColor`：设置未被选中的标签页文本的颜色。 8. `app:tabBackground`：设置标签页的背景。 9. `app:tabPaddingStart` 和 `app:tabPaddingEnd`：设置标签页内容的左右内边距。 10. `app:tabMaxWidth`：设置标签页最大宽度。 11. `app:tabMinWidth`：设置标签页最小宽度。 12. `app:tabIndicatorAnimationDuration`：设置标签页指示器动画的持续时间。 13. `app:tabIndicatorFullWidth`：设置标签页指示器是否应该延伸到整个 `TabLayout` 的宽度。 这些参数可以通过 XML 属性设置，也可以在 Java/Kotlin 代码中通过编程方式设置。在 XML 布局文件中使用 `TabLayout` 时，通常是这样的： ```xml <com.google.android.material.tabs.TabLayout android:id="@+id/tabLayout" android:layout_width="match_parent" android:layout_height="wrap_content" app:tabMode="fixed" app:tabGravity="fill" app:tabIndicatorColor="#FF0000" app:tabIndicatorHeight="4dp" app:tabTextAppearance="@style/MyCustomTabText" ... /> ``` 在代码中设置参数，例如： ```java TabLayout tabLayout = findViewById(R.id.tabLayout); tabLayout.setTabMode(TabLayout.MODE_FIXED); tabLayout.setTabGravity(TabLayout.GRAVITY_FILL); tabLayout.setSelectedTabIndicatorColor(Color.RED); tabLayout.setTabIndicatorHeight(4); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

CrazyMo_

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值