自定義ViewGroup之側滑菜單

最近PM2.5對側滑菜單比較感興趣,很多頁面上都用到了側滑菜單,之前也在網上看到了很多關于側滑,有自定義RecyclerView,也有自定義Item的,但是當自己真正去用的時候,發現有很多問題,所以打算自己參考網上的思路自己寫一個,果然,看花容易繡花難,寫的很艱辛,不過最后還是實現了,下面看看效果圖:

側滑菜單

下面簡單分享下實現的思路:

自定義ViewGroup

這個其實沒什么太多要說的,主要是有幾點需要注意下:

  1. 需要復寫三個LayoutParams方法

generateDefaultLayoutParams

當動態向ViewGroup中添加沒有參數的child的時候,會自動調用這個方法,將其設置成為默認的參數

generateLayoutParams(AttributeSet attrs)

根據布局中的屬性來生成LayoutParams

generateLayoutParams(LayoutParams layoutParams)

代碼中動態添加參數

2.在復寫onMeasure方法的時候,需要對WrapContent這種情況進行特殊處理,因為很多時候item是包裹child的,高度并沒有固定死,所以需要特殊處理,不然會導致菜單欄的內容高度顯示不正確處理的方式就是以第一個child也就是內容區域為標準重新測量,代碼如下:

    for (int i = 0; i < childCount; i++) {
            View child = getChildAt(i);
            if (child.getVisibility() == GONE) {
                continue;
            }
            if (i == 0) {
                measureChild(child, widthMeasureSpec, heightMeasureSpec);
                childHeight = child.getMeasuredHeight();
            } else {
                int heightSpec = MeasureSpec.makeMeasureSpec(childHeight, MeasureSpec.EXACTLY);
                measureChild(child, widthMeasureSpec, heightSpec);
            }
            MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams();
            if (i > 0) {
                mMaxDistance += child.getMeasuredWidth() + lp.leftMargin + lp.rightMargin;
            }
        }

3.onLayout

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        int childCount = getChildCount();
        int mLeftOffset = getPaddingLeft();
        int topOffset = getPaddingTop();
        for (int i = 0; i < childCount; i++) {
            View mChild = getChildAt(i);
            if (mChild.getVisibility() == GONE) {
                continue;
            }
            MarginLayoutParams lp = (MarginLayoutParams) mChild.getLayoutParams();
            mLeftOffset += lp.leftMargin;
            topOffset += lp.topMargin;
            int measuredWidth = mChild.getMeasuredWidth();
            int measuredHeight = mChild.getMeasuredHeight();
            mChild.layout(mLeftOffset, topOffset, mLeftOffset + measuredWidth, topOffset + measuredHeight);
            mLeftOffset += (measuredWidth + lp.rightMargin);
            topOffset = getPaddingTop();
        }
    }

截止到這里,基本的measure跟layout就結束了,這個不是重點,重點在于解決滑動沖突。

View的滑動沖突

三個方法:

事件分發:public boolean dispatchTouchEvent(MotionEvent ev)

Touch 事件發生時 Activity 的 dispatchTouchEvent(MotionEvent ev) 方法會以隧道方式(從根元素依次往下傳遞直到最內層子元素或在中間某一元素中由于某一條件停止傳遞)將事件傳遞給最外層 View 的 dispatchTouchEvent(MotionEvent ev) 方法,并由該 View 的 dispatchTouchEvent(MotionEvent ev)方法對事件進行分發。dispatchTouchEvent 的事件分發邏輯如下:

  • 如果 return true,事件會分發給當前 View 并由 dispatchTouchEvent 方法進行消費,同時事件會停止向下傳遞;
  • 如果 return false,事件分發分為兩種情況:
  1. 如果當前 View 獲取的事件直接來自 Activity,則會將事件返回給 Activity 的 onTouchEvent 進行消費;
  2. 如果當前 View 獲取的事件來自外層父控件,則會將事件返回給父 View 的 onTouchEvent 進行消費。
  • 如果返回super.dispatchTouchEvent(ev),事件會自動的分發給當前 View 的 onInterceptTouchEvent 方法。
事件攔截:public boolean onInterceptTouchEvent(MotionEvent ev)

在外層 View 的 dispatchTouchEvent(MotionEvent ev) 方法返回系統默認的 super.dispatchTouchEvent(ev) 情況下,事件會自動的分發給當前 View 的 onInterceptTouchEvent 方法。onInterceptTouchEvent 的事件攔截邏輯如下:

  • 如果返回 true,則表示將事件進行攔截,并將攔截到的事件交由當前 View 的 onTouchEvent 進行處理;
  • 如果返回 false,則表示將事件放行,當前 View 上的事件會被傳遞到子 View 上,再由子 View 的 dispatchTouchEvent 來開始這個事件的分發;
  • 如果返回 super.onInterceptTouchEvent(ev),事件默認會被攔截,并將攔截到的事件交由當前 View 的 onTouchEvent 進行處理。
事件響應:public boolean onTouchEvent(MotionEvent ev)

在 dispatchTouchEvent 返回 super.dispatchTouchEvent(ev) 并且 onInterceptTouchEvent 返回 true 或返回super.onInterceptTouchEvent(ev) 的情況下 onTouchEvent 會被調用。onTouchEvent 的事件響應邏輯如下:
● 如果事件傳遞到當前 View 的 onTouchEvent 方法,而該方法返回了 false,那么這個事件會從當前 View 向上傳遞,并且都是由上層 View 的 onTouchEvent 來接收,如果傳遞到上面的 onTouchEvent 也返回 false,這個事件就會“消失”,而且接收不到下一次事件。
● 如果返回了 true 則會接收并消費該事件。
● 如果返回 super.onTouchEvent(ev) 默認處理事件的邏輯和返回 false 時相同。

