2. 程式人生 > >Android自定義View之仿QQ側滑選單實現

Android自定義View之仿QQ側滑選單實現

阿新 • • 發佈：2019-01-04

最近，由於正在做的一個應用中要用到側滑選單，所以通過查資料看視訊，學習了一下自定義View，實現一個類似於QQ的側滑選單，順便還將其封裝為自定義元件，可以實現類似QQ的側滑選單和抽屜式側滑選單兩種選單。

下面先放上效果圖：

側滑選單
抽屜式側滑

我們這裡的側滑選單主要是利用HorizontalScrollView來實現的，基本的思路是，一個佈局中左邊是選單佈局，右邊是內容佈局，預設情況下，選單佈局隱藏，內容佈局顯示，當我們向右側滑，就會將選單拉出來，而將內容佈局的一部分隱藏，如下圖所示：

這裡寫圖片描述

下面我們就一步步開始實現一個側滑選單。

一、定義一個類SlidingMenu繼承自HorizontalScrollView

我們後面所有的邏輯都會在這個類裡面來寫，我們先寫上其構造方法

public class SlidingMenu extends HorizontalScrollView {
    /**
     * 在程式碼中使用new時會呼叫此方法
     * @param context
     */
    public SlidingMenu(Context context) {
        this(context, null);
    }

    /**
     * 未使用自定義屬性時預設呼叫
     * @param context
     * @param attrs
     */
 

    public SlidingMenu(Context context, AttributeSet attrs) {
        //呼叫三個引數的構造方法
        this(context, attrs, 0);

    }

    /**
     * 當使用了自定義屬性時會呼叫此方法
     * @param context
     * @param attrs
     * @param defStyleAttr
     */
    public SlidingMenu(Context context, AttributeSet attrs, int defStyleAttr) {
        super
 
(context, attrs, defStyleAttr);
    }
}

二、定義選單佈局檔案

left_menu.xml檔案程式碼如下

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:orientation="vertical">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:drawablePadding="20dp"
            android:layout_marginLeft="20dp"
            android:gravity="left|center"
            android:drawableLeft="@mipmap/ic_launcher"
            android:text="第一個Item"/>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:drawablePadding="20dp"
            android:layout_marginLeft="20dp"
            android:gravity="left|center"
            android:drawableLeft="@mipmap/ic_launcher"
            android:text="第二個Item"/>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:drawablePadding="20dp"
            android:layout_marginLeft="20dp"
            android:gravity="left|center"
            android:drawableLeft="@mipmap/ic_launcher"
            android:text="第三個Item"/>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:drawablePadding="20dp"
            android:layout_marginLeft="20dp"
            android:gravity="left|center"
            android:drawableLeft="@mipmap/ic_launcher"
            android:text="第四個Item"/>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:drawablePadding="20dp"
            android:layout_marginLeft="20dp"
            android:gravity="left|center"
            android:drawableLeft="@mipmap/ic_launcher"
            android:text="第五個Item"/>
    </LinearLayout>
</RelativeLayout>

上面其實就是定義了一列TextView來模仿選單的Item項

三、定義主佈局檔案，使用自定義的View

activity_main.xml檔案程式碼如下

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <!--自定義View-->
   <com.codekong.qq_50_slidingmenu.view.SlidingMenu
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       app:rightPadding="100dp"
       app:drawerType="false"
       android:scrollbars="none">
       <LinearLayout
           android:layout_width="wrap_content"
           android:layout_height="match_parent"
           android:orientation="horizontal">
            <!--引入選單佈局-->
           <include layout="@layout/left_menu"/>
            <!--內容佈局-->
           <LinearLayout
               android:layout_width="match_parent"
               android:layout_height="match_parent"
               android:background="@drawable/qq_bg">

           </LinearLayout>
       </LinearLayout>
   </com.codekong.qq_50_slidingmenu.view.SlidingMenu>
</RelativeLayout>

四、自定義成員變數

我們定義一些成員變數以便於後面使用

//自定義View佈局中內嵌的第一層的LinearLayout
private LinearLayout mWapper;
//選單佈局
private ViewGroup mMenu;
//內容佈局
private ViewGroup mContent;
//螢幕寬度
private int mScreenWidth;
//選單距螢幕右側的距離,單位dp
private int mMenuRightPadding = 50;
//選單的寬度
private int mMenuWidth;
//定義標誌,保證onMeasure只執行一次
private boolean once = false;
//選單是否是開啟狀態
private boolean isOpen = false;

五、拿到螢幕寬度的畫素值

因為目前為止，我們沒有使用自定義屬性，所以自定義View預設會呼叫兩個引數的構造方法，但因為我們第一步中寫構造方法時是在兩個引數的構造方法中呼叫了三個引數的構造方法，所以，我們將獲取螢幕寬度的程式碼寫在三個引數的構造方法中，後面我們自定義屬性後獲取屬性值也是在三個引數的構造方法中書寫相應的邏輯。

/**
 * 當使用了自定義屬性時會呼叫此方法
 * @param context
 * @param attrs
 * @param defStyleAttr
 */
public SlidingMenu(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    //通過以下步驟拿到螢幕寬度的畫素值
    WindowManager windowManager = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
    DisplayMetrics displayMetrics = new DisplayMetrics();
    windowManager.getDefaultDisplay().getMetrics(displayMetrics);
    mScreenWidth = displayMetrics.widthPixels;
}

六、實現onMeasure()方法

onMeasure()方法是自定義View的正式第一步，它用來決定內部View(子View)的寬和高，以及自身的寬和高，下面是具體的程式碼邏輯。

/**
* 設定子View的寬和高
* 設定自身的寬和高
* @param widthMeasureSpec
* @param heightMeasureSpec
*/
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
   if (!once){
       once = true;
       mWapper = (LinearLayout) getChildAt(0);
       mMenu = (ViewGroup) mWapper.getChildAt(0);
       mContent = (ViewGroup) mWapper.getChildAt(1);
       //選單和內容區域的高度都可以保持預設match_parent
       //選單寬度 = 螢幕寬度 - 選單距螢幕右側的間距
       mMenuWidth = mMenu.getLayoutParams().width = mScreenWidth - mMenuRightPadding;
       mContent.getLayoutParams().width = mScreenWidth;
       //當設定了其中的選單的寬高和內容區域的寬高之後,最外層的LinearLayout的mWapper就自動設定好了
   }
   super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}

七、實現onLayout()方法

onLayout()方法中主要是確定自定義View中子View放置的位置。下面是具體的程式碼。

/**
 * 通過設定偏移量將Menu隱藏
 * @param changed
 * @param l
 * @param t
 * @param r
 * @param b
 */
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {

    super.onLayout(changed, l, t, r, b);
    if (changed){
        //佈局發生變化時呼叫(水平滾動條向右移動menu的寬度,則正好將menu隱藏)
        this.scrollTo(mMenuWidth, 0);
    }
}

這個比較好理解，由於我們使用的是水平滾動佈局，我們預設情況下相當於將水平滾動條向右拖動選單寬度的的距離，這樣左邊佈局的選單就正好被隱藏了。

八、onTouchEvent()方法

該方法主要處理內部內部View的移動，我們可以在其中寫一些邏輯控制自定義View內部的滑動事件。
由於我們的自定義View是繼承自HorizontalScrollView，我們不再處理按下和移動事件，保持HorizontalScrollView預設的即可，但對於手指擡起事件，我們需要根據手指在水平X軸方向的位移來做出開啟選單或關閉選單的操作，所以我們的邏輯程式碼如下：

@Override
public boolean onTouchEvent(MotionEvent ev) {
    int action = ev.getAction();
    //按下和移動使用HorizontalScrollView的預設處理
    switch (action){
        case MotionEvent.ACTION_UP:
            //隱藏在左邊的位置
            int scrollX = getScrollX();
            if (scrollX > mMenuWidth / 2){
                //隱藏的部分較大, 平滑滾動不顯示選單
                this.smoothScrollTo(mMenuWidth, 0);
                isOpen = false;
            }else{
                //完全顯示選單
                this.smoothScrollTo(0, 0);
                isOpen = true;
            }
            return true;
    }
    return super.onTouchEvent(ev);
}

其實到這一步為止，一個基本的側滑選單已經做出來了，下面我們將使用屬性動畫對我們的自定義View進行擴充套件，使其實現最開始展示的抽屜式側滑選單。

九、屬性動畫實現抽屜式側滑

接下來我們實現抽屜式側滑，抽屜式側滑說白了就是，我們的選單不是一點點被拉出來，而是看起來選單就藏在頁面的背後，隨著我們向右滑動，一點點顯露出來。
實現的思路很簡單，當我們拖動時，我們讓選單佈局的偏移量等於getScrollX()的值，也就是時刻把選單隱藏在左邊的部分向右偏移出來，這樣我們看起來就像選單藏在頁面後面。如下圖：

這裡寫圖片描述

當我們左右滑動時會觸發onScrollChanged()方法，我們在此處算出選單需要的實時的偏移量，然後呼叫屬性動畫即可。
下面說說具體實現程式碼：

/**
 * 滾動發生時呼叫
 * @param l  getScrollX()
 * @param t
 * @param oldl
 * @param oldt
 */
@Override
protected void onScrollChanged(int l, int t, int oldl, int oldt) {
    super.onScrollChanged(l, t, oldl, oldt);
    float scale = l * 1.0f / mMenuWidth;  //1 ~ 0
    //呼叫屬性動畫,設TranslationX
    mMenu.setTranslationX(mMenuWidth * scale);
}

上面方法中的 l 就是上一步中提到的getScrollX()獲得的值。當我們沒有拉選單時，選單需要的偏移量就是整個選單的寬度，當我們將選單完全拉出時，選單就不需要偏移量了，此時偏移量為0。此時我們的抽屜式側滑就做好了。

注:此處的屬性動畫是在Android3.0之後引入的，如果需要相容更早的版本，可以用相關的相容庫。

十、自定義屬性實現靈活配置

自定義屬性主要是方便使用者可以根據具體的場景實現不同的效果。比如，我們可以通過在xml檔案中配置，實現選單是普通的側滑式還是抽屜式。在剛開始，我們在自定義View中將選單開啟時，選單右邊緣距離螢幕右邊緣的值設定為50dp，我們通過自定義屬性可以實現在xml檔案中自己配置合適的值。

自定義屬性按下面的步驟進行：

1 . 在 res/values 目錄下新建attr.xml檔案，檔案中寫入的內容如下:

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <attr name="rightPadding" format="dimension"/>
   <attr name="drawerType" format="boolean"/>
   <declare-styleable name="SlidingMenu">
       <attr name="rightPadding"/>
       <attr name="drawerType"/>
   </declare-styleable>
</resources>

上面的比較好理解，我們先在上面宣告兩個自定義的屬性的名稱及其對應的型別，然後再在下面的具體的自定義樣式中引用它們。上面兩個自定義的屬性分別是選單拉開時右邊緣距離螢幕右邊緣的距離，以及選單是否是抽屜式佈局。

2 . 在自定義View類中獲取到自定義的屬性值。如果使用者在xml檔案中自定義了屬性值，我們則獲取，如果沒有顯式設定，則使用預設值即可。

順便說一下，前面提到當我們使用自定義屬性時，會預設呼叫三個引數的構造方法，所以我們獲取自定義屬性值的程式碼也是寫在三個引數的構造方法中。

下面是獲取屬性值的程式碼:

/**
 * 當使用了自定義屬性時會呼叫此方法
 * @param context
 * @param attrs
 * @param defStyleAttr
 */
