Android中的TabbedView android tablayout viewpager

效果图

上方的指示器用到的就是TabLayout

下方是一个ViewPager

ViewPager内的数据为fragment

东西就这么多，先看下布局：

先看下如何引用TabLayout

布局的选择控件界面选择Design>TabLayout，需要添加这个依赖，之后就是布局的内容

<?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"
    tools:context="com.example.tablayoutdemo.MainActivity">

    <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/vp"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        >

    </android.support.v4.view.ViewPager>
</LinearLayout>

布局代码就两个控件，TabLayout 、ViewPager。
需要用到Fragment，接下来写我们的fragment

fragment代码

public class PagerFramgent extends android.support.v4.app.Fragment {
    private int a;

    /**
     * 创建一个静态实例化Fragment的方法
     * @param a 外界传入的值
     * @return
     */
    public static PagerFramgent newInstance(int a){
        PagerFramgent pf=new PagerFramgent();
       Bundle bundle= new Bundle();
        bundle.putInt("a",a);
        //向fragment中传值，使用此方法，不用使用有参构造方法
        pf.setArguments(bundle);
        return pf;
    }

    String tag=null;
    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //取出保存的值
        this.a=getArguments().getInt("a");
        //获取类名
        tag=this.getClass().getSimpleName();
        //log生命周期
        Log.e(tag,"onCreate");
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
       //加载一个布局，布局中只有一个textview
        View view=inflater.inflate(R.layout.fragment,container,false);
        TextView textView= (TextView) view.findViewById(R.id.textView);
        //设置文本，将传进来的值设置进去
        textView.setText(a+"");
        Log.e(tag,"onCreateView");
        return view;
    }

上面的就是普通的fragment的创建过程。
其它就挺简单的了，好了接下来就是ViewPager要用到的适配器了

适配器

public class MyAdapter extends FragmentPagerAdapter{
        List<PagerFramgent> list;
        public MyAdapter(FragmentManager fm) {
            super(fm);
            //创建集合用来保存fragment对象
            list=new ArrayList<>();
        }
        public void add(PagerFramgent framgent){
            list.add(framgent);

        }
        //当前页数据
        @Override
        public Fragment getItem(int position) {
            return list.get(position);
        }
        //获取pager数量
        @Override
        public int getCount() {
            return list.size();
        }
        //重写父类的destroyItem方法，什么都不要写，避免viewpager销毁fragment
        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {

        }
        //添加标题
        @Override
        public CharSequence getPageTitle(int position) {
        //返回的标题是之前传的值
            return list.get(position).getArguments().getInt("a")+"";
        }
    }

这边就是一个自定义FragmentPagerAdapter的列子了，其中为了避免ViewPager将fragment对象给销毁，重写了一个空的destroyItem方法
ViewPager和fragment结合使用不想fragment被不断销毁可以查看：ViewPager防止Fragment销毁以及取消Fragment的预加载

主界面代码

public class MainActivity extends AppCompatActivity {

    private ViewPager vp;
    private TabLayout tabLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        vp = (ViewPager) findViewById(R.id.vp);
        tabLayout= (TabLayout) findViewById(R.id.tab);
        //实例化适配器
        MyAdapter adapter=new MyAdapter(getSupportFragmentManager());
       for (int i=0;i<20;i++){//循环添加数据
           adapter.add(PagerFramgent.newInstance(i));
       }
       //viewpager设置适配器
        vp.setAdapter(adapter);
        //设置预加载的数量当然这个值越小越好
        vp.setOffscreenPageLimit(2);
        //给TabLayout设置ViewPager
        tabLayout.setupWithViewPager(vp);
        //设置Mode样式
        tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);

其中TabLayout.MODE_SCROLLABLE适配Tab较多的时候，

TabLayout.MODE_FIXED适合较少的tab（会在一个屏幕中显示所有的tab）

这个时候你就可以运行下看到效果了。当然这里都是默认的样式。

改变Tab显示的样式

//通过下标得到对应位置的Tab对象
        TabLayout.Tab tab = tabLayout.getTabAt(0);
        //给tab设置图标（当然还有文本、颜色等）
        tab.setIcon(R.mipmap.ic_launcher);
        //设置指示器的颜色
       tabLayout.setSelectedTabIndicatorColor(Color.BLUE);
        //再获得一个Tab对象
        TabLayout.Tab tab1 = tabLayout.getTabAt(1);
        //设置显示的View
        tab1.setCustomView( R.layout.tabview);

这里呢就是需要通过TabLayout的内部类Tab来进行设置，（除了设置指示器颜色）

ok，大功告成，其中fragment的生命周期大家可以观察一下，设置与不设置之前的区别，来观察fragment销毁新建。