Android教程網
設為首頁|加入收藏
  1. 首頁
  2. Android 技術
  3. Android 手機
  4. Android 系統教程
  5. Android 游戲
 Android教程網 >> Android技術 >> 關於Android編程 >> android 彈性ScrollView(已優化)

android 彈性ScrollView(已優化)

編輯：關於Android編程

想要的效果

最近項目中想實現一個效果，效果如下：
這裡寫圖片描述

網上demo展示

就是上滑或者下滑，能實現彈性效果，剛開始在網上找了好幾個demo，代碼大致如下：

public class BounceScrollView extends ScrollView {

    private View inner;// 孩子View  
    private float y;// 點擊時y坐標  
    private Rect normal = new Rect();// 矩形(這裡只是個形式，只是用於判斷是否需要動畫.)  
    private boolean isCount = false;// 是否開始計算  

    public BounceScrollView(Context context, AttributeSet attrs) {  
        super(context, attrs);  
    }  

    /*** 
     * 根據 XML 生成視圖工作完成.該函數在生成視圖的最後調用，在所有子視圖添加完之後. 即使子類覆蓋了 onFinishInflate 
     * 方法，也應該調用父類的方法，使該方法得以執行. 
     */  
    @Override  
    protected void onFinishInflate() {  
        if (getChildCount() > 0) {  
            inner = getChildAt(0);  
        }  
    }  

    /*** 
     * 監聽touch 
     */  
    @Override  
    public boolean onTouchEvent(MotionEvent ev) {  
        if (inner != null) {  
            commOnTouchEvent(ev);  
        }  

        return super.onTouchEvent(ev);  
    }  

    /*** 
     * 觸摸事件 
     *  
     * @param ev 
     */  
    public void commOnTouchEvent(MotionEvent ev) {  
        int action = ev.getAction();  
        switch (action) {  
        case MotionEvent.ACTION_DOWN:  
            break;  
        case MotionEvent.ACTION_UP:  
            // 手指松開.  
            if (isNeedAnimation()) {  
                animation();  
                isCount = false;  
            }  
            break;  
        case MotionEvent.ACTION_MOVE:  
            final float preY = y;// 按下時的y坐標  
            float nowY = ev.getY();// 時時y坐標  
            int deltaY = (int) (preY - nowY);// 滑動距離  
            if (!isCount) {  
                deltaY = 0; // 在這裡要歸0.  
            }  

            y = nowY;  
            // 當滾動到最上或者最下時就不會再滾動，這時移動布局  
            if (isNeedMove()) {  
                // 初始化頭部矩形  
                if (normal.isEmpty()) {  
                    // 保存正常的布局位置  
                    normal.set(inner.getLeft(), inner.getTop(),  
                            inner.getRight(), inner.getBottom());  
                }  
                // 移動布局  
                inner.layout(inner.getLeft(), inner.getTop() - deltaY / 2,  
                        inner.getRight(), inner.getBottom() - deltaY / 2);  
            }  
            isCount = true;  
            break;  

        default:  
            break;  
        }  
    }  

    /*** 
     * 回縮動畫 
     */  
    public void animation() {  
        // 開啟移動動畫  
        TranslateAnimation ta = new TranslateAnimation(0, 0, inner.getTop(),  
                normal.top);  
        ta.setDuration(200);  
        inner.startAnimation(ta);  
        // 設置回到正常的布局位置  
        inner.layout(normal.left, normal.top, normal.right, normal.bottom);  

        normal.setEmpty();  

    }  

    // 是否需要開啟動畫  
    public boolean isNeedAnimation() {  
        return !normal.isEmpty();  
    }  

    /*** 
     * 是否需要移動布局 inner.getMeasuredHeight():獲取的是控件的總高度 
     *  
     * getHeight()：獲取的是屏幕的高度 
     *  
     * @return 
     */  
    public boolean isNeedMove() {  
        int offset = inner.getMeasuredHeight() - getHeight();  
        int scrollY = getScrollY();  
        // 0是頂部，後面那個是底部  
        if (scrollY == 0 || scrollY == offset) {  
            return true;  
        }  
        return false;  
    }
}

它的實現原理：

通過getChildAt(0)方法獲取到scrollView的唯一一個子view—inner， 並用矩形Rect–>normal記錄子view的初始位置(left,top,right，bottom)； 在onTouchEvent()方法的ACTION_MOVE中，根據子view inner滑動的距離，用view.setLayout(left,top,right,bottom)對子view inner進行滑動; 在onTouchEvent()方法的ACTION_UP中，對子view –> inner設置幀動畫，讓其回縮到原始位置。

出現的問題：

scrollView中的子view，必須是溢出全屏的(比如說子view中含有較長的listview之類)，才能實現彈性效果，就是設置scrollView或者它的子View的layout_height為match_content也沒用。這種效果就看起來很尴尬，在安全中心，退出程序之類的按鈕上滑動就沒反應，在下面灰色部分上下滑動就有彈性效果。這是個bug，得治！

解決原理：

根據事件分發機制，重寫子view的dispatchTouchEvent(),onInterceptTouchEvent(),onTouchEvent(); 根據事件分發機制，重寫父類->scrollView的dispatchTouchEvent(),onInterceptTouchEvent(),onTouchEvent()
關於android的事件分發機制，在文章http://blog.csdn.net/a394268045/article/details/51889797 有詳細介紹

在自定義的scrollView和它的子View的三個方法中，分別加上log，會發現，這裡寫圖片描述
當在上圖中畫紅圈部分上下滑動時，log如下:

BounceScrollView dispatchTouchEvent...ACTION_DOWN
BounceScrollView onInterceptTouchEvent...ACTION_DOWN
BounceScrollView onTouchEvent...ACTION_DOWN
BounceScrollView dispatchTouchEvent...ACTION_MOVE
BounceScrollView onTouchEvent...ACTION_MOVE
BounceScrollView dispatchTouchEvent...ACTION_MOVE
BounceScrollView onTouchEvent...ACTION_MOVE
BounceScrollView dispatchTouchEvent...ACTION_MOVE
BounceScrollView onTouchEvent...ACTION_MOVE
BounceScrollView dispatchTouchEvent...ACTION_UP
BounceScrollView onTouchEvent...ACTION_UP

當在圖中類似安全中心等按鈕上滑動時，log如下：

BounceScrollView dispatchTouchEvent...ACTION_DOWN
BounceScrollView onInterceptTouchEvent...ACTION_DOWN
子View           dispatchTouchEvent...ACTION_DOWN
子View           onInterceptTouchEvent...ACTION_DOWN
子View           onTouchEvent...ACTION_DOWN
BounceScrollView dispatchTouchEvent...ACTION_MOVE
BounceScrollView onInterceptTouchEvent...ACTION_MOVE
子View           dispatchTouchEvent...ACTION_MOVE
子View           onTouchEvent...ACTION_MOVE
BounceScrollView dispatchTouchEvent...ACTION_MOVE
BounceScrollView onInterceptTouchEvent...ACTION_MOVE
子View           dispatchTouchEvent...ACTION_MOVE
子View           onTouchEvent...ACTION_MOVE
BounceScrollView dispatchTouchEvent...ACTION_MOVE
BounceScrollView onInterceptTouchEvent...ACTION_MOVE
子View           dispatchTouchEvent...ACTION_MOVE
子View           onTouchEvent...ACTION_MOVE
BounceScrollView dispatchTouchEvent...ACTION_UP
BounceScrollView onInterceptTouchEvent...ACTION_UP
子View           dispatchTouchEvent...ACTION_UP
子View           onTouchEvent...ACTION_UP

最終解決方案

如果在子view中處理，那麼這個父View BounceScrollView就沒有通用性，而且，當子view類型不同時，還得處理各種想不到的問題。所以，在父view中處理彈性效果是最好的。但是，當我在子view上下滑動時，BounceScrollView居然沒有調用onTouchEvent()！而不管是在畫紅圈區域上下滑動，還是在按鈕上滑動，都會調用父View的dispatchTouchEvent()方法。OK，那我們就可以將彈性效果放到dispatchTouchEvent()中，並加上上下滑動的判斷，最終代碼如下：

/*  
 *@author luoxiaohui
 *@date 2016年4月18日
 *@description 具有彈性的ScrollView
 **/

public class BounceScrollView extends ScrollView {

    private static final String TAG = "BounceScrollView";

    private View inner;// 孩子View  

    private float y;// 點擊時y坐標  

    private Rect normal = new Rect();// 矩形(這裡只是個形式，只是用於判斷是否需要動畫.)  

    private boolean isCount = false;// 是否開始計算  
    private float lastX = 0;
    private float lastY = 0;
    private float currentX = 0;
    private float currentY = 0;
    private float distanceX = 0;
    private float distanceY = 0;
    private boolean upDownSlide = false; //判斷上下滑動的flag

    public BounceScrollView(Context context, AttributeSet attrs) {  
        super(context, attrs);  
    }  

    /*** 
     * 根據 XML 生成視圖工作完成.該函數在生成視圖的最後調用，在所有子視圖添加完之後. 即使子類覆蓋了 onFinishInflate 
     * 方法，也應該調用父類的方法，使該方法得以執行. 
     */  
    @Override  
    protected void onFinishInflate() {  
        if (getChildCount() > 0) {  
            inner = getChildAt(0);  
            View view;
        }  
    }  