public SlidingMenu(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);

    //獲取我們自定義的屬性
    TypedArray typedArray = context.getTheme().obtainStyledAttributes(attrs,
            R.styleable.SlidingMenu, defStyleAttr, 0);
    int n = typedArray.getIndexCount();
    //遍歷每一個屬性
    for (int i = 0; i < n; i++) {
        int attr = typedArray.getIndex(i);
        switch (attr){
            //對我們自定義屬性的值進行讀取
            case R.styleable.SlidingMenu_rightPadding:
                //如果在應用樣式時沒有賦值則使用預設值50,如果有值則直接讀取
                mMenuRightPadding = typedArray.getDimensionPixelSize(attr,
                        (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, mMenuRightPadding, context.getResources().getDisplayMetrics()));
                break;
            case R.styleable.SlidingMenu_drawerType:
                isDrawerType = typedArray.getBoolean(attr, false);
                break;
            default:
                break;
        }
    }
    //釋放,一定要釋放
    typedArray.recycle();
}

3 . 上面的程式碼中我們已經可以讀取到設定的屬性值，我們可以如下面一樣設定自定義屬性值：

<com.codekong.qq_50_slidingmenu.view.SlidingMenu
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       app:rightPadding="100dp"
       app:drawerType="true"
       android:scrollbars="none">
 </com.codekong.qq_50_slidingmenu.view.SlidingMenu>

4 . 使用屬性值控制具體的邏輯，我們的rightPadding一旦獲取到就會在onMeasure()方法中被設定，而drawerType被獲取到就可以控制是否會呼叫onScrollChanged()中的程式碼。程式碼如下：

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
   if (!once){
       once = true;
       mWapper = (LinearLayout) getChildAt(0);
       mMenu = (ViewGroup) mWapper.getChildAt(0);
       mContent = (ViewGroup) mWapper.getChildAt(1);
       //選單和內容區域的高度都可以保持預設match_parent
       //選單寬度 = 螢幕寬度 - 選單距螢幕右側的間距
       mMenuWidth = mMenu.getLayoutParams().width = mScreenWidth - mMenuRightPadding;
       mContent.getLayoutParams().width = mScreenWidth;
       //當設定了其中的選單的寬高和內容區域的寬高之後,最外層的LinearLayout的mWapper就自動設定好了
   }
   super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
@Override
protected void onScrollChanged(int l, int t, int oldl, int oldt) {
    super.onScrollChanged(l, t, oldl, oldt);
    if (isDrawerType){
        float scale = l * 1.0f / mMenuWidth;  //1 ~ 0
        //呼叫屬性動畫,設TranslationX
        mMenu.setTranslationX(mMenuWidth * scale);
    }
}

十一、給自定義View設定方法

對於我們的滑動式選單，我們最常用的功能便是選單的開啟和關閉，所以我們可以在自定義View中定義這兩個方法，方便我們的使用，下面是具體的程式碼：

/**
 * 開啟選單
 */
public void openMenu(){
    if (!isOpen){
        this.smoothScrollTo(0, 0);
        isOpen = true;
    }
}

/**
 * 關閉選單
 */
public void closeMenu(){
    if (isOpen){
        this.smoothScrollTo(mMenuWidth, 0);
        isOpen = false;
    }
}

/**
 * 切換選單
 */
public void toggleMenu(){
    if (isOpen){
        closeMenu();
    }else{
        openMenu();
    }
}

當我們在Activity中使用時可以按下面的程式碼使用:

SlidingMenu slidingMenu = (SlidingMenu) findViewById(R.id.sliding_menu);
slidingMenu.toggleMenu();

最後面放上完整的自定義View的程式碼：

public class SlidingMenu extends HorizontalScrollView {
   //自定義View佈局中內嵌的最外層的LinearLayout
   private LinearLayout mWapper;
   //選單佈局
   private ViewGroup mMenu;
   //內容佈局
   private ViewGroup mContent;
   //螢幕寬度
   private int mScreenWidth;
   //選單距螢幕右側的距離,單位dp
   private int mMenuRightPadding = 50;
   //選單的寬度
   private int mMenuWidth;
   //定義標誌,保證onMeasure只執行一次
   private boolean once = false;
   //選單是否是開啟狀態
   private boolean isOpen = false;
   //是否是抽屜式
   private boolean isDrawerType = false;
   /**
    * 在程式碼中使用new時會呼叫此方法
    * @param context
    */
   public SlidingMenu(Context context) {
       this(context, null);
   }

