Android 模仿QQ側滑刪除ListView

需求:

1、listView可以側滑item,展示刪除按鈕,點擊刪除按鈕,刪除當前的item

2、在刪除按鈕展示時,點擊隱藏刪除按鈕,不響應item的點擊事件

3、在刪除按鈕隱藏時,點擊item響應點擊事件


根據以上需求在網絡上查找響應的例子,也有仿QQ側滑代碼,但不能滿足2和3的要求,因此修改了一把,代碼如下,共大家拍磚

第一步:重寫ListView 

public class SwipeListView extends ListView {

    private final static String TAG = "SwipeListView";
    private int mScreenWidth;    // 屏幕寬度
    private int mDownX;            // 按下點的x    private int mDownY;            // 按下點的y    private int mDeleteBtnWidth;// 刪除按鈕的寬度

    private boolean isDeleteShown = false;    // 刪除按鈕是否正在顯示
    private boolean isOnClick = false;

    private ViewGroup mPointChild;    // 當前處理的item
    private LinearLayout.LayoutParams mLayoutParams;    // 當前處理的itemLayoutParams

    public SwipeListView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public SwipeListView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);

        // 獲取屏幕寬度
        WindowManager wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
        DisplayMetrics dm = new DisplayMetrics();
        wm.getDefaultDisplay().getMetrics(dm);
        mScreenWidth = dm.widthPixels;
    }

    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        switch (ev.getAction()) {
            case MotionEvent.ACTION_DOWN:
                performActionDown(ev);
                break;
            case MotionEvent.ACTION_MOVE:
                return performActionMove(ev);
            case MotionEvent.ACTION_UP:
                return performActionUp(ev);
//                break;
        }

        return super.onTouchEvent(ev);
    }

    // 處理action_down事件
    private void performActionDown(MotionEvent ev) {
//        Log.e(TAG,"performActionDown===="+isDeleteShown);
        if (isDeleteShown) {
            turnToNormal();
        }
        isOnClick = true;
        mDownX = (int) ev.getX();
        mDownY = (int) ev.getY();
        // 獲取當前點的item
        int downPosition = pointToPosition(mDownX, mDownY);
        int firstPosition= getFirstVisiblePosition();
        Log.e(TAG,"performActionDown====downPosition:"+downPosition+"==firstPosition"+firstPosition);
        if(downPosition < 0) return;
        mPointChild = (ViewGroup) getChildAt(downPosition-firstPosition);
        // 獲取刪除按鈕的寬度
        mDeleteBtnWidth = mPointChild.getChildAt(1).getLayoutParams().width;
        mLayoutParams = (LinearLayout.LayoutParams) mPointChild.getChildAt(0)
                .getLayoutParams();
        // 爲什麼要重新設置layout_width 等於屏幕寬度
        // 因爲match_parent時,不管你怎麼滑,都不會顯示刪除按鈕
        // why? 因爲match_parent時,ViewGroup就不去佈局剩下的view
        mLayoutParams.width = mScreenWidth;
        mPointChild.getChildAt(0).setLayoutParams(mLayoutParams);
    }

    // 處理action_move事件
    private boolean performActionMove(MotionEvent ev) {
//        Log.e(TAG, "performActionMove====" + isDeleteShown);
        int nowX = (int) ev.getX();
        int nowY = (int) ev.getY();
        isOnClick = false;
        if (Math.abs(nowX - mDownX) > Math.abs(nowY - mDownY)) {
            // 如果向左滑動
            if (nowX < mDownX) {
                // 計算要偏移的距離
                int scroll = (nowX - mDownX) / 2;
                // 如果大於了刪除按鈕的寬度, 則最大爲刪除按鈕的寬度
                if (-scroll >= mDeleteBtnWidth) {
                    scroll = -mDeleteBtnWidth;
                }
                // 重新設置leftMargin
                mLayoutParams.leftMargin = scroll;
                mPointChild.getChildAt(0).setLayoutParams(mLayoutParams);
            }

            return true;
        }

        return super.onTouchEvent(ev);
    }

    // 處理action_up事件
    private boolean performActionUp(MotionEvent ev) {
        boolean falg = false;
        if(isOnClick && !isDeleteShown)
        {
            falg = true;
        }

        // 偏移量大於button的一半,則顯示button
        // 否則恢復默認
        if (-mLayoutParams.leftMargin >= mDeleteBtnWidth / 2) {
            mLayoutParams.leftMargin = -mDeleteBtnWidth;
            isDeleteShown = true;
        } else {
            turnToNormal();
            isDeleteShown = false;
        }
        mPointChild.getChildAt(0).setLayoutParams(mLayoutParams);
//        Log.e(TAG, "performActionUp====" + isDeleteShown);
        if(falg)
        {
            return super.onTouchEvent(ev);
        }
        return true;

    }

    /**
     * 變爲正常狀態
     */
    public void turnToNormal() {
        mLayoutParams.leftMargin = 0;
        mPointChild.getChildAt(0).setLayoutParams(mLayoutParams);

    }

    /**
     * 當前是否可點擊
     *
     * @return 是否可點擊
     */
    public boolean canClick() {
        return !isDeleteShown;
    }
}

第二步:適配器
class SwipeListAdapter extends BaseAdapter {

    @Override
    public int getCount() {
        return mData.size();
    }

    @Override
    public Object getItem(int position) {
        return mData.get(position);
    }

    @Override
    public long getItemId(int position) {
        return position;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        ViewHolder holder = null;
        if (null == convertView) {
            holder = new ViewHolder();
            convertView = View.inflate(TestListViewActivity.this, R.layout.item_swipe_list, null);
            holder.tv = (LinearLayout) convertView.findViewById(R.id.tv);
            holder.tvName = (TextView) convertView.findViewById(R.id.tv_name);
            holder.delete = (TextView) convertView.findViewById(R.id.delete);
            convertView.setTag(holder);
        }
        else {
            holder = (ViewHolder) convertView.getTag();
        }
        holder.tvName.setText(mData.get(position));
        final int pos = position;
        holder.delete.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                mData.remove(pos);
                notifyDataSetChanged();
                mListView.turnToNormal();
            }
        });
        return convertView;
    }
}
static class ViewHolder {
    LinearLayout tv;
    TextView tvName;
    TextView delete;
}

第三步:寫一個TestListViewActivity
 private SwipeListView mListView;

    private ArrayList<String> mData = new ArrayList<String>() {
        {
            for (int i = 0; i < 20; i++) {
                add("hello world, hello android  " + i);
            }
        }
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_test_list_view);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
                        .setAction("Action", null).show();
            }
        });

        mListView = (SwipeListView) findViewById(R.id.list);
        mListView.setAdapter(new SwipeListAdapter());
//        mListView.setOnItemLongClickListener(new AdapterView.OnItemLongClickListener() {
//            @Override
//            public boolean onItemLongClick(AdapterView<?> parent, View view, int position, long id) {
//                Toast.makeText(TestListViewActivity.this, mData.get(position) + "被點擊了",
//                        Toast.LENGTH_SHORT).show();
//                return false;
//            }
//        });
        mListView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                Log.e("SwipeListView", "setOnItemClickListener====" + mListView.canClick());
//                Toast.makeText(TestListViewActivity.this, mData.get(position) + "被點擊了",
//                        Toast.LENGTH_SHORT).show();


            }
        });
    }
第四步:佈局文件
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent"
    android:layout_height="match_parent" 
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:showIn="@layout/activity_test_list_view"
    tools:context="com.kimascend.ledappd1.activity.TestListViewActivity">
    <com.kimascend.ledappd1.view.SwipeListView
        android:id="@+id/list"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:cacheColorHint="@android:color/transparent"
        android:listSelector="@android:color/transparent"
        android:divider="@android:color/darker_gray"
        android:dividerHeight="2dp">

    </com.kimascend.ledappd1.view.SwipeListView>

</RelativeLayout>
第五步:item的佈局文件
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <LinearLayout
        android:id="@+id/tv"
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/white"
        android:paddingBottom="20dp"
        android:paddingLeft="10dp"
        android:paddingTop="20dp">


        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/group_name_rgb"
            android:id="@+id/imageView8" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:text="Large Text"
            android:layout_gravity="center_vertical"
            android:id="@+id/tv_name" />
    </LinearLayout>
    <TextView
        android:id="@+id/delete"
        android:layout_width="80dp"
        android:layout_height="match_parent"
        android:background="#FFFF0000"
        android:gravity="center"
        android:paddingLeft="20dp"
        android:paddingRight="20dp"
        android:text="刪除"
        android:textColor="@android:color/white" />

</LinearLayout>
重點注意:
int downPosition = pointToPosition(mDownX, mDownY);
downPosition 在使用過程中得到-1,導致後面方法調用異常!
以上如有問題請留言,謝謝!




發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章