Android ViewGroup实现页面滑动效果并实现不同的动画效果

这应该是自己第一次开始写博客，今天起想要记录下自己工作上学到的一些东西，除了能随时查看自己的曾经学到的东西，也可以跟大家分享一下自己的一些经验。由于自己刚到3g门户去实习，其实有很多技术上东西都不是很懂，也只能慢慢去学了。一进来的实习，带我的那位辅导员就让我实现像Launcher那样的滑动，并且实现滑动过程中的效果~~~这下惨了，自己最薄弱的一环，对一些界面上的东西都很少去碰，只能乖乖的去网上搜搜资料恶补一下了。
不扯那么多了，直接进入正题吧，其实实现像Launcher那样的滑动效果有几种方法，不过我在这里用继承ViewGroup的方法去实现。要是实现ViewGroup必须重写onLayout()和onMeasure()这两个方法，这个两个方法在创建的时候会自动调用，调用的顺序是onMeasure()-->onLayout()。
onMeasure()方法中是存储在ViewGroup里面每个子View的默认宽度和高度，以下代码就是把每个子View的默认宽度和高度都设置与父类的一样。
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
Log.i("onMeasure", "onMeasure----------");
super.onMeasure(widthMeasureSpec, heightMeasureSpec);

final int width = MeasureSpec.getSize(widthMeasureSpec); //转换宽度
final int widthMode = MeasureSpec.getMode(widthMeasureSpec);
if (widthMode != MeasureSpec.EXACTLY) {
throw new IllegalStateException("ScrollLayout only canmCurScreen run at EXACTLY mode!");
}
final int heightMode = MeasureSpec.getMode(heightMeasureSpec);
if (heightMode != MeasureSpec.EXACTLY) {
throw new IllegalStateException("ScrollLayout only can run at EXACTLY mode!");
}

// 将所有的子View高度和宽度都定义成和父View一样
final int count = getChildCount();
for (int i = 0; i < count; i++) {
getChildAt(i).measure(widthMeasureSpec, heightMeasureSpec);
}