   /**
    * 未使用自定義屬性時預設呼叫
    * @param context
    * @param attrs
    */
   public SlidingMenu(Context context, AttributeSet attrs) {
       //呼叫三個引數的構造方法
       this(context, attrs, 0);

   }

   /**
    * 當使用了自定義屬性時會呼叫此方法
    * @param context
    * @param attrs
    * @param defStyleAttr
    */
   public SlidingMenu(Context context, AttributeSet attrs, int defStyleAttr) {
       super(context, attrs, defStyleAttr);

       //獲取我們自定義的屬性
       TypedArray typedArray = context.getTheme().obtainStyledAttributes(attrs,
               R.styleable.SlidingMenu, defStyleAttr, 0);
       int n = typedArray.getIndexCount();
       //遍歷每一個屬性
       for (int i = 0; i < n; i++) {
           int attr = typedArray.getIndex(i);
           switch (attr){
               //對我們自定義屬性的值進行讀取
               case R.styleable.SlidingMenu_rightPadding:
                   //如果在應用樣式時沒有賦值則使用預設值50,如果有值則直接讀取
                   mMenuRightPadding = typedArray.getDimensionPixelSize(attr,
                           (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, mMenuRightPadding, context.getResources().getDisplayMetrics()));
                   break;
               case R.styleable.SlidingMenu_drawerType:
                   isDrawerType = typedArray.getBoolean(attr, false);
                   break;
               default:
                   break;
           }
       }
       //釋放
       typedArray.recycle();

       //通過以下步驟拿到螢幕寬度的畫素值
       WindowManager windowManager = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
       DisplayMetrics displayMetrics = new DisplayMetrics();
       windowManager.getDefaultDisplay().getMetrics(displayMetrics);
       mScreenWidth = displayMetrics.widthPixels;
   }

   /**
    * 設定子View的寬和高
    * 設定自身的寬和高
    * @param widthMeasureSpec
    * @param heightMeasureSpec
    */
   @Override
   protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
       if (!once){
           once = true;
           mWapper = (LinearLayout) getChildAt(0);
           mMenu = (ViewGroup) mWapper.getChildAt(0);
           mContent = (ViewGroup) mWapper.getChildAt(1);
           //選單和內容區域的高度都可以保持預設match_parent
           //選單寬度 = 螢幕寬度 - 選單距螢幕右側的間距
           mMenuWidth = mMenu.getLayoutParams().width = mScreenWidth - mMenuRightPadding;
           mContent.getLayoutParams().width = mScreenWidth;
           //當設定了其中的選單的寬高和內容區域的寬高之後,最外層的LinearLayout的mWapper就自動設定好了
       }
       super.onMeasure(widthMeasureSpec, heightMeasureSpec);
   }

   /**
    * 通過設定偏移量將Menu隱藏
    * @param changed
    * @param l
    * @param t
    * @param r
    * @param b
    */
   @Override
   protected void onLayout(boolean changed, int l, int t, int r, int b) {

       super.onLayout(changed, l, t, r, b);
       if (changed){
           //佈局發生變化時呼叫(水平滾動條向右移動menu的寬度,則正好將menu隱藏)
           this.scrollTo(mMenuWidth, 0);
       }
   }

   @Override
   public boolean onTouchEvent(MotionEvent ev) {
       int action = ev.getAction();
       //按下和移動使用HorizontalScrollView的預設處理
       switch (action){
           case MotionEvent.ACTION_UP:
               //隱藏在左邊的位置
               int scrollX = getScrollX();
               if (scrollX > mMenuWidth / 2){
                   //隱藏的部分較大, 平滑滾動不顯示選單
                   this.smoothScrollTo(mMenuWidth, 0);
                   isOpen = false;
               }else{
                   //完全顯示選單
                   this.smoothScrollTo(0, 0);
                   isOpen = true;
               }
               return true;
       }
       return super.onTouchEvent(ev);
   }

   /**
    * 開啟選單
    */
   public void openMenu(){
       if (!isOpen){
           this.smoothScrollTo(0, 0);
           isOpen = true;
       }
   }

   /**
    * 關閉選單
    */
   public void closeMenu(){
       if (isOpen){
           this.smoothScrollTo(mMenuWidth, 0);
           isOpen = false;
       }
   }

   /**
    * 切換選單
    */
   public void toggleMenu(){
       if (isOpen){
           closeMenu();
       }else{
           openMenu();
       }
   }

   /**
    * 滾動發生時呼叫
    * @param l  getScrollX()
    * @param t
    * @param oldl
    * @param oldt
    */
   @Override
   protected void onScrollChanged(int l, int t, int oldl, int oldt) {
       super.onScrollChanged(l, t, oldl, oldt);
       if (isDrawerType){
           float scale = l * 1.0f / mMenuWidth;  //1 ~ 0
           //呼叫屬性動畫,設TranslationX
           mMenu.setTranslationX(mMenuWidth * scale);
       }
   }
}

