快捷導(dǎo)航

Android_UI 仿QQ側(cè)滑菜單效果的實(shí)現(xiàn)

更新時(shí)間：2017年04月11日 09:19:07 作者：Checkiming

相信大家對(duì)QQ側(cè)滑菜單的效果已經(jīng)不陌生了吧,側(cè)滑進(jìn)入個(gè)人頭像一側(cè),進(jìn)行對(duì)頭像的更改,我的收藏,QQ錢(qián)包,我的文件等一系列的操作，下面小編給大家分享Android_UI 仿QQ側(cè)滑菜單效果的實(shí)現(xiàn)，一起看看吧

相信大家對(duì)QQ側(cè)滑菜單的效果已經(jīng)不陌生了吧,側(cè)滑進(jìn)入個(gè)人頭像一側(cè),進(jìn)行對(duì)頭像的更改,我的收藏,QQ錢(qián)包,我的文件等一系列的操作,今天呢,主要是實(shí)現(xiàn)進(jìn)入側(cè)滑菜單的這一效果原理進(jìn)行分析.

這里寫(xiě)圖片描述

主要思路分析

1.首先寫(xiě)一個(gè)SlideMenu 繼承一個(gè)幀布局FrameLayout ,因?yàn)槿绻^承自ViewGroup的話，需要我們自己來(lái)實(shí)現(xiàn)onMeasure方法，而該方法的實(shí)現(xiàn)一般比較麻煩且沒(méi)有必要，所以選擇繼承系統(tǒng)的已有的控件FrameLayout，不用其他控件是因?yàn)镕rameLayout最輕量級(jí)

2.在布局文件中給SlideMenu添加2個(gè)子布局，分別是菜單的布局和主界面的布局

3.移動(dòng)View的方法總結(jié)

通過(guò)改變View的scroll的坐標(biāo)來(lái)移動(dòng)：
scrollTo(x,y);//滾動(dòng)到指定位置
scrollBy(xOffset,yOffset);//滾動(dòng)多少距離
通過(guò)改變View在父View中的布局的位置：
offsetLeftAndRight(offset);//同時(shí)更改view的left和right
offsetTopAndBottom(offset);//同時(shí)更改view的top和bottom
layout(l,t,r,b);

4.ViewDragHelper 類的介紹

谷歌在2013年I/O開(kāi)發(fā)者大會(huì)上提出;

專門(mén)用于在ViewGroup中對(duì)子View進(jìn)行拖拽處理;

在19(Android4.4)以及以上的v4包中;

本質(zhì)是封裝了對(duì)觸摸事件的解析，包括觸摸位置，觸摸速度以及Scroller的封裝，只需要我們?cè)诨卣{(diào)方法中指定是否移動(dòng)，移動(dòng)多少等等，但是需要注意的是：它只是一個(gè)觸摸事件的解析類(如GestureDecetor)，所以需要我們傳遞給它觸摸事件，它才能工作;

開(kāi)始創(chuàng)建ViewDragHelper對(duì)象

ViewDragHelper viewDragHelper = ViewDragHelper.create(this, callback);

dragHelper 只是觸摸事件的解析類,需要將觸摸事件傳遞給它才能工作

1)_觸摸事件: 將觸摸事件傳遞給VIewDragHelper 來(lái)解析

觸摸事件

2)_判斷是否需要攔截觸摸事件

攔截觸摸事件

3)_初始化子view的引用

初始化view

4)_初始化寬高.在onSizeChanged方法中初始化寬高，因?yàn)樵摲椒ㄔ趏nMeasure之后執(zhí)行

初始化寬高

其中這里調(diào)用getMeasureWidth() 方法與分別獲取左側(cè)菜單的寬,主頁(yè)面的寬的作用是一樣的.

實(shí)現(xiàn)ViewDragHelper.Callback 的監(jiān)聽(tīng)事件

監(jiān)視view的觸摸事件,這里需要考慮到,當(dāng)進(jìn)行滑動(dòng)的時(shí)候,可能會(huì)觸碰到listview的滑動(dòng)事件,所以這里通過(guò)了getViewHorizontalDragRange()方法進(jìn)行強(qiáng)制橫向滑動(dòng),當(dāng)返回值大于0 的時(shí)候,即讓它強(qiáng)制橫向滑動(dòng),否則在某些情況下不能水平滑動(dòng)

監(jiān)視觸摸事件

強(qiáng)制攔截水平,修正水平位置

控制垂直方向的移動(dòng)

在onViewPositionChanged()方法中實(shí)現(xiàn)一些伴隨移動(dòng)的效果

此方法可以獲取view移動(dòng)的距離

如果當(dāng)前移動(dòng)的是main ,那么就讓menu 進(jìn)行伴隨移動(dòng)

移動(dòng)main ,并限制main的移動(dòng)

根據(jù)滑動(dòng)的百分比的值,去執(zhí)行伴隨的動(dòng)畫(huà) executeAnim()

對(duì)移動(dòng)進(jìn)行處理

松開(kāi)手指進(jìn)行回調(diào),該方法會(huì)處理手指拾起的緩慢移動(dòng)

松開(kāi)手指進(jìn)行回調(diào)

執(zhí)行動(dòng)畫(huà)

這里考慮到了給整個(gè)SlideMenu的背景添加陰影遮罩效果,通過(guò)getBackground對(duì)是否為空時(shí)進(jìn)行添加陰影遮罩效果

根據(jù)百分比執(zhí)行動(dòng)畫(huà)

//對(duì)main的移動(dòng)進(jìn)行限制了
 private int fixLeft(int newLeft) {
    if (newLeft > maxLeft) {
      newLeft = maxLeft;
    } else if (newLeft < 0) {
      newLeft = 0;
    }
    return newLeft;

需要定義接口回調(diào),將SlideMenu 打開(kāi),讓滑動(dòng)和關(guān)閉的事件方法暴露

//定義接口回調(diào),將SlideMenu 打開(kāi),,滑動(dòng)和關(guān)閉的事件暴露給外界
  public interface onSwipeListener {
    void onOpen();
    void onClose();
    void onDragging(float fraction); //拖拽過(guò)程中的回調(diào)
  }

以上所述是小編給大家介紹的Android_UI 仿QQ側(cè)滑菜單效果的實(shí)現(xiàn)，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: