實現listview的item側滑功能

告訴大家一個好消息,前幾天,Googlle宣佈面向所有開發者開發了Android Instant Apps,所有開發者都可以製作和發佈Instant Apps了。 Instant APP就是有着微信小程序一樣的功能,向好友發送一段鏈接,好友點擊進去不許下載就可以使用的App。

近日項目需要側滑刪除功能,之前使用的都是框架去實現,今天想自己嘗試去寫一個側滑功能.

使用HorizontalSorollView作爲Item的更佈局,利用HorizontalScrollView可以橫向滾動的特點實現滑動，根據動態的設置要展示的區域寬度，使得其餘選項操作被擠出屏幕外面，從而實現單條滑動菜單的樣式。

xml代碼:

<HorizontalScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/hsv"
    android:layout_width="wrap_content"
    android:layout_height="80dip"
    android:scrollbars="none">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:orientation="horizontal">

        <LinearLayout
            android:id="@+id/ll_content"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal">

            <ImageView
                android:id="@+id/history_image"
                android:layout_width="80dp"
                android:layout_height="80dp"
                android:scaleType="centerCrop"
                android:src="@drawable/nomap" />

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

                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_margin="5dp">

                    <TextView
                        android:id="@+id/tv_title"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_centerVertical="true"
                        android:text="22222222"
                        android:textColor="@color/textcolor"
                        android:textSize="@dimen/fourthlytextsizre"
                        android:textStyle="bold" />

                    <TextView
                        android:id="@+id/history_text"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_alignParentRight="true"
                        android:layout_centerVertical="true"
                        android:text="22222222"
                        android:textColor="@color/textcolor"
                        android:textSize="@dimen/fourthlytextsizre"
                        android:visibility="gone" />
                </RelativeLayout>

                <TextView
                    android:id="@+id/tv_time"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:gravity="center_vertical|right"
                    android:text="22222222"
                    android:textColor="@color/textcolor"
                    android:textSize="@dimen/fourthlytextsizre" />
            </LinearLayout>

        </LinearLayout>

        <LinearLayout
            android:id="@+id/ll_action"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:orientation="horizontal">

            <Button
                android:id="@+id/button1"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:background="@color/colorPrimary"
                android:paddingLeft="20dip"
                android:paddingRight="20dip"
                android:text="@string/delete" />
        </LinearLayout>
    </LinearLayout>
</HorizontalScrollView>

最重要的是定義一個Adapter繼承BaseAdapter,在getView()方法中實現如下代碼:

構造函數:

public History_Adapter(List<History_Bean> mList, Context context, int mScreentWidth) {
    this.mList = mList;
    this.context = context;
    this.mScreentWidth = mScreentWidth;
}

public View getView(int position, View convertView, ViewGroup parent) {
    ViewHolder viewHolder = null;
    History_Bean bean = mList.get(position);
    if (convertView == null) {
        convertView = View.inflate(context, R.layout.my_history_item, null);
        viewHolder = new ViewHolder(convertView);
        // 設置內容view的大小爲屏幕寬度,這樣按鈕就正好被擠出屏幕外
        ViewGroup.LayoutParams lp = viewHolder.llContent.getLayoutParams();
        lp.width = mScreentWidth;
        convertView.setTag(viewHolder);
    } else {
        viewHolder = (ViewHolder) convertView.getTag();
    }
    viewHolder.button1.setTag(position);
    // 設置監聽事件
    convertView.setOnTouchListener(new View.OnTouchListener() {
        @Override
        public boolean onTouch(View v, MotionEvent event) {
            switch (event.getAction()) {
                case MotionEvent.ACTION_DOWN:
                    if (view != null) {
                        ViewHolder viewHolder1 = (ViewHolder) view.getTag();
                        viewHolder1.hsv.smoothScrollTo(0, 0);
                    }
                case MotionEvent.ACTION_UP:
                    // 獲得ViewHolder
                    ViewHolder viewHolder = (ViewHolder) v.getTag();
                    view = v;
                    // 獲得HorizontalScrollView滑動的水平方向值.
                    int scrollX = viewHolder.hsv.getScrollX();
                    // 獲得操作區域的長度
                    int actionW = viewHolder.llAction.getWidth();
                    // 注意使用smoothScrollTo,這樣效果看起來比較圓滑,不生硬
                    // 如果水平方向的移動值<操作區域的長度的一半,就復原
                    if (scrollX < actionW / 2) {
                        viewHolder.hsv.smoothScrollTo(0, 0);
                    } else// 否則的話顯示操作區域
                    {
                        viewHolder.hsv.smoothScrollTo(actionW, 0);
                    }
                    return true;
            }
            return false;
        }
    });
    viewHolder.tvTitle.setText(bean.title);
    viewHolder.tvTime.setText(bean.time);
    viewHolder.historyText.setText(bean.text);
    UniversalmageLoader.getImageLoader().displayImage(MyAppcation.IMGURI + bean.uri, viewHolder.historyImage, options);
    viewHolder.button1.setOnClickListener(this);
    return convertView;
}

如此便能簡單的實現你想要的功能

上效果圖: