今天來寫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

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

 
arrow
arrow
    創作者介紹
    創作者 碼農日常 的頭像
    碼農日常

    碼農日常大小事

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