2. 程式人生 > >Android自定義ListView實現仿微信側滑刪除

Android自定義ListView實現仿微信側滑刪除

阿新 • • 發佈：2019-02-05

經常在遇到問題第一時間都會在網上搜索解決的方法，因此看到很多前輩們的比較精闢的技術文章，學習了很多東西，現在將自己平時工作中開發的一些小功能坐下總結，也寫出來，既方便自己理清思路記憶功能塊實現思路，又能與大家一起交流分享技術。
第一次寫文章，哪裡有不對的希望大家多多包涵！

通過ListView + PopupWindow的方式實現了仿微信的側滑刪除、取消關注功能。

實現的效果圖如下：

這裡寫圖片描述

下面貼出程式碼：

1、列表子項的“取消關注”和“刪除”按鈕的佈局，檔名“layout_del_cancel_btn.xml”，程式碼如下：

<?xml version="1.0" encoding="utf-8"?>
 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="wrap_content"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/id_item_cancel_btn"
        android:layout_width="wrap_content"
        android:layout_height
 
="wrap_content"
        android:text="取消關注"
        android:background="@android:color/darker_gray"
        android:textColor="#ffffff"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        />

    <Button
        android:id="@+id/id_item_btn"
        android:layout_width
 
="60dp"
        android:layout_height="wrap_content"
        android:text="刪除"
        android:background="@android:color/holo_red_light"
        android:textColor="#ffffff"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        />

</LinearLayout>

2、自定義的ListView，檔名“SlideDeleteCancelListView.java”，程式碼如下：

package com.record2text.vitospc.deletelistview;

import android.content.Context;
import android.util.AttributeSet;
import android.util.Log;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewConfiguration;
import android.widget.Button;
import android.widget.LinearLayout;
import android.widget.ListView;
import android.widget.PopupWindow;

/**
 * 仿微信刪除/取消關注列表
 * @author 馬文濤 技術群：317922608
 */
public class SlideDeleteCancelListView extends ListView {

    private static final String TAG = "SlideDelListView";

    private LayoutInflater mInflater = null;

    /**
     * 使用者滑動的最小距離
     */
    private int touchSlop;
    /**
     * 是否響應滑動
     */
    private boolean isSliding;
    /**
     * 手指按下時的x座標
     */
    private int xDown;
    /**
     * 手指按下時的y座標
     */
    private int yDown;
    /**
     * 手指移動時的x座標
     */
    private int xMove;
    /**
     * 手指移動時的y座標
     */
    private int yMove;

    /**
     * 當前手指觸控的View
     */
    private View mCurrentView;
    /**
     * 單籤手指觸控的位置
     */
    private int mCurrentViewPos;

    /**
     * 為刪除按鈕提供一個回撥介面
     */
    private DelButtonClickListener mDelListener = null;
    private CancelButtonClickListener mCancelListener = null;

    private PopupWindow mPopupWindow = null;
    private Button mDelBtn = null,mCancelBtn = null;

    private int mPopupWindowWidth, mPopupWindowHeight;

    /** 自定義ListView的構造方法 在裡面做一些必要的一些初始化
     * @param context
     * @param attrs
     */
    public SlideDeleteCancelListView(Context context, AttributeSet attrs) {
        super(context, attrs);

        mInflater = LayoutInflater.from(context);
        //使用者手指移動的最小距離，用來判斷是否響應觸發移動事件
        touchSlop = ViewConfiguration.get(context).getScaledTouchSlop();

        View view = mInflater.inflate(R.layout.layout_del_cancel_btn,null);
        //刪除按鈕
        mDelBtn = (Button) view.findViewById(R.id.id_item_btn);
        //取消按鈕
        mCancelBtn = (Button) view.findViewById(R.id.id_item_cancel_btn);
        mPopupWindow = new PopupWindow(view,
                LinearLayout.LayoutParams.WRAP_CONTENT,
                LinearLayout.LayoutParams.WRAP_CONTENT);
        /**
         * 先呼叫下measure,否則拿不到寬和高
         */
        mPopupWindow.getContentView().measure(0,0);
        mPopupWindowHeight = mPopupWindow.getContentView().getMeasuredHeight();
        mPopupWindowWidth = mPopupWindow.getContentView().getMeasuredWidth();

    }

    @Override
    public boolean dispatchTouchEvent(MotionEvent ev) {

        int action = ev.getAction();
        int x = (int) ev.getX();
        int y = (int) ev.getY();

        switch (action){
            case MotionEvent.ACTION_DOWN:
                //手指按下時水平方向x的位置
                xDown = x;
                //手指按下時垂直方向y的位置
                yDown = y;
                /*
                * 如果當前popupWindow顯示，則直接隱藏，然後遮蔽ListView的Touch事件的下傳
                * */
                if (mPopupWindow.isShowing()){
                    dismissPopWindow();
                    return false;
                }
                // 獲得當前手指按下時的item的位置
                mCurrentViewPos = pointToPosition(xDown,yDown);
                // 獲得當前手指按下時的ListView的item項
                mCurrentView = getChildAt(mCurrentViewPos - getFirstVisiblePosition());
                break;
            case MotionEvent.ACTION_MOVE:
                //手指移動時x的位置
                xMove = x;
                //手指一動時y的位置
                yMove = y;
                //水平滑動的距離（可能為負值）
                int dx = xMove - xDown;
                //垂直滑動的距離（可能為負值）
                int dy = yMove - yDown;
                /*
                * 判斷是否是從右到左的滑動
                * */
                if ( xMove < xDown && Math.abs(dx) > touchSlop && Math.abs(dy) < touchSlop ){
                    Log.e(TAG, "touchslop = " + touchSlop + " , dx = " + dx + " , dy = " + dy);
                    isSliding = true;
                }
                break;
        }

        return super.dispatchTouchEvent(ev);
    }

    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        int action = ev.getAction();
        /*
        * 如果是從右到左的滑動才響應，之前已在 dispatchTouchEvent 中獲得了是否是從右向左滑動
        * */
        if ( isSliding ){
            switch (action){
                case MotionEvent.ACTION_MOVE:
                    int []location = new int[2];
                    //獲得當前item的位置x與y
                    mCurrentView.getLocationOnScreen(location);
                    //設定PopupWindow的動畫
                    mPopupWindow.setAnimationStyle(R.style.popwindow_delete_btn_anim_style);
                    mPopupWindow.update();
                    Log.e(TAG,"width location[0]: " + location[0]);
                    Log.e(TAG,"height location[1]: " + location[1]);
                    Log.e(TAG,"mCurrentView.getWidth(): " + mCurrentView.getWidth());
                    Log.e(TAG,"mCurrentView.getHeight(): " + mCurrentView.getHeight());
                    Log.e(TAG,"mPopupWindowHeight: " + mPopupWindowHeight);
                    //設定“取消關注”、“刪除”按鈕PopWindow的顯示位置
                    //相對於父控制元件的位置（例如正中央Gravity.CENTER，下方Gravity.BOTTOM等），可以設定偏移或無偏移
                    //相對某個控制元件的位置，有偏移;xoff表示x軸的偏移，正值表示向左，負值表示向右；yoff表示相對y軸的偏移，正值是向下，負值是向上；
                    mPopupWindow.showAtLocation(mCurrentView,
                            Gravity.LEFT | Gravity.TOP,
                            location[0] + mCurrentView.getWidth() ,
                            location[1] + mCurrentView.getHeight()/2 - mPopupWindowHeight /2);
                    //設定刪除按鈕的回撥
                    mDelBtn.setOnClickListener(new OnClickListener() {
                        @Override
                        public void onClick(View v) {
                            //通過介面物件呼叫當前Item上刪除按鈕的點選方法
                            mDelListener.onDelClick(mCurrentViewPos);
                            mPopupWindow.dismiss();
                        }
                    });
                    //設定取消按鈕的回撥
                    mCancelBtn.setOnClickListener(new OnClickListener() {
                        @Override
                        public void onClick(View v) {
                            //通過介面物件呼叫當前Item上取消按鈕的點選方法
                            mCancelListener.onCancelClick(mCurrentViewPos);
                            mPopupWindow.dismiss();
                        }
                    });
                    Log.e(TAG, "mPopupWindow.getHeight()=" + mPopupWindowHeight);
                    break;
                case MotionEvent.ACTION_UP:
                    //設定側滑關閉
                    isSliding = false;
                    break;
            }
            // 相應滑動期間螢幕itemClick事件，避免發生衝突
            return true;
        }
        return super.onTouchEvent(ev);
    }

    /**
     * 隱藏popupWindow
     */
    private void dismissPopWindow()
    {
        if (mPopupWindow != null && mPopupWindow.isShowing())
        {
            mPopupWindow.dismiss();
        }
    }

    /** 設定刪除按鈕點選事件監聽
     * @param listener DelButtonClickListener 刪除按鈕監聽介面物件
     */
    public void setDelButtonClickListener(DelButtonClickListener listener)
    {
        mDelListener = listener;
    }

    /** 設定取消按鈕點選事件監聽
     * @param listener CancelButtonClickListener 按鈕點選事件監聽介面物件
     */
    public void setCancelButtonClickListener(CancelButtonClickListener listener){
        mCancelListener = listener;
    }

    /**
     * 刪除按鈕監聽介面
     */
    interface DelButtonClickListener{
        void onDelClick(int position);
    }

    /**
     * 取消按鈕監聽介面
     */
    interface CancelButtonClickListener{
        void onCancelClick(int position);
    }
}

