《Android》『RecyclerView』 – 在 RecyclerView 中實現多種不同 Item 布局的方法
《Android Developers 參考文獻》
《簡單介紹》
在上一篇文章中，我們已經介紹了透過 RecyclerView 取代 ListView 的基本用法，接下來，我們來實作如何在同一個 Adapter 中，實現不同 item 布局，其實用法很簡單，在 RecyclerView 的架構中，我們可以很輕易的實現，一起來看看吧。
《基本用法》
與上一篇文章一樣，我們首先在 Layout 佈局檔中加入 RecyclerView，並建立兩個不同的 item_view.xml 佈局檔，用來當作 RecyclerView 中的每一個 item 的 view，程式碼如下。
|
1 2 3 4 5 6 7 8 9 10 11 |
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.v7.widget.RecyclerView android:id="@+id/recyclerView" android:layout_width="match_parent" android:layout_height="match_parent" /> </LinearLayout> |
activity_main.xml
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:id="@+id/txtItem" android:layout_width="match_parent" android:layout_height="30dp"/> </LinearLayout> |
item_view_01.xml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:id="@+id/txtItem1" android:layout_width="match_parent" android:layout_height="30dp"/> <TextView android:id="@+id/txtItem2" android:layout_width="match_parent" android:layout_height="30dp"/> </LinearLayout> |
item_view_02.xml
接著建立一個 Adapter 來控管每個 item 的顯示設定，我們自訂了一個名為 MyAdapter 的類別，此類別繼承了 RecyclerView.Adapter ，並在其中帶入自訂的 MyAdapter.ViewHolder，程式碼如下。
|
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 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 |
. . . public class MyAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> { private List<String> mDataSet; public static enum ITEM_TYPE { STYLE_01, STYLE_02 } public MyAdapter(List<String> data) { mDataSet = data; } @Override public MyAdapter.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { RecyclerView.ViewHolder mViewHolder = null; if (viewType == ITEM_TYPE.STYLE_01.ordinal()) { View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_view_01, parent, false); mViewHolder = new ViewHolder01(view); } else if(viewType == ITEM_TYPE.STYLE_02.ordinal()) { View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_view_02, parent, false); mViewHolder = new ViewHolder02(view); } return mViewHolder; } @Override public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) { if (holder instanceof ViewHolder01) { ((ViewHolder01) holder).txtItem.setText(mDataSet.get(position)); } else if (holder instanceof ViewHolder02) { ((ViewHolder02) holder).txtItem.setText(mDataSet.get(position)); } } @Override public int getItemViewType(int position) { if(...) { return ITEM_TYPE.STYLE_01.ordinal(); } else if(...) { return ITEM_TYPE.STYLE_02.ordinal(); } } @Override public int getItemCount() { return mDataSet.size(); } public class ViewHolder01 extends RecyclerView.ViewHolder { public TextView txtItem; public ViewHolder(View v) { super(v); txtItem = (TextView) v.findViewById(R.id.txtItem); } } public class ViewHolder02 extends RecyclerView.ViewHolder { public TextView txtItem1, txtItem2; public ViewHolder(View v) { super(v); txtItem1 = (TextView) v.findViewById(R.id.txtItem1); txtItem2 = (TextView) v.findViewById(R.id.txtItem2); } } } |
MyAdapter.java
在這裡我們為了讓 RecyclerView 能夠使用不同的 item 布局，首先宣告一個名為 ITEM_TYPE 的 enum 來控管一共有幾種類型的 item 布局，接著為每一種 item 布局宣告一個 ViewHolder，用來控管不同布局中的元件狀態，然後覆寫 getItemViewType() 的方法，透過自訂的判斷式，告知每一個 position 該用哪一種 item 布局，最後再改寫覆寫在 onCreateViewHolder 以及 onBindViewHolder 這兩種方法中的判斷即可。
定義好 Adapter 以後，我們就可以直接來使用 RecyclerView 啦！
|
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 |
. . . public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { RecyclerView recyclerView; super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ArrayList<String> Dataset = new ArrayList<String>(); for(int i = 0; i < 10; i++) { Dataset.add(i + ""); } MyAdapter myAdapter = new MyAdapter(myDataset); LinearLayoutManager layoutManager = new LinearLayoutManager(this); //設定此 layoutManager 為 linearlayout (類似ListView) layoutManager.setOrientation(LinearLayoutManager.VERTICAL); 設定此 layoutManager 為垂直堆疊 recyclerView = (RecyclerView) findViewById(R.id.recyclerView); recyclerView.addItemDecoration(new DividerItemDecoration(this, DividerItemDecoration.VERTICAL_LIST)); //設定分割線 recyclerView.setLayoutManager(layoutManager); //設定 LayoutManager recyclerView.setAdapter(myAdapter); //設定 Adapter } } |
MainActivity.java
臉書留言
一般留言