复杂自定义控件---自定义ViewPager的实现

效果图



核心方法

1、三个构造方法（一个参数， 两个参数， 三个参数）

2、onMesure 测量控件

4、onLayout 分配控件布局

5、computeScroll()  
计算滑动

6、onDraw   绘制控件

7、onTouchEvent() 
中断事件传递

8、dispatchTouchEvent 
分发事件

实现步骤：

1   初始化显示的数据

//为MyViewPager添加图片
for(int i=0; i<imgs.length; i++) {
ImageView imageView = new ImageView(getApplicationContext());
imageView.setBackgroundResource(imgs[i]);
mMyViewPager.addView(imageView);
}

View view = View.inflate(getApplicationContext(), R.layout.ll_view, null);
mMyViewPager.addView(view, 2);

2 测量控件  （注：由于控件的嵌套复杂性不同，导致系统测量的次数不一样，嵌套布局越多测量                           越复杂，所以在使用布局时尽量避免嵌套的层次）

<strong><span style="color:#ff0000;">//  onMeasure  会在onLayout 之前调用
// 要求父容器一定要测量子容器 ,如果不测量 子容器 子容器宽和高 都是0   子容器由于挂载到父容器可以正常显示,但是 孙子就不能显示
// 父容器先知道自己大小（match_parent） 子容器先知道大小(wrap_content)
//widthMeasureSpec不仅表示控件的宽，里面还带有控件的属性的基本信息</span></strong>
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
System.out.println("onMeasure");
System.out.println(widthMeasureSpec);
MeasureSpec.getMode(widthMeasureSpec); //获取控件的模型
MeasureSpec.getSize(widthMeasureSpec); // 得到控件真正的尺寸
System.out.println(heightMeasureSpec);
for(int i=0; i< getChildCount(); i++) {
View view = getChildAt(i);
view.measure(widthMeasureSpec, heightMeasureSpec);// 对每个孩子都测量
}
}

3  分配控件显示的位置

//  分配孩子位置     在onDraw方法之前调用
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {

for(int i=0; i<getChildCount(); i++) {
View view = getChildAt(i);
view.layout(0 + getWidth() * i, 0, getWidth() + getWidth() * i, getHeight());
}
}

4   让控件随着手指的移动而移动

//手势识别监听器
private class MySimpleOnGestureListener extends GestureDetector.SimpleOnGestureListener {
//滑动事件
//distanceX x轴滑动的距离
//distanceY y轴滑动的距离
@Override
public boolean onScroll(MotionEvent e1, MotionEvent e2,
float distanceX, float distanceY) {
scrollBy((int)distanceX, 0); //让viewGroup 移动多少距离
//scrollBy  会自动调用invalidate() 该方法
//invalidate();   自动调用onDraw
return super.onScroll(e1, e2, distanceX, distanceY);
}
}

private void initView() {

mGestureDetector = new GestureDetector(getContext(), new MySimpleOnGestureListener());

}

@Override
public boolean onTouchEvent(MotionEvent event) {
mGestureDetector.onTouchEvent(event); //把手势识别器注册到触摸事件中
switch(event.getAction()) {
case MotionEvent.ACTION_DOWN:
// 当手指按下的时候 记录开始的坐标
startX = (int) event.getX();
break;
case MotionEvent.ACTION_UP:
// 当手指抬起的时候 记录结束的坐标
int endX = (int) event.getX();

if((startX - endX) > getWidth() / 2) {
//进入下一个界面
index++;
} else if((endX - startX) > getWidth() / 2) {
// 进入上一个界面
index--;
}
moveToIndex();
break;
default:
break;
}
//返回处理了触摸事件
return true;

}

5 自动跳转界面（根据手势滑动的距离，确定页面跳转）

