碼農日常-『Android studio』基本RecyclerView 用法-4 左滑顯示Button Menu－碼農日常大小事

今天來寫RecyclerView系列的基本用法之4~~

喔...連我自己也不可思議，一個RecyclerView居然會想讓我一直出XD

首先還是先把其他的幾篇一起放過來吧(｀･ω･´)+

碼農日常-『Android studio』基本RecyclerView用法

碼農日常-『Android studio』基本RecyclerView 用法-2 基本版下拉更新以及點擊事件

碼農日常-『Android studio』基本RecyclerView 用法-3 RecyclerView上下滑動排序與側滑刪除(RecyclerView Swipe)

碼農日常-『Android studio』基本RecyclerView 用法-4 左滑顯示Button Menu

碼農日常-『Android studio』進階RecyclerView 用法-5 RecyclerView item混合介面

不過換個角度想，我會一直想PO最大的原因當然是因為工作上會用到

而工作上一直用到就是表示這東西很重要了吧！(´･д･｀)

今天要聊的RecyclerView左滑顯示Menu這東西

在IOS的範疇裡，這算是很基本的東西

我問過我家IOS工程師，他表示這個UI是他們的“uitableviewcontroller”元件算內建的功能

MSCMoreOptionTableViewCell

大概就是這個東西...

而今天我們要來實踐的是用chthai64這位大神所編寫的party-third

用他的庫，基本就能完成今天的內容～

那就開始今天的文章( ･ω･)ﾉ

上功能(´･з･)

RecyclerView左滑顯示按鈕Menu

以及GitHub(請點擊文字連結)

0.載入需要的庫

這個左滑顯示按鈕菜單的功能，實際上要自己來寫出接近的功能並不用花太多時間

像我之前就照著自己的邏輯有寫出過一次接近的

但是礙於自己程度還太差，寫出來了但是不甚滿意(´д｀)

後來覺得自己還要修正太浪費時間了(因為案子趕...)，所以就四處找這方面的party-third

而最後我篩選出來的就是這個了(･ω･)b

->https://github.com/chthai64/SwipeRevealLayout

我是講不出什麼特別好的地方啦...

但是設置元件的方法非常簡單，讓我覺得蠻開心的XD

那廢話至此，先來載入庫

打開build.gradle(Module.app)並在底下的dependencies加入這個庫

implementation 'com.chauthai.swipereveallayout:swipe-reveal-layout:1.4.1'

截圖 2020-03-21 下午4.20.07

截圖 2020-03-21 下午4.20.25

這樣就完成基礎設置囉(•ө•)♡

1.畫介面

這次要畫的介面有兩個，一個是Main的部分，另一個是RecyclerView的Item的部分

內容不多，我直接PO

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

截圖 2020-03-21 下午4.27.43

item.xml

<?xml version="1.0" encoding="utf-8"?>
<com.chauthai.swipereveallayout.SwipeRevealLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:dragEdge="right"
    app:mode="same_level"
    android:id="@+id/swipeLayout"
    >

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

        <Button
            android:id="@+id/button_Show"
            android:text="資訊"
            android:textColor="@android:color/background_light"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:background="@android:color/holo_blue_dark" />
        <Button
            android:id="@+id/button_Delete"
            android:text="刪除"
            android:textColor="@android:color/background_light"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:background="@android:color/holo_red_light"/>


    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:padding="10dp">


        <TextView
            android:id="@+id/textView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_margin="10dp"
            android:gravity="center_vertical"
            android:text="@string/app_name"

            android:textAppearance="@style/TextAppearance.AppCompat.Body2"
            android:textColor="@android:color/black" />


    </LinearLayout>


</com.chauthai.swipereveallayout.SwipeRevealLayout>

截圖 2020-03-21 下午4.29.56

請注意標色部分

藍色的部分為第三方庫中所包含的介面內容

請務必將之放在最外層

然後紅字的部分記得加

app:dragEdge="right" 為設置隱藏的東西要從哪邊拉出