需要注意的是view是沒有onInterceptTouchEvent這個方法,只能分發,不存在攔截,只能分發,就跟view沒有layout方法是一樣的道理。

通過上面的分析,我們需要在onInterceptTouchEvent中進行攔截,然后在onToucheEvent中進行處理

onInterceptTouchEvent

 @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        boolean consume = false;
        acquireVelocityTracker(ev);
        if (mInterPoint == null)
            mInterPoint = new PointF();
        if (mTouchPoint == null)
            mTouchPoint = new PointF();
        switch (ev.getAction()) {
            case MotionEvent.ACTION_DOWN:
                consume = false;
                mInterPoint.set(ev.getRawX(), ev.getRawY());
                mTouchPoint.set(ev.getRawX(), ev.getRawY());
                mPointerId = ev.getPointerId(0);
                break;
            case MotionEvent.ACTION_MOVE:
                float abs = Math.abs(mInterPoint.x - ev.getRawX());
                if (Math.abs(abs) > mTouchSlop) {
                    consume = true;
                } else {
                    consume = isOpened;
                }
                break;
            case MotionEvent.ACTION_UP:
                if (isOpened && ev.getX() < getWidth() - getScrollX()) {
                    closeMenu();
                    consume = true;
                }
                break;
        }
        mInterPoint.set(ev.getRawX(), ev.getRawY());
        mTouchPoint.set(ev.getRawX(), ev.getRawY());
        return consume;
    }

mInterPoint跟mTouchPoint是兩個PointF,用來記錄onInterceptTouchEvent跟onTouchEvent中的點坐標,isOpened是一個布爾值來記錄菜單是否打開,當菜單關閉的時候,點擊內容區域是不能進行攔截的,此時需要把點擊事件傳給child,當菜單打開的時候,此時需要group自己進行處理,需要關閉菜單,所以需要攔截此事件,自己進行處理,onInterceptTouchEvent事件的處理比較簡單,就是根據滑動的距離與當前菜單的顯示狀態比較來判斷是否攔截。

onTouchEvent

public boolean onTouchEvent(MotionEvent ev) {
        switch (ev.getAction()) {
            case MotionEvent.ACTION_DOWN:
                getParent().requestDisallowInterceptTouchEvent(true);
                break;
            case MotionEvent.ACTION_MOVE:
                if (!mScroller.isFinished())
                    mScroller.abortAnimation();
                int variationX = (int) (mTouchPoint.x - ev.getRawX());
                int variationY = (int) (mTouchPoint.y - ev.getRawY());
                if (Math.abs(variationX) < Math.abs(variationY)) {
                    getParent().requestDisallowInterceptTouchEvent(false);
                } else {
                    getParent().requestDisallowInterceptTouchEvent(true);
                    scrollBy(variationX, 0);
                    int scrollX = getScrollX();
                    if (scrollX > mMaxDistance)
                        scrollTo(mMaxDistance, 0);
                    if (scrollX < 0)
                        scrollTo(0, 0);
                }
                break;
            case MotionEvent.ACTION_UP:
            case MotionEvent.ACTION_CANCEL:
                mVelocityTracker.computeCurrentVelocity(1000, mMaxVelocity);
                float velocityX = mVelocityTracker.getXVelocity(mPointerId);
                if (Math.abs(velocityX) > 1000) {
                    if (velocityX < -1000)
                        openMenu();
                    else
                        closeMenu();
                } else {
                    if (getScrollX() > mLimit)
                        openMenu();
                    else
                        closeMenu();
                }
                releaseVelocityTracker();
                break;
        }
        mTouchPoint.set(ev.getRawX(), ev.getRawY());
        return true;
    }

onTouchEvent就顯得有些麻煩

  • ACTION_DOWN

這里不需要記錄點坐標,只需要請求父容器不要攔截事件

  • ACTION_DOWN

首先需要判斷此時的滑動方向,如果水平方向上的位移小于垂直方向上的位移,那么就把事件交給父容器處理,否則就自己進行處理

  • ACTION_UP

通過兩種方式來確定菜單最終是打開還是關閉,一個是根據速度,一個是根據移動的距離,比較好理解

移動的方式

開啟菜單

 private void openMenu() {
        isOpened = true;
        if (getScrollX() == mMaxDistance)
            return;
        mScroller.startScroll(getScrollX(), 0, mMaxDistance - getScrollX(), 0, 1000);
        invalidate();
    }

  

關閉菜單

  private void closeMenu() {
        isOpened = false;
        if (getScrollX() == 0)
            return;
        mScroller.startScroll(getScrollX(), 0, -getScrollX(), 0, 1000);
        invalidate();

    }

基本上實現了一個菜單的功能,上面只貼出了核心代碼,更多代碼可以下載Demo下來查看。

項目下載地址

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 230,578評論 6 544
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,701評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 178,691評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,974評論 1 318
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,694評論 6 413
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 56,026評論 1 329
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 44,015評論 3 450
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 43,193評論 0 290
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,719評論 1 336
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,442評論 3 360
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,668評論 1 374
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,151評論 5 365
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,846評論 3 351
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,255評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,592評論 1 295
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,394評論 3 400
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,635評論 2 380

推薦閱讀更多精彩內容