相關推薦

Android自定義View之仿QQ側滑選單實現

最近，由於正在做的一個應用中要用到側滑選單，所以通過查資料看視訊，學習了一下自定義View，實現一個類似於QQ的側滑選單，順便還將其封裝為自定義元件，可以實現類似QQ的側滑選單和抽屜式側滑選單兩種選單。 下面先放上效果圖： 我們這裡的側

android自定義View之仿通訊錄側邊欄滑動，實現A-Z字母檢索

我們的手機通訊錄一般都有這樣的效果，如下圖： OK，這種效果大家都見得多了，基本上所有的android手機通訊錄都有這樣的效果。那我們今天就來看看這個效果該怎麼實現。 一.概述 1.頁面功能分析 整體上來說，左邊是一個ListView，右邊是一個自定義View，但

Android自定義View之仿京東售後稽核進度

本篇文章已授權微信公眾號 guolin_blog （郭霖）獨家釋出 概述：同常在做商城類的App時，都會有售後的需求，而售後流程通常會因為不同的業務，而分為不確定的幾個步驟，如下圖所示： 那麼問題就來了，像這樣的效果如何實現呢？讓我們先放下這個問題，先看

Android 自定義View之仿華為圓形載入進度條

效果圖 實現思路 可以看出該View可分為三個部分來實現 最外圍的圓，該部分需要區分進度圓和底部的刻度圓，進度部分的刻度需要和底色刻度區分開來 中間顯示的文字進度，需要讓文字在View中居中顯示 旋轉的小圓點，小圓點需要模擬小球下落運動時的加速度

Android開發之仿QQ側滑刪除實現（二）

一、把SlideDelete的簡單樣式先做出來。 SlideDelete繼承自ViewGroup，在引用SlideDelete的xml的位置include進兩個layout，一個是內容，一個是刪除 一、1、準備兩個佈局 內容部分 <?xml version="1.

Android自定義 view之圖片裁剪從設計到實現

android圖片剪下是常用的功能，因為部落格開發的是SDK不涉及到activity，所以就需要自定義裁剪功能，參閱了網上的大部分資料後，在github上一個封裝好的裁剪庫cropper，正好符合要求，本著拿來主義的思想，直接把原始碼clone嵌入到專案裡，然後

Android自定義控制元件----繼承ViewGroup側滑選單3，普通側滑選單，新增選單切換按鈕(完結)

專案結構： 思路： 對外暴露一個選單開啟和關閉選單的方法toggle 當開啟時this.smoothScrollTo(0, 0);滑動選單顯示 當關閉時this.smoothScrollTo(mMenuWidth, 0);選單隱藏

android 自定義view之側滑效果

