模仿ViewPager控件

自定义控件是开发中经常使用的技术。系统中自带的ViewPager实现的功能有时候不能满足开发的需要，如ViewPager没有滑动图片时的动画切换效果。通过对 ViewPager的模仿和部分功能的加强，可以使学习者了解自定义ViewGroup的实现过程，以及系统动画的实现原理。

 

第一步：继承ViewGroup，就必须重载父类的构造方法，和onLayout（）方法。首先创建一个类，起名MyViewPager，继承ViewGroup

public class MyViewPager extends ViewGroup {

private int page;//当前页的索引

private GestureDetector detector;//手势探测

private Context context;//控件创立的上下文

private MyScroller scroller;//缓慢页面切换帮助类，

private boolean isFling;//用于判断

private MyViewOnPageChangedListener listener;//页面变化监听事件

/**

*建立两个参数的构造函数，用于在布局文件中使用。在构造函数中，调用initView（）方法初始化控件，创建GestureDetector对象，响应屏幕触摸事件。

*/

public MyViewPager(Context context, AttributeSet attrs) {

super(context, attrs);

this.context=context;

// TODO Auto-generated constructor stub

initView();

}

public void initView(){

scroller=new MyScroller();

detector=new GestureDetector(context,new GestureDetector.OnGestureListener(){

 

@Override

public boolean onDown(MotionEvent e) {

// TODO Auto-generated method stub

return false;

}

 

@Override

public void onShowPress(MotionEvent e) {

// TODO Auto-generated method stub

 

}

 

@Override

public boolean onSingleTapUp(MotionEvent e) {

// TODO Auto-generated method stub

return false;

}

/**

 * 图片缓慢滑动效果

 */

@Override

public boolean onScroll(MotionEvent e1, MotionEvent e2,

float distanceX, float distanceY) {

// TODO Auto-generated method stub

scrollBy((int)distanceX,0);

return false;

}

 

@Override

public void onLongPress(MotionEvent e) {

// TODO Auto-generated method stub

 

}

/**

 * 图片快速滑动切换

 */

@Override

public boolean onFling(MotionEvent e1, MotionEvent e2,

float velocityX, float velocityY) {

// TODO Auto-generated method stub

isFling=true;

if(velocityX<0&&page<getChildCount()-1){

page++;

}else if(velocityX>0&&page>0){

page--;

}

moveToDes(page);

return false;

}});

}

/** * 设置子view的布局，使其按照父控件的大小沿着水平方向展开 */

 

@Override

protected void onLayout(boolean changed, int l, int t, int r, int b) {

// TODO Auto-generated method stub

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

getChildAt(i).layout(i*getWidth(),0,getWidth()+i*getWidth(),getHeight());

}

}

/**
* 重载onTouchEvent方法，设置page值，当手指滑动超过二分之一屏幕宽度时，切换到下一个或上一个页面，
* 当不足二分之一屏幕宽度时，页面不切换
*/

 

private int firstPosition;//记录手指按下时的位置

@Override

public boolean onTouchEvent(MotionEvent event) {

// TODO Auto-generated method stub

detector.onTouchEvent(event);

 super.onTouchEvent(event);

 

 switch (event.getAction()) {

 

case MotionEvent.ACTION_DOWN:

firstPosition=(int)event.getX();

break;

case MotionEvent.ACTION_UP:

/**

 * 用isFling区分缓慢移动和快速移动

 */

if(!isFling){

if(event.getX()-firstPosition>getWidth()/2){

page=page-1;

}else if(firstPosition-event.getX()>getWidth()/2){

page=page+1;

}

moveToDes(page);

break;

}

isFling=false;

}

 return true;

}

 

/**

 * 使其移动到page相应的页面

 * @param page

 */

public  void moveToDes(int page) {

// TODO Auto-generated method stub

if(page<=0){

page=0;

}

if(page>=getChildCount()-1){

page=getChildCount()-1;

}

/**

 * 迅速页面切换

 */

//scrollTo(page*getWidth(), 0);

/**

 * 添加页面变化监听,监听事件放入经常调用的方法里，显示事件的经常调用

 */

listener.onPageChanged(page);

 

//缓慢页面切换动画

int distance=page*getWidth()-getScrollX();

scroller.startScroll(getScrollX(), distance);

invalidate();//刷新页面，重画，并且重新执行computeScroll()

}

//重复执行该方法，实现动画效果

@Override

public void computeScroll() {

// TODO Auto-generated method stub

super.computeScroll();

if(scroller.isScrolling()){

scrollTo(scroller.getCurrentX(), 0);

invalidate();

}

 

}

 

/**

 * 设置监听事件方法

 * @param listener

 */

public void setPageChangedListener(MyViewOnPageChangedListener listener){

this.listener=listener;

}

/**

 * 监听事件接口，监听页面变化

 * @author Charles

 *

 */

interface MyViewOnPageChangedListener{

public void onPageChanged(int page);

}

 

}

 

第二步：自定义MyScroller

public class MyScroller {

public int distance;//动画运行距离

public int startX;//动画开始位置

public boolean isFinish;//判断动画是否完成

public int startTime;//动画开始时间

public int duration=500;//动画持续时间

public int currentX;//当前坐标

 

public void startScroll(int startX,int distance){

this.distance=distance;

this.startX=startX;

startTime=(int)SystemClock.uptimeMillis();

isFinish=false;

}

public boolean isScrolling(){

if(isFinish){

return false;

}

 

int lastTime=(int)SystemClock.uptimeMillis()-startTime;

if(lastTime<=duration){

currentX=startX+lastTime*distance/duration;//通过当前时间，判断当前位置

 

}else{

currentX=startX+distance;

isFinish=true;

}

return true;

}

public int getCurrentX(){

return currentX;

}

}

 

第三步：定义布局文件，将自定义的控件放到布局文件中

<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.define_ViewPager.MainActivity" >

<RadioGroup

    android:id="@+id/group"

    android:orientation="horizontal"

    android:layout_width="match_parent"

    android:layout_height="30dp"/>

 

    <com.example.define_ViewPager.MyViewPager

        android:id="@+id/myViewPager"

        android:layout_width="match_parent"

        android:layout_height="0dp"

        android:layout_weight="1"

        />

 

</LinearLayout>

 

 

第四步：在Activity中，将准备好的图片加载到MyViewPager中

public class MainActivity extends Activity {

private MyViewPager viewPager;

private RadioGroup group;//选择按钮组

private int[] images={R.drawable.a1,R.drawable.a2,R.drawable.a3

,R.drawable.a4,R.drawable.a5,R.drawable.a6};

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

viewPager=(MyViewPager) findViewById(R.id.myViewPager);

group=(RadioGroup) findViewById(R.id.group);

//加载图片

for(int i=0;i<images.length;i++){

View view=new View(this);

view.setBackgroundResource(images[i]);

viewPager.addView(view);

 

}

//添加单选按钮到group中

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

RadioButton button=new RadioButton(this);

button.setId(i);

if(i==0){

button.setChecked(true);

}

group.addView(button);

}

/**

 * 设置监听方法，当页面变化时，使相应的RadioButton选中

 */

viewPager.setPageChangedListener(new MyViewOnPageChangedListener(){

 

@Override

public void onPageChanged(int page) {

// TODO Auto-generated method stub

RadioButton button=(RadioButton)group.getChildAt(page);

button.setChecked(true);

 

}});

group.setOnCheckedChangeListener(new OnCheckedChangeListener(){

 

@Override

public void onCheckedChanged(RadioGroup group, int checkedId) {

// TODO Auto-generated method stub

viewPager.moveToDes(checkedId);//移动到选中页

}});

}

 

}