可編輯選擇、刪除條目的ListView

wkp111發表於2018-01-05
View

今天，我是第一次在掘金寫作，寫一篇技術文章，是我自己在Android開發中總結提煉出的一個自定義控制元件EditListView，下面主要對其功能及其使用做簡單介紹。

首先，我們來看一下效果演示圖：

EditListView.gif

接下來，我們講解一下控制元件功能及其使用：

1.功能

封裝列表控制元件，使其條目具有可編輯選擇、刪除等功能。

2.Android Studio使用方法

dependencies{
      compile 'com.wkp:EditListView:1.0.2'
      //Android Studio3.0+可用以下方式
      //implementation 'com.wkp:EditListView:1.0.2'
}
複製程式碼

3.使用詳解

  • 屬性講解
        <!--是否開啟測量高度-->
        <attr name="wkp_measureHeight" format="boolean"/>
        <!--未選中狀態時圖示-->
        <attr name="wkp_uncheckedImg" format="reference"/>
        <!--選中狀態時圖示-->
        <attr name="wkp_checkedImg" format="reference"/>
        <!--編輯/退出編輯動畫時長（預設200）-->
        <attr name="wkp_editAnimDuration" format="integer"/>
複製程式碼
  • 佈局示例
<!--activity_main.xml-->
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:app="http://schemas.android.com/apk/res-auto"
            xmlns:tools="http://schemas.android.com/tools"
            android:id="@+id/sv"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

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

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

            <TextView
                android:id="@+id/delete"
                android:onClick="delete"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center"
                android:padding="@dimen/len_5dp"
                android:text="刪除"/>

            <TextView
                android:id="@+id/edit"
                android:onClick="edit"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center"
                android:padding="@dimen/len_5dp"
                android:text="編輯"/>

            <TextView
                android:id="@+id/exit_edit"
                android:onClick="exitEdit"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center"
                android:padding="@dimen/len_5dp"
                android:text="退出編輯"/>

            <TextView
                android:id="@+id/select_all"
                android:onClick="selectAll"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center"
                android:padding="@dimen/len_5dp"
                android:text="全選"/>

            <TextView
                android:id="@+id/select_none"
                android:onClick="selectNone"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center"
                android:padding="@dimen/len_5dp"
                android:text="全不選"/>

        </LinearLayout>

        <com.wkp.editlistview_library.view.EditListView
            android:id="@+id/lv"
            app:wkp_checkedImg="@drawable/ic_checked"
            app:wkp_uncheckedImg="@drawable/ic_uncheck"
            app:wkp_measureHeight="true"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"></com.wkp.editlistview_library.view.EditListView>

    </LinearLayout>
</ScrollView>


<!--item_lv.xml-->
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="match_parent"
                android:layout_height="match_parent">

    <TextView
        android:id="@+id/item_tv"
        android:padding="10dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <TextView
        android:padding="10dp"
        android:layout_alignParentRight="true"
        android:text="新"
        android:textColor="@android:color/white"
        android:background="@android:color/holo_red_light"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

</RelativeLayout>
複製程式碼
  • 程式碼示例
/**
 * kotlin用法
 */
 @RequiresApi(Build.VERSION_CODES.KITKAT)
class MainActivity : AppCompatActivity() {

    private val data = arrayListOf<String>("托兒索", "兒童劫", "小學僧", "橡皮妮", "喜之螂", "提款姬", "魚尾雯", "雞毛信", "娃娃魚", "過家嘉", "尿不獅", "沙琪馬", "阿童木", "大嘴猴", "香港皎")
    private var mListView: EditListView? = null

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        mListView = findViewById<EditListView>(R.id.lv)
        val adapter = ArrayAdapter(this, android.R.layout.simple_list_item_1, android.R.id.text1, data)
        //設定介面卡
        mListView!!.adapter = adapter
        //設定是否測量高度（解決ScrollView衝突）
//        mListView!!.setMeasureHeight(true)
        //長按監聽
        mListView!!.setOnItemLongClickListener({ parent, view, position, id ->
            //開啟編輯狀態
            mListView!!.isEditState = true
            //設定長按條目選中狀態
            mListView!!.setItemChecked(position, true)
            //返回false會導致OnItemClickListener呼叫，使以上的選中狀態消失
            true
        })
        //設定所有條目選中/未選中監聽（每次條目狀態改變都會回撥）
        mListView!!.setOnAllItemCheckedListener { checked -> Log.d("MainActivity", "checked:" + checked) }
    }

    //刪除按鈕
    fun delete(view: View) {
        //刪除所有已選中條目（adapter的源資料為陣列時不支援轉換）
        mListView!!.deleteAllCheckedItem(data)
    }

