Android 使用ViewGroup实现ViewPager的效果

ViewPager控件可以让我们做出很多漂亮的界面,例如导航, 页面菜单等. 那么我们自己能否去实现ViewPager的效果呢? 本文将介绍如何使用ViewGroup + scrollTo + scroller实现ViewPager控件, 并且会简单地实现一个自己的scroller, 来了解学习系统提供的scroller类滑屏功能的实现思想.

首先看一下实现的效果:



定义自己的ViewPager类–MyViewPager继承ViewGroup

public class MyViewPager extends ViewGroup {
private Context context;
//手势识别工具类
private GestureDetector detector;

public MyViewPager(Context context, AttributeSet attrs) {
super(context, attrs);
this.context = context;
initView();
}

private void initView() {

detector = new GestureDetector(context, new GestureDetector.OnGestureListener() {
@Override
public boolean onDown(MotionEvent e) {
return false;
}

@Override
public void onShowPress(MotionEvent e) {

}

@Override
public boolean onSingleTapUp(MotionEvent e) {
return false;
}

//处理移动事件
@Override
public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {
//将当前视图内容偏移(x , y)个单位，可视区域也跟着偏移(x,y)个单位
//也就是说让视图跟着鼠标移动, distanceX为鼠标在屏幕上移动的距离
scrollBy((int) distanceX, 0);
return false;
}

@Override
public void onLongPress(MotionEvent e) {

}

@Override
public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
return false;
}
});
}

@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
//设置每个子view的位置
for (int i = 0; i < getChildCount(); i++) {
View view = getChildAt(i);
view.layout(i * getWidth(), 0, (i + 1) * getWidth(), getHeight());
}
}

@Override
public boolean onTouchEvent(MotionEvent event) {
super.onTouchEvent(event);
detector.onTouchEvent(event);

return true;
}

}

(1) 在MyViewPager中, 重写OnLayout方法, 在OnLayout方法中去确定子view在ViewPager中的位置:



通过getChildAt获得所有的子view, 调用子view的layout方法设置每个子view的位置, layout接收4个参数(就是左上角坐标与右下角坐标), 来确定view的大小, 如上图可以分析出每个view在MyViewPager中的位置, 例如第2个view的位置是:

[getWidth(), 0, 2 * getWidth(), getHeight()] , getWidth 与 getHeight为MyViewPager的宽高. 我们可以看到变化的只有横坐标.

(2) 重写onTouchEvent方法, 此方法处理屏幕触摸事件, 在这里使用用户手势识别工具类GestureDetector来处理action.move事件, 在OnGestureListener的onScroll中处理move事件, onScroll方法的参数distanceX, 就是工具类帮我们计算好的手指在屏幕上x轴方向移动的距离, 然后就可以很方便的使用此参数, 调用scrollBy(x, y)方法移动视图, 让视图偏移(x, y). 这样就实现了MyViewPager随手指移动而移动.

2.使用MyViewPager. 并给MyViewPager设置子view

public class MainActivity extends AppCompatActivity {

private MyViewPager myViewPager;
private int[] imgIds = new int[] {
R.mipmap.a, R.mipmap.b, R.mipmap.c,
R.mipmap.d, R.mipmap.e, R.mipmap.f
};

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
myViewPager = (MyViewPager) findViewById(R.id.my_viewpager);

for (int i = 0; i < imgIds.length; i++) {
ImageView imageView = new ImageView(this);
imageView.setImageResource(imgIds[i]);
myViewPager.addView(imageView);
}
}
}

布局文件:

<?xml version="1.0" encoding="utf-8"?>
<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"
tools:context="com.myviewpager.MainActivity">

<com.myviewpager.MyViewPager
android:id="@+id/my_viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent" />

</RelativeLayout>

给MyViewPager设置6张图片. 现在效果图如下:



3.现在图片可以跟随手指滑动而滑动, 但是还不能自动地切换, 图片只能停在你移动到的地方, 如果想实现切换的效果, 还需要我们自己去处理touch事件, 在onTouchEvent中继续添加代码:

//标记当前显示在屏幕上的图片
private int currPos = 0;
//记录按下时的横坐标
private int firstX = 0;

@Override
public boolean onTouchEvent(MotionEvent event) {
super.onTouchEvent(event);
detector.onTouchEvent(event);
//添加下面的代码
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
firstX = getScrollX();    //获得按下去时的横坐标
break;
case MotionEvent.ACTION_UP:   //判断显示哪个子view, 如果滑动大于父控件的一半切换子view
int tmpPos = currPos;
if ((getScrollX() - firstX) > getWidth() / 2) {    //向左滑动
tmpPos++;
} else if ((firstX - getScrollX()) > getWidth() / 2) {  //向右滑动
tmpPos--;
}
MoveToDest(tmpPos);  //切换到指定的图片
break;
default:
break;
}
return true;
}

public void MoveToDest(int tmpPos) {
//确定currPos的值, 保证currPos的范围在[0, getChildCount() - 1]
currPos = tmpPos > 0 ? tmpPos : 0;
currPos = currPos < getChildCount() - 1 ? currPos : (getChildCount() - 1);
//将视图内容偏移至(x , y)坐标处，可视区域位于(x , y)坐标处
scrollTo(currPos * getWidth(), 0);
}

定义两个成员变量, firstX, currPos来记录点击屏幕时的点与当前显示在屏幕上的子view. 在touch_up事件中处理: 当在屏幕上滑动的距离大于屏幕的一半切换视图, 否则留在当前视图. 在MoveToDest方法中调用scrollTo来实现.

现在的效果为:



4.在ViewPager中, 我们去切换视图时, 并不是瞬间完成, 而是有个过程.

我们实现MyScroller类来实现滑动过程，新建MyScroller类：

public class MyScroller {

private Context context;
private int disX;
private int startY;
private int startX;
private int disY;
private long startTime; //开始动画时间
private boolean isFinish; //标志是否结束动画
//默认运行时间，500ms
private int duration = 500;
//当前绘制所在的X位置
private long currX;
//当前绘制所在的Y位置
private long currY;

public MyScroller(Context context) {
this.context = context;
}

public long getCurrY() {
return currY;
}

public void setCurrY(long currY) {
this.currY = currY;
}

public long getCurrX() {
return currX;
}

public void setCurrX(long currX) {
this.currX = currX;
}

/**
* 开始移动
* @param startX  开始时的x坐标
* @param startY  开始时的y坐标
* @param disX    x方向要移动的距离
* @param disY    y方向要移动的距离
*/
public void startScroll(int startX, int startY, int disX, int disY) {
this.startX = startX;
this.startY = startY;
this.disX = disX;
this.disY = disY;
this.startTime = SystemClock.uptimeMillis();
this.isFinish = false;
}

/**
* 计算当前的运行状况
* @return
* true 还在运行
* false 运行结束
*/
public boolean computeScrollOffset() {
if (isFinish) {
return false;
}
//获得绘制时的时间
long passTime = SystemClock.uptimeMillis() - startTime;
//如果时间还在允许的范围内
if (passTime <= duration) {
currX = startX + disX * passTime / duration;
currY = startY + disY * passTime / duration;
} else { //绘制运行结束
currX = startX + disX;
currY = startY + disY;
isFinish = true;
}
return true;
}

}

在startScroll方法中记录下当前滑动点坐标与目标点坐标, 并记录下当前时间. 然后在computeScrollOffset中开始去更新当前的滑动的坐标.

接下来使用MyScroller来实现滑动过程，在MyViewPager类中定义MyScroller类成员变量并去使用它来实现滑动过程：

private MyScroller myScroller;

