Android自定义View——自定义ViewPager
本篇内容
第一部分：自定义ViewGroup的使用，手势识别器和Scroller滑动
第二部分：处理滑动监听，处理滑动冲突，增加ViewPager的指示器
基础概念
常见的滑动冲突：外部滑动方向和内部滑动方向不一致、外部滑动方向和内部滑动方向一致。
我们自定义的ViewPager如果在其中一页中存在ListView，那么就需要解决滑动冲突的问题。
由于系统自带ViewPager中，自己已经解决了滑动冲突。
第一部分
1、创建一个类，继承ViewGroup，由于ViewPager里面包含多个子View，所以继承这个类，实现onLayout方法
onLayout：这个方法是对我们该View的一个位置摆放，这里可以看到onLayout这(int l,int t,int r,int b)这四个参数，分别代表着这个ViewPager的左上右下的位置，由于你引用ViewPager是match_parent，所以l和t为0，r和b为宽和高的距离
public class MyViewPager extends ViewGroup{
public MyViewPager(Context context) {
super(context);
}
public MyViewPager(Context context, AttributeSet attrs) {
super(context, attrs);
}
public MyViewPager(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
}
}
private int[] image_id = {R.drawable.guide_map1,R.drawable.guide_map2,R.drawable.guide_map3,R.drawable.guide_map4};
public MyViewPager(Context context) {
super(context);
initView();
}
public MyViewPager(Context context, AttributeSet attrs) {
super(context, attrs);
initView();
}
public MyViewPager(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
initView();
}
private void initView(){
for (int i=0;i @Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
for (int i = 0; i < image_id.length; i++) {
this.getChildAt(i).layout(i * getWidth(), t, (i + 1) * getWidth(), b);
}
}
6、现在已经排好了图片，接着我们就来处理滑动事件了，我们通过一个手势识别器自动帮我们识别滑动事件
private GestureDetector mDetector ; mDetector = new GestureDetector(new SimpleOnGestureListener(){
@Override
public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {
//scrollBy：相对滑动，相对我们当前的控件多少距离，就滑动多少距离
//distanceX是我们手滑动的距离，即我们的手相对控件滑动了多少，所以X轴滑动这个距离，Y轴滑动0
scrollBy((int)distanceX,0);
return super.onScroll(e1, e2, distanceX, distanceY);
}
}); @Override
public boolean onTouchEvent(MotionEvent event) {
mDetector.onTouchEvent(event);
return true;
}这个时候我们就可以看下效果图
7、我们看到跟ViewPager还差一点，就是滑到第几张就自动复原和不能超出头和尾部的图片，这时就要处理滑动事件了
@Override
public boolean onTouchEvent(MotionEvent event) {
mDetector.onTouchEvent(event);
//触摸事件处理
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
break;
case MotionEvent.ACTION_MOVE:
break;
case MotionEvent.ACTION_UP:
int scrollX = getScrollX();
//你滑动的距离加上屏幕的一半，除以屏幕宽度，如果你滑动距离超过了屏幕的一半，这个pos就加1
int pos = (scrollX + getWidth() / 2) / getWidth();
//滑到最后一张的时候，不能出边界
if (pos >= image_id.length) {
pos = image_id.length - 1;
}
//绝对滑动，直接滑到指定的x值
scrollTo(pos * getWidth(), 0);
break;
}
return true;
}
8、基本效果已经出来了，就是没有很自然的滑动过去，那么这个时候就要用到scroller了
private Scroller mScroller;mScroller = new Scroller(getContext());//绝对滑动，直接滑到指定的x值
//scrollTo(pos * getWidth(), 0);
//自然滑动,从手滑到的地方开始，滑动距离是页面宽度减去滑到的距离，时间由路程的大小来决定
mScroller.startScroll(scrollX, 0, pos * getWidth() - scrollX, 0, Math.abs(pos * getWidth()));
invalidate();
break;@Override
public void computeScroll() {
if (mScroller.computeScrollOffset()) {
scrollTo(mScroller.getCurrX(), 0);
postInvalidate();
}
}以下是这一部分的整个类的源码
public class MyViewPager extends ViewGroup {
private int[] image_id = {R.drawable.guide_map1, R.drawable.guide_map2, R.drawable.guide_map3, R.drawable.guide_map4};
private GestureDetector mDetector;
private Scroller mScroller;
public MyViewPager(Context context) {
super(context);
initView();
}
public MyViewPager(Context context, AttributeSet attrs) {
super(context, attrs);
initView();
}
public MyViewPager(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
initView();
}
private void initView() {
for (int i = 0; i < image_id.length; i++) {
ImageView iv = new ImageView(getContext());
iv.setBackgroundResource(image_id[i]);
this.addView(iv);
}
mDetector = new GestureDetector(new SimpleOnGestureListener() {
@Override
public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {
//scrollBy：相对滑动，相对我们当前的控件多少距离，就滑动多少距离
//distanceX是我们手滑动的距离，即我们的手相对控件滑动了多少，所以X轴滑动这个距离，Y轴滑动0
scrollBy((int) distanceX, 0);
return super.onScroll(e1, e2, distanceX, distanceY);
}
});
mScroller = new Scroller(getContext());
}
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
for (int i = 0; i < image_id.length; i++) {
this.getChildAt(i).layout(i * getWidth(), t, (i + 1) * getWidth(), b);
}
}
@Override
public boolean onTouchEvent(MotionEvent event) {
mDetector.onTouchEvent(event);
//触摸事件处理
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
break;
case MotionEvent.ACTION_MOVE:
break;
case MotionEvent.ACTION_UP:
int scrollX = getScrollX();
//你滑动的距离加上屏幕的一半，除以屏幕宽度，如果你滑动距离超过了屏幕的一半，这个pos就加1
int pos = (scrollX + getWidth() / 2) / getWidth();
//滑到最后一张的时候，不能出边界
if (pos >= image_id.length) {
pos = image_id.length - 1;
}
//绝对滑动，直接滑到指定的x值
//scrollTo(pos * getWidth(), 0);
//自然滑动,从手滑到的地方开始，滑动距离是页面宽度减去滑到的距离，时间由路程的大小来决定
mScroller.startScroll(scrollX, 0, pos * getWidth() - scrollX, 0, Math.abs(pos * getWidth()));
invalidate();
break;
}
return true;
}
@Override
public void computeScroll() {
if (mScroller.computeScrollOffset()) {
scrollTo(mScroller.getCurrX(), 0);
postInvalidate();
}
}
}第二部分
1、接下来介绍指示器的完成，指示器用RadioButton来实现，在xml中编写RadioGroup
final RadioGroup rg = (RadioGroup) findViewById(R.id.rg);
for (int i = 0; i < 4; i++) {
RadioButton rb = new RadioButton(this);
//这里用使用0，1，2，3为id，对应ViewPager的pos值
rb.setId(i);
rg.addView(rb);
//默认第一个选中
if (i == 0) {
rb.setChecked(true);
}
}private OnPagerChangeListener listener;
public interface OnPagerChangeListener {
void onPagerChange(int pos);
}
public void setOnPagerChangeListener(OnPagerChangeListener listener) {
this.listener = listener;
}/**
* 设置当前页面
* @param pos
*/
public void setCurrentItem(int pos) {
mScroller.startScroll(getScrollX(), 0, pos * getWidth() - getScrollX(), 0, Math.abs(pos * getWidth()));
invalidate();
//页面切换接口回调
if (listener != null) {
listener.onPagerChange(pos);
}
}case MotionEvent.ACTION_UP:
int scrollX = getScrollX();
//你滑动的距离加上屏幕的一半，除以屏幕宽度，如果你滑动距离超过了屏幕的一半，这个pos就加1
int pos = (scrollX + getWidth() / 2) / getWidth();
//滑到最后一张的时候，不能出边界
if (pos >= image_id.length) {
pos = image_id.length - 1;
}
//绝对滑动，直接滑到指定的x值
//scrollTo(pos * getWidth(), 0);
//自然滑动,从手滑到的地方开始，滑动距离是页面宽度减去滑到的距离，时间由路程的大小来决定
// mScroller.startScroll(scrollX, 0, pos * getWidth() - scrollX, 0, Math.abs(pos * getWidth()));
// invalidate();
setCurrentItem(pos);
break;final MyViewPager myViewPager = (MyViewPager) findViewById(R.id.vp_my);
//按钮点击事件
rg.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(RadioGroup group, int checkedId) {
int pos = checkedId;
myViewPager.setCurrentItem(pos);
}
});
//ViewPager切换事件
myViewPager.setOnPagerChangeListener(new MyViewPager.OnPagerChangeListener() {
@Override
public void onPagerChange(int pos) {
rg.check(pos);
}
});滑动冲突的处理
1、我们在ViewPager中嵌套一个ScrollView作为它的子View，这样ViewPager是左右滑动，ScrollView是上下滑动，那么就造成了滑动冲突
创建一个ScrollView的xml文件
// 添加ScrollView页面
View testView = View.inflate(this, R.layout.view_scroller, null);
myViewPager.addView(testView, 1);@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int childCount = getChildCount();
for (int i = 0; i < childCount; i++) {
getChildAt(i).measure(widthMeasureSpec, heightMeasureSpec);
}
}
这个时候你会发现这个页面只能上下滑动不能左右滑动，所以需要处理滑动事件冲突
3、重写父控件的onInterceptTouchEvent方法，如果是左右滑动，我们的父控件就把滑动事件拦截下来
int startX;
int startY;
@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
// 如果左右滑动, 就需要拦截, 上下滑动,不需要拦截
switch (ev.getAction()) {
case MotionEvent.ACTION_DOWN:
startX = (int) ev.getX();
startY = (int) ev.getY();
break;
case MotionEvent.ACTION_MOVE:
int endX = (int) ev.getX();
int endY = (int) ev.getY();
int dx = endX - startX;
int dy = endY - startY;
if (Math.abs(dx) > Math.abs(dy)) {
// 左右滑动
return true;// 中断事件传递, 不允许孩子响应事件了, 由父控件处理
}
break;
default:
break;
}
return false;// 不拦截事件,优先传递给孩子处理
} switch (ev.getAction()) {
case MotionEvent.ACTION_DOWN:
mDetector.onTouchEvent(ev);// 将ACTION_DOWN传递给手势识别器, 避免事件丢失
startX = (int) ev.getX();
startY = (int) ev.getY();
break;