Android 仿 窗帘效果 和 登入介面拖動效果 （Scroller類的應用） 附 2個DEMO及源碼

標籤：scroller   仿   源碼   窗帘   登入   

    在android學習中，動作互動是軟體中重要的一部分，其中的Scroller就是提供了拖動效果的類，在網上，比如說一些Launcher實現滑屏都可以通過這個類去實現。下面要說的就是上次Scroller類學習的後的實踐了。

    如果你還不瞭解Scroller類，那請先點擊：Android 介面滑動實現---Scroller類 從源碼和開發文檔中學習（讓你的布局動起來）

    瞭解之後再閱讀以下內容，你會發現原來實現起來很簡單。

    之前說到過，在廣泛使用的側邊滑動導航開源庫 --SlidingLayer其實就是使用到了Scroller類進行的實現，(SlidingLayer：GITHUB  )，而是這個庫的實現過程中使用到的---Scroller類，我們可以使用這個庫實現以下我要達到的效果，可是這樣拿來就用，對於初學者提升不大，所以我決定直接去使用Scroller類去實現：  1）窗帘展開和關閉效果           2）登入介面拖動效果（有點類似PopupWindow,可是帶上了拖拽效果）。
通過這2個例子，你就大概知道了Scroller類的基本使用方式，可以自己去寫一些類似的效果了。
先，在上主要代碼，最後上DEMO源碼。
申明下：DEMO中的資源檔是在網上下載的2個應用中，發現效果不錯和可以進一步完善（比如窗帘效果，原本是不帶推拽效果），提取了應用的資源檔去自己實現的，目的是為了更好的達到展示效果。代碼中都帶上了注釋和說明，以便更好的瞭解實現過程。可能有的地方最佳化做的不足，望大家見諒。
：
1）窗帘 效果用途：可以使用於廣告牆，公告欄等地方說明：點擊開關可以實現展開關閉功能，也可以通過推拽開關實現展開關閉效果，動畫中加入了反彈效果，更加真實。

2）登入表單 效果用途：可以使用在登入時候的登入方式選擇，菜單選項等，有點類似於帶拖拽效果的PopupWindow說明：可以登入按鈕展開關閉登入表單，也可以通過推拽進行關閉。註：這裡的點擊表單之外消失是通過回調介面實現，這裡沒有列出，可以下載源碼查看


學習了Scroller類，大概的你也知道核心代碼會是哪些內容，下面列舉下
核心代碼：
窗帘效果：

