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