//在initView中初始化
private void initView() {
...............
myScroller = new MyScroller(context);
...............
｝

然后修改moveToDest方法，不去使用ScrollTo来实现移动，使用MyScroller来实现：

public void moveToDest(int nextId) {
..................
//不使用scrollTo来实现移动
//      scrollTo(currId * getWidth(), 0);
//获得移动的距离，移动距离等于最终位置-当前位置
int distance = currId * getWidth() - getScrollX();
myScroller.startScroll(getScrollX(), 0, distance, 0);
//会导致computeScroll方法执行
invalidate();
}

@Override
public void computeScroll() {
//计算当前绘制状况，进行绘制
if (myScroller.computeScrollOffset()) {
int nowX = (int) myScroller.getCurrX();
scrollTo(nowX, 0);
invalidate();
}
}

现在的效果你会看到视图切换时就会有个过程而不是很快就完成了：



现在视图的切换是匀速的，如果想达到ViewPager那种加速效果，将MyScroller改成系统提供的Scroller类即可，只需要将private MyScroller myScroller; 改为private Scroller myScroller; 其他都不需要动就可以实现加速效果， 因为我们的MyScroller类的接口和系统Scroller接口一样。

5.现在MyViewPager中的View全为ImageView, 那么向MyViewPager中添加一个布局(包括一个button和listView)来看一下是否同样的支持滑动效果.

(1)布局文件list_view.xml:

<?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:id="@+id/list_layout"
android:orientation="vertical" >

<Button
android:layout_width="match_parent"
android:layout_height="70dp"
android:layout_margin="10dp"
android:text="button"/>
<ListView
android:id="@+id/listview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="10dp"/>

</LinearLayout>

(2)我们将布局文件加载到MyViewPager的第四个view

private LinearLayout listLayout;
private ListView listview;
private String[] datas = { "Apple", "Banana", "Orange", "Watermelon",
"Pear", "Grape", "Pineapple", "Strawberry", "Cherry", "Mango" };

@Override
protected void onCreate(Bundle savedInstanceState) {
............
//添加下面代码
listLayout = (LinearLayout) LayoutInflater.from(getApplicationContext())
.inflate(R.layout.list_view, null);
listview = (ListView) listLayout.findViewById(R.id.listview);

ArrayAdapter<String> adapter = new ArrayAdapter<String>(
MainActivity.this, android.R.layout.simple_list_item_1, datas);
listview.setAdapter(adapter);

for (int i = 0; i < ids.length; i++) {
if (i == 3) {  //将布局文件添加到第四个位置
msv.addView(listLayout);
} else {
ImageView imageView = new ImageView(this);
imageView.setBackgroundResource(imgIds[i]);
msv.addView(imageView);
}
}

}

这个时候你运行会发现这个布局不会显示出来， 因为这个时候我们没有在MyViewPager中去调用布局控件的OnMeasure方法， 让其去测量子View的大小， 导致布局view没有显示出来，所以我们需要在MyViewPager中去重载OnMeasure方法，去调用每个子view的measure，绘制子view的大小。

//绘制每个子控件的尺寸
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
for (int i = 0; i < getChildCount(); i++) {
View view = getChildAt(i);
view.measure(widthMeasureSpec, heightMeasureSpec);
}
}

现在的效果为：



现在我们发现，当滑动到布局文件中，在listview上可以上下滑，但是此时左右滑动失效了，不能左右滑动。

原因因为Touch事件的传递导致， 我们知道touch事件是从父view到子view一层一层传递，当我们左右滑动时，此事件由MyViewPager一层层传递到listview，但是listview并不支持（消费）此事件，所以导致左右滑动不起作用了， 现在我们重写onInterceptTouchEvent，来去判断touch事件，如果是左右滑动事件那么就去中断此事件，不让其再往下传递，我们去处理消费它。

/**
* 返回true, 中断事件，执行自己的onTouchEvent方法
* 返回false, 默认处理，不中断事件, 也不会执行自己的onTouchEvent方法
*/
@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
boolean result = false;
switch (ev.getAction()) {
case MotionEvent.ACTION_DOWN:
//解决点击图片时跳动的bug
detector.onTouchEvent(ev);

firstX = (int) ev.getX();
firstY = (int) ev.getY();
break;
case MotionEvent.ACTION_MOVE:
int disx = (int) Math.abs(ev.getX() - firstX); //不管是左右移，只判断是否左右移动
int disy = (int) Math.abs(ev.getY() - firstY); //竖直方向移动距离
//判断是否为水平方向移动，disx > 10 防止手指按住屏幕抖动
if(disx > disy && disx > 10) {
result = true;
} else {
result = false;
}
break;
case MotionEvent.ACTION_UP:
break;
default:
break;
}
return result;
}

现在效果如下：



此时还缺少一点就是开放一个接口让外部来使用, 比如导航界面，点击某一个点，会直接跳到那个点指定的页面。

在MyViewPager中添加接口：

//监听器对象
private MyPagerChangedListener listener;

public MyPagerChangedListener getListener() {
return listener;
}

public void setListener(MyPagerChangedListener listener) {
this.listener = listener;
}
//页面改变时的监听接口
public interface MyPagerChangedListener{
void moveToDest(int currId);
}

然后在moveToDest方法中去判断此监听器是否为空，不为空就调用其接口。

//移动到指定的子控件上
public void moveToDest(int nextId) {
..................

//触发listener事件
if (listener != null) {
listener.moveToDest(currId);
}
..............
}

至此， 使用ViewGroup实现ViewPager效果完成， 如有问题可以留言。

源码下载地址：

http://download.csdn.net/detail/lbcab/9536961