Android开发之TabLayout与ViewPager

android.support.design.widget.TabLayout

android.support.v4.view.ViewPager

TabLayout与ViewPager结合实现滑动切换Tab

  首先需要在build.gradle中添加compile ‘com.android.support:design:26.1.0’。注意： 26.1.0要根据android版本来定。
  主布局文件添加：
  android.support.v4.view.ViewPager和android.support.design.widget.TabLayout。

  对于TabLayout需要调用addTab方法添加Tab，然后关联ViewPager。

  对于ViewPager需要创建ViewPager适配器ViewPagerAdapter并重写里面的方法：
  getCount，instantiateItem，destroyItem ，getPageTitle和isViewFromObject

  第一个方法为获取View数量，第二个方法加载View，第三个方法销毁View，第四个方法判断第二个方法返回的Object是否就是该方法中的View。

  在ViewPager中加载的View，可以直接通过Inflate方法获取指定Layout的View，然后装入list，传到适配器中，也可以将Fragment装入list传到适配器中，两种不同的方式所需的适配器也不同，第一种使用上面所提的ViewPagerAdapter而第二种需要使用FragmentPagerAdapter，该类需要重写以下方法：
  getItem，getCount，getPageTitle

  该适配器需要加上构造方法并至少传入一个FragmentManager类型的形参。不论哪种适配器，若不在getPageTitle中返回Tab的名字，不论在newTab()中怎么setText都不会有字体出现。

以下是demo：

import android.support.design.widget.TabLayout;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends AppCompatActivity {
//    private List fragments=new ArrayList<>();
    private List pagerList=new ArrayList<>();
    private List titleList=new ArrayList<>();
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ViewPager viewPager=findViewById(R.id.viewPager);
        View page1=getLayoutInflater().inflate(R.layout.page1,null,false);
        View page2=getLayoutInflater().inflate(R.layout.page2,null,false);
//        fragments.add(new OneFragment());
//        fragments.add(new SecondFragment());
        pagerList.add(page1);
        pagerList.add(page2);
        titleList.add("page1");
        titleList.add("page2");
        TabLayout tabLayout=findViewById(R.id.tabLayout);
        tabLayout.addTab(tabLayout.newTab().setText(titleList.get(0)),true);
        tabLayout.addTab(tabLayout.newTab().setText(titleList.get(1)),false);
//        MyPagerAdapter myPagerAdapter=new MyPagerAdapter(getSupportFragmentManager(),fragments);
//        myPagerAdapter.setFragments(fragments);
        PagerAdapter pagerAdapter=new PagerAdapter() {
            @Override
            public int getCount() {
                return pagerList.size();
            }
            @Override
            public Object instantiateItem(ViewGroup container, int position) {
                container.addView(pagerList.get(position));
                return pagerList.get(position);
            }
            @Override
            public void destroyItem(ViewGroup container, int position, Object object) {
                super.destroyItem(container, position, object);
                container.removeView(pagerList.get(position));
            }
            @Override
            public boolean isViewFromObject(View view, Object object) {
                return view==object;
            }
            @Override
            public CharSequence getPageTitle(int position) {
                return titleList.get(position);
            }
        };
        viewPager.setAdapter(pagerAdapter);
        viewPager.setCurrentItem(0);
        tabLayout.setupWithViewPager(viewPager);
    }
}
//class MyPagerAdapter extends FragmentPagerAdapter {
//    private List fragments=new ArrayList<>();
//    public MyPagerAdapter(FragmentManager fm,List fragments) {
//        super(fm);
//        this.fragments = fragments;
//    }
//
//    @Override
//    public Fragment getItem(int position) {
//        return fragments.get(position);
//    }
//
//    @Override
//    public CharSequence getPageTitle(int position) {
//        return super.getPageTitle(position);
//    }
//
//    @Override
//    public int getCount() {
//        return fragments.size();
//    }
//
//    public void setFragments(List fragments){
//        this.fragments=fragments;
//    }
//}

    .support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

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

API参考：
 暂无，自行Crtal+左键看类的源码，有详细注释和教程文字。

注意：
 需要将主布局orientation设置为vertical，由于之前我没设置，导致只有把TabLayout嵌套到ViewPager才能正常。
代码中注释掉的内容即为用Fragment作为ViewPager内容的方法。

自定义Tab布局

  为Tab自定义样式，首先需要给它一个Layout，在该Layout中写布局，然后通过setCustomView方法将该布局添加到Tab中，Tab通过TabLayout.Tab tab = tabLayout.getTabAt(i)来获取，tabLayout为TabLayout对象。然后通过getCustomView得到的View可以用来find相应的控件。

以下为demo：

注意：
 该代码是在之前demo基础上写的。

        TabLayout.Tab tab;
        View tabItem;
        TextView textView;
        for(int i=0;i
            tab=tabLayout.getTabAt(i);
            if(tab!=null){
                tab.setCustomView(R.layout.itemview);
                tabItem=tab.getCustomView();
                if(tabItem!=null){
                    textView=tabItem.findViewById(R.id.textView);
                    ImageView imageView=tab.getCustomView().findViewById(R.id.img);
                    imageView.setImageResource(R.mipmap.ic_launcher);
                    textView.setText(titleList.get(i));
                }
            }
        }

itemview.xml：

<android.widget.LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center">
    <ImageView
        android:id="@+id/img"
        android:layout_width="25dp"
        android:layout_height="25dp" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
android.widget.LinearLayout>

取消滑动切换页面功能：

TabLayout与ViewPager涉及到滑动切换页面的方法为：
  ViewPage：onInterceptTouchEvent(MotionEvent arg0)和onTouchEvent(MotionEvent arg0)
  TabLayout：setCurrentItem(int item)

以下为代码实现：

    @Override
    public boolean onTouchEvent(MotionEvent arg0) {
           return false;
           //return super.onTouchEvent(arg0);
    }


    @Override
    public boolean onInterceptTouchEvent(MotionEvent arg0) {
           return false;
           //return super.onInterceptTouchEvent(arg0);
    }

    @Override
    public void setCurrentItem(int item) {
        //切换的时候，不需要切换时间,以防止出现动画效果。
        super.setCurrentItem(item, false);
    }