谷歌TabLayout及FlycoTabLayout三方库入门

一、简介

谷歌在 2014 年 I/O 大会上重磅推出了一套全新的界面设计语言 Material Design ，用于解决 Android 平台界面风格不统一的问题，并且亲力亲为从 Android 5.0 系统开始将自家所有内置应用统一使用 Material Design 风格进行设计。

但由于缺少相关 API 支持，作为开发者实现起来难度较大。于是，谷歌在 2015 年 I/O 大会上又推出了 Design Support 库，将最具代表性的控件和效果进行了封装，使得开发者在即使不了解 Material Design 的情况下也能轻松将自己的应用 Material 化。TabLayout 便是 Design Support 库中的一个全新控件。

TabLayout 允许开发者将标签指示器（Tab）与其对应的页面（一般为ViewPager）进行关联，达到切换标签指示器的同时，与它关联的页面也会跟着一起滑动的效果。如下图所示：

TabLayout + ViewPager + Fragment

二、TabLaout 单独使用

因为 TabLaout 位于 Design Support 库中，所以想要使用 TabLaout ，第一步便是在 app 的 build gradle 中引入 Design Support 库：

dependencies {
    ......
    implementation 'com.android.support:design:28.0.0-rc02'
}

编写 xml 布局：

编写对应Java代码

public class MainActivity extends AppCompatActivity {
    private TabLayout mTabLayout;

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

        mTabLayout = findViewById(R.id.tl_main);
        addTabToTabLayout();
    }

    /**
     * Description：给TabLayout添加tab，Tab.setIcon()方法可以给Tab添加图片
     */
    private void addTabToTabLayout() {
        String []mTitles = {"未支付账单", "支付中账单", "历史账单"};
        for (int i = 0; i < mTitles.length; i++) {
            mTabLayout.addTab(mTabLayout.newTab().setText(mTitles[i]));            
//          mTabLayout.addTab(mTabLayout.newTab().setText(mTitles[i]).setIcon(R.mipmap.ic_launcher));
        }
    }
}

效果图如下：

未使用 setIcon() 的 Tab

使用了 setIcon() 的 Tab

注意：
TabLayout 没有直接提供设置 Tab 内字体大小的属性，需要通过 styles.xml 文件自定义一个 style 样式设置给 tabTextAppearance ，从而达到改变字体大小的目的。代码如下图所示：

对应的 style 代码如下所示：

另外，当 TabLayout 的 tabMode 设置为 fixed 时，如果字体大小设置过大，会导致 Tab 显示异常，如下图：

Tab显示异常

解决办法可以通过适当缩减字体大小或者设置 tabMode 为 scrollable 。

三、TabLayout 结合 ViewPager 与 Fragment

TabLayout 单独使用的场景很少，它真正的强大之处在于可以结合 ViewPager 与 Fragment 共同使用，编写出精美的可滑动页面，常见于各种新闻、视频客户端。所以接下来就开始学习 TabLayout + ViewPager + Fragment 的使用吧。

编写 xml 布局：
在 TabLayout 下面放入一个 ViewPager 作为 Fragment 的容器。

编写对应 Java 代码：
先上 Activity 代码，较为简单，不做过多解释。

public class MainActivity extends AppCompatActivity {
    private TabLayout mTabLayout;
    private String [] mTitles = {"未支付账单", "支付中账单", "历史账单"};
    private MyFragmentPagerAdapter mAdapter;
    private ViewPager mViewPager;

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

        mTabLayout = findViewById(R.id.tl_main);
        mViewPager = findViewById(R.id.vp_main);

        addTabToTabLayout();
        setupWithViewPager();
    }

    /**
     * Description：给TabLayout添加tab
     */
    private void addTabToTabLayout() {
        for (int i = 0; i < mTitles.length; i++) {
            mTabLayout.addTab(mTabLayout.newTab().setText(mTitles[i]));
        }
    }

    /**
     * Description：初始化FragmentPagerAdapter适配器并给ViewPager设置上该适配器，最后关联TabLayout和ViewPager
     */
    private void setupWithViewPager() {
        List mFragments = new ArrayList<>();
        mFragments.add(new FirstFragment());
        mFragments.add(new SecondFragment());
        mFragments.add(new ThirdFragment());

        mAdapter = new MyFragmentPagerAdapter(getSupportFragmentManager());
        mAdapter.addTitlesAndFragments(mTitles, mFragments);

        mViewPager.setAdapter(mAdapter); // 给ViewPager设置适配器
        mTabLayout.setupWithViewPager(mViewPager); //关联TabLayout和ViewPager
    }
}

