1. 这里我们继承已有ViewGroup实现自定义控件，模拟出来ViewPager的效果，如下：
（1）实现的效果图如下：
（2）实现步骤：
• 自定义view继承viewGroup
• 重写onLayout方法，为每一个子View确定位置
• 重写onTouchEvent方法，监听touch事件，并用scrollTo（）或scrollBy（）方法移动view
• 监听UP事件，当手指抬起时候，判断应显示的页面位置，并计算距离、滑动页面。
• 添加页面切换的监听事件
2. 具体实现过程，如下：
（1）新建一个Android工程，命名为"仿ViewPager"，如下：
（2）拷贝（美工设计好的）图片资源文件到res/drawable/，如下：
（3）代码首先是activity_main.xml，如下：
<LinearLayout 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:orientation="vertical"
android:gravity="center_horizontal"
tools:context="com.himi.myscrollview.MainActivity" > <RadioGroup
android:id="@+id/radioGroup"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/> <com.himi.myscrollview.MyScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/myscroll_view" /> </LinearLayout>
然后是MyScrollView.java，如下：
package com.himi.myscrollview; import android.content.Context;
import android.util.AttributeSet;
import android.view.GestureDetector;
import android.view.GestureDetector.OnGestureListener;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Scroller; public class MyScrollView extends ViewGroup { private Context ctx;
/**
* 判断是否发生快速滑动
*/
private boolean isFling;
public MyScrollView(Context context, AttributeSet attrs) {
super(context, attrs);
this.ctx = context;
initView();
} private void initView() {
//myScroller = new MyScroller(ctx);
myScroller = new Scroller(ctx);
/**
* GestureDetector根据ACTION_DOWN,ACTION_UP,ACTION_MOVE感受不同到手势
* 然后提供一些API接口给程序员进行开发编程
*/
detector = new GestureDetector(ctx, new OnGestureListener() { /**
* 用户轻触触摸屏，由1个MotionEvent ACTION_DOWN触发
* Touch down时触发，不论是touch (包括long) ，scroll
*/
private void onDow() { } /**
* 用户（轻触触摸屏后）松开，由一个1个MotionEvent ACTION_UP触发
*/
public boolean onSingleTapUp(MotionEvent e) {
return false;
} /**
* 用户轻触触摸屏，尚未松开或拖动，由一个1个MotionEvent ACTION_DOWN触发
* 注意和onDown()的区别，强调的是没有松开或者拖动的状态 (单击没有松开或者移动时候就触发此事件，再触发onLongPress事件)
*
* onShowPress在Touch了还没有滑动时触发
* onShowPress与onDown，onLongPress比较,onDown只要Touch down一定立刻触发。
*/
public void onShowPress(MotionEvent e) { } /**
* 响应手指在屏幕上的滑动事件
*/
public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX,
float distanceY) {
//移动屏幕
/**
* 移动当前的view内容 移动一段距离
* disX x方向移动的距离 设置为正值(图片向左移动) 为负值(图片向右移动)
* disY y方向移动的距离
*/
scrollBy((int)distanceX, 0); /**
* 将当前视图的基准点移动到某个点 坐标点原点移动
* 初始状态基准点是左上角(0,0)
* x 水平方向x坐标
* y 竖直方向y坐标
*
* scrollTo(x,y)
*/ return false;
} /**
* 用户长按触摸屏，由多个MotionEvent ACTION_DOWN触发
*
* Touch了不移动一直Touch down时触发
* Touchdown后过一会没有滑动先触发onShowPress再是onLongPress。
*/
public void onLongPress(MotionEvent e) { } /**
* 发生快速滑动的回调方法
* e1：第1个ACTION_DOWN MotionEvent
* e2：最后一个ACTION_MOVE MotionEvent
* velocityX：X轴上的移动速度，像素/秒
* velocityY：Y轴上的移动速度，像素/秒
*/
public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
float velocityY) { isFling = true;
if(velocityX>0 && currId>0) {//快速向右滑动
currId--;
}else if(velocityX<0 && currId< getChildCount()-1){//快速向右滑动
currId++;
}
moveToDest(currId); return false;
} public boolean onDown(MotionEvent e) {
return false;
}
}); } /**
* 计算控件大小
* 做为一个ViewGroup还有一个责任，就是计算每一个子View的大小
* 注意：这里如果不重写这个方法，我们自定义的temp.xml就不会显示布局的内容
* 这里的temp.xml内部也是一个ViewGroup，必须要测量这个大小尺寸，Android系统只有根据得到的尺寸才能安排显示
*/ @Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
// TODO 自动生成的方法存根
super.onMeasure(widthMeasureSpec, heightMeasureSpec); int size = MeasureSpec.getSize(widthMeasureSpec);
int mode = MeasureSpec.getMode(widthMeasureSpec); for(int i = 0; i<getChildCount(); i++) {
View v = getChildAt(i);
v.measure(widthMeasureSpec, heightMeasureSpec); //v.getMeasuredWidth();得到测量的大小
}
} /**
* 确定子view进行布局，确定子view的位置
* 参数changed ：判断当前布局是否发生改变(true--改变, false--没有改变)
* 参数 l\t\r\b 是指当前viewgroup（MyScrollView）在其父view中的位置
*/
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
for(int i=0; i<getChildCount(); i++) {
//取得小标为i的子view
View view = getChildAt(i); /**
* 父View会根据子View的需求，和自身的情况，来综合确实子View的位置(确定他的大小)
*/
//指定子view的位置, 左 , 上, 右, 下 ,是指在viewgroup坐标系中的位置
view.layout(0+i*getWidth(), 0, getWidth()+i*getWidth(), getHeight());
//view.getWidth();//得到View真实的大小
} }
/**
* 手势识别的工具类
*/
private GestureDetector detector; /**
* 当前的ID值
* 显示在屏幕上的子View的下标
*/
private int currId = 0; /**
*down 事件时的y坐标
*/
private int firstY = 0;
/**
*
*是否中断事件的传递
*返回true的时候中断事件，执行自己的onTouchEvent方法
*返回false的时候，默认处理，不中断，也不会执行自己的onTouchEvent方法
*/
@Override
public boolean onInterceptTouchEvent(MotionEvent ev) { boolean result = false;
System.out.println("onInterceptTouchEvent::"+ev.getAction()); switch (ev.getAction()) {
case MotionEvent.ACTION_DOWN:
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); if(disx > disy && disx >10) {
result = true;
}else {
result = false;
} break;
case MotionEvent.ACTION_UP: break; default:
break;
} return result;
} /**
* down 事件时的x坐标
*/
private int firstX = 0; @Override
public boolean onTouchEvent(MotionEvent event) {
super.onTouchEvent(event); System.out.println("onTouchEvent::"+event.getAction()); detector.onTouchEvent(event); //添加自己的事件解析
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
firstX = (int)event.getX();
break;
case MotionEvent.ACTION_MOVE: break;
case MotionEvent.ACTION_UP:
if (!isFling) {//在没有发生快速滑动的时候，才执行按位置判断currId
int nextId = 0;
//firstX---ACTION_DOWN的点(x坐标),event.getX()此时是---ACTION_UP的点(x坐标)
if (event.getX() - firstX > getWidth() / 2) {// 手指向右滑动，超过屏幕的1/2,当前的currId
// -1
nextId = currId - 1;
} else if (firstX - event.getX() > getWidth() / 2) {// 手指向左滑动，超过屏幕的1/2,当前的currId
// +1
nextId = currId + 1;
} else {
nextId = currId;
} moveToDest(nextId);
}
isFling = false;//防止快速滑动干扰页面正常翻转
//scrollTo(0,0);
break;
}
return true;
} /**
* 计算位移的工具类
*/
//private MyScroller myScroller;//自定义的Scroller
private Scroller myScroller;//调用系统的Scroller(更加强大),注意修改上面的构造方法
/**
* 移动到指定的屏幕上
* @param nextId 屏幕的下标
*/
public void moveToDest(int nextId) {
/**
* 首先对nextId进行判断,确保是在合理的范围
* 即 nextId >=0 && nextId <=getChildCount()-1
*/
//确保currId >=0
currId = (nextId >=0)?nextId:0; //确保currId <=getChildCount()-1
currId = (nextId <=getChildCount()-1)?nextId:(getChildCount()-1); //用户体验是立即跳转的下一个页面，太过迅速，不自然，用户体验不好。要修改，改为稍缓移动到下一个页面
//瞬间移动
//scrollTo(currId*getWidth(),0); //触发MyPageChangedListener事件
if(pageChangedListener != null) {
pageChangedListener.moveToDest(currId);
} //最终的位置 - 现在的位置 = 要移动的距离
int distance = currId*getWidth()-getScrollX(); //myScroller.startScroll(getScrollX(), 0, distance,0);//自定义的
/**
* 记录下开始时候：
* startScroll方法参数，如下：
* 参数1：x坐标
* 参数2：y坐标
* 参数3： x方向移动距离
* 参数4：y方向移动的距离
* 参数5： 设置运行的时间
*/
myScroller.startScroll(getScrollX(), 0, distance,0,Math.abs(distance)); /**
* invalidate()会刷新当前View,会导致onDraw方法的执行
*/
invalidate();
} /**
* invalidate()会导致computeScroll()方法的执行
*/ @Override
public void computeScroll() {
if(myScroller.computeScrollOffset()) {//移动图片页面还在进行中，没有结束
int newX = (int) myScroller.getCurrX();
System.out.println("newX::"+newX);
scrollTo(newX, 0); //前面设置改变了View视图，但是必须刷新才能显示
//invalidate()方法调用，又会启用computeScroll()方法，如此反复，直至View不再移动(View移动到目的位置,终止移动)
invalidate();
}
} public MyPageChangedListener getPageChangedListener() {
return pageChangedListener;
} public void setPageChangedListener(MyPageChangedListener pageChangedListener) {
this.pageChangedListener = pageChangedListener;
}
private MyPageChangedListener pageChangedListener; /**
* 页面改变时候的监听接口
*/ public interface MyPageChangedListener {
void moveToDest(int currid);
}
}
还有就是计算位移距离的工具类MyScroller，如下：
package com.himi.myscrollview; import android.content.Context;
import android.os.SystemClock; /**
* 计算位移距离的工具类
* @author Administrator
*
*/ public class MyScroller {
private int startX;
private int startY;
private int disX;
private int disY; /**
* 开始执行动画的时间
*/
private long startTime;
/**
* 判断是否正在执行动画
* true 还在运行
* false 已经停止
*/
private boolean isFinish; public MyScroller(Context context) { } /**
* 开始移动
* @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; }
/**
* 默认运行的时间
* 毫秒值
*/
private int duration = 500;
/**
* 当前的X的值
*/ private long currX;
/**
* 当前的Y的值
*/
private long currY; public long getCurrX() {
return currX;
} public void setCurrX(long currX) {
this.currX = currX;
} /**
* 计算一下当前的运行状况
*返回值 ：
* 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;
} }
其中测试布局xml文件temp.xml，如下：
<LinearLayout 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:gravity="center_horizontal"
android:background="@android:color/darker_gray"
android:orientation="vertical"
tools:context="com.himi.myscrollview.MainActivity" > <Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" /> <TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" /> <ScrollView
android:id="@+id/scrollView1"
android:layout_width="match_parent"
android:layout_height="wrap_content" > <LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" > <TextView
android:id="@+id/textView0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" /> <TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" /> <TextView
android:id="@+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" /> <TextView
android:id="@+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" /> <TextView
android:id="@+id/textView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" /> <TextView
android:id="@+id/textView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
</LinearLayout>
</ScrollView> </LinearLayout>
这个temp.xml布局效果如下：
（4）MainActivity，如下：
package com.himi.myscrollview; import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.RadioGroup.OnCheckedChangeListener; import com.himi.myscrollview.MyScrollView.MyPageChangedListener; public class MainActivity extends Activity {
private MyScrollView msv;
//图片的资源ID数组
private int[] ids = new int[] { R.drawable.a1,R.drawable.a2,R.drawable.a3,
R.drawable.a4,R.drawable.a5,R.drawable.a6
}; private RadioGroup radioGroup;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main); msv = (MyScrollView) findViewById(R.id.myscroll_view);
radioGroup = (RadioGroup) findViewById(R.id.radioGroup); for(int i=0; i<ids.length; i++) {
ImageView image = new ImageView(this);
image.setBackgroundResource(ids[i]);
//添加image图片资源 到 自定义的MyScrollView(ViewGroup是父容器)
msv.addView(image); } msv.setPageChangedListener(new MyPageChangedListener() { public void moveToDest(int currid) {
((RadioButton)radioGroup.getChildAt(currid)).setChecked(true); }
}); radioGroup.setOnCheckedChangeListener(new OnCheckedChangeListener() { public void onCheckedChanged(RadioGroup group, int checkedId) {
msv.moveToDest(checkedId); }
}); //给自定义的viewGroup添加测试的布局
View temp = getLayoutInflater().inflate(R.layout.temp, null);
msv.addView(temp,2); for (int i = 0; i < msv.getChildCount(); i++) { // 添加radioButton
RadioButton rbtn = new RadioButton(this);
rbtn.setId(i);
radioGroup.addView(rbtn);
if (i == 0) {
rbtn.setChecked(true);
}
}
} }
2. 附件理解图：
（1）起始状态，多张页面pager位置布局图，在上面的Layout方法中，如下：
（2）当我们手指水平向右滑动，页面标号id减少
手指水平向左滑动，页面标号id增加