private void moveToIndex() {
if(index < 0) {
index = 0;
}
if(index == getChildCount()) {
index = getChildCount() -1;
}
if(mOnpageChangedListener != null) {
mOnpageChangedListener.onChange(index);
}
mScroller = new Scroller(getContext());
mScroller.startScroll(getScrollX(), getScrollY(), (int)(getWidth() * index - getScrollX()), 0);
invalidate();
}

6 移动（手指抬起时确定要跳转的页面后，慢慢的实现页面移动到指定的位置）

private void moveToIndex() {
if(index < 0) {
index = 0;
}
if(index == getChildCount()) {
index = getChildCount() -1;
}
if(mOnpageChangedListener != null) {
mOnpageChangedListener.onChange(index);
}
mScroller = new Scroller(getContext());
mScroller.startScroll(getScrollX(), getScrollY(), (int)(getWidth() * index - getScrollX()), 0);
invalidate();
}

//计算移动   每次刷新界面 该方法都会被调用
//scroller.computeScrollOffset()   返回值是true 情况下  代表动作没有结束
@Override
public void computeScroll() {
if(mScroller != null) {
if(mScroller.computeScrollOffset()) {
scrollTo(mScroller.getCurrX(), 0);  //scrollTo这个方法一执行 会调用invalidate();,异步执行
invalidate();
}
}
super.computeScroll();
}

7 中断事件（当左右移动的控件里嵌套了上下移动的空间--ScrollView 应该判断，当前的手势响应是否被中断，通过判断，当前使用者的意图，确定是左走滑动，还是要上下滑动，来决定是否中断手势事件的向下传递）

//  中断事件传递
@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
switch(ev.getAction()) {
case MotionEvent.ACTION_DOWN:
mGestureDetector.onTouchEvent(ev); // 避免了中断事件 导致没有处理按下的操作
startX2 = (int) ev.getX();
startY2 = (int) ev.getY();
break;
case MotionEvent.ACTION_MOVE: // 手指移动的事件
int endX2 = (int) ev.getX();
int endY2 = (int) ev.getY();
int dx = endX2 - startX2;  // x轴的偏移量
int dy = endY2 - startY2;  //y轴的偏移量

if(Math.abs(dx) > Math.abs(dy)) { //如果为左右移动则中断手势事件响应的传递
return true;
}
break;
default:
break;
}
// 如果是上下滑动 屏幕的时候 不中断事件
//  return false;
//如果是左右滑动 中断事件
// return true;
//交给父类判断（即交给ViewGroup判断）父类的该方法返回值为false 不中断事件
return super.onInterceptTouchEvent(ev);
}

android中Touch事件处理流程图：







Touch事件传递机制流程图：




8 回调方法（当跳转到ViewPager中的某一页时，会自动触发某个事件实现接口回调）

// 定义一个公开接口，设置回调方法
public interface OnPageChangedListener {
void onChange(int index);
}

private OnPageChangedListener mOnpageChangedListener;

//定义一个公开的注册页面改变的方法
public void setOnpageChangedListener(OnPageChangedListener listener) {
mOnpageChangedListener = listener;
}

private void moveToIndex() {
if(index < 0) {
index = 0;
}
if(index == getChildCount()) {
index = getChildCount() -1;
}
if(mOnpageChangedListener != null) {
mOnpageChangedListener.onChange(index);
}
mScroller = new Scroller(getContext());
mScroller.startScroll(getScrollX(), getScrollY(), (int)(getWidth() * index - getScrollX()), 0);
invalidate();
}

完整代码：
activity_main.xml

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

<RadioGroup
android:id="@+id/mRadioGroup"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
</RadioGroup>
<com.example.mhy.zidingyiviewpager.MyViewPager
android:id="@+id/mViewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
</com.example.mhy.zidingyiviewpager.MyViewPager>
</LinearLayout>

ll_view.xml

<?xml version="1.0" encoding="utf-8"?>
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content" >

<LinearLayout

android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >

<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />

<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />

<EditText
android:id="@+id/editText1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:inputType="textPersonName" >

<requestFocus />
</EditText>

