「Android」Material Design--TabLayout+Fragment+ViewPager实现切换选项卡

众所周知，Google从Android5.x之后就推出了Material Design材料设计，其中很多新的控件的确是造福码农，但感觉在国内这类设计并没被大规模的应用，所以个人也一直没在项目中具体用过。最近正好有一个项目，本身适用的设备就是5.0x以上的系统，所以打算小试一下。

如下，有一页面：

效果图.png

这类页面很常见，网上也有很多方法来实现，比如radioGroup+ViewPager,或者用开源库：PageSlidingTabStrip+ViewPagerIndicator 都可以，但比较起来，Material Design中的TabLayout实现起来就更Easy了（当然对于我第一次吃的人来说，还是被夹了几下）面我们就一步步的来：
首先分析下，选项卡背景是一个圆角矩形的框，页面内容是一个ViewPager嵌套Fragment，选项卡的两个tab会随着ViewPager的切换变换背景颜色和字体颜色，大致就这些要点。ok,分析完之后，就开始动手吧。
首先来一个圆角矩形背景框：
shape_tab_round_bg.xml:

再来一个选中效果的背景：
shape_tab_selected.xml

继续来个未选中的背景：

ok,各种背景准备好了,先放一边，接下来实现整个布局：activity_main.xml:

这些弄完之后，我们就可以在Activity当中使用了：

package com.izen;

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

/**
 * Created by izen on 2017/01/05.
 *
 */
public class MainActivity extends AppCompatActivity {
    private ViewPager viewPager;
    private TabLayout tabLayout;
    private Fragment1 fragment1;
    private Fragment2 fragment2;
    public static final String[] titles = {"扫码", "支付码"};

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

    void initView() {
        tabLayout = (TabLayout) findViewById(R.id.izen_tablayout);
        viewPager = (ViewPager) findViewById(R.id.pay_viewpager);
        viewPager.setAdapter(new FragmentStatePagerAdapter(getSupportFragmentManager()) {
            @Override
            public Fragment getItem(int position) {
                switch (position) {
                    case 0:
                        if (fragment1 == null) {
                            return new Fragment1();
                        }
                        break;
                    case 1:
                        if (fragment2 == null) {
                            return new Fragment2();
                        }
                        break;
                }
                return null;
            }

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

        viewPager.setCurrentItem(0);
        tabLayout.addTab(tabLayout.newTab());
        tabLayout.addTab(tabLayout.newTab());
        tabLayout.setupWithViewPager(viewPager);
        tabLayout.getTabAt(0).setText(titles[0]);
        tabLayout.getTabAt(1).setText(titles[1]);
        //设置选中和非选中的文字颜色
        tabLayout.setTabTextColors("0xffff5a60","0xffffffff");
    }
}

写到这里就莫名其妙地被夹了一下：最开始添加两个Tab的时候是这么写的：

tabLayout.addTab(tabLayout.newTab().setText(titles[0]));
tabLayout.addTab(tabLayout.newTab().setText(titles[1]));
tabLayout.setupWithViewPager(viewPager);

运行后发现Tab是有了 但是没有标题文字。。。好费解。。。然后百度一下，结果都提到了源码，这才想起去看源码（囧，不合格程序员。。哈哈），才发现真的是被夹的不冤枉：

Paste_Image.png

这里的removeAllTabs()；在赤裸裸的嘲笑你 你 你~~~没法干掉它，所以只能默默的回头修改下自己的代码：

tabLayout.setupWithViewPager(viewPager);
tabLayout.getTabAt(0).setText(titles[0]);
tabLayout.getTabAt(1).setText(titles[1]);

这时候在运行一下，文字标题就有了。。。
当然还没完，tab的文字颜色和字体大小以及单个tab在切换时候的背景颜色变化我们还没实现，这里其实也被夹到了，刚开始常规的思路想，这些变化我得在tab切换或者ViewPager切换时，在onSelected监听切换背景，改变颜色等等。但看源码（学乖了）发现单个tab并没有提供给我们设置背景颜色和文本颜色的方法。而TabLayout里却提供了一个方法：setTabTextColors(color1,color2),只需一行代码设置文本颜色变化：

//设置选中和非选中的文字颜色
tabLayout.setTabTextColors("0xffff5a60","0xffffffff");

so easy~~
而tab的背景颜色，貌似也只能通过设置tabLayout的style样式设置tabBackground的属性值来实现(如果有其他方法，请告知，谢谢~)：
样式如下：

最后，给TabLayout添加上面的样式：

完美de选项卡就实现了。怎么样，是不是比之前的方式简单多了呢，赶快试试吧~