Android RecyclerView初體驗

時間 2019-11-29

標籤 android recyclerview 體驗欄目 Android 简体版

原文原文鏈接

很早以前就據說過RecyclerView這個組件了，但一直很忙沒時間學習。趁着週末，就花了一天時間來學習RecyclerView。android

準備工做

在Android Studio裏新建一個Android項目，添加如下工具：git

    compile 'com.android.support:support-v4:25.2.0'
    compile 'com.android.support:appcompat-v7:25.2.0'
    compile 'com.android.support:recyclerview-v7:25.2.0'
    compile 'com.github.bumptech.glide:glide:3.7.0'

前兩個工具就不說了，基本每一個Android項目都會用到，第三個就是使用RecyclerView須要添加的工具了，而最後一個工具是Google推薦使用的一個開源圖像加載工具，它使得加載圖像變得更爲流暢，而且使用起來容易上手。

在drawable目錄下放入一些圖像，並將這些圖像名命名爲"image[a-zA-Z0-9]*"的形式（由於在程序裏會用反射來查找全部以"image"開頭的圖像資源）。

在drawable目錄下放入"add.png"和"remove.png"等用於頂部工具欄的圖像資源。github

基本用法

使用RecyclerView，能夠依照以下步驟：
1. 在資源文件中定義一個RecyclerView組件；
2. 在Activity中獲取定義的RecyclerView組件，變量名就簡單叫做view；
3. 爲view設置LayoutManager（佈局）；
4. 爲view設置Adapter（適配器）；
5. 爲view添加ItemDecoration（分隔符，可選）；
6. 爲view設置ItemAnimator（動畫，可選）。

下面在資源文件中定義了一個RecyclerView組件：app

1     <android.support.v7.widget.RecyclerView
2         android:layout_width="match_parent"
3         android:layout_height="0dp"
4         android:layout_weight="1"
5         android:id="@+id/vert_view" />

而後就能夠在Activity中取得這個RecyclerView組件：dom

1 RecyclerView view=(RecyclerView) findViewById(R.id.vert_view);

至於其餘的細節將在下文介紹。ide

Adapter

用於RecyclerView的適配器須要繼承自RecyclerView.Adapter<T>類，並重寫其中的 T onCreateViewHolder(final ViewGroup parent, int viewType) 、 void onBindViewHolder(T holder, final int position) 和 int getItemCount() 方法。下面是一個自定義的Adapter：工具

 1 public class ViewAdapter extends RecyclerView.Adapter<ViewAdapter.ViewHolder> {
 2     private Context context;
 3     private List<Animal> datas;
 4     private int layoutResId;
 5     private int imageViewId;
 6     private int textViewId;
 7     private boolean isCenterCrop;
 8 
 9     public ViewAdapter(Context c, List<Animal> list, int lri, int ivi, int tvi, boolean centerCrop) {
10         context=c;
11         datas=list;
12         layoutResId=lri;
13         imageViewId=ivi;
14         textViewId=tvi;
15         isCenterCrop=centerCrop;
16     }
17 
18     @Override
19     public ViewHolder onCreateViewHolder(final ViewGroup parent, int viewType) {
20         View view= LayoutInflater.from(context).inflate(layoutResId, parent, false);
21         return new ViewHolder(view, imageViewId, textViewId);
22     }
23 
24     @Override
25     public void onBindViewHolder(ViewHolder holder, final int position) {
26         final Animal animal=datas.get(position);
27         if(isCenterCrop)
28             Glide.with(context).load(animal.getImgResId()).centerCrop().into(holder.imageView);
29         else
30             Glide.with(context).load(animal.getImgResId()).into(holder.imageView);
31         holder.textView.setText(animal.getDescription());
32         holder.view.setOnClickListener(new View.OnClickListener() {
33             @Override
34             public void onClick(View v) {
35                 Intent intent=new Intent(context, DetailActivity.class);
36                 intent.putExtra("IMG_RES_ID", animal.getImgResId());
37                 intent.putExtra("DESCRIPTION", animal.getDescription());
38                 context.startActivity(intent);
39             }
40         });
41         holder.view.setOnLongClickListener(new View.OnLongClickListener() {
42             @Override
43             public boolean onLongClick(View v) {
44                 Toast.makeText(context, "第"+position+"個元素", Toast.LENGTH_SHORT).show();
45                 return true;
46             }
47         });
48     }
49 
50     @Override
51     public int getItemCount() {
52         return datas.size();
53     }
54 
55     public void addItem(int position) {
56         datas.add(position, ResourceUtils.getRandomAnimal());
57         notifyItemInserted(position);
58     }
59 
60     public void removeItem(int position) {
61         if(position>=0 && position<datas.size()) {
62             datas.remove(position);
63             notifyItemRemoved(position);
64         }
65     }
66 
67     static class ViewHolder extends RecyclerView.ViewHolder {
68         View view;
69         ImageView imageView;
70         TextView textView;
71 
72         public ViewHolder(View itemView, int ivi, int tvi) {
73             super(itemView);
74             view=itemView;
75             imageView=(ImageView) itemView.findViewById(ivi);
76             textView=(TextView) itemView.findViewById(tvi);
77         }
78     }
79 }

