Android ViewPager再探：增加滑动指示条

上一篇：《Android ViewPager初探：让页面滑动起来》

ViewPager只是左右滑动有些丑，也不知道当前位于第几页面。

可以在上方加入滑动指示条，来确定当前位置。

只需要修改activity_main.xml和MainActivity.java即可，Adapter没什么要更改的。

首先，在activity_main.xml这个主页面中，修改根布局为LinearLayout，并增加布局TAB：

<LinearLayout
android:id="@+id/ll_tab"
android:layout_width="match_parent"
android:layout_height="45dp"
android:background="#FFFFFF" >

<TextView
android:id="@+id/tv_first"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:text="First"
android:textSize="20sp" />

<TextView
android:id="@+id/tv_second"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:text="Second"
android:textSize="20sp" />

<TextView
android:id="@+id/tv_third"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:text="Third"
android:textSize="20sp" />
</LinearLayout>

TAB布局下，应该有滑动指示条。在网上找了个图片命名为slidebar，放在mipmap-hdpi文件夹下，对应的布局为：

<ImageView
android:id="@+id/cursor"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="matrix"
android:src="@mipmap/slidebar"
android:contentDescription="slidebar"/>

对于cursor这个滑动条指示器，首先定义需要的参数：

/*滑动条相关定义*/
private ImageView cursor;
private int bmp_width = 0;//游标宽度
private int offset = 0;//游标图片偏移量
private int number = 0;//当前页面编号

其次应该初始化它的位置：

//初始化指示器位置
public void initCursorPos() {
// 初始化动画
cursor = (ImageView) findViewById(R.id.cursor);
bmp_width = BitmapFactory.decodeResource(getResources(), R.mipmap.slidebar)
.getWidth();// 获取图片宽度

DisplayMetrics dm = new DisplayMetrics();//初始化DisplayMetrics对象
getWindowManager().getDefaultDisplay().getMetrics(dm);//将当前窗口信息放入DisplayMetrics类中
int s_width = dm.widthPixels;// 获取分辨率宽度
offset = (s_width / viewList.size() - bmp_width) / 2;// 计算偏移量(保证滑动条在该tab下正中间)

Matrix matrix = new Matrix();
matrix.postTranslate(offset, 0);
cursor.setImageMatrix(matrix);// 设置动画初始位置
}

Andorid.util 包下的DisplayMetrics 类提供了一种关于显示的通用信息，如显示大小，分辨率和字体。

DisplayMetrics dm = new DisplayMetrics();这句初始化了DisplayMetrics对象，但并未保存信息。

getWindowManager().getDefaultDisplay().getMetrics(dm);这句是获取当前窗口信息，并放入dm中。

偏移量的计算参考了网上例子，让滑动条处于正下方中间。

滑动指示条的移动需要跟随viewpager页面改变，这意味着要设置监听：（此处代码参考自：http://blog.csdn.net/harvic880925/article/details/38557517）

//页面改变监听器
public class NewPageChangeListener implements ViewPager.OnPageChangeListener {

int one = offset * 2 + bmp_width;// 页卡1 -> 页卡2 偏移量
int two = one * 2;// 页卡1 -> 页卡3 偏移量

@Override
public void onPageSelected(int arg0) {
Animation animation = null;
switch (arg0) {
case 0:
if (number == 1) {
animation = new TranslateAnimation(one, 0, 0, 0);
} else if (number == 2) {
animation = new TranslateAnimation(two, 0, 0, 0);
}
break;
case 1:
if (number == 0) {
animation = new TranslateAnimation(offset, one, 0, 0);
} else if (number == 2) {
animation = new TranslateAnimation(two, one, 0, 0);
}
break;
case 2:
if (number == 0) {
animation = new TranslateAnimation(offset, two, 0, 0);
} else if (number == 1) {
animation = new TranslateAnimation(one, two, 0, 0);
}
break;
}
number = arg0;
animation.setFillAfter(true);// True:图片停在动画结束位置
animation.setDuration(300);
cursor.startAnimation(animation);
}

@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}

@Override
public void onPageScrollStateChanged(int arg0) {
}
}

最后，在onCreate()函数内，加上监听操作：

viewPager.setCurrentItem(0);//设置当前页
viewPager.setOnPageChangeListener(new NewPageChangeListener());//监听页面改变

到此，滑动条和viewpager就结合了。

如果希望点击tab块，能跳转到相应页面，则需要加上监听操作：

/*Tab页面参数*/
private TextView tv_first;
private TextView tv_second;
private TextView tv_third;

onCreate()里：

/*TAB页初始化*/
tv_first = (TextView)findViewById(R.id.tv_first);
tv_second = (TextView)findViewById(R.id.tv_second);
tv_third = (TextView)findViewById(R.id.tv_third);

/*Tab页面监听*/
tv_first.setOnClickListener(new TabOnClickListener(0));
tv_second.setOnClickListener(new TabOnClickListener(1));
tv_third.setOnClickListener(new TabOnClickListener(2));

对应的监听函数：

/*Tab页面点击监听*/
public class TabOnClickListener implements View.OnClickListener{
private int num = 0;

public TabOnClickListener(int index){
num = index;
}

@Override
public void onClick(View v){
viewPager.setCurrentItem(num);
}
}

最后附上MainActivity的完整代码：

package com.example.viewpager.myapplication;

import android.app.Activity;
import android.graphics.BitmapFactory;
import android.graphics.Matrix;
import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.util.DisplayMetrics;
import android.view.LayoutInflater;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView;
import android.widget.TextView;

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

public class MainActivity extends Activity {
private View first,second,third;
private ViewPager viewPager;//对应 <android.support.v4.view.ViewPager/>控件
private List<View> viewList;//View数组

/*滑动条相关定义*/
private ImageView cursor;
private int bmp_width = 0;//游标宽度
private int offset = 0;//游标图片偏移量
private int number = 0;//当前页面编号

/*Tab页面参数*/
private TextView tv_first;
private TextView tv_second;
private TextView tv_third;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

/*TAB页初始化*/
tv_first = (TextView)findViewById(R.id.tv_first);
tv_second = (TextView)findViewById(R.id.tv_second);
tv_third = (TextView)findViewById(R.id.tv_third);

/*初始化*/
viewPager = (ViewPager)findViewById(R.id.viewpager);
LayoutInflater inflater = getLayoutInflater();
first = inflater.inflate(R.layout.first_page,null);
second = inflater.inflate(R.layout.second_page,null);
third = inflater.inflate(R.layout.third_page,null);

viewList = new ArrayList<View>();// 将要分页显示的View装入数组中
viewList.add(first);
viewList.add(second);
viewList.add(third);

//初始化指示器位置
initCursorPos();

/*适配器部分*/
NewPagerAdapter pagerAdapter = new NewPagerAdapter(viewList);
viewPager.setAdapter(pagerAdapter);

viewPager.setCurrentItem(0);//设置当前页
viewPager.setOnPageChangeListener(new NewPageChangeListener());//监听页面改变

/*Tab页面监听*/
tv_first.setOnClickListener(new TabOnClickListener(0));
tv_second.setOnClickListener(new TabOnClickListener(1));
tv_third.setOnClickListener(new TabOnClickListener(2));
}

//初始化指示器位置
public void initCursorPos() {
// 初始化动画
cursor = (ImageView) findViewById(R.id.cursor);
bmp_width = BitmapFactory.decodeResource(getResources(), R.mipmap.slidebar)
.getWidth();// 获取图片宽度

DisplayMetrics dm = new DisplayMetrics();//初始化DisplayMetrics对象
getWindowManager().getDefaultDisplay().getMetrics(dm);//将当前窗口信息放入DisplayMetrics类中
int s_width = dm.widthPixels;// 获取分辨率宽度
offset = (s_width / viewList.size() - bmp_width) / 2;// 计算偏移量(保证滑动条在该tab下正中间)

Matrix matrix = new Matrix();
matrix.postTranslate(offset, 0);
cursor.setImageMatrix(matrix);// 设置动画初始位置
}

//页面改变监听器
public class NewPageChangeListener implements ViewPager.OnPageChangeListener {

int one = offset * 2 + bmp_width;// 页卡1 -> 页卡2 偏移量
int two = one * 2;// 页卡1 -> 页卡3 偏移量

@Override
public void onPageSelected(int arg0) {
Animation animation = null;
switch (arg0) {
case 0:
if (number == 1) {
animation = new TranslateAnimation(one, 0, 0, 0);
} else if (number == 2) {
animation = new TranslateAnimation(two, 0, 0, 0);
}
break;
case 1:
if (number == 0) {
animation = new TranslateAnimation(offset, one, 0, 0);
} else if (number == 2) {
animation = new TranslateAnimation(two, one, 0, 0);
}
break;
case 2:
if (number == 0) {
animation = new TranslateAnimation(offset, two, 0, 0);
} else if (number == 1) {
animation = new TranslateAnimation(one, two, 0, 0);
}
break;
}
number = arg0;
animation.setFillAfter(true);// True:图片停在动画结束位置
animation.setDuration(300);
cursor.startAnimation(animation);
}

@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}

@Override
public void onPageScrollStateChanged(int arg0) {
}
}

/*Tab页面点击监听*/
public class TabOnClickListener implements View.OnClickListener{
private int num = 0;

public TabOnClickListener(int index){
num = index;
}

@Override
public void onClick(View v){
viewPager.setCurrentItem(num);
}
}

}

MainActivity.java