撸一把TabLayout+ViewPager

1.前言

  其实我后面才知道TabLayout不仅仅可以和ViewPager配合，也可以用TabItem配合，但是我只是试了ViewPager。废话不多说，直接看图，这是一种类似UC浏览器样的标签和页面联动的效果。 。其实我这只是涉及了皮毛，并没有把TabLayout一撸到底，有耐心的可以看下android的开发者文档，后面会附上链接，会有很大的收获的。

2.干货

  xml布局如下，其中TabLayout自带了一些属性，比如我用到的，tabIndicatorColor,tabSelectTextColor,tabTextColor,其实还有很多，比如tabPadding,tabTextAppearance，这些在文档中很有涉及。

MainActivity.xml

view.xml

注意我这里用来填充ViewPager只是简单的view，并不是Fragment，所以在写适配器时直接继承PagerAdapter即可，一定要注意，要手动重写三个方法，instantiateItem,destroyItem,getPageTitle。同时TabLayout中可以设置TabMode，有两种形式，滑动式和滚动式，滑动式其实效果做出来和PagerTabStrip差不多，并且上方的tabs之间也可以通过设置gravity来调整，因为我这里没问题，适配刚好，就没设置了，详情可见下方的文档。代码如下：

package testdemo.com.myapplication;

import android.support.design.widget.TabLayout;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.TableLayout;

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

import static android.os.Build.VERSION_CODES.M;

public class MainActivity extends AppCompatActivity {

    private TabLayout tabLayout;
    private ViewPager viewPager;

    private List
    
    
     
      tabs  = new ArrayList<>(); //页卡标签的数据源
    private View view1,view2,view3,view4,view5; //页卡视图
    private LayoutInflater mInflater;
    private List
     
     
      
       views = new ArrayList<>();//页卡视图数据源

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

        this.tabLayout = (TabLayout) this.findViewById(R.id.tabs);
        this.viewPager = (ViewPager) this.findViewById(R.id.vp);
        this.mInflater = LayoutInflater.from(this);
        this.view1 = mInflater.inflate(R.layout.view1,null);
        this.view2 = mInflater.inflate(R.layout.view2,null);
        this.view3 = mInflater.inflate(R.layout.view3,null);
        this.view4 = mInflater.inflate(R.layout.view4,null);
        this.view5 = mInflater.inflate(R.layout.view5,null);

        //添加页卡试图
        views.add(view1);
        views.add(view2);
        views.add(view3);
        views.add(view4);
        views.add(view5);

        //添加标签数据
        tabs.add("推荐");
        tabs.add("视频");
        tabs.add("热点");
        tabs.add("娱乐");
        tabs.add("体育");

        tabLayout.setTabMode(TabLayout.MODE_FIXED);  //TabMode 指上方的tab标签有两种形式：固定式（本次）和滑动式
                                                                 //TabLayout.MODE_SCROLLABLE:滑动
//        tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);  滑动式

        tabLayout.addTab(tabLayout.newTab().setText(tabs.get(0)));
        tabLayout.addTab(tabLayout.newTab().setText(tabs.get(1)));
        tabLayout.addTab(tabLayout.newTab().setText(tabs.get(2)));
        tabLayout.addTab(tabLayout.newTab().setText(tabs.get(3)));
        tabLayout.addTab(tabLayout.newTab().setText(tabs.get(4)));

//        viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));

        MyPagerAdapter adapter = new MyPagerAdapter(views, tabs);
        viewPager.setAdapter(adapter); //其实我们的适配器PagerAdapter，本来就是ViewPager的适配器，所以这里要理解
        tabLayout.setupWithViewPager(viewPager);
        tabLayout.setTabsFromPagerAdapter(adapter);

    }
}

     
     
    
    

package testdemo.com.myapplication;

import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;

import java.util.List;

/**
 * Created by ${GuoZhaoHui} on 2016/10/29.
 * Abstract:this is a pageradapter
 */

public class MyPagerAdapter extends PagerAdapter {

    private List
    
    
     
      views;
    private List
     
     
      
       tabs;

    public MyPagerAdapter(List
      
      
       
        views, List
       
       
        
         tabs) {
        this.views = views;
        this.tabs = tabs;
    }

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

    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view == object;
    }

    //注意这个方法要手动重写，并且要选择ViewGroup  不是View
    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        container.addView(views.get(position));
        return views.get(position);
    }

    //同样手动重写 ，选择ViewGroup
    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView(views.get(position));
    }

    //手动重写
    @Override
    public CharSequence getPageTitle(int position) {
        return tabs.get(position);
    }

}

       
       
      
      
     
     
    
    

3.道友留步

  因为墙的原因，这文档我搞成html格式，需要下载才行，所以我直接放在源码中了，源码位置 点击打开链接，源码最好不要导入AS，自己新建一个，一个个copy到自己工程，因为我上传的源码不是一个AS架构。