自定义抽屉控件

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 ms mPosition = a.getInteger(R.styleable.Panel_position, BOTTOM); // position defaults to BOTTOM mLinearFlying = a.getBoolean(R.styleable.Panel_linearFlying, false); // linearFlying defaults to false mOpenedHandle = 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 children removeView(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 start if (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 here if (mOrientation == VERTICAL) { initY = mPosition == TOP? -1 : 1; } else { initX = mPosition == LEFT? -1 : 1; } } // 设置初始化的记录为true setInitialPosition = 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 position mGestureListener.setScroll(initX, initY); setInitialPosition = false; // for offsetLocation we have to invert values initX = -initX; initY = -initY; } // offset every ACTION_MOVE & ACTION_UP event // 如果这里去掉，开始拖动不响应，拖动了一段距离后才能拉出Content event.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 scrolling post(startAnimation); // ??? 添加一个 } } return false; } }; /** * 处理背景的drawable */ private void postProcess() { if (mIsShrinking && mClosedHandle != null) { // mHandle.setBackgroundDrawable(mClosedHandle); } else if (!mIsShrinking && mOpenedHandle != null) { // mHandle.setBackgroundDrawable(mOpenedHandle); } // invoke listener if any if (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 animate return 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_ANIMATE mContent.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: click post(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; } else if (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 ms if (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; } else if (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 ms if (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()); } else if (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