注意：佈局

其中的Animal類封裝了一張（動物）圖像的資源ID和一段描述（字符串），Animal對象將做爲咱們的RecyclerView中的元素；
onCreateViewHolder方法負責建立一個ViewHolder，所以咱們須要提供一個元素使用的資源文件ID，咱們須要使用到的view（這裏包括一個ImageView和一個TextView）均可以經過這個ViewHolder獲得；
onBindViewHolder方法負責對某些view進行設置，這裏咱們爲ImageView設置了圖像，爲TextView設置了文本，併爲它們的父view註冊了點擊和長按監聽器；
這裏的addItem和removeItem方法是自定義方法，用於向/從RecyclerView中添加/移除一個元素（將在後面介紹），這裏能夠先忽略；
這裏的ViewHolder是ViewAdapter.ViewHolder，它繼承自RecyclerView.ViewHolder，咱們將須要使用到的view交給它管理。

定義好Adapter後，就能夠爲RecyclerView設置適配器了：學習

1     List<Animal> datas= ResourceUtils.getAnimals();
2     adapter=new ViewAdapter(this, datas, R.layout.item_vertical, R.id.vert_image, R.id.vert_text, true);
3     view.setAdapter(adapter);

垂直佈局

要想讓RecyclerView使用和ListView同樣的佈局，只須要爲RecyclerView設置一個線性佈局管理器就好了：動畫

1 view.setLayoutManager(new LinearLayoutManager(this));

水平佈局

使用水平佈局只需設置LinearLayoutManager的方向便可：

1     LinearLayoutManager layoutManager=new LinearLayoutManager(this);
2     layoutManager.setOrientation(LinearLayoutManager.HORIZONTAL);
3     view.setLayoutManager(layoutManager);

網格佈局

使用網格佈局須要藉助GridLayoutManager類：

1     GridLayoutManager manager=new GridLayoutManager(this, 3);
2     // manager.setOrientation(GridLayoutManager.HORIZONTAL);
3     view.setLayoutManager(manager);

建立GridLayoutManager時，第二個參數使用列數/行數。GridLayoutManager默認是上下滑動的，若是想要左右滑動，能夠取消第二行的註釋。

瀑布流佈局

使用瀑布流佈局只需使用StaggeredGridLayoutManager便可：

1 view.setLayoutManager(new StaggeredGridLayoutManager(3, StaggeredGridLayoutManager.VERTICAL));

StaggeredGridLayoutManager的第一個參數指定列數/行數，第二個參數指定滑動方向，這裏設置成上下滑動。若是使用StaggeredGridLayoutManager時全部元素的大小一致，則效果和網格佈局同樣。

添加分割線

RecyclerView默認是不顯示分割線的，這點和ListView不一樣，但這也爲更靈活的定製本身的分割線提供了機會。

要想定製本身的分割線，須要定義類繼承自RecyclerView.ItemDecoration，並實現以下方法：

void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) ：此方法負責繪製分割線；
void onDrawOver(Canvas c, RecyclerView parent, RecyclerView.State state) ：此方法和onDraw方法同樣，也是繪製分割線，不過繪製的時機是在繪製元素View完成後，一般只須要重寫onDraw和此方法中的一個便可；
void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) ：此方法計算分割線的尺寸，以方便計算元素View的偏移。

這裏以繪製垂直佈局的分割線爲例，介紹如何定義本身的分割線，至於其餘幾種佈局的分割線能夠參考着來寫，文章最後也會提供全部源碼：

 1 public class VerticalItemDecoration extends RecyclerView.ItemDecoration {
 2     private Drawable divider;
 3     private static final int[] ATTRS=new int[] {
 4             android.R.attr.listDivider,
 5     };
 6 
 7     public VerticalItemDecoration(Context c) {
 8         TypedArray array=c.obtainStyledAttributes(ATTRS);
 9         divider=array.getDrawable(0);
10         array.recycle();
11     }
12 
13     @Override
14     public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
15         super.onDraw(c, parent, state);
16         DecorationUtils.onVerticalDraw(c, parent, divider);
17     }
18 
19     @Override
20     public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
21         super.getItemOffsets(outRect, view, parent, state);
22         int position=parent.getChildLayoutPosition(view);
23         int childCount=parent.getAdapter().getItemCount();
24         if((position+1)<childCount)
25             outRect.set(0, 0, 0, divider.getIntrinsicHeight());
26     }
27 }

 1 public class DecorationUtils {
 2     public static void onVerticalDraw(Canvas c, RecyclerView parent, Drawable divider) {
 3         int left=parent.getPaddingLeft();
 4         int right=parent.getWidth()-parent.getPaddingRight();
 5 
 6         for(int i=0; i<parent.getChildCount()-1; i++) {
 7             View child=parent.getChildAt(i);
 8             RecyclerView.LayoutParams params=(RecyclerView.LayoutParams) child.getLayoutParams();
 9             int top=child.getBottom()+params.bottomMargin;
10             int bottom=top+divider.getIntrinsicHeight();
11             divider.setBounds(left, top, right, bottom);
12             divider.draw(c);
13         }
14     }
15     // ...
16 }

這裏的分隔符樣式使用了Android提供的「listDivider」，你能夠重定義listDivider屬性來修改分割線樣式：

1     <!-- Base application theme. -->
2     <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
3         <!-- Customize your theme here. -->
4         <item name="colorPrimary">@color/colorPrimary</item>
5         <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
6         <item name="colorAccent">@color/colorAccent</item>
7         <item name="android:listDivider">@drawable/divider</item>
8     </style>

添加動畫

你可能會好奇，RecyclerView爲何須要添加動畫，不是就一個滑動嗎？難道是添加滑動的動畫？

考慮這種狀況，當須要向/從RecyclerView中添加/移除元素時，若是一個元素忽然插進來或者忽然消失，用戶會是什麼感覺（確定以爲這APP是否是犯二了）。若是在添加/移除元素時，能有一個動畫顯示元素的出現/消失，那用戶體驗就更好了。因此，咱們這裏是爲元素添加動畫。

RecyclerView提供了一個默認動畫，只須要簡單的一行代碼：

1 view.setItemAnimator(new DefaultItemAnimator());

好了，如今咱們已經爲元素的出現/消失添加了動畫了。那麼問題又來了，咱們怎麼添加/移除元素呢？

還記得咱們上面介紹適配器時提供的ViewAdapter嗎？當時讓你暫時忽略了兩個方法——addItem和removeItem，這兩個方法就是用於添加/移除元素的。

咱們如今來看下細節：

 1 public void addItem(int position) {
 2     datas.add(position, ResourceUtils.getRandomAnimal());
 3     notifyItemInserted(position);
 4 }
 5 
 6 public void removeItem(int position) {
 7     if(position>=0 && position<datas.size()) {
 8         datas.remove(position);
 9         notifyItemRemoved(position);
10     }
11 }

注意到調用了notifyItemInserted和notifyItemRemoved方法，它們就是用於通知RecyclerView元素髮生改變的。

如今已經有了添加/移除元素的接口，下面還須要在Activity中添加交互的動做。咱們提供了一個Toolbar（用於代替ActionBar的一個組件），並提供了兩個item。用戶能夠點擊這兩個item來添加/移除元素：

 1     @Override
 2     protected void onCreate(Bundle savedInstanceState) {
 3         // ...
 4         Toolbar toolbar=(Toolbar) findViewById(R.id.toolbar);
 5         setSupportActionBar(toolbar);
 6         // ...
 7     }
 8 
 9     @Override
10     public boolean onCreateOptionsMenu(Menu menu) {
11         getMenuInflater().inflate(R.menu.toolbar, menu);
12         return true;
13     }
14 
15     @Override
16     public boolean onOptionsItemSelected(MenuItem item) {
17         switch (item.getItemId()) {
18             case R.id.add:
19                 adapter.addItem(0);
20                 view.smoothScrollToPosition(0);
21                 break;
22             case R.id.remove:
23                 adapter.removeItem(0);
24                 break;
25             default:break;
26         }
27         return true;
28     }
29 }