效果圖： 看網上的都是兩個view拼接，預設右側的不顯示，水平移動的時候把右側的view顯示出來。但是看最新版QQ上的效果不是這樣的，但給人的感覺卻很好，所以獻醜來一發比較高仿的。 知識點： 1、ViewDragHelper 的用法； 2、滑動衝突的解決； 3、自定

Android自定義view之實現仿抖音雙擊點贊單擊暫停特效

       2018年抖音、快手、火山等短視訊App比較火，最近自己做短視訊專案時有個需求，就是類似抖音的點贊特效，單擊螢幕時視訊暫停，再次點選時視訊恢復播放，雙擊或者連續多次點選時出現點贊特效(飄小心心特效)，而且是全屏可以隨意點選，都

Android自定義View之(下拉重新整理+側滑刪除)

以前專案中用到了一個放qq的側滑刪除的效果，結果github上一搜就copy了一個，不得不說大神們寫的真心牛逼，那個時候呢看到一個東西能用就可以了，也不管怎麼實現的，現在反過來一看，原來自定義還可以這麼玩，當然，前面專案中也因此出現了一個bug，就是我使用的是P

Android自定義View之分貝儀

一、說明        最近在整理自定義View方面的知識，偶爾看到meizu工具箱的分貝儀效果，感覺它的實效效果還挺好的，遂想自己模擬實現練練手，廢話不多說，直接開擼。 二、效果圖 首先看一下效果圖： 看效果還挺炫酷

Android自定義View之Canvas

https://www.jianshu.com/p/fb18c28d6627 用繼承View的方式來自定義View，我們就需要重寫onDraw方法，也就是得咱自己來畫圖了。畫圖就得用到畫筆和畫布，也就是Paint和Canvas。我們來了解下Canvas。 Canvas Canvas我們可

Android 自定義View之Canvas詳解

自定義View的相關文章： Android 實現一個簡單的自定義View Android 自定義View步驟 Android Paint詳解 Android 自定義View之Canvas相關方法說明 Android 自定義View例項之 “京東跑”

Android : 自定義View之流式佈局

寫了一個很簡單的佈局 這是周圍圓框的drawable <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android">

Android自定義View之getTextBounds()

在Android自定義View的過程中一定會用到Paint，而paint屬性中有一個方法getTextBounds(String text,int start,int end,Rext bounds),它的中文解釋是：返回一個包含中文的矩形邊界，位置為(start,end) 英文解釋：Retur

Android自定義View之自定義屬性

在Android開發中經常會用到自定義View的情況，而在自定義View時，自定義屬性是必須用到的。 1、新建一個自定義View如CustomView 它的自定義屬性主要是通過declare-styleable標籤為其配置自定義屬性。具體做法是：在res/values/目錄下增加一個reso

Android -- 自定義view之StepView

先看看實現的效果： 2，首先我們來看看我們常規的自定義view的基礎步驟吧         1，繼承View，重寫構造方法 2，自定義屬性 3，重寫onMeasure（）測量控制元件高度 4，重寫onDra

Android 自定義View 之 可隨意拖動的View

因為趕專案本人停更兩個月 從今天開始又可以更新了 今天說一下這個可隨意拖動的view 簡單說一下這個view效果 和 發展 一開始這種效果是使用在網頁端的特別是購物類 例如某寶 某東 購物車和客服視窗 都有使用這個懸浮可拖動的設計效果 後來才發展到的移動端 還有

自定義View之仿ios分段選擇器

一：效果 1.1 可動態新增或刪除tab，更改指定tab的文字。 二：實現思路 自定義view，實現效果 動態建立textview，有幾個tab建立幾個textview 第一個tab和最後一個tab為圓角矩形，其餘的為直角矩形，通過shape檔案完成 預設選

Android 自定義View之咖啡動畫

文章目錄效果畫杯子畫杯墊畫煙霧 效果 大概思路 自定義view，直接繼承view 複寫onSizeChanged()方法，在此計算杯墊，杯子，煙霧效果的path 在onDraw()方法中，描繪杯墊，杯子 處理煙霧動畫效果 畫杯子 這裡需要畫兩部分內容，第