今天來寫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”元件算內建的功能
大概就是這個東西...
而今天我們要來實踐的是用chthai64這位大神所編寫的party-third
用他的庫，基本就能完成今天的內容～
那就開始今天的文章( ･ω･)ﾉ
上功能(´･з･)
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'
這樣就完成基礎設置囉(•ө•)♡
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>
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>
請注意標色部分
藍色的部分為第三方庫中所包含的介面內容
請務必將之放在最外層
然後紅字的部分記得加
app:dragEdge="right" 為設置隱藏的東西要從哪邊拉出
app:mode="same_level"//設置模式，normal跟same_leavel可選
關於介面排版，Github上有說明
第一次用的話，可直接複製我或官網幫你整理好的程式碼
確認有沒有成功的方法可以看這張圖
畫面有多那兩個方形就是成功設置囉！
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
}
這時候執行看看，整個畫面應該會像這樣喔
按鈕點下去了也不會有反應..(´･_･｀)
好啦，接下來就是要讓他有反應了(・ωｰ)～☆
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
((樹懶好可愛啊(•ө•)♡(•ө•)♡(•ө•)♡
留言列表
Python攻略大小事 (1)