然后是 ViewPager 的适配器代码。

public class MyFragmentPagerAdapter extends FragmentPagerAdapter {
    private String []titles;
    private List fragments;

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

    @Override
    public Fragment getItem(int i) {
        return fragments.get(i);
    }

    @Override
    public int getCount() {
        return titles.length;
    }

    @Nullable
    @Override
    public CharSequence getPageTitle(int position) {
        return titles[position];
    }

    //自定义一个添加title和fragment的方法，供Activity使用
    public void addTitlesAndFragments(String []titles, List fragments) {
        this.titles = titles;
        this.fragments = fragments;
    }
}

最后是 Fragment 代码，较为简单，这里只贴出三个 Fragment 中的一个，对应的布局请随意，略过。

public class FirstFragment extends Fragment {
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View mView = inflater.inflate(R.layout.layout_fragment_first, null);
        return mView;
    }
}

最终效果图如下：

TabLayout + ViewPager + Fragment

四、TabLayout 第三方库 —— FlycoTabLayout

有时候官方 TabLayout 并不能满足实际开发需求，如想要改变 TabLayout 指示器的宽度，甚至设置指示器宽度和 Tab 内文字宽度一致，就会很麻烦，需要通过反射拿到 TabLayout 内的 TextView 对象并测量其宽度，最后通过 LayoutParams 设置给 TabLayout 。所以，各种第三方 TabLayout 库应运而生。

这里本人种草一波 FlycoTabLayout 库，该库集成了三种 TabLayout ，不同场景和需求下使用不同的库，可以高效且优雅地完成开发中各种五花八门的需求。该库功能强大，使用起来却又相当简单，你甚至不需要写 ViewPager 的适配器，仅一行代码就能关联 TabLayout 和 ViewPager 。想了解更多关于该库的介绍可以移步 github ，附上 github 地址：

https://github.com/H07000223/FlycoTabLayout

话不多说，接下来开始实践。

在 app 的 build gradle 中引入 FlycoTabLayout 库：

dependencies {
    ......
    implementation 'com.flyco.tablayout:FlycoTabLayout_Lib:2.1.2@aar'
}

编写 xml 布局：
这里我使用了 FlycoTabLayout 库其中的 SlidingTabLayout ，实现 Tab 内指示器宽度与文本宽度一样的效果。
同时可以看出，SlidingTabLayout 提供了专门的属性设置文本的字体大小，不用再像使用 TabLayout 时编写 style 属性了。

编写 Java 代码：
在 Activity 内的使用就更简单了，真正实现一行代码解决问题，专治懒癌晚期患者。

public class MainActivity extends AppCompatActivity {
    private ViewPager mViewPager;
    private SlidingTabLayout slidingTabLayout;
    private ArrayList mFragments;;

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

        slidingTabLayout = findViewById(R.id.stl_main);
        mViewPager = findViewById(R.id.vp_main);
        mFragments = new ArrayList<>();
        mFragments.add(new FirstFragment());
        mFragments.add(new SecondFragment());
        mFragments.add(new ThirdFragment());
//      无需编写适配器，一行代码关联TabLayout与ViewPager
        slidingTabLayout.setViewPager(mViewPager, new String[]{"未支付账单", "支付中账单", "历史账单"}, this, mFragments);
    }
}

最终效果：

SlidingTabLayout实现指示器与文本宽度一致

至此，关于 TabLayout 与 SlidingTabLayout 的简单使用就结束了。撒花！

谷歌TabLayout及FlycoTabLayout三方库入门

一、简介

二、TabLaout 单独使用

三、TabLayout 结合 ViewPager 与 Fragment

四、TabLayout 第三方库 —— FlycoTabLayout

你可能感兴趣的:(谷歌TabLayout及FlycoTabLayout三方库入门)