//滑动到默认屏幕
scrollTo(mCurScreen * width, 0);
}
而onLayout()就是设置每个子View在屏幕那个位置来显示出子View，现在在OnLayout()方法里面设置是从左到右横向绘出每个子View，其中onLayout这个方法的实现是在什么地方显示子view，显示的范围是多大，这个方法不能改变每个view原本的大小的
protected void onLayout(boolean changed, int l, int t, int r, int b) {
Log.i("onLayout", "onLayout----------");
if(mTouchState == TOUCH_STATE_REST){
int childLeft = 0;//从坐标0开始绘画
final int childCount = getChildCount();

for (int i=0; i<childCount; i++) {
final View childView = getChildAt(i);
if (childView.getVisibility() != View.GONE) {
final int childWidth = childView.getMeasuredWidth();
//根据left , top ,right,bottom 四个参数，调用子View的layout()方法将其放置在父类中，参照物是父View
childView.layout(childLeft, 0,
childLeft+childWidth, childView.getMeasuredHeight());
childLeft += childWidth;
}
}
}
}
onMeasure和onLayout这个两个方法只是设置子View大小和绘画位置，真正把每个子View绘画出来是在onDispathDraw()方法里（一开始我还以为在onDraw，但是ViewGroup那里是不会调用onDraw方法）实现的，要是实现子view滑动时候的效果就可以再这里实现。
到了这里就把整个页面里的子view都画出来，要实现滑动的效果就需要在onTouchEvent那里做功夫，主要实现滑动动作是在MotionEvent.Action_Move里的scrollBy(x,y),x表示水平滑动的距离，y表示垂直滑动的距离，因为这里只水平方向的滑动，所以y可以设置为0。
如果要像一些桌面应用那样，当手松开后就滑动到某个完整的view的页面，这就需要用Scroller和在MotionEvent.Action_Up上设置，Scroller是可以控制整个页面的滑动，而在MotionEvent.Action_Up上面时判断手指滑动的速度，可以自己定义一个速度的基准，当达到就跨屏滑动，没有达到就判断滑动的位置是否超过当前屏幕的一半，超过就跨屏，否则仍然恢复到当前屏幕，具体还有一些数值需要自己去计算定义自己喜欢效果。代码如下：
public boolean onTouchEvent(MotionEvent event) {
// TODO Auto-generated method stub

//获得动作捕捉器
if (mVelocityTracker == null) {
mVelocityTracker = VelocityTracker.obtain();
}
mVelocityTracker.addMovement(event);//开始捕捉动作


final int action = event.getAction();
final float x = event.getX();
final float y = event.getY();

switch (action) {
case MotionEvent.ACTION_DOWN:
if (!mScroller.isFinished()){
mScroller.abortAnimation();
}
mLastMotionX = x;
break;

case MotionEvent.ACTION_MOVE:
int deltaX = (int)(mLastMotionX - x);
mLastMotionX = x;

scrollBy(deltaX, 0);
break;

case MotionEvent.ACTION_UP://放手后的动作

final VelocityTracker velocityTracker = mVelocityTracker;

//计算滑动速度,参数1000表示以1000毫秒为单位计算，即以秒为单位
velocityTracker.computeCurrentVelocity(1000);
int velocityX = (int) velocityTracker.getXVelocity();


//如果向左或者向右的滑动速度超过了基础线，则直接切换屏幕；如果没有，则判断滑动的距离是否超过了屏幕一半的距离，也就是View的一半Width
if (velocityX > SNAP_VELOCITY && mCurScreen > 0) {
// Fling enough to move left

snapToScreen(mCurScreen - 1);
} else if (velocityX < -SNAP_VELOCITY
&& mCurScreen < getChildCount() - 1) {
// Fling enough to move right
snapToScreen(mCurScreen + 1);
} else {
snapToDestination();
}
if (mVelocityTracker != null) {
mVelocityTracker.recycle();
mVelocityTracker = null;
}
mTouchState = TOUCH_STATE_REST;
break;

case MotionEvent.ACTION_CANCEL:
mTouchState = TOUCH_STATE_REST;
break;
}

return true;
}
public void snapToDestination() {
final int screenWidth = getWidth();
final int destScreen = (getScrollX()+ screenWidth/2)/screenWidth;
snapToScreen(destScreen);
}
public void snapToScreen(int whichScreen) {
// get the valid layout page
whichScreen = Math.max(0, Math.min(whichScreen, getChildCount()-1));
if (getScrollX() != (whichScreen*getWidth())) {

final int delta = whichScreen*getWidth()-getScrollX();
mScroller.startScroll(getScrollX(), 0,
delta, 0, Math.abs(delta)*2);
mCurScreen = whichScreen;
invalidate(); // Redraw the layout
}
}
现在基本算是实现了整个屏幕滑动的效果，要实现滑动的动画就必须要在dispathDraw(Canvas canvas)的canvas来实现了，在ViewGroup里面有一个方法drawChild(),通过这个将每个view都重绘上去，其中的变换不外乎translate，scale这个几种，当然要实现其他比较复杂的效果就需要其他操作了，所以现在要重写dispatchDraw里面的方法，而我现在要实现像Go桌面那样的弹跳效果，这里是通过获取屏幕的左位置和每个子view的左坐标来进行绘画，因为子view的位置是固定的，而屏幕的左坐标却在不断的变化。在这里是用一个判断为基准，就是每个子view的左坐标与屏幕左坐标的距离是否超过一个子view的宽度，超过距离的子view将不做变换。
int dx=Math.abs(getScrollX()-view.getLeft())通过这个获取每个子view的左坐标和屏幕左坐标的距离，这里我是实现弹跳的效果，其实只是对子view的y轴上的位置进行变换，用dx/view.getWidth()来获取滑动距离的比例，通过canvas.translate(0.0f, -(1.0f*dx/view.getWidth())*getHeight())来进行变化,其实当前子view初始化的位置(0.0f,0.0f),也就是这时dx是0，当我进行滑动的时候，dx就递增，当前子view就开始向上移动，而相对隔壁的子view，dx是子view的宽度，dx是递减的，就开始向下移动，这个过程全都是根据每个子view的左坐标的坐标和屏幕左坐标距离进行判断的，就是越接近屏幕左坐标的就向下移动，远离就向上移动，可能我讲得也不大清楚，只要自己用纸画一下应该就会明白的，代码如下：
int saveCount = canvas.save();
int count = getChildCount();
int width = getWidth();
int scrollX=getScrollX();

// for (int i = 0; i < count; i++) {
// canvas.save();
// View view=getChildAt(i);
// int childLeft=view.getLeft();
// int dx=Math.abs(scrollX-childLeft);
// //Log.i("child"+i, x+"-----------");
// if(dx<=width){
// canvas.scale(1.0f, 1.0f-(float)0.5*dx/width);
// canvas.translate(0.0f, (0.5f*dx/width)*getHeight());
// Log.i("heigh", getHeight()+"----------");
// drawChild(canvas, view, getDrawingTime());
// canvas.restore();
// }else{
// canvas.scale(1.0f, 0.5f);
// canvas.translate(0.0f, 0.5f*getHeight());
// drawChild(canvas, view, getDrawingTime());
// canvas.restore();
// }
// }

for (int i = 0; i < count; i++) {
canvas.save();
View view=getChildAt(i);
int childLeft=view.getLeft();
int dx=Math.abs(scrollX-childLeft);
//Log.i("child"+i, dx+"-----------");
if(dx<=width){
canvas.translate(0.0f, -(1.0f*dx/width)*getHeight());
Log.i("heigh", getHeight()+"----------");
drawChild(canvas, view, getDrawingTime());
canvas.restore();
}else{
canvas.translate(0.0f, -1.0f*getHeight());
drawChild(canvas, view, getDrawingTime());
canvas.restore();
}
}
canvas.restoreToCount(saveCount);
在这个过程要注意画布的存储和恢复，不然会出现意外的（奸笑一下），其实这个效果要实现起来也是挺简单的，只是自己做的时候好像走了很多弯路，总之自己学的东西还有很多，继续努力吧！首次写开发的博客，大神们随便喷吧~