<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Medium Text"
android:textAppearance="?android:attr/textAppearanceMedium" />

<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" />

<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />

<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />

<EditText
android:id="@+id/editText1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:inputType="textPersonName" >

<requestFocus />
</EditText>

<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Medium Text"
android:textAppearance="?android:attr/textAppearanceMedium" />

<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" />

<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />

<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />

<EditText
android:id="@+id/editText1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:inputType="textPersonName" >

<requestFocus />
</EditText>

<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Medium Text"
android:textAppearance="?android:attr/textAppearanceMedium" />

<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" />
</LinearLayout>

</ScrollView>

MyViewPager.java

package com.example.mhy.zidingyiviewpager;

import android.content.Context;
import android.graphics.Canvas;
import android.util.AttributeSet;
import android.view.GestureDetector;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Scroller;

/**
* Created by mhy on 2016/6/15.
*/
public class MyViewPager extends ViewGroup {

private GestureDetector mGestureDetector;
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 class MySimpleOnGestureListener extends GestureDetector.SimpleOnGestureListener {
//滑动事件
//distanceX x轴滑动的距离
//distanceY y轴滑动的距离
@Override
public boolean onScroll(MotionEvent e1, MotionEvent e2,
float distanceX, float distanceY) {
scrollBy((int)distanceX, 0); //让viewGroup 移动多少距离
//scrollBy  会自动调用invalidate() 该方法
//invalidate();   自动调用onDraw
return super.onScroll(e1, e2, distanceX, distanceY);
}
}
private void initView() {

mGestureDetector = new GestureDetector(getContext(), new MySimpleOnGestureListener());

}

// 定义一个公开接口，设置回调方法
public interface OnPageChangedListener {
void onChange(int index);
}

private OnPageChangedListener mOnpageChangedListener;

//定义一个公开的注册页面改变的方法
public void setOnpageChangedListener(OnPageChangedListener listener) {
mOnpageChangedListener = listener;
}

//  中断事件传递
@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
switch(ev.getAction()) {
case MotionEvent.ACTION_DOWN:
mGestureDetector.onTouchEvent(ev); // 避免了中断事件 导致没有处理按下的操作
startX2 = (int) ev.getX();
startY2 = (int) ev.getY();
break;
case MotionEvent.ACTION_MOVE: // 手指移动的事件
int endX2 = (int) ev.getX();
int endY2 = (int) ev.getY();
int dx = endX2 - startX2;  // x轴的偏移量
int dy = endY2 - startY2;  //y轴的偏移量

if(Math.abs(dx) > Math.abs(dy)) { //如果为左右移动则中断手势事件响应的传递
return true;
}
break;
default:
break;
}
// 如果是上下滑动 屏幕的时候 不中断事件
//  return false;
//如果是左右滑动 中断事件
// return true;
//交给父类判断（即交给ViewGroup判断）父类的该方法返回值为false 不中断事件
return super.onInterceptTouchEvent(ev);
}
private int startX2;
private int startY2;

private int index = 0; // 当前显示的位置
private int startX;
@Override
public boolean onTouchEvent(MotionEvent event) {
mGestureDetector.onTouchEvent(event); //把手势识别器注册到触摸事件中
switch(event.getAction()) {
case MotionEvent.ACTION_DOWN:
// 当手指按下的时候 记录开始的坐标
startX = (int) event.getX();
break;
case MotionEvent.ACTION_UP:
// 当手指抬起的时候 记录结束的坐标
int endX = (int) event.getX();

if((startX - endX) > getWidth() / 2) {
//进入下一个界面
index++;
} else if((endX - startX) > getWidth() / 2) {
// 进入上一个界面
index--;
}
moveToIndex();
break;
default:
break;
}
//返回处理了触摸事件
return true;

}
//外界通过指定索引将页面切换到指定的位置
public void moveToIndex(int index) {
this.index = index;
moveToIndex();
}

