自定义抽屉控件

android中实现屏幕切换 1）activity切换 2 ) ViewGroup实现同一activity中不同view的切换。同时类似solidingDrawer在一个View中模拟出多个View之间得切换。主要代码是在Panel.java中

 

Panel.java

 

package com.yht.imitateDrawer;import android.app.Activity;import android.content.Context;import android.content.res.TypedArray;import android.graphics.Canvas;import android.graphics.Matrix;import android.graphics.drawable.Drawable;import android.util.AttributeSet;import android.view.GestureDetector;import android.view.GestureDetector.OnGestureListener;import android.view.MotionEvent;import android.view.View;import android.view.animation.Animation;import android.view.animation.Animation.AnimationListener;import android.view.animation.Interpolator;import android.view.animation.LinearInterpolator;import android.view.animation.TranslateAnimation;import android.widget.Button;import android.widget.ImageButton;import android.widget.LinearLayout;// pro1 ??? 改变抽屉把手的位置// ??? 从按下然后拖动的的整个过程是怎么样的，怎么形成动画的。/*展开 * 向handle的ACTION_DOWN按下，获取滚动的因子，将content变为激活状态。layout()会重新执行。 * 其它动作继续，在第一个动作中获取X，Y方向上的初始化滚动。 * 更新offsetLocaltion() * 发生OnScroll()动作，更新mTranceX，然后调用更新UI */public class Panel extends LinearLayout { private static final String TAG = "Panel";/** * Callback invoked when the panel is opened/closed. */ public static interface OnPanelListener { /** * Invoked when the panel becomes fully closed. */ public void onPanelClosed(Panel panel); /** * Invoked when the panel becomes fully opened. */ public void onPanelOpened(Panel panel); } private boolean mIsShrinking; // ???() 判断是否是正在收缩状态private int mPosition;private int mDuration;private boolean mLinearFlying; private View mHandle; private View mContent;private Drawable mOpenedHandle;private Drawable mClosedHandle;private float mTrackX; // ???() X方向上的隐藏追踪private float mTrackY; // ???() Y方向上的隐藏跟踪private float mVelocity; // ???() Fling状态每秒钟划的像素。private Activity mActivity = null;private OnPanelListener panelListener;public static final int TOP = 0;public static final int BOTTOM = 1;public static final int LEFT = 2;public static final int RIGHT = 3;private enum State {ABOUT_TO_ANIMATE, // 由READY进入这个状态，但还没有发生动画，滚动，和滑动ANIMATING, //正在动画READY, //就绪状态什么都不做TRACKING, // 拖动FLYING,};private boolean mIsContentHide = true; //private State mState;private Interpolator mInterpolator;private GestureDetector mGestureDetector;//手势监听器private PanelOnGestureListener mGestureListener; //手势监听器的回调private int mContentHeight;private int mContentWidth;private int mOrientation; //这个方向是动画出现的方向。可以修改mPositon来修改实验一下public Panel(Context context, AttributeSet attrs) {super(context, attrs);TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.Panel);mDuration = a.getInteger(R.styleable.Panel_animationDuration, 750);// duration defaults to 750 msmPosition = a.getInteger(R.styleable.Panel_position, BOTTOM);// position defaults to BOTTOMmLinearFlying = a.getBoolean(R.styleable.Panel_linearFlying, false);// linearFlying defaults to falsemOpenedHandle = a.getDrawable(R.styleable.Panel_openedHandle);mClosedHandle = a.getDrawable(R.styleable.Panel_closedHandle);a.recycle();mOrientation = (mPosition == TOP || mPosition == BOTTOM)? VERTICAL : HORIZONTAL;setOrientation(mOrientation);//记录控件的各个状态mState = State.READY; mGestureListener = new PanelOnGestureListener();mGestureDetector = new GestureDetector(mGestureListener);mGestureDetector.setIsLongpressEnabled(false); //长按没有返回值所以去掉} /** * Sets the listener that receives a notification when the panel becomes open/close. * * @param onPanelListener The listener to be notified when the panel is opened/closed. */ public void setOnPanelListener(OnPanelListener onPanelListener) { panelListener = onPanelListener; } /** * Gets Panel's mHandle * * @return Panel's mHandle */ public View getHandle() {return mHandle;} /** * Gets Panel's mContent * * @return Panel's mContent */ public View getContent() {return mContent;} /** * Sets the acceleration curve for panel's animation. * * @param i The interpolator which defines the acceleration curve */ public void setInterpolator(Interpolator i) { mInterpolator = i; } /** * Returns the opened status for Panel. * * @return True if Panel is opened, false otherwise. */public boolean isOpen() {return mContent.getVisibility() == VISIBLE;}@Override/* * 在这里完成了一些handler与Content的初始化工作 */protected void onFinishInflate() {//调用超类方法super.onFinishInflate();//获取handle引用设置Handle的监听器mHandle = findViewById(R.id.panelHandle);if (mHandle == null) { throw new RuntimeException("Your Panel must have a View whose id attribute is 'R.id.panelHandle'");}mHandle.setOnTouchListener(touchListener);//获取Content的引用mContent = findViewById(R.id.panelContent);if (mContent == null) { throw new RuntimeException("Your Panel must have a View whose id attribute is 'R.id.panelContent'");}ImageButton imgBtn = (ImageButton) findViewById(R.id.receive_box_pull_up_id);imgBtn.setOnTouchListener(new View.OnTouchListener() {public boolean onTouch(View arg0, MotionEvent ev) {if(!isContentClosed()){mHandle.dispatchTouchEvent(ev);}return true;}});// reposition childrenremoveView(mHandle);removeView(mContent);if (mPosition == TOP || mPosition == LEFT) {addView(mContent);addView(mHandle);} else {addView(mHandle);addView(mContent);}//设置handle的背景if (mClosedHandle != null) {//mHandle.setBackgroundDrawable(mClosedHandle);}//隐藏内容mContent.setVisibility(GONE);}@Override/* * 主要是获取了Content的宽高 */protected void onLayout(boolean changed, int l, int t, int r, int b) {super.onLayout(changed, l, t, r, b);mContentWidth = mContent.getWidth();mContentHeight = mContent.getHeight();}@Override/* * 根据控件的不同的状态修改画布的偏移量 */protected void dispatchDraw(Canvas canvas) {//String name = getResources().getResourceEntryName(getId());//Log.d(TAG, name + " ispatchDraw " + mState);// this is why 'mState' was added:// avoid flicker before animation startif (mState == State.ABOUT_TO_ANIMATE && !mIsShrinking) {int delta = mOrientation == VERTICAL? mContentHeight : mContentWidth;if (mPosition == LEFT || mPosition == TOP) {delta = -delta;}if (mOrientation == VERTICAL) {canvas.translate(0, delta); // ???() translate(float,float)的作用。将控件的起始坐标平移到（0,delta）的位置} else {canvas.translate(delta, 0); // ???() 这里平移到了delta,0的位置，但是等控件完全展开后如果还是这个矩阵的话，那Content应该是看不到，现在能//看到，那在哪里转化了呢。动画完了就还原}}if (mState == State.TRACKING || mState == State.FLYING) {canvas.translate(mTrackX, mTrackY); /* * 激活状态的Content和handler以mTranceX和mTranckY为参数不断的移动就能形成动画 */// ??? translate会影响onLayout吗。/* * 不会，translate只能使view看起来发生了变化，但layout()，不会被调用 * 也就是，外部的处罚事件还是会按照translate以前的标准触发。 */// ??? translate和MotionEvent什么关系/* * 没什么关系，translate不会改变框架中事件的判断。 */}super.dispatchDraw(canvas);}private float ensureRange(float v, int min, int max) {v = Math.max(v, min);v = Math.min(v, max);return v;}OnTouchListener touchListener = new OnTouchListener() {int initX; //int initY;boolean setInitialPosition; //判断是否设置了初始滚动位置 它是类的成员函数public boolean onTouch(View v, MotionEvent event) {//Log.d(TAG, "state: " + mState + " x: " + event.getX() + " y: " + event.getY());int action = event.getAction();//if 用户向下按//Content的X方向和Y方向滚动都为0//if 内容为隐藏状态根据方向和位置修改X方向或Y方向上的滚动if (action == MotionEvent.ACTION_DOWN) {initX = 0;initY = 0;if (mContent.getVisibility() == GONE) {// since we may not know content dimensions we use factors hereif (mOrientation == VERTICAL) {initY = mPosition == TOP? -1 : 1;} else {initX = mPosition == LEFT? -1 : 1;}}//设置初始化的记录为truesetInitialPosition = true; } else {//if 用户按下的不是向下//if 已经设置了初始滚动位置//修改内容X，Y方向上的滚动。//设置控件滚动的初始化位置//设置初始化的记录为false//???() 为什么要转换/* *ACTION_DOWN的操作都是根据handle的，Content激活后 *重新layout，handle的位置发生了改变，而以后所有的操作 *的坐标又都是根据现在的handler的位置的，这样就存在了误差 *所有需要offsetLocation把这个误差修正过来。 */if (setInitialPosition) {// now we know content dimensions, so we multiply factors...initX *= mContentWidth;initY *= mContentHeight;// ... and set initial panel's positionmGestureListener.setScroll(initX, initY);setInitialPosition = false;// for offsetLocation we have to invert valuesinitX = -initX; initY = -initY;}// offset every ACTION_MOVE & ACTION_UP event //如果这里去掉，开始拖动不响应，拖动了一段距离后才能拉出Contentevent.offsetLocation(initX, initY); // ???() 在X，Y的方向上分别加上initX，initY。// ???() 为什么会对scrollX产生那么大的影响呢/* * 不加这一句会使distanceX的值差异非常大，而distanceX会影响到mTranceX。 */// ???()为什么巨大的负的mTranceX没有把handler给变没了。/* * mTranceX是有范围的，如果最小值小于这个范围就不会在发生该变了，所有 * 会出现延迟的现象。其实那是还没有到达最小值。 */}//if手势监听器没有处理//if 用户事件为抬起事件启动动画线程boolean result = mGestureDetector.onTouchEvent(event);if (!result) {if (action == MotionEvent.ACTION_UP) {// tup up after scrollingpost(startAnimation); // ??? 添加一个}}return false;}};/** * 处理背景的drawable */private void postProcess() {if (mIsShrinking && mClosedHandle != null) {//mHandle.setBackgroundDrawable(mClosedHandle);} elseif (!mIsShrinking && mOpenedHandle != null) {//mHandle.setBackgroundDrawable(mOpenedHandle);}// invoke listener if anyif (panelListener != null) {if (mIsShrinking) {panelListener.onPanelClosed(Panel.this);} else {panelListener.onPanelOpened(Panel.this);}}}class PanelOnGestureListener implements OnGestureListener {float scrollY;float scrollX;public void setScroll(int initScrollX, int initScrollY) {scrollX = initScrollX;scrollY = initScrollY;}public boolean onDown(MotionEvent e) {scrollX = scrollY = 0;if (mState != State.READY) {// we are animating or just about to animatereturn false;}mState = State.ABOUT_TO_ANIMATE;mIsShrinking = mContent.getVisibility() == VISIBLE;if (!mIsShrinking) {// this could make flicker so we test mState in dispatchDraw()// to see if is equal to ABOUT_TO_ANIMATEmContent.setVisibility(VISIBLE);}return true;}public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {mState = State.FLYING;mVelocity = mOrientation == VERTICAL? velocityY : velocityX;post(startAnimation);return true;}public void onLongPress(MotionEvent e) {// not used}// ???() onScroll做了什么事/* * 该变mTranceX和mTranceY，更新UI */public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {mState = State.TRACKING;float tmpY = 0, tmpX = 0;if (mOrientation == VERTICAL) {scrollY -= distanceY;if (mPosition == TOP) {tmpY = ensureRange(scrollY, -mContentHeight, 0);} else {tmpY = ensureRange(scrollY, 0, mContentHeight);}} else {scrollX -= distanceX;if (mPosition == LEFT) {tmpX = ensureRange(scrollX, -mContentWidth, 0);} else {tmpX = ensureRange(scrollX, 0, mContentWidth);}}if (tmpX != mTrackX || tmpY != mTrackY) {mTrackX = tmpX;mTrackY = tmpY;invalidate();}return true;}public void onShowPress(MotionEvent e) {// not used}public boolean onSingleTapUp(MotionEvent e) {// simple tap: clickpost(startAnimation);return true;}}private AnimationListener animationListener = new AnimationListener() {public void onAnimationEnd(Animation animation) {mState = State.READY;if (mIsShrinking) {mContent.setVisibility(GONE);}postProcess();}public void onAnimationRepeat(Animation animation) {}public void onAnimationStart(Animation animation) {mState = State.ANIMATING;}};Runnable startAnimation = new Runnable() {public void run() {// this is why we post this Runnable couple of lines above:// now its save to use mContent.getHeight() && mContent.getWidth()TranslateAnimation animation; // ???() 负责移动的动画int fromXDelta = 0, toXDelta = 0, fromYDelta = 0, toYDelta = 0; // ???() 动画的起始、终点坐标。相对于器parent View//if 控件状态为Fling//判断是否处于收缩状态if (mState == State.FLYING) {mIsShrinking = (mPosition == TOP || mPosition == LEFT) ^ (mVelocity > 0);}int calculatedDuration;//if 控件为纵向//获取Y方向Delta ???//if 控件是拖动//???//计算周期时间 ??? 为什么分为Flying与非Flying两种状态if (mOrientation == VERTICAL) {int height = mContentHeight;if (!mIsShrinking) {fromYDelta = mPosition == TOP? -height : height;} else {toYDelta = mPosition == TOP? -height : height;}if (mState == State.TRACKING) {if (Math.abs(mTrackY - fromYDelta) < Math.abs(mTrackY - toYDelta)) {mIsShrinking = !mIsShrinking;toYDelta = fromYDelta;}fromYDelta = (int) mTrackY;} elseif (mState == State.FLYING) {fromYDelta = (int) mTrackY;}// for FLYING events we calculate animation duration based on flying velocity// also for very high velocity make sure duration >= 20 msif (mState == State.FLYING && mLinearFlying) {calculatedDuration = (int) (1000 * Math.abs((toYDelta - fromYDelta) / mVelocity));calculatedDuration = Math.max(calculatedDuration, 20);} else {calculatedDuration = mDuration * Math.abs(toYDelta - fromYDelta) / mContentHeight;}} else {int width = mContentWidth;if (!mIsShrinking) {fromXDelta = mPosition == LEFT? -width : width;} else {toXDelta = mPosition == LEFT? -width : width;}if (mState == State.TRACKING) {if (Math.abs(mTrackX - fromXDelta) < Math.abs(mTrackX - toXDelta)) {mIsShrinking = !mIsShrinking;toXDelta = fromXDelta;}fromXDelta = (int) mTrackX;} elseif (mState == State.FLYING) {fromXDelta = (int) mTrackX;}// for FLYING events we calculate animation duration based on flying velocity// also for very high velocity make sure duration >= 20 msif (mState == State.FLYING && mLinearFlying) {calculatedDuration = (int) (1000 * Math.abs((toXDelta - fromXDelta) / mVelocity));calculatedDuration = Math.max(calculatedDuration, 20);} else {calculatedDuration = mDuration * Math.abs(toXDelta - fromXDelta) / mContentWidth;}}mTrackX = mTrackY = 0;//if 计算周期为0//???() toXDelta跟fromXDelta相等if (calculatedDuration == 0) {mState = State.READY;setContentClose(false);if (mIsShrinking) {mContent.setVisibility(GONE);setContentClose(true);}postProcess();return;}// ???() TranslateAnimation怎么知道移动的是哪个view/* * TranslateAnimation的所有属性都会作用在启动了anmation的View上。 */if(mOrientation == VERTICAL){if(fromYDelta > toYDelta){setContentClose(true);}else{setContentClose(false);}}else{if(fromXDelta > toXDelta){setContentClose(true);}else{setContentClose(false);}}animation = new TranslateAnimation(fromXDelta, toXDelta, fromYDelta, toYDelta);animation.setDuration(calculatedDuration);animation.setAnimationListener(animationListener);// ??? setInterpolator()什么意思if (mState == State.FLYING && mLinearFlying) {animation.setInterpolator(new LinearInterpolator());} elseif (mInterpolator != null) {animation.setInterpolator(mInterpolator);}startAnimation(animation);}};/** * * @return wheather Content is hide; */private boolean isContentClosed(){return mIsContentHide;}private void setContentClose(boolean flag){mIsContentHide = flag;}}

 

在一个View中模拟抽屉主要是运用使用android.graphics.Canvas.translate(float dx, float dy)和View的visibility statu，其实在拖动的整个过程，布局是不会改变的，只是看起来好像改变的。

 

 

代码下载地址：http://download.csdn.net/source/3345404