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