public class CurtainView extends RelativeLayout implements OnTouchListener{private static String TAG = "CurtainView";private Context mContext;/** Scroller 拖動類 */private Scroller mScroller;/** 螢幕高度  */private int mScreenHeigh = 0;/** 螢幕寬度  */private int mScreenWidth = 0;/** 點擊時候Y的座標*/private int downY = 0;/** 拖動時候Y的座標*/private int moveY = 0;/** 拖動時候Y的方向距離*/private int scrollY = 0;/** 鬆開時候Y的座標*/private int upY = 0;/** 廣告幕布的高度*/private int curtainHeigh = 0;/** 是否 開啟*/private boolean isOpen = false;/** 是否在動畫 */private boolean isMove = false;/** 繩子的圖片*/private ImageView img_curtain_rope;/** 廣告的圖片*/private ImageView img_curtain_ad;/** 上升動畫時間 */private int upDuration = 1000;/** 下落動畫時間 */private int downDuration = 500;public CurtainView(Context context) {super(context);init(context);}public CurtainView(Context context, AttributeSet attrs, int defStyle) {super(context, attrs, defStyle);init(context);}public CurtainView(Context context, AttributeSet attrs) {super(context, attrs);init(context);}/** 初始化 */private void init(Context context) {this.mContext = context;//Interpolator 設定為有反彈效果的  （Bounce：反彈）Interpolator interpolator = new BounceInterpolator();mScroller = new Scroller(context, interpolator);mScreenHeigh = BaseTools.getWindowHeigh(context);mScreenWidth = BaseTools.getWindowWidth(context);// 背景設定成透明this.setBackgroundColor(Color.argb(0, 0, 0, 0));final View view = LayoutInflater.from(mContext).inflate(R.layout.curtain, null);img_curtain_ad = (ImageView)view.findViewById(R.id.img_curtain_ad);img_curtain_rope = (ImageView)view.findViewById(R.id.img_curtain_rope);addView(view);img_curtain_ad.post(new Runnable() {@Overridepublic void run() {// TODO Auto-generated method stubcurtainHeigh  = img_curtain_ad.getHeight();Log.d(TAG, "curtainHeigh= " + curtainHeigh);CurtainView.this.scrollTo(0, curtainHeigh);//注意scrollBy和scrollTo的區別}});img_curtain_rope.setOnTouchListener(this);}/** * 拖動動畫 * @param startY   * @param dy  垂直距離, 滾動的y距離 * @param duration 時間 */public void startMoveAnim(int startY, int dy, int duration) {isMove = true;mScroller.startScroll(0, startY, 0, dy, duration);invalidate();//通知UI線程的更新}@Overrideprotected void onLayout(boolean changed, int l, int t, int r, int b) {// TODO Auto-generated method stubsuper.onLayout(changed, l, t, r, b);}@Overridepublic void computeScroll() {//判斷是否還在滾動，還在滾動為trueif (mScroller.computeScrollOffset()) {scrollTo(mScroller.getCurrX(), mScroller.getCurrY());//更新介面postInvalidate();isMove = true;} else {isMove = false;}super.computeScroll();}@Overridepublic boolean onTouch(View v, MotionEvent event) {// TODO Auto-generated method stubif (!isMove) {int offViewY = 0;//螢幕頂部和該布局頂部的距離switch (event.getAction()) {case MotionEvent.ACTION_DOWN:downY = (int) event.getRawY();offViewY = downY - (int)event.getX();return true;case MotionEvent.ACTION_MOVE:moveY = (int) event.getRawY();scrollY = moveY - downY;if (scrollY < 0) {// 向上滑動if(isOpen){if(Math.abs(scrollY) <= img_curtain_ad.getBottom() - offViewY){scrollTo(0, -scrollY);}}} else {// 向下滑動if(!isOpen){if (scrollY <= curtainHeigh) {scrollTo(0, curtainHeigh - scrollY);}}}break;case MotionEvent.ACTION_UP:upY = (int) event.getRawY();if(Math.abs(upY - downY) < 10){onRopeClick();break;}if (downY > upY) {// 向上滑動if(isOpen){if (Math.abs(scrollY) > curtainHeigh / 2) {// 向上滑動超過半個螢幕高的時候 開啟向上消失動畫startMoveAnim(this.getScrollY(),(curtainHeigh - this.getScrollY()), upDuration);isOpen = false;} else {startMoveAnim(this.getScrollY(), -this.getScrollY(),upDuration);isOpen = true;}}} else {// 向下滑動if (scrollY > curtainHeigh / 2) {// 向上滑動超過半個螢幕高的時候 開啟向上消失動畫startMoveAnim(this.getScrollY(), -this.getScrollY(),upDuration);isOpen = true;} else {startMoveAnim(this.getScrollY(),(curtainHeigh - this.getScrollY()), upDuration);isOpen = false;}}break;default:break;}}return false;}/** * 點擊繩索開關，會展開關閉 * 在onToch中使用這個中的方法來當點擊事件，避免了點擊時候響應onTouch的銜接不完美的影響 */public void onRopeClick(){if(isOpen){CurtainView.this.startMoveAnim(0, curtainHeigh, upDuration);}else{CurtainView.this.startMoveAnim(curtainHeigh,-curtainHeigh, downDuration);}isOpen = !isOpen;}}

登入介面：

public class LoginView extends RelativeLayout {/** Scroller 拖動類 */private Scroller mScroller;/** 螢幕高度  */private int mScreenHeigh = 0;/** 螢幕寬度  */private int mScreenWidth = 0;/** 點擊時候Y的座標*/private int downY = 0;/** 拖動時候Y的座標*/private int moveY = 0;/** 拖動時候Y的方向距離*/private int scrollY = 0;/** 鬆開時候Y的座標*/private int upY = 0;/** 是否在移動*/private Boolean isMoving = false;/** 布局的高度*/private int viewHeight = 0;/** 是否開啟*/public boolean isShow = false;/** 是否可以拖動*/public boolean mEnabled = true;/** 點擊外面是否關閉該介面*/public boolean mOutsideTouchable = true;/** 上升動畫時間 */private int mDuration = 800;private final static String TAG = "LoginView";public LoginView(Context context) {super(context);init(context);}public LoginView(Context context, AttributeSet attrs) {super(context, attrs);init(context);}public LoginView(Context context, AttributeSet attrs, int defStyle) {super(context, attrs, defStyle);init(context);}private void init(Context context) {setDescendantFocusability(FOCUS_AFTER_DESCENDANTS);setFocusable(true);mScroller = new Scroller(context);mScreenHeigh = BaseTools.getWindowHeigh(context);mScreenWidth = BaseTools.getWindowWidth(context);// 背景設定成透明this.setBackgroundColor(Color.argb(0, 0, 0, 0));final View view = LayoutInflater.from(context).inflate(R.layout.view_login,null);LayoutParams params = new LayoutParams(LayoutParams.MATCH_PARENT,LayoutParams.WRAP_CONTENT);// 如果不給他設這個，它的布局的MATCH_PARENT就不知道該是多少addView(view, params);// ViewGroup的大小，// 背景設定成透明this.setBackgroundColor(Color.argb(0, 0, 0, 0));view.post(new Runnable() {@Overridepublic void run() {// TODO Auto-generated method stubviewHeight = view.getHeight();}});LoginView.this.scrollTo(0, mScreenHeigh);ImageView btn_close = (ImageView)view.findViewById(R.id.btn_close);btn_close.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View v) {// TODO Auto-generated method stubdismiss();}});}@Overridepublic boolean onInterceptTouchEvent(MotionEvent ev) {if(!mEnabled){return false;}return super.onInterceptTouchEvent(ev);}@Overridepublic boolean onTouchEvent(MotionEvent event) {// TODO Auto-generated method stubswitch (event.getAction()) {case MotionEvent.ACTION_DOWN:downY = (int) event.getY();Log.d(TAG, "downY = " + downY);//如果完全顯示的時候，讓布局得到觸摸監聽，如果不顯示，觸摸事件不攔截，向下傳遞if(isShow){return true;}break;case MotionEvent.ACTION_MOVE:moveY = (int) event.getY();scrollY = moveY - downY;//向下滑動if (scrollY > 0) {if(isShow){scrollTo(0, -Math.abs(scrollY));}}else{if(mScreenHeigh - this.getTop() <= viewHeight && !isShow){scrollTo(0, Math.abs(viewHeight - scrollY));}}break;case MotionEvent.ACTION_UP:upY = (int) event.getY();if(isShow){if( this.getScrollY() <= -(viewHeight /2)){startMoveAnim(this.getScrollY(),-(viewHeight - this.getScrollY()), mDuration);isShow = false;Log.d("isShow", "false");} else {startMoveAnim(this.getScrollY(), -this.getScrollY(), mDuration);isShow = true;Log.d("isShow", "true");}}Log.d("this.getScrollY()", ""+this.getScrollY());changed();break;case MotionEvent.ACTION_OUTSIDE:Log.d(TAG, "ACTION_OUTSIDE");break;default:break;}return super.onTouchEvent(event);}/** * 拖動動畫 * @param startY   * @param dy  移動到某點的Y座標距離 * @param duration 時間 */public void startMoveAnim(int startY, int dy, int duration) {isMoving = true;mScroller.startScroll(0, startY, 0, dy, duration);invalidate();//通知UI線程的更新}@Overridepublic void computeScroll() {if (mScroller.computeScrollOffset()) {scrollTo(mScroller.getCurrX(), mScroller.getCurrY());// 更新介面postInvalidate();isMoving = true;} else {isMoving = false;}super.computeScroll();}/** 開打介面 */public void show(){if(!isShow && !isMoving){LoginView.this.startMoveAnim(-viewHeight,   viewHeight, mDuration);isShow = true;Log.d("isShow", "true");changed();}}/** 關閉介面 */public void dismiss(){if(isShow && !isMoving){LoginView.this.startMoveAnim(0, -viewHeight, mDuration);isShow = false;Log.d("isShow", "false");changed();}}/** 是否開啟 */public boolean isShow(){return isShow;}/** 擷取是否可以拖動*/public boolean isSlidingEnabled() {return mEnabled;}/** 設定是否可以拖動*/public void setSlidingEnabled(boolean enabled) {mEnabled = enabled;}/** * 設定監聽介面，實現遮罩層效果 */public void setOnStatusListener(onStatusListener listener){this.statusListener = listener;}    public void setOutsideTouchable(boolean touchable) {        mOutsideTouchable = touchable;    }/** * 顯示狀態發生改變時候執行回調借口 */public void changed(){if(statusListener != null){if(isShow){statusListener.onShow();}else{statusListener.onDismiss();}}}/** 監聽介面*/public onStatusListener statusListener;/** * 監聽介面，來在主介面監聽介面變化狀態 */public interface onStatusListener{/**  開打狀態  */public void onShow();/**  關閉狀態  */public void onDismiss();}@Overrideprotected void onLayout(boolean changed, int l, int t, int r, int b) {// TODO Auto-generated method stubsuper.onLayout(changed, l, t, r, b);}}

其實代碼大同小異，瞭解後你就可以舉一反三，去自己的VIEW中實現自己想要的效果。

最後，上源碼：

Android 仿 窗帘效果 和 登入介面拖動效果 （Scroller類的應用） 附 2個DEMO及源碼