    @Override
    public boolean dispatchTouchEvent(MotionEvent ev) {
        // TODO Auto-generated method stub

        currentX = ev.getX();
        currentY = ev.getY();
        switch(ev.getAction()){
        case MotionEvent.ACTION_DOWN:

            break;
        case MotionEvent.ACTION_MOVE:
            distanceX = currentX - lastX;
            distanceY = currentY - lastY;
            if(Math.abs(distanceX)12){

                upDownSlide = true;
            }
            break;
        case MotionEvent.ACTION_UP:

            break;
        default:
            break;          
        }
        lastX = currentX;
        lastY = currentY;
        if (upDownSlide && inner != null) commOnTouchEvent(ev); 
        return super.dispatchTouchEvent(ev);
    }

    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        // TODO Auto-generated method stub
        return super.onInterceptTouchEvent(ev);
    }

    /*** 
     * 監聽touch 
     */  
    @Override  
    public boolean onTouchEvent(MotionEvent ev) { 
        return super.onTouchEvent(ev);  
    }


    /*** 
     * 觸摸事件 
     *  
     * @param ev 
     */  
    public void commOnTouchEvent(MotionEvent ev) {  
        int action = ev.getAction();  
        switch (action) {  
        case MotionEvent.ACTION_DOWN:  
            break;  
        case MotionEvent.ACTION_UP:  
            // 手指松開.  
            if (isNeedAnimation()) {  
                animation();  
                isCount = false;  
            }  
            clear0();
            break;  
             */  
        case MotionEvent.ACTION_MOVE:  
            final float preY = y;// 按下時的y坐標  
            float nowY = ev.getY();// 時時y坐標  
            int deltaY = (int) (preY - nowY);// 滑動距離  
            if (!isCount) {  
                deltaY = 0; // 在這裡要歸0.  
            }  

            y = nowY;  
            // 當滾動到最上或者最下時就不會再滾動，這時移動布局  
            if (isNeedMove()) {  
                // 初始化頭部矩形  
                if (normal.isEmpty()) {  
                    // 保存正常的布局位置  
                    normal.set(inner.getLeft(), inner.getTop(),  
                            inner.getRight(), inner.getBottom());  
                }  
                // 移動布局  
                inner.layout(inner.getLeft(), inner.getTop() - deltaY / 2,  
                        inner.getRight(), inner.getBottom() - deltaY / 2);  
            }  
            isCount = true;  
            break;  

        default:  
            break;  
        }  
    }  

    /*** 
     * 回縮動畫 
     */  
    public void animation() {  
        // 開啟移動動畫  
        TranslateAnimation ta = new TranslateAnimation(0, 0, inner.getTop(),  
                normal.top);  
        ta.setDuration(200);  
        inner.startAnimation(ta);  
        // 設置回到正常的布局位置  
        inner.layout(normal.left, normal.top, normal.right, normal.bottom);  

        normal.setEmpty();  

    }  

    // 是否需要開啟動畫  
    public boolean isNeedAnimation() {  
        return !normal.isEmpty();  
    }  

    /*** 
     * 是否需要移動布局 inner.getMeasuredHeight():獲取的是控件的總高度 
     *  
     * getHeight()：獲取的是屏幕的高度 
     *  
     * @return 
     */  
    public boolean isNeedMove() {  
        int offset = inner.getMeasuredHeight() - getHeight();  
        int scrollY = getScrollY();  
        // 0是頂部，後面那個是底部  
        if (scrollY == 0 || scrollY == offset) {  
            return true;  
        }  
        return false;  
    }

    private void clear0(){
        lastX = 0;
        lastY = 0;
        distanceX = 0;
        distanceY = 0;
        upDownSlide = false;
    }

這種處理方式，毫不影響子View的onClick事件，並能完美實現彈性效果,經過反復測試，現已放入項目中~

  1. 上一頁:
  2. 下一頁:
關於Android編程
Android編程入門Android技術基礎Android資訊關於Android編程Android開發Android開發環境Android開發實例
相關文章
熱門文章
android開發之notification通知完全解析 Android 自定義View背景動畫 流程簡讀 (2) 一起學android之利用回調函數onCreateDialog實現加載對話框 android通知欄的實現方法分析 Android編碼實現軟件界面 開發Android Map程序 如何獲取 apikey （Google Map API v2）
Android 極速開發框架 dhroid

當我們編寫Android程序時候會出現大量重復工作，dhroid框架就很
Android學習能力之統計日志上傳設計

一款軟件就像一個孩子，不斷的在學習，在探索，當孩子犯下錯誤的時候，我們可
Android入門之ListView應用解析(二)

上一篇關於Android中ListView的介紹講的是如何制作一個具有兩
Android的生命周期

Activity的生命周期圖2 Android生命周期中涉及到的幾個過程
閱讀排行版
Copyright © Android教程網 All Rights Reserved