3、滑動展示“刪除”、“取消關注”時需要展示和隱藏的動畫，在自定義的ListView類“SlideDeleteCancelListView”中用到了，分別如下：
a.展示動畫，檔名“delete_btn_show.xml”，程式碼如下：

<?xml version="1.0" encoding="utf-8"?>

http://schemas.android.com/apk/res/android">

<scale android:interpolator="@android:anim/accelerate_decelerate_interpolator"

android:fromXScale="0.0"
android:toXScale="1.0"
android:fromYScale="1.0"
android:toYScale="1.0"
android:pivotX="100%"
android:pivotY="50%"
android:fillAfter="false"
android:duration="200" >

</scale>

</set>

b.隱藏動畫，檔名“delete_btn_hide.xml”，程式碼如下：

<?xml version="1.0" encoding="utf-8"?>

http://schemas.android.com/apk/res/android">

<scale android:interpolator="@android:anim/accelerate_decelerate_interpolator"

android:fromXScale="1.0"
android:toXScale="0.0"
android:fromYScale="1.0"
android:toYScale="1.0"
android:pivotX="100%"
android:pivotY="50%"
android:fillAfter="false"
android:duration="200" >

</scale>

</set>

4、以上部分已經完成了自定義有刪除和取消關注功能的ListView，緊接著我們看一下如何使用這個ListView吧，首先貼上佈局檔案中的呼叫程式碼，檔名“activity_main.xml”，程式碼如下：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.record2text.vitospc.deletelistview.MainActivity">

<com.record2text.vitospc.deletelistview.SlideDeleteCancelListView
    android:id="@+id/id_listview"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
</com.record2text.vitospc.deletelistview.SlideDeleteCancelListView>
</RelativeLayout>

5、下來我們看一下主頁面“MainActivity.java”中如何呼叫該段程式碼，並給響應的部分新增事件的，程式碼如下：

package com.record2text.vitospc.deletelistview;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.Toast;

import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;

/**
 * 仿微信刪除/取消關注列表
 * @author 馬文濤 技術群：317922608
 */
public class MainActivity extends AppCompatActivity {

