Android之ViewPager总结（四）——自定义滑动指示条

    前面我们用了三篇的时间讲述了有关ViewPager的基础知识，到这篇就要进入点实际的了。这篇文章中单纯讲述滑动指示条的实现方法。

一 布局文件

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
tools:context="com.example.testviewpage_4.MainActivity" >

<ImageView
android:id="@+id/cursor"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:contentDescription="@string/app_name"
android:scaleType="matrix"
android:src="@drawable/a" />

<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center" />

</LinearLayout>

二 Java代码

package com.example.testviewpage_4;

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

import com.example.testviewpage_4.R;

import android.app.Activity;
import android.graphics.BitmapFactory;
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.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.Animation;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView;

public class MainActivity extends Activity {

private View view1, view2, view3;
private ViewPager viewPager; // 对应的viewPager

private List<View> viewList;// view数组
private ImageView mCursor;
private int bmpWidth;// 游标宽度
private int offset;// 动画图片偏移量
private int currIndex = 0;// 当前页卡编号

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

viewPager = (ViewPager) findViewById(R.id.viewpager);
LayoutInflater inflater = getLayoutInflater();
view1 = inflater.inflate(R.layout.layout1, null);
view2 = inflater.inflate(R.layout.layout2, null);
view3 = inflater.inflate(R.layout.layout3, null);

viewList = new ArrayList<View>();// 将要分页显示的View装入数组中
viewList.add(view1);
viewList.add(view2);
viewList.add(view3);
initCursorPosition();

PagerAdapter pagerAdapter = new PagerAdapter() {

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

@Override
public int getCount() {
return viewList.size();
}

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

@Override
public Object instantiateItem(ViewGroup container, int position) {
container.addView(viewList.get(position));
return viewList.get(position);
}
};
viewPager.setAdapter(pagerAdapter);
viewPager.setOnPageChangeListener(new MyPageChangeListener());
}

public void initCursorPosition() {
mCursor = (ImageView) findViewById(R.id.cursor);
bmpWidth = BitmapFactory.decodeResource(getResources(), R.drawable.a)
.getWidth();

DisplayMetrics dm = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(dm);
int screenW = dm.widthPixels;// 获取分辨率宽度

offset = (screenW / viewList.size() - bmpWidth) / 2;// 计算偏移量

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

// 页面改变监听器
public class MyPageChangeListener implements OnPageChangeListener {

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

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

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

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

}

三 要点分析

3.1 initCursorPosition

public void initCursorPosition() {
mCursor = (ImageView) findViewById(R.id.cursor);
bmpWidth = BitmapFactory.decodeResource(getResources(), R.drawable.a)
.getWidth();

DisplayMetrics dm = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(dm);
int screenW = dm.widthPixels;// 获取分辨率宽度

offset = (screenW / viewList.size() - bmpWidth) / 2;// 计算偏移量

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

    可能有些同学不明白的位置在于，初始化位置的偏移量为什么这么算，下面，我画了张图，看下就应该明白了。

3.2 MyPageChangeListener

// 页面改变监听器
public class MyPageChangeListener implements OnPageChangeListener {

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

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

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

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

       原理是这样的，根据滑动到的页面，把游标滑动到指定位置。我画了一张图，解释从第一个页面到第二个页面时的距离为什么是“游标宽度+offset*2”，其它距离类似。