app:mode="same_level"//設置模式，normal跟same_leavel可選

關於介面排版，Github上有說明

點此看官網說明

第一次用的話，可直接複製我或官網幫你整理好的程式碼

確認有沒有成功的方法可以看這張圖

截圖 2020-03-21 下午4.37.12

畫面有多那兩個方形就是成功設置囉！

2.設置基本RecyclerView

再來是設置基本RecyclerView的部分

詳細設置RecyclerView的方法在這裡，我這邊就隨意先貼上源碼就好(・∀・)

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        RecyclerView recyclerView = findViewById(R.id.recyclerView);
        recyclerView.addItemDecoration(new DividerItemDecoration(
                        this,DividerItemDecoration.VERTICAL));//為RecyclerView每個item畫底線
        recyclerView.setLayoutManager(new LinearLayoutManager(this));

        ArrayList<String> arrayList = new ArrayList<>();//做陣列
        for (int i =0;i<3;i++){
            arrayList.add("A"+i);
            arrayList.add("B"+i);
            arrayList.add("C"+i);
            arrayList.add("D"+i);
        }

        MyAdapter myAdapter = new MyAdapter(arrayList);
        recyclerView.setAdapter(myAdapter);

    }

    private class MyAdapter extends RecyclerView.Adapter<MyAdapter.ViewHolder>{

        private ArrayList<String> arrayList;

        public MyAdapter(ArrayList<String> arrayList){
            this.arrayList = arrayList;
        }

        public class ViewHolder extends RecyclerView.ViewHolder {
            private View parent;
            private TextView tvValue;
            private Button btDelete,btGetInfo;
            private SwipeRevealLayout swipeRevealLayout;
            public ViewHolder(@NonNull View itemView) {
                super(itemView);
                tvValue = itemView.findViewById(R.id.textView);
                parent = itemView;
                btDelete = itemView.findViewById(R.id.button_Delete);
                btGetInfo= itemView.findViewById(R.id.button_Show);
                swipeRevealLayout = itemView.findViewById(R.id.swipeLayout);
            }
        }//ViewHolder
        @NonNull
        @Override
        public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
            View view = LayoutInflater
                    .from(parent.getContext()).inflate(R.layout.item,parent,false);
            return new ViewHolder(view);
        }//

        @Override
        public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
       
            holder.tvValue.setText(arrayList.get(position));

        }

        @Override
        public int getItemCount() {
            return arrayList.size();
        }


    }//MyAdapter
}

這時候執行看看，整個畫面應該會像這樣喔

RecyclwrView左滑按鈕（半成）

按鈕點下去了也不會有反應..(´･_･｀)

好啦，接下來就是要讓他有反應了(・ωｰ)～☆

3.設置按鈕事件與其動作

再來是要設置關於那兩顆按鈕按下去後的行為

為了操作swipeLayout的部分，需要對這個元件綁定ViewBinderHelper(庫中包含的內容)

那實際操作在這邊

private class MyAdapter extends RecyclerView.Adapter<MyAdapter.ViewHolder>{

        private final ViewBinderHelper viewBinderHelper = new ViewBinderHelper();//(第一步)
        private ArrayList<String> arrayList;

        public MyAdapter(ArrayList<String> arrayList){
            this.arrayList = arrayList;
        }

        public class ViewHolder extends RecyclerView.ViewHolder {
            private View parent;
            private TextView tvValue;
            private Button btDelete,btGetInfo;
            private SwipeRevealLayout swipeRevealLayout;
            public ViewHolder(@NonNull View itemView) {
                super(itemView);
                tvValue = itemView.findViewById(R.id.textView);
                parent = itemView;
                btDelete = itemView.findViewById(R.id.button_Delete);
                btGetInfo= itemView.findViewById(R.id.button_Show);
                swipeRevealLayout = itemView.findViewById(R.id.swipeLayout);//(第二步，上面就有寫)
            }
        }//ViewHolder
        @NonNull
        @Override
        public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
            View view = LayoutInflater
                    .from(parent.getContext()).inflate(R.layout.item,parent,false);
            return new ViewHolder(view);
        }//

        @Override
        public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
            viewBinderHelper.setOpenOnlyOne(true);//設置swipe只能有一個item被拉出
            viewBinderHelper.bind(holder.swipeRevealLayout, String.valueOf(position));//綁定Layout (第三步)
            holder.tvValue.setText(arrayList.get(position));

          
        }

        @Override
        public int getItemCount() {
            return arrayList.size();
        }


    }//MyAdapter

這時候執行的話，你就會發現你只能拉出一個視窗囉(・∀・)

最後是要設置按鈕的部分，實際上他的按鈕設置跟一般的按鈕一樣設置即可

我就只PO內容，不再特別解釋

private class MyAdapter extends RecyclerView.Adapter<MyAdapter.ViewHolder>{

        private final ViewBinderHelper viewBinderHelper = new ViewBinderHelper();
        private ArrayList<String> arrayList;

        public MyAdapter(ArrayList<String> arrayList){
            this.arrayList = arrayList;
        }

        public class ViewHolder extends RecyclerView.ViewHolder {
            private View parent;
            private TextView tvValue;
            private Button btDelete,btGetInfo;
            private SwipeRevealLayout swipeRevealLayout;
            public ViewHolder(@NonNull View itemView) {
                super(itemView);
                tvValue = itemView.findViewById(R.id.textView);
                parent = itemView;
                btDelete = itemView.findViewById(R.id.button_Delete);
                btGetInfo= itemView.findViewById(R.id.button_Show);
                swipeRevealLayout = itemView.findViewById(R.id.swipeLayout);
            }
        }//ViewHolder
        @NonNull
        @Override
        public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
            View view = LayoutInflater
                    .from(parent.getContext()).inflate(R.layout.item,parent,false);
            return new ViewHolder(view);
        }//

        @Override
        public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
            viewBinderHelper.setOpenOnlyOne(true);//設置swipe只能有一個item被拉出
            viewBinderHelper.bind(holder.swipeRevealLayout, String.valueOf(position));//綁定Layout
            holder.tvValue.setText(arrayList.get(position));

            holder.btGetInfo.setOnClickListener((v -> {
                Toast.makeText(MainActivity.this,arrayList.get(position),Toast.LENGTH_SHORT).show();
                holder.swipeRevealLayout.close(true);//關閉已被拉出的視窗
            }));//holder.btGetInfo

            holder.btDelete.setOnClickListener((v -> {
                holder.swipeRevealLayout.close(true);
                arrayList.remove(position);
                notifyItemRemoved(position);
                notifyItemRangeChanged(position,arrayList.size());
            }));//holder.btDelete
        }

        @Override
        public int getItemCount() {
            return arrayList.size();
        }


    }//MyAdapter

這時候按下執行，爺～出來囉(｀･ω･´)+

結語

看完後，不知道各位怎麼想咧XD

((蛤？就這樣？←這是我第一個想法...

老實說我第一次用這個庫做這個功能的時候，我也覺得這個庫會不會太簡單了？會有Bug吧！(´･д･｀)

前面也說過，我之前有嘗試自己寫這個功能

那時候程度太差，寫到吐血_(´ཀ`」 ∠)_

而且還寫得很爛QQ

哎，人總是會進步的，看開一點，再多努力加油吧XD

最後希望今天的文章對你有幫助

喜歡的話點個關注吧～讓我能更多保佑你IT人的一天XDDDDDD

thank-you-3

((樹懶好可愛啊(•ө•)♡(•ө•)♡(•ө•)♡

碼農日常

碼農日常大小事

碼農日常發表在痞客邦留言(1) 人氣()

E-mail轉寄

«	十一月 2024					»
日	一	二	三	四	五	六
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

碼農日常大小事

認真打好每一篇文章，認真分享程序猿每一件大小事；走過晃過依然滿載而歸

Hello