private void moveToIndex() {
if(index < 0) {
index = 0;
}
if(index == getChildCount()) {
index = getChildCount() -1;
}
if(mOnpageChangedListener != null) {
mOnpageChangedListener.onChange(index);
}
mScroller = new Scroller(getContext());
mScroller.startScroll(getScrollX(), getScrollY(), (int)(getWidth() * index - getScrollX()), 0);
invalidate();
}

//计算移动   每次刷新界面 该方法都会被调用
//scroller.computeScrollOffset()   返回值是true 情况下  代表动作没有结束
@Override
public void computeScroll() {
if(mScroller != null) {
if(mScroller.computeScrollOffset()) {
scrollTo(mScroller.getCurrX(), 0);  //scrollTo这个方法一执行 会调用invalidate();,异步执行
invalidate();
}
}
super.computeScroll();
}

//  onMeasure  会在onLayout 之前调用
// 要求父容器一定要测量子容器 ,如果不测量 子容器 子容器宽和高 都是0   子容器由于挂载到父容器可以正常显示,但是 孙子就不能显示
// 父容器先知道自己大小（match_parent） 子容器先知道大小(wrap_content)
//widthMeasureSpec不仅表示控件的宽，里面还带有控件的属性的基本信息
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
System.out.println("onMeasure");
System.out.println(widthMeasureSpec);
MeasureSpec.getMode(widthMeasureSpec); //获取控件的模型
MeasureSpec.getSize(widthMeasureSpec); // 得到控件真正的尺寸
System.out.println(heightMeasureSpec);
for(int i=0; i< getChildCount(); i++) {
View view = getChildAt(i);
view.measure(widthMeasureSpec, heightMeasureSpec);// 对每个孩子都测量
}
}

//  分配孩子位置     在onDraw方法之前调用
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {

for(int i=0; i<getChildCount(); i++) {
View view = getChildAt(i);
view.layout(0 + getWidth() * i, 0, getWidth() + getWidth() * i, getHeight());
}
}

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
}
}

MainActivity.java

package com.example.mhy.zidingyiviewpager;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import android.widget.RadioButton;
import android.widget.RadioGroup;

public class MainActivity extends AppCompatActivity {

private MyViewPager mMyViewPager;
private RadioGroup mRadioGroup;

private int[] imgs = new int[] { R.mipmap.a1, R.mipmap.a2, R.mipmap.a3,
R.mipmap.a4, R.mipmap.a5, R.mipmap.a6};

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mMyViewPager = (MyViewPager) findViewById(R.id.mViewPager);
mRadioGroup = (RadioGroup) findViewById(R.id.mRadioGroup);

//为MyViewPager添加图片
for(int i=0; i<imgs.length; i++) {
ImageView imageView = new ImageView(getApplicationContext());
imageView.setBackgroundResource(imgs[i]);
mMyViewPager.addView(imageView);
}

View view = View.inflate(getApplicationContext(), R.layout.ll_view, null);
mMyViewPager.addView(view, 2);
System.out.println("mMyViewPager.getChildCount() " + mMyViewPager.getChildCount());

for(int i=0; i<mMyViewPager.getChildCount(); i++) {

RadioButton radioButton = new RadioButton(getApplicationContext());
radioButton.setId(i);
mRadioGroup.addView(radioButton);

if(i == 0) {
radioButton.setChecked(true);
}
}

//监听页面切换事件，使对应的单选按钮做相应的改变
mMyViewPager.setOnpageChangedListener(new MyViewPager.OnPageChangedListener() {

@Override
public void onChange(int index) {
RadioButton radioButton = (RadioButton) mRadioGroup.getChildAt(index);
radioButton.setChecked(true);
}
});

//监听单选按钮更改的事件，使ViewPager页面更随做相应的切换
mRadioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(RadioGroup group, int checkedId) {
mMyViewPager.moveToIndex(checkedId);
}
});

}
}