    private SlideDeleteCancelListView mListView = null;
    private List<String> mDatas = null;
    private ArrayAdapter mAdapter = null;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mListView = (SlideDeleteCancelListView) findViewById(R.id.id_listview);
        mDatas = new ArrayList<>(Arrays.asList("北京市", "天津市", "上海市", "重慶市", "安徽省", "福建省",
                "甘肅省", "廣東省", "貴州省", "海南省", "河北省","河南省","黑龍江省","湖北省","湖南省","吉林省"));
        mAdapter = new ArrayAdapter(MainActivity.this,android.R.layout.simple_list_item_1, mDatas);
        mListView.setAdapter(mAdapter);
        //設定列表項Item刪除按鈕的點選監聽事件
        mListView.setDelButtonClickListener(new SlideDeleteCancelListView.DelButtonClickListener() {
            @Override
            public void onDelClick(int position) {
                Toast.makeText(MainActivity.this, "刪除：" + position + " : " + mAdapter.getItem(position), Toast.LENGTH_SHORT).show();
                //從列表中移除當前項
                mAdapter.remove(mAdapter.getItem(position));
            }
        });
        //設定列表項Item的取消按鈕點選監聽事件
        mListView.setCancelButtonClickListener(new SlideDeleteCancelListView.CancelButtonClickListener() {
            @Override
            public void onCancelClick(int position) {
                Toast.makeText(MainActivity.this, "取消關注：" + position + " : " + mAdapter.getItem(position), Toast.LENGTH_SHORT).show();
            }
        });
        //設定列表項Item點選監聽事件
        mListView.setOnItemClickListener(new AdapterView.OnItemClickListener()
        {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id)
            {
                Toast.makeText(MainActivity.this, "您點選的是第 " + position + " 項: " + mAdapter.getItem(position), Toast.LENGTH_SHORT).show();
            }
        });
    }
}

已經完成了一個自定義的具有側滑“刪除”、“取消關注”的自定義ListView控制元件，在使用過程中大家只需要結合自己的專案進行修改即可。

新人初次發文章，有不足之處希望大家多多海涵，有興趣的朋友可以加QQ群317922608，大家一起多多交流，多多指教，相互學習！

相關推薦

Android自定義ListView實現仿微信側滑刪除

經常在遇到問題第一時間都會在網上搜索解決的方法，因此看到很多前輩們的比較精闢的技術文章，學習了很多東西，現在將自己平時工作中開發的一些小功能坐下總結，也寫出來，既方便自己理清思路記憶功能塊實現思路，又能與大家一起交流分享技術。 第一次寫文章，哪裡有不對的希望大

Android自定義控制元件——仿微信半透明載入框

在我們的app中不免回遇到耗時操作，這時我們給個載入框進行過度，使使用者體驗大大加強。 一、CustomDialog類的編寫 package com.daqsoft.jingguan.weight; import android.app.Dialo

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

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

Android UI 之自定義RadarView——高仿微信雷達掃描

最近看了一個視訊講了一種微信雷達掃描的實現方案，借鑑了一下，自己也寫一個玩玩，與大家分享一下。基本想出來三種解決方案，根據不同需求情況選擇即可。 方案一實現思路（通用）： 1.自定義view  2.重寫onDraw()方法 3.畫四個無鋸齒空心圓 4.畫以最大圓為半徑的實心漸變圓 5.建立矩陣，旋轉畫布，

小程式自定義數字鍵盤|仿微信支付、支付寶支付密碼鍵盤

微信小程式自定義鍵盤外掛wcKeyboard|仿微信數字軟鍵盤|仿支付寶自定義數字鍵盤|小程式自定義模擬系統鍵盤 前段時間有開發過一個html5仿支付寶、微信支付數字鍵盤，在某些情況下自定義數字鍵盤應用還是蠻多的，比如 購物商城系統 零錢付款 ,會員卡支付，恰好微信小程式沒有內部數字鍵盤元件，這樣輸入密

android 自定義ViewGroup實現仿淘寶的商品詳情頁

最近公司在新版本上有一個需要， 要在首頁新增一個滑動效果， 具體就是仿照X寶的商品詳情頁， 拉到頁面底部時有一個粘滯效果，  如下圖 X東的商品詳情頁，如果使用者繼續向上拉的話就進入商品圖文描述介面： 剛開始是想拿來主義，直接從網上找個現成的demo來用， 但是網上無一

Android ViewPager和Fragment實現仿微信導航介面及滑動效果

1 先看看實現的效果： ps：上面每一幀Fragment中，包含是來自網路的圖片； 實現ViewPager+Fragment的頁面滑動和底部導航原理 主佈局檔案如下： <?xml version="1.0" encoding="utf-8"?> <L

android 自定義ListView實現下拉重新整理、分頁載入、點選事件——自定義控制元件學習（七）

package com.example.administrator.customerpulldownrefreshandpageload; import android.content.Context; import android.os.Handler; import android.os.Message

自定義控制元件 仿微信朋友圈文字展開全文功能

自定義TextView仿微信朋友圈文字資訊，展開全文功能 程式碼及註釋如下： 首先寫一個xml檔案 showmore.xml： <?xml version="1.0" encoding="utf-8"?> <LinearLayout x

Android RadioGroup+ViewPager+ActionBar實現仿微信6.0介面(底部滑動選單欄+導航欄)

轉載請註明原文地址：http://blog.csdn.net/anyfive/article/details/41296341 本文主要使用RadioGroup+ViewPager來實現滑動介面，使用ActionBar來實現頂部選單欄。先上圖（使用GifCam錄製）。

iOS開發-自定義相機（仿微信）拍照、視訊錄製

網上有很多自定義相機的例子，這裡只是我臨時寫的一個小demo，僅供參考： 用到了下面幾個庫： #import <AVFoundation/AVFoundation.h> #import <AssetsLibrary/AssetsLibra

【Android】自定義控制元件-仿QQ聯絡人側滑條目，右側滑選單。

一直沒有寫部落格的習慣，一直都是看別人的部落格，學習別人的東西。平時工作中總會遇到或大或小的問題，往往是上百度CSDN查詢答案。今天嘗試著寫部落格，一是更加深入地熟悉一下部落格；二是轉變一下學習方式；三是把自己所學的東西分享出來，幫助別人的同時也提升了自己！

[GitHub開源]Android自定義View實現微信打飛機遊戲

之前寫了很多自定義View理論方面的文章，具體可以參見《Android中自定義View、ViewGroup理論基礎詳解》 。 理論指導實踐，本博文演示瞭如何通過自定義View實現微信打飛機遊戲。 全

Android UI 自定義ListView 實現下拉重新整理 載入更多

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！        

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

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

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

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

android 融雲 + 科大訊飛 實現仿微信語音訊息轉換為文字（附DEMO原始碼）

融雲SDK 使用很方便，簡單配置就可以搭建即時通訊功能，配合科大訊飛的語音識別， 即可實現微信中語音訊息轉換為文字的功能 融雲sdk的基本使用就不細說了， 網上很多資料 使用融雲sdk自帶的聊天會話介面，想要在此會話介面上增加語音訊息長按時彈出 “轉換為文

Android Studio使用ViewPager+Fragment實現仿微信滑動切換介面

前言 微信的滑動切換獲得大家一致好評，在我們開發的過程中我們也經常模仿微信的導航效果。 首先看下效果圖 效果還算不錯，可以滑動切換和點選切換，微信介面用listview展示資料,通訊錄介面用的recyclerview展示資料，在接下來就帶著大家一一

Android使用RecyclerView實現仿微信聯絡人列表

現在聯絡人列表基本都是按照字母或者拼音來進行分類，右邊有一排字母供使用者快速定位到指定的字母位置，效果圖如下： OK，輸入的聯絡人型別可能有很多種，比如漢字、英文、數字、特殊符號等等，其中漢字會轉化成拼音，完後和英文一起進行分類，分類的原則是首字母排序，而數字、特殊符號等

Android 自定義view:實現ListView下拉的視差特效

一、概述： 現在流型的APP如微信朋友圈，QQ空間，微博個人展示都有視差特效的影子。 如圖：下拉圖片會產生圖片拉昇的效果，放手後圖片有彈回到原處： 那我們如何實現呢？ 1）重寫ListView控制元件： 2）重寫裡面的overScrollBy方法