(转)仿CSDN客户端首页(一)----TabLayout实现选项卡滑动效果

原地址：http://blog.csdn.net/tyk0910/article/details/51395064

实际开发中，ViewPager经常结合Fragment来使用，然后再使用三方开源的PagerSlidingTabStrip去实现类似选项卡滑动效果。我之前那个APP的首页就是这样搭建的。 
基于Material Design设计的分享文字图片的APP

现在，我们可以和这种方式说拜拜了。先看效果图： 

可以随意添加标题，可以修改标题与指示器样式，可以快速滑动选择标题。和当前主流APP的首页效果还是很像的。而这一切，只需要今天的主角—-TabLayout来帮你搞定即可。

Google在2015的IO大会上，给我们带来了Material Design设计规范，同时，也给我们带来了全新的Android Design Support Library，在这个support库里面，给我们提供了更加规范的MD设计风格的控件。最重要的是，Android Design Support Library的兼容性更广，直接可以向下兼容到Android 2.2。TabLayout是Android Design Support Library库中的控件。

来看看怎么使用：

1.准备工作： 
在build.gradle加入如下代码：

    compile 'com.android.support:design:22.2.0'
    compile 'com.android.support:appcompat-v7:22.2.0'
 
 
1
2

2.布局文件：

    <android.support.design.widget.TabLayout
        android:id="@+id/tab"
        android:layout_width="match_parent"
        android:layout_height="50dp">
    </android.support.design.widget.TabLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/white" />
 
 
1
2
3
4
5
6
7
8
9
10
11

上面是我们的TabLayout，其中属性配置在后面会进行设置，下面就是熟悉的viewpager

3.代码实现：

public class TabLayoutActivity extends AppCompatActivity {


    private TabLayout tab;
    private ViewPager viewpager;
    private TabAdapter adapter;
    public static final String[] tabTitle = new String[]{"综艺", "体育", "新闻", "热点", "头条", "军事", "历史", "科技", "人文", "地理"};

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

    private void initviews() {
        tab = (TabLayout) findViewById(R.id.tab);
        viewpager = (ViewPager) findViewById(R.id.viewpager);

        List<Fragment> fragments = new ArrayList<>();
        for (int i = 0; i < tabTitle.length; i++) {
            fragments.add(TabLayoutFragment.newInstance(i + 1));
        }
        adapter = new TabAdapter(getSupportFragmentManager(), fragments);
        //给ViewPager设置适配器
        viewpager.setAdapter(adapter);
        //将TabLayout和ViewPager关联起来。
        tab.setupWithViewPager(viewpager);
        //设置可以滑动
        tab.setTabMode(TabLayout.MODE_SCROLLABLE);
    }


}
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

准备好taTitle数组，适配器，然后给Viewpager设置适配器，将TabLayout和ViewPager关联起来，最后就是设置tab可以滑动，不然标题太多，会挤满上方屏幕。再来看看Adapter的代码：

public class TabAdapter extends FragmentPagerAdapter {

    private List<Fragment> fragments;


    public TabAdapter(FragmentManager fm, List<Fragment> fragments) {
        super(fm);
        this.fragments = fragments;
    }


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

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

    //设置tablayout标题
    @Override
    public CharSequence getPageTitle(int position) {
        return TabLayoutActivity.tabTitle[position];

    }
}
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

记得加上设置tablayout这个方法。接下来就是fragment的代码了：

/**
 * Created by tangyangkai on 16/5/12.
 */
public class TabLayoutFragment extends Fragment {
    public static String TABLAYOUT_FRAGMENT = "tab_fragment";
    private TextView txt;
    private int type;

    public static TabLayoutFragment newInstance(int type) {
        TabLayoutFragment fragment = new TabLayoutFragment();
        Bundle bundle = new Bundle();
        bundle.putSerializable(TABLAYOUT_FRAGMENT, type);
        fragment.setArguments(bundle);
        return fragment;
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        if (getArguments() != null) {
            type = (int) getArguments().getSerializable(TABLAYOUT_FRAGMENT);
        }

    }


    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_tablayout, container, false);
        initView(view);
        return view;
    }


    protected void initView(View view) {
        txt = (TextView) view.findViewById(R.id.tab_txt);


        switch (type) {
            case 1:
                txt.setText("这是综艺Fragment");
                break;
            case 2:
                txt.setText("这是体育Fragment");
                break;
            case 3:
                txt.setText("这是新闻Fragment");
                break;
            case 4:
                txt.setText("这是热点Fragment");
                break;
            case 5:
                txt.setText("这是头条Fragment");
                break;
            case 6:
                txt.setText("这是军事Fragment");
                break;
            case 7:
                txt.setText("这是历史Fragment");
                break;
            case 8:
                txt.setText("这是科技Fragment");
                break;
            case 9:
                txt.setText("这是人文Fragment");
                break;
            case 10:
                txt.setText("这是地理Fragment");
                break;
        }


    }

}
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76

关于使用setArguments()来创建Fragment，这种方法在上一篇博客里面着重给大家推荐了

从BaseActivity与BaseFragment的封装谈起

这里我们再一次看到了其中的好处，就是fragment的复用。根据传递过来的不同参数，显示不同的界面。TabLayout非常适合那种界面相差不大的，就像CSDN客户端首页，都是显示技术类文章，只是分类不一样而已。

当然，你要是说，要是我这些界面差异很大怎么办，没问题：

  List<Fragment> fragments = new ArrayList<>();
        for (int i = 0; i < tabTitle.length; i++) {
            fragments.add(TabLayoutFragment.newInstance(i + 1));
        }
 
 
1
2
3
4

我在这里放进不同的fragment即可。原则就是：相似的我就复用，不一样的我就新增

图示效果是默认样式的，要是想修改一下文字，指示器样式咋办，很简单：

官方的 TabLayout 没有提供修改 TextView size 的方法，可以新建一个 style CustomTabLayoutTextAppearance 继承 TextAppearance.AppCompat.Widget.ActionBar.Title.Inverse ，然后增加 item 再设置 android:textSize 为你想设置的大小。

 <style name="MyTabLayoutTextAppearanceInverse" parent="TextAppearance.AppCompat.Widget.ActionBar.Title.Inverse">
        <item name="android:textSize">20sp</item>
    </style>
 
 
1
2
3

XML文件中使用：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    app:tabTextAppearance="@style/MyTabLayoutTextAppearanceInverse"
    tools:context="com.example.tangyangkai.testdemo.TabLayoutActivity">


    <android.support.design.widget.TabLayout
        android:id="@+id/tab"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        app:tabSelectedTextColor="@color/colorAccent"
      app:tabTextAppearance="@style/MyTabLayoutTextAppearanceInverse"
        app:tabTextColor="@color/colorPrimary"
        app:tabIndicatorColor="@color/colorAccent">

    </android.support.design.widget.TabLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/white" />

</LinearLayout>
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

依次是设置选中字体颜色，大小，正常颜色，以及指示器的颜色，看完改完的效果： 

纯属演示，大家可以自己设置自己喜欢的风格。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~分割线

无意间看到别的APP的首页，好多好看的效果。果断去github了一把，果然找到了。

上图： 

给大家链接地址：

https://github.com/H07000223/FlycoTabLayout

感兴趣的可以研究研究。

收工！！！又到周五啦，大家周末愉快