模仿iOS版微信的滑動View

最近幾個月終於有大把時間總結這兩年來所學
2019.5.23

前言

• 最近經常交替使用Android和iOS手機。對於兩個系統，從我們常用的列表來看，Android一般的列表菜單是通過長按出來的，而iOS是通過滑動出現的。比如我們常用的微信，對於Android版本，長按某個聊天好友，會彈出 標爲未讀，置頂聊天，刪除聊天選項；對於iOS的版本，右滑，會顯示出標爲未讀，刪除選項

---

---

---------------------------------我是分割線---------------------------------

---

---

1. 滑動View

1.1 內容展示

我在Android上面，實現了一個滑動的View，模仿的是微信的iOS版，先簡單列舉一下功能，直接上圖，看着比較直觀一些。下面我放了四個動畫，分別是：滑動展開，單擊，長按，雙擊。

• 滑動效果

  
  

• 單擊選擇效果

  
  

• 長按、雙擊效果

  
  

1.2 功能介紹

• 這個滑動View是一個自定義View，裏面主要用了屬性動畫，觸摸檢測，觸摸反饋，配合測量完成。
  使用時，只需要在佈局文件裏面調用就可以，和TextView等常用控件一樣，像這個樣子。

在activity裏面

        slideView = findViewById(R.id.slide_view1);
        slideView.setOnClickListener(new Listener.OnMenuClickListener() {
            @Override
            public void onClick(int id) {
                switch(id){

                    case R.id.menu_a:
                        Util.toast("點擊 刪除");
                        break;
                    case R.id.menu_b:
                        Util.toast("點擊 設爲未讀");
                        break;
                    case R.id.sure_delete:
                        Util.toast("點擊 確認刪除");
                        break;
                    case R.id.long_press:
                        Util.toast("長按");
                        VibratorLib.vibrateShort();
                        break;
                    case R.id.double_click:
                        Util.toast("雙擊");
                        break;
                }
            }
        });

在xml裏面

<android.support.constraint.ConstraintLayout
    ......
    <demo.com.library.view.SlideView
        android:id="@+id/slide_view1"
        ...

        app:image_src="@drawable/crekerli_pig"
        app:image_margin_start="10dp"
        app:image_slide_length="60dp"

        app:title_text="@string/title"
        app:title_text_size="20sp"
        app:title_text_color="@color/colorBlack"
        app:title_text_margin_start="10dp"

        app:message_text="@string/message"
        app:message_text_size="12sp"
        app:message_text_color="@color/colorBlack"
        app:message_text_margin_start="10dp"

        app:menu_a_background="@color/colorRed"
        app:menu_a_text="@string/delete"
        app:menu_a_text_size="20sp"
        app:menu_a_aspect="1"

        app:menu_b_background="@color/colorGray"
        app:menu_b_text="@string/set"
        app:menu_b_text_size="20sp"
        app:menu_b_aspect="1.2"/>
        ...

從xml文件裏面，細心一點兒可以看出我對SlideView的內容分成了 image title message menu_a menu_b 五個部分。對應到View裏面，看下面的圖示：

下面分別介紹一下五個部分。

2. 五個部分

2.1 image

image 表示用戶頭像，裏面有三個配置參數

app:image_src="@drawable/crekerli_pig"
app:image_margin_start="10dp"
app:image_slide_length="60dp"

1. image_src：文件資源
2. image_margin_start：圖片的start位置到view最左側的偏移量
3. image_slide_length：圖片的邊長「正方形」

2.2 title

app:title_text="@string/title"
app:title_text_size="20sp"
app:title_text_color="@color/colorBlack"
app:title_text_margin_start="10dp"

1. title_text：文本內容
2. title_text_size：文本大小
3. title_text_color：文本顏色
4. title_text_margin_start：文本起始位置的偏移量

2.3 message

app:message_text="@string/message"
app:message_text_size="12sp"
app:message_text_color="@color/colorBlack"
app:message_text_margin_start="10dp"

1. message_text ：文本內容
2. message_text_size ：文本大小
3. message_text_color ：文本顏色
4. message_text_margin_start ：文本起始位置的偏移量

2.4 menu

menu_a 和menu_b的內容是一樣的，所以這裏放在一起統一講

app:menu_a_background="@color/colorRed"
app:menu_a_text="@string/delete"
app:menu_a_text_size="20sp"
app:menu_a_aspect="1"

1. app:menu_a_backgroundor ：菜單的背景色
2. app:menu_a_text ：菜單的文字內容
3. app:menu_a_text_size ：菜單的文字大小
4. app:menu_a_aspect ：菜單的寬高比。高度爲View的高，不如寬高比2，那麼寬就是高的兩倍。

SlideView GitHub詳細地址

再另外，以上都是自己平時所學整理，如果有錯誤，歡迎留言或者添加微信批評指出，一起學習，共同進步，愛生活，愛技術。