TabLayout与ViewPager的使用

一：先上布局

<?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="vertical">
   <android.support.design.widget.TabLayout
        android:id="@+id/tl_pgtitle"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">
    </android.support.design.widget.TabLayout>
    <android.support.v4.view.ViewPager
        android:id="@+id/vp_list"
        android:layout_width="match_parent"
        android:layout_weight="8"
        android:layout_height="0dp">
    </android.support.v4.view.ViewPager>
</LinearLayout>

二：

TabLayout是Android原生的，倒入依赖com.android.support:design:23.4.0，或者在build.gradle的dependencies中添加compile'com.android.support:design:23.4.0。

三：下面的代码将TabLayout与ViewPager关联起来了

TabLayout tlPgtitle;

ViewPager viewpager;

viewpager.setAdapter(new TvListVpAdapter(TVListActivity.this));
tablayout.setupWithViewPager(viewpager);

下面这两句是用来将TabLayout撑满屏幕的。

tlPgtitle.setTabGravity(TabLayout.GRAVITY_FILL);
tlPgtitle.setTabMode(TabLayout.MODE_FIXED);

四：TabLayout想要设置标题，只需要在ViewPager的适配器中重写getPageTitle(int position)就行

下列代码是上面ViewPager的适配器的代码，我创建了ViewPager的四个字pager,分别在四个子Pager中添加了Listview。

package com.xzsx.tvphonexzs.utils.adapter;

import android.app.Activity;
import android.content.Context;
import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ListView;
import android.widget.TextView;

import com.xzsx.tvphonexzs.utils.activity.LookLiveActivity;

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

/**
 * Created by QQ774629431
 */
public class TvListVpAdapter extends PagerAdapter {
    private Context mcontext;
    private List<ListView> pagers;
    private List<String> pagerTitles;
    private ListView listView;

    public TvListVpAdapter(Context context){
        mcontext=context;
        initView();
    }
    public void initView(){
        pagers=new ArrayList<>();
        pagerTitles=new ArrayList<>();
        pagerTitles.add("央视");
        pagerTitles.add("卫视");
        pagerTitles.add("体育");
        pagerTitles.add("全部");
        for (int i = 0; i < 4 ; i++) {
            listView=new ListView(mcontext);
            listView.setAdapter(new TvListLvView(mcontext));
            pagers.add(listView);
        }
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return pagerTitles.get(position);
    }

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

    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view==object;
    }
    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        ListView listView=pagers.get(position);
        container.addView(listView);
        return listView;
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView((View) object);
    }
}

四：TabLayout想要设置标题的图标，一种是使用
tlTitle.getTabAt(0).setText("标题1");        tabLayout.getTabAt(0).setIcon(R.drawable.icon_title);
  
  

   
   
另一种使用tabLayout.getTabAt(0).setCustom(View view),里面的view指定一种自己的布局就行。
   
   

  
  

下列的文章介绍的也挺好的，推荐不明白的小伙伴也可以参考一下http://blog.csdn.net/chenguang79/article/details/48804125