ViewPager+自定义标题实现右左滑动，当前指示标题根着改变
ViewPager也自带了标题功能，只要在xml中添加PagerTabStrip标题或者PagerTitleStrip标签，然后重写PagerAdapter的getPageTitle(int position)方法返回显示标题的内容即可。
由于自带的标题效果不是很理想，实现不了像微信一样固定四个标题的效果。所以要自己手动编写标题。
效果如下：
用到的图片资源：
1：xml布局文件：在viewPager上面添加一个水平的线性布局，里面平分了三个标题的内容（福彩，体彩，高频彩）。然后在下面添加一个ImageView，用于图片指示器
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.zhong.viewpager.MainActivity" >
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1.0"
android:gravity="center_horizontal"
android:text="福彩"
android:textColor="@android:color/black"
android:textSize="18sp" />
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1.0"
android:gravity="center_horizontal"
android:text="体彩"
android:textColor="@android:color/black"
android:textSize="18sp" />
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1.0"
android:gravity="center_horizontal"
android:text="高频彩"
android:textColor="@android:color/black"
android:textSize="18sp" />
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:scaleType="matrix"
android:src="@drawable/id_category_selector" />
android:layout_width="match_parent"
android:layout_height="match_parent" />
package com.zhong.viewpager;
import java.util.ArrayList;
import java.util.List;
import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Color;
import android.graphics.Matrix;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.DisplayMetrics;
import android.view.View;
import android.view.ViewGroup;
import android.view.View.OnClickListener;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView;
import android.widget.TextView;
/**
* 给pageView添加自己的标题：
* 一：xml布局文件，在viewPager上面添加一水平的线性布局，让几个标题均分，在标题与viewPager之间放一ImageView
* 二：计算出图片的初始位置 （屏幕宽度/3-实际指示器图片）/2
* 三：给imageView添加更改监听器，更改page后，更改当前page对应标题为红色，将图片移动到此标题下
* 四：给标题设置点击事件，点击某个标题后，更改viewPager当前显示条目
* @author zhong
*
*/
public class MainActivity extends Activity {
private ViewPager viewpager;
private MyAdapter adapter;
/** 图片指示器 **/
private ImageView selector;
private TextView fcTitle;// 福彩
private TextView tcTitle;// 体彩
private TextView gpcTitle;// 高频彩
private List
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
viewpager = (ViewPager) findViewById(R.id.viewPage);
selector = (ImageView) findViewById(R.id.ii_category_selector);
fcTitle = (TextView) findViewById(R.id.ii_category_fc);
tcTitle = (TextView) findViewById(R.id.ii_category_tc);
gpcTitle = (TextView) findViewById(R.id.ii_category_gpc);
initData();
setListener();
selectorPosition();
}
/**
* 设置监听
*/
private void setListener() {
// 给标题文字设置点击事件，点击时更改page
fcTitle.setOnClickListener(new OnClickListener() {
public void onClick(View v) {
viewpager.setCurrentItem(0);
}
});
tcTitle.setOnClickListener(new OnClickListener() {
public void onClick(View v) {
viewpager.setCurrentItem(1);
}
});
gpcTitle.setOnClickListener(new OnClickListener() {
public void onClick(View v) {
viewpager.setCurrentItem(2);
}
});
/** 添加page更改监听器，当page更改时，图片选择器也更改 **/
viewpager.setOnPageChangeListener(new OnPageChangeListener() {
/** view更改后回调方法 **/
public void onPageSelected(int position) {
// fromXDelta toXDelta:相对于图片初始位置需要增加的量
TranslateAnimation animation = new TranslateAnimation(lastPosition * sWidth / 3, position * sWidth / 3,
0, 0);
animation.setDuration(300);
animation.setFillAfter(true);// 移动完后停留到终点
selector.startAnimation(animation);
lastPosition = position;//记录出当前显示的page
// page切换后，更改标题文字的色彩 1：还原所有，2：根据当前设置
fcTitle.setTextColor(Color.BLACK);
tcTitle.setTextColor(Color.BLACK);
gpcTitle.setTextColor(Color.BLACK);
switch (position) {
case 0:
fcTitle.setTextColor(Color.RED);
break;
case 1:
tcTitle.setTextColor(Color.RED);
break;
case 2:
gpcTitle.setTextColor(Color.RED);
break;
}
}
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
public void onPageScrollStateChanged(int arg0) {
}
});
}
// 记录ViewPger上一个界面的position信息
private int lastPosition = 0;
/** 屏幕的宽度 **/
private int sWidth;
/**
* 设置选择器图片的初始位置
*/
private void selectorPosition() {
DisplayMetrics outMetrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(outMetrics);
sWidth = outMetrics.widthPixels;// 屏幕的宽度
//计算出哪个选择器图片的真实宽度，不是ImageView的宽度
Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.id_category_selector);
int bWidth = bitmap.getWidth();
//求出初始位置
int offset = ((sWidth / 3) - bWidth) / 2;
Matrix matrix = new Matrix();
matrix.postTranslate(offset, 0);
selector.setImageMatrix(matrix);//设置图片的初始位置
}
/**
* 初始化数据
*/
private void initData() {
for (int i = 0; i < 3; i++) {
TextView textView = new TextView(this);
textView.setText(i + "");
textView.setBackgroundColor(Color.GRAY);
views.add(textView);
}
adapter = new MyAdapter();
viewpager.setAdapter(adapter);
}
/**
* 实现 PagerAdapter必须实现下面四个方法
*/
private class MyAdapter extends PagerAdapter {
public int getCount() {
return views.size();
}
public boolean isViewFromObject(View view, Object obj) {
return view == obj;
}
/**
* 从自己的view集合中找到一个要显示的view添加到ViewGroup中,并将这个view返回
*/
public Object instantiateItem(ViewGroup container, int position) {
View view = views.get(position);
container.addView(view);
return view;
};
/**
* 删除之前的view
*/
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View) object);
}
}
}