目? ? 錄（本篇字數：3000）

介紹

Item布局

自定義存放Item父容器

Bug分析

·一、解決滑動沖突

二、解決Item點擊事件的沖突

三、限制只能有一個menu被打開

博文續篇

ListView添加下拉刷新、上拉加載，其實很簡單

---

• 介紹

? ? 今天，我來分享我學習過的一個ListView側滑的Item菜單效果，所謂舉一反三，一同百通。在我學會了這個之后，很容易的就實現ListView的上拉加載和下拉刷新的效果，還有我們最常見的側滑抽屜效果。百變不離其中，只要我們搞懂其中的一個實現方式，那么其他的便信手拈來。

? ? 目的是為了，解決ListView與側滑刪除按鈕的滑動沖突

? ? 我要實現的是這樣一個效果，QQ的聯系人側滑菜單，而在沒學過自定義View之前毫無頭緒。既然這樣，我先來看一下實現后的效果吧。

完成的效果圖

• Item布局

? ? 現在呢，我們得有一個這樣的思路。所謂ListView中Item布局，我們一般是這個樣子的：一個父容器，里面一個TextView，ImageView等等內容。比如：

<listview.example.x.slidelistview.SlideLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="100dp"android:orientation="horizontal"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:orientation="horizontal"android:padding="2dp"><de.hdodenhof.circleimageview.CircleImageViewandroid:id="@+id/item_image"android:layout_width="100dp"android:layout_height="match_parent"android:padding="4dp" /><LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><TextViewandroid:id="@+id/item_name"android:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="1"android:gravity="center_vertical"android:paddingLeft="8dp"android:textColor="#323232"android:textSize="25sp" /><TextViewandroid:id="@+id/item_message"android:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="1"android:gravity="center_vertical"android:paddingLeft="8dp"android:textColor="#cfcfcf"android:textSize="18sp" /></LinearLayout></LinearLayout><LinearLayoutandroid:layout_width="200dp"android:layout_height="match_parent"android:orientation="horizontal"><TextViewandroid:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:background="@android:color/darker_gray"android:gravity="center"android:text="置頂"android:textColor="@android:color/white"android:textSize="22sp" /><TextViewandroid:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:background="@android:color/holo_red_light"android:gravity="center"android:text="刪除"android:textColor="@android:color/white"android:textSize="22sp" /></LinearLayout> </listview.example.x.slidelistview.SlideLayout>

? ? 以上的ListView的Item布局，也就是本次我們使用的。

? ? 既然，你要學習側滑的實現效果，別告訴我，你還不會用ListView。當然也是有可能的，那么在這里給一篇ListView的使用姿勢文章，不會的請點擊這里：ListView使用技巧、優化和用法拓展，掌握ListView

• 自定義存放Item父容器

? ? 首先，我們存放Item的父容器，這個父容器是有文章的。怎么說呢，大家可以看到上面布局代碼中的父容器，其實這就是我自定義的一個繼承FrameLayout的類，當然也可以是RelativeLayout。但是別用LinerLayout，因為我們要對子視圖進行排列位置，用LinerLayout反正適得其反。

? ? 有了這個前提，我們的思路就是：通過onLayout()、onMesure()方法對子視圖的測量寬高以及布置它的位置。我們的繼承自FrameLayout的類SlideLayout，其中存放兩個父容器。一個是ContentView，一個是MenuView。因為MenuView是從右側滑進來的，我們應該將它布置到屏幕以外，通過滑動顯示和隱藏。

? ? 我特地畫了一張草圖，以便更好的理解吧，也許只有我才能看懂~哈哈哈哈

menuView的邏輯理解圖，從隱藏到顯示整個過程
??????

? ? 好好理解一下吧，好記性不過爛筆頭，在本子上多涂涂畫畫，或者開啟畫板自己畫一畫，才能更好的理解。

? ? 那么，我做這些有什么用呢?當然了，請看效果圖：

• 效果圖

實現了，但是有明顯的bug

? ? 我們來看看實現的代碼類：

/*** @Created by xww.* @Creation time 2018/8/21.*/public class SlideLayout extends FrameLayout {private View mContentView;private View mMenuView;private int mMenuWidth;private int mMenuHeight;private int mContentWidth;private int mContentHeight;private Scroller mScroller;private float startX;private float startY;public SlideLayout(@NonNull Context context, @Nullable AttributeSet attrs) {super(context, attrs);mScroller = new Scroller(context);}@Overrideprotected void onFinishInflate() {super.onFinishInflate();mContentView = getChildAt(0);mMenuView = getChildAt(1);}@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {super.onMeasure(widthMeasureSpec, heightMeasureSpec);mContentWidth = getMeasuredWidth();mContentHeight = getMeasuredHeight();mMenuWidth = mMenuView.getMeasuredWidth();mMenuHeight = mMenuView.getMeasuredHeight();}@Overrideprotected void onLayout(boolean changed, int left, int top, int right, int bottom) {super.onLayout(changed, left, top, right, bottom);//將menu布局到右側不可見（屏幕外）mMenuView.layout(mContentWidth, 0, mContentWidth + mMenuWidth, mMenuHeight);}@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);}@Overridepublic boolean onTouchEvent(MotionEvent event) {final float x = event.getX();final float y = event.getY();switch (event.getAction()) {case MotionEvent.ACTION_DOWN:startX = x;startY = y;break;case MotionEvent.ACTION_MOVE:final float dx = (int) (x - startX);final float dy = (int) (startY - y);int disX = (int) (getScrollX() - dx);if (disX <= 0) {disX = 0;} else if (disX >= mMenuWidth) {disX = mMenuWidth;}scrollTo(disX, getScrollY());startX = x;startY = y;break;case MotionEvent.ACTION_UP:if (getScrollX() < mMenuWidth / 2) {closeMenu();} else {openMenu();}break;}return true;}@Overridepublic boolean onInterceptTouchEvent(MotionEvent ev) {return super.onInterceptTouchEvent(ev);}@Overridepublic void computeScroll() {super.computeScroll();if (mScroller.computeScrollOffset()) {scrollTo(mScroller.getCurrX(), mScroller.getCurrY());invalidate();}}public final void openMenu() {mScroller.startScroll(getScrollX(), getScrollY(), mMenuWidth - getScrollX(), 0);invalidate();}public final void closeMenu() {mScroller.startScroll(getScrollX(), getScrollY(), 0 - getScrollX(), 0);invalidate();} }

• Bug分析

? ? 以上只是簡單的實現了而且，但是明顯有很多bug，比如每個都可以滑出來、滑到一半卡主、與ListView滑動沖突了等等，下面我們一點一點來解決它，為了更好的體驗。

·一、解決滑動沖突

? ? 大家可能有疑惑，這個滑動沖突是怎么產生的呢？下面，我們來看一下滑動沖突的結果，你就會明白它產生的大致原因了

滑動沖突了

? ? 分析一下，我們SlideLayout有左右滑動的動作，ListView有上下滑動的動作。當我在左右滑動的時候不松開而進行上下滑動，那么滑動事件便由SlideLayout傳遞到了ListView的滑動。可想而知，SlideLayout的滑動事件被父視圖給奪走了，所以SlideLayout就犯毛病了，停止了它的滑動行為。

? ? 既然是ListView奪走了touch事件，從ListView角度上來說，我（ListView）攔截了SlideLayout的touch事件；從SlideLayout的角度上來說，父（ListView）把我的touch事件給奪走了。

? ? 那么有兩種相對的角度，就有兩種解決的方法。第一種是繼承ListView，設置不攔截；第二種是剝奪ListView對touch的處理權。我就用第二種來實現，既然你可以奪走我的，那么我就可以拿回來。所謂相生相克，一物降一物。

? ? 我們思路應該這樣，比如手指在左右滑動的距離大于上下滑動的距離，那么判定是SlideLayout的滑動事件，在這種情況下才去剝奪ListView的事件處理器。

看一下我們實現的代碼：在onTouchEvent()；的ACTION_MOVE事件中修改代碼，添加如下部分

case MotionEvent.ACTION_MOVE:final float dx = (int) (x - startX);final float dy = (int) (startY - y);int disX = (int) (getScrollX() - dx);if (disX <= 0) {disX = 0;} else if (disX >= mMenuWidth) {disX = mMenuWidth;}scrollTo(disX, getScrollY());final float moveX = Math.abs(x - downX);final float moveY = Math.abs(y - downY);if (moveX > moveY && moveX > 10f) {//剝奪ListView對touch事件的處理權getParent().requestDisallowInterceptTouchEvent(true);}startX = x;startY = y;break;

? ? 通過以上的修改，我們達到了目的，看看效果吧。

解決滑動沖突bug

二、解決Item點擊事件的沖突

? ? 我們的Item內可能是有點擊事件的，所以呢，又掉入了一個坑。為什么這樣說呢？看下面的圖你就明白一切了。我給名字設置了點擊事件，發生了什么？

在姓名區域無法滑動，其他區域可以滑動

? ? 分析一下，產生這種異常的原因。為什么在姓名那里卻無法移動呢？因為什么呢？那么，首先看的是onClickListener到底做了什么事情，可以看看郭霖大神的文章Android事件分發機制完全解析，帶你從源碼的角度徹底理解(上)。那我們就知道了onClickListener其實把touch事件給消費了，這就導致了SlideLayout始終處理不了touch事件，因為被Item中的子元素TextView給消費了。

? ? 如果不太懂，你也許可以先看這樣的一個簡單例子：理解View的事件分發、攔截和消費，處理事件沖突的必備技能

? ? 既然，TextView是它（SlideLayout）的兒子，作為父親，那肯定要管管啊，不能讓兒子亂來吧。那么，下面我們就管一管，怎么管呢？當然是攔截了，父親把touch事件給攔截下來。但是，總不能所有情況都攔截吧，那兒子不就廢了嗎？所以呢，我們給定這樣一個條件，就是當手指確實在左右滑動，而非單純的點擊時，這時父親才攔截兒子的touch事件。也許有點難以想象，不急，我們看一下代碼就簡單多了。

@Overridepublic boolean onInterceptTouchEvent(MotionEvent event) {boolean intercept = false;final float x = event.getX();final float y = event.getY();switch (event.getAction()) {case MotionEvent.ACTION_DOWN:downX = x;downY = y;break;case MotionEvent.ACTION_MOVE:final float moveX = Math.abs(x - downX);if (moveX > 10f) {//對兒子touch事件進行攔截intercept = true;}break;case MotionEvent.ACTION_UP:break;}return intercept;}

? ? 通過這樣，我們的兒子就聽話多了，那么來看看是這樣的一種效果。

解決點擊事件與滑動的bug

三、限制只能有一個menu被打開

? ? 這一路，我的bug層出不窮，解決了這個又出了新的bug，真的是一步一個坑。當然，這是幸運的事情，當你爬完了這些坑之后，給你帶來的確實另一番天地。不禁扯了一下，言歸正傳，我們看看出現的Bug情況吧。

多個Item可以被拉出

? ? 我們來分析一下出現這種情況的根本原因，那就是每個Item都是ListView中獨立的一個個體，我們的Count數多少也就是Item數的多少，所以我們要對每個Item的側滑Menu進行監聽，我們自定義一個接口用于保存每一個Item的狀態，有兩種：Open和Close。但我們還需要一個點擊的監聽，用于判斷是否與當前Item一致。

? ? 這部分就比較簡單了，也好理解，簡單的看一下代碼吧。首先，在SlideLayout中定義一個監聽接口

private onSlideChangeListenr onSlideChangeListenr;public interface onSlideChangeListenr {void onMenuOpen(SlideLayout slideLayout);void onMenuClose(SlideLayout slideLayout);void onClick(SlideLayout slideLayout);}public void setOnSlideChangeListenr(SlideLayout.onSlideChangeListenr onSlideChangeListenr) {this.onSlideChangeListenr = onSlideChangeListenr;}

? ? 其次，在三個地方分別設置監聽

@Overridepublic boolean onInterceptTouchEvent(MotionEvent event) {boolean intercept = false;final float x = event.getX();final float y = event.getY();switch (event.getAction()) {case MotionEvent.ACTION_DOWN:downX = x;downY = y;if (onSlideChangeListenr != null) {onSlideChangeListenr.onClick(this);}break;case MotionEvent.ACTION_MOVE:final float moveX = Math.abs(x - downX);if (moveX > 10f) {//對兒子touch事件進行攔截intercept = true;}break;case MotionEvent.ACTION_UP:break;}return intercept;}public final void openMenu() {mScroller.startScroll(getScrollX(), getScrollY(), mMenuWidth - getScrollX(), 0);invalidate();if (onSlideChangeListenr != null) {onSlideChangeListenr.onMenuOpen(this);}}public final void closeMenu() {mScroller.startScroll(getScrollX(), getScrollY(), 0 - getScrollX(), 0);invalidate();if (onSlideChangeListenr != null) {onSlideChangeListenr.onMenuClose(this);}}

? ? 最后，在我們適配器中設置監聽狀態的改變做出相應的處理。

mSlideLayout = (SlideLayout) convertView;mSlideLayout.setOnSlideChangeListenr(new SlideLayout.onSlideChangeListenr() {@Overridepublic void onMenuOpen(SlideLayout slideLayout) {mSlideLayout = slideLayout;}@Overridepublic void onMenuClose(SlideLayout slideLayout) {if (mSlideLayout != null) {mSlideLayout = null;}}@Overridepublic void onClick(SlideLayout slideLayout) {if (mSlideLayout != null ) {mSlideLayout.closeMenu();}}});

? ? 接下來，我們運行一下項目，成功的解決了問題。

? ? 到此，一個仿QQ側滑菜單的效果完全的實現了，是不是很贊呢？哈哈哈哈。你以為就結束了嗎？開玩笑。。。哈哈哈哈哈哈哈！

博文續篇

ListView添加下拉刷新、上拉加載，其實很簡單

?原文鏈接：https://blog.csdn.net/smile_Running/article/details/81916502

@作者博客：_Xu2WeI

@更多博文：查看作者的更多博文

轉載于:https://www.cnblogs.com/xww0826/p/10359495.html

總結

以上是生活随笔為你收集整理的Android高仿QQ消息列表、侧拉删除菜单按钮效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。