向ViewPager中添加PagerTabStrip

今天我们讲下如何向ViewPager中添加PagerTabStrip，就是标签.

我们直接看代码吧。

activity_main.xml文件：

把PagerTabStrip标签定义在ViewPager里面。

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="10dp">

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >
    <android.support.v4.view.PagerTabStrip
        android:id="@+id/pagetabstrip"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:gravity="center" >
    </android.support.v4.view.PagerTabStrip>
    </android.support.v4.view.ViewPager>


</RelativeLayout>

然后是在MainActivity中的具体代码实现：

package com.example.text02;

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

import android.os.Bundle;
import android.app.Activity;
import android.graphics.Color;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.PagerTabStrip;
import android.support.v4.view.ViewPager;
import android.view.View;
import android.view.ViewGroup;

public class MainActivity extends Activity {

	private ViewPager viewPager;
	private PagerTabStrip pagerTabStrip;
	// 设置标题
	private List<String> titles;
	// 设置页面
	private List<View> views;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		// 获取ViewPager和PagerTabStrip
		viewPager = (ViewPager) findViewById(R.id.viewpager);
		pagerTabStrip = (PagerTabStrip) findViewById(R.id.pagetabstrip);
		// 去掉pagerTabStrip下的黑长横线
		pagerTabStrip.setDrawFullUnderline(false);
		// 设置标题下横线的颜色
		pagerTabStrip.setTabIndicatorColor(Color.CYAN);
		// 设置标题的背景色
		pagerTabStrip.setBackgroundColor(Color.YELLOW);

		// 初始化viewPager标题
		titles = new ArrayList<String>();
		titles.add("新闻");
		titles.add("体育");
		titles.add("娱乐");

		// 初始化ViewPager页面
		views = new ArrayList<View>();
		// 这里是获取我们定义的三个xml文件的不同View布局并添加到List集合中
		View v1 = getLayoutInflater().inflate(R.layout.first, null);
		View v2 = getLayoutInflater().inflate(R.layout.second, null);
		View v3 = getLayoutInflater().inflate(R.layout.third, null);
		views.add(v1);
		views.add(v2);
		views.add(v3);

		MyPagerAdapter adapter = new MyPagerAdapter();
		viewPager.setAdapter(adapter);

	}

	// 自定义适配器
	class MyPagerAdapter extends PagerAdapter {

		@Override
		public int getCount() {
			// TODO Auto-generated method stub
			return views.size();
		}

		@Override
		public boolean isViewFromObject(View arg0, Object arg1) {
			return arg0 == arg1;
		}

		@Override
		public Object instantiateItem(ViewGroup container, int position) {
			container.addView(views.get(position));
			return views.get(position);
		}

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

		// 获得指定索引的标题
		@Override
		public CharSequence getPageTitle(int position) {
			return titles.get(position);
		}

	}

}

运行结果：