//  編輯按鈕
    fun edit(view: View) {
//      開啟編輯狀態
        mListView!!.isEditState = true
    }

//  退出編輯按鈕
    fun exitEdit(view: View) {
//       關閉編輯狀態
        mListView!!.isEditState = false
    }

//  全選按鈕
    fun selectAll(view: View) {
//       全選
        mListView!!.setAllItemChecked()
        //是否全選
        Log.d("MainActivity","isAllItemChecked:" + mListView!!.isAllItemChecked)
    }

//  全不選按鈕
    fun selectNone(view: View) {
//      全不選
        mListView!!.setAllItemUnchecked()
        //是否全不選
        Log.d("MainActivity","isAllItemUnchecked:" + mListView!!.isAllItemUnchecked)
    }
}



/**
 * Created by user on 2017/11/6.
 * java用法
 */
@RequiresApi(api = Build.VERSION_CODES.KITKAT)
public class TestActivity extends AppCompatActivity {

    private String[] mStrings = {"托兒索", "兒童劫", "小學僧", "橡皮妮", "喜之螂", "提款姬", "魚尾雯", "雞毛信", "娃娃魚", "過家嘉", "尿不獅",
            "沙琪馬", "阿童木", "大嘴猴", "香港皎","腦殘片","賣賣賣","333","乾乾幹"};
    private List<String> data = new ArrayList<>();
    private EditListView mListView;
    {
        data.addAll(Arrays.asList(mStrings));
    }
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mListView = findViewById(R.id.lv);
        //設定編輯/退出編輯動畫時長
        mListView.setAnimDuration(400);
        //設定介面卡
        mListView.setAdapter(new ArrayAdapter<String>(this,R.layout.item_lv,R.id.item_tv,data));
        //條目長按監聽
        mListView.setOnItemLongClickListener(new AdapterView.OnItemLongClickListener() {
            @Override
            public boolean onItemLongClick(AdapterView<?> parent, View view, int position, long id) {
                //開啟編輯狀態
                mListView.setEditState(true);
                //設定長按條目選中狀態
                mListView.setItemChecked(position,true);
                //返回false會導致OnItemClickListener呼叫，使以上的選中狀態消失
                return true;
            }
        });
        //設定所有條目選中/未選中監聽（每次條目狀態改變都會回撥）
        mListView.setOnAllItemCheckedListener(new EditListView.OnAllItemCheckedListener() {
            @Override
            public void onAllItemChecked(boolean checked) {
                Log.d("TestActivity", "checked:" + checked);
            }
        });
    }
    //刪除按鈕
    public void delete(View view) {
        //刪除所有已選中條目（adapter的源資料為陣列時不支援轉換）
        mListView.deleteAllCheckedItem(data);
    }
    //編輯按鈕
    public void edit(View view) {
        //開啟編輯狀態
        mListView.setEditState(true);
    }
    //退出編輯按鈕
    public void exitEdit(View view) {
        //關閉編輯狀態
        mListView.setEditState(false);
    }
    //全選按鈕
    public void selectAll(View view) {
        //全選
        mListView.setAllItemChecked();
        //是否全選
        Log.d("MainActivity", "isAllItemChecked:" + mListView.isAllItemChecked());
    }
    //全不選按鈕
    public void selectNone(View view) {
        //全不選
        mListView.setAllItemUnchecked();
        //是否全不選
        Log.d("MainActivity", "isAllItemUnchecked:" + mListView.isAllItemUnchecked());
    }
}
複製程式碼

結語

控制元件支援直接程式碼建立，還有更多API請觀看EditListView.java內的註釋說明。

歡迎大家使用Github地址，感覺好用請給個Star鼓勵一下，謝謝！

大家如果有更好的意見或建議以及好的靈感，請郵箱作者，謝謝！

QQ郵箱： 1535514884@qq.com

163郵箱： 15889686524@163.com

Gmail郵箱： wkp15889686524@gmail.com

相關文章