TabLayout和viewpager的完美结合

我们在应用viewpager的时候，经常会使用TabPageIndicator来与其配合。达到很漂亮的效果。但是TabPageIndicator是第三方的，而且比较老了，当然了现在很多大神都已经开始自己写TabPageIndicator来满足自己的需求，在2015年的google大会上，google发布了新的Android Support Design库，里面包含了几个新的控件，其中就有一个TabLayout，它就可以完成TabPageIndicator的效果，而且还是官方的，最好的是它可以兼容到2.2以上版本，包括2.2。下面我就举一个简单的例子来使用它。

 我使用的 android studio进行开发的，所以引用TabLayout很简单，只要在build.gradle中加compile'com.android.support:design:26.0.0-alpha1'即可。

1.布局

xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    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" tools:context="com.bwie.skn.tablayout.MainActivity">

    <android.support.design.widget.TabLayout
        android:id="@+id/tl"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        app:tabGravity="center"
        app:tabIndicatorColor="@color/colorAccent"
        app:tabMode="scrollable"
        app:tabTextColor="@color/colorPrimary"
        >android.support.design.widget.TabLayout>
    <android.support.v4.view.ViewPager
        android:id="@+id/vp"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/tl"
        >android.support.v4.view.ViewPager>

RelativeLayout>

2.代码

package com.bwie.skn.moni.indent;

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

import com.bwie.skn.moni.R;

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

public class IndentListActivity extends AppCompatActivity {
    private TabLayout tl;
    private ViewPager vp;
    private List datas = new ArrayList();
    private String[] status = new String[]{"4","0","1","2"};
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_indent_list);

        tl = (TabLayout) findViewById(R.id.tl);
        vp = (ViewPager) findViewById(R.id.vp);

        datas.add("全部");
        datas.add("待支付");
        datas.add("已支付");
        datas.add("已取消");

        vp.setAdapter(new MyAdapter(getSupportFragmentManager()));
        //进行关联
        tl.setupWithViewPager(vp);
    }

    class MyAdapter extends FragmentPagerAdapter {
        //带参的构造方法
        public MyAdapter(FragmentManager fm) {
            super(fm);
        }
        @Override
        public int getCount() {
            return datas.size();
        }

        //返回选项卡的文本 ，，，添加选项卡
        @Override
        public CharSequence getPageTitle(int position) {
            return datas.get(position);
        }

        @Override
        public Fragment getItem(int position) {
            //创建fragment对象并返回
            Bundle bundle = new Bundle();
            Log.e("UUUUU",status[position]);
            bundle.putString("url", status[position]);
            //实例化Fragment
            AllFragment allFragment = new AllFragment();
            allFragment.setArguments(bundle);
            return allFragment;
        }
    }


}

3.fragment中接收

Bundle bundle = getArguments();
        String urlTitle = bundle.getString("url").toString();

///垂直的

//需要导入依赖

compile 'q.rorbin:VerticalTabLayout:1.2.5'

//布局文件

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"
    android:orientation="horizontal">


    
    <q.rorbin.verticaltablayout.VerticalTabLayout
        android:id="@+id/vt"
        android:layout_width="100dp"
        android:layout_height="match_parent" />

    <android.support.v4.view.ViewPager
        android:id="@+id/vp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

LinearLayout>