Android中RecyclerView布局代替GridView實現類似支付寶的界面

2019-12-12 06:13:27

字體：大中小

來源：轉載

供稿：網友

單純使用GridView
通用的兩種給GridView 添加分割線的方法；http://stackoverflow.com/questions/7132030/android-gridview-draw-dividers
給Gridview 添加分割線，也就是實現網格布局，不清楚谷歌為什么沒有給Gridview 添加一個類似 ListView 的Divider 屬性，因此就需要我們自己去添加分割線，
目前兩種方法，第一種是利用GridView 的 android:horizontalSpacing="1dp"與android:verticalSpacing="1dp" 屬性利用GridView的背景色與ItemView的背景色，之間的間隙作為分割線。
利用 Spacing 屬性的分割線效果圖：

201668164227327.png (330×586)

這種方法可以實現網格分割線，但是缺點是 item 沒有的地方，其顯示的是背景色，不太美觀。
這是我們參考支付寶：支付寶做的是，默認是整行的，不夠正行，添加空白的item。
如圖：

201668164253698.png (328×583)

沒有也放上一個item 占位，可以解決背景問題。

201668164309842.png (281×497)

第二種方法就是使用背景選擇器 Selector。
相比較第一種方法，第二種方法實現起來更簡單，但是也有一個小瑕疵，因為item 使用了selector, 那么相鄰兩個item 之間的分割線相當于兩條，會加深。
如圖所示：

201668164331733.png (331×584)

仔細看圖，在線充值的右邊的線，與上面的線比起來很不明顯。

RecyclerView
下面開始講今天的主角。拋開頂部的輪播圖不說，下面那個表格大家首先想到的可能就是GridView。但是，既然我們已經有了全新且強大的RecyclerView控件，就可以在絕大多數場景下拋棄ListView或者GridView了。而對于RecyclerView替代ListView，相信大家已經有了一定的了解并在項目中有了一定的應用，但是對于RecyclerView替代GridView的使用，可能大家還些許陌生。接下來在這篇文章中就為大家詳細講述如何使用RecyclerView一個控件，搞定類似這樣子的首頁。

201668164418778.jpg (1440×2560)

集成RecyclerView

首先，如果你還從未試用過RecyclerView，當然是要在build.gradle中做出如下配置從而集成RecyclerView

compile 'com.android.support:recyclerview-v7:22.2.0'

布局

現在我們在MainActivity簡單的實現我們想要的效果，那么在activity_main.xml只要有一個RecyclerView就可以了。如下：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  xmlns:tools="http://schemas.android.com/tools"  android:layout_width="match_parent"  android:layout_height="match_parent"  tools:context=".MainActivity">  <android.support.v7.widget.RecyclerView    android:id="@+id/home_rv"    android:layout_width="match_parent"    android:layout_height="match_parent" /></RelativeLayout>

Adapter

首先，我們先來看一下Adapter是如何編寫的

public class MyAdapter extends RecyclerView.Adapter {  //先定義兩個ItemViewType，0代表頭，1代表表格中間的部分  private static final int ITEM_VIEW_TYPE_HEADER = 0;  private static final int ITEM_VIEW_TYPE_ITEM = 1;  //數據源  private List<String> dataList;  //構造函數  public MyAdapter(List<String> dataList) {    this.dataList = dataList;  }  /**   * 判斷當前position是否處于第一個   * @param position   * @return   */  public boolean isHeader(int position) {    return position == 0;  }  @Override  public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup viewGroup, int viewType) {    //在onCreateViewHolder方法中，我們要根據不同的ViewType來返回不同的ViewHolder    if (viewType == ITEM_VIEW_TYPE_HEADER) {      //對于Header，我們應該返回填充有Header對應布局文件的ViewHolder（再次我們返回的都是一個布局文件，請根據不同的需求做相應的改動）      return new HeaderViewHolder(LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.layout_item, null));    } else {      //對于Body中的item，我們也返回所對應的ViewHolder      return new BodyViewHolder(LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.layout_item, null));    }  }  @Override  public void onBindViewHolder(RecyclerView.ViewHolder viewHolder, int position) {    if (isHeader(position)) {      //大家在這里面處理頭，這里只有一個TextView，大家可以根據自己的邏輯做修改      ((HeaderViewHolder)viewHolder).getTextView().setText("This is the Header!!");    }else {      //其他條目中的邏輯在此      ((BodyViewHolder) viewHolder).getTextView().setText(dataList.get(position - 1));    }  }  /**   * 總條目數量是數據源數量+1，因為我們有個Header   * @return   */  @Override  public int getItemCount() {    return dataList.size() + 1;  }  /**   *   * 復用getItemViewType方法，根據位置返回相應的ViewType   * @param position   * @return   */  @Override  public int getItemViewType(int position) {    //如果是0，就是頭，否則則是其他的item    return isHeader(position) ? ITEM_VIEW_TYPE_HEADER : ITEM_VIEW_TYPE_ITEM;  }  /**   * 給頭部專用的ViewHolder，大家根據需求自行修改   */  public class HeaderViewHolder extends RecyclerView.ViewHolder {    private TextView textView;    public HeaderViewHolder(View itemView) {      super(itemView);      textView = (TextView) itemView.findViewById(R.id.item_tv);    }    public TextView getTextView() {      return textView;    }  }  /**   * 給GridView中的條目用的ViewHolder，里面只有一個TextView   */  public class BodyViewHolder extends RecyclerView.ViewHolder {    private TextView textView;    public BodyViewHolder(View itemView) {      super(itemView);      textView = (TextView) itemView.findViewById(R.id.item_tv);    }    public TextView getTextView() {      return textView;    }  }}

Item布局文件：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  android:layout_width="match_parent"  android:layout_height="wrap_content"  android:orientation="vertical">  <TextView    android:id="@+id/item_tv"    android:layout_width="match_parent"    android:layout_height="100dp"    android:gravity="center" /></RelativeLayout>

Activity

接下來再來看看我們在Activity中的代碼如何編寫

public class MainActivity extends Activity {  @Override  protected void onCreate(Bundle savedInstanceState) {    super.onCreate(savedInstanceState);    setContentView(R.layout.activity_main);    //找到RecyclerView控件    RecyclerView home_rv = (RecyclerView) findViewById(R.id.home_rv);    //做一些假數據    List<String> dataList = new ArrayList<>();    dataList.add("第一個");    dataList.add("第二個");    dataList.add("第三個");    dataList.add("第四個");    dataList.add("第五個");    dataList.add("第六個");    dataList.add("第七個");    dataList.add("第八個");    dataList.add("第九個");    //實例化Adapter并且給RecyclerView設上    final MyAdapter adapter = new MyAdapter(dataList);    home_rv.setAdapter(adapter);    // 如果我們想要一個GridView形式的RecyclerView，那么在LayoutManager上我們就要使用GridLayoutManager    // 實例化一個GridLayoutManager，列數為3    final GridLayoutManager layoutManager = new GridLayoutManager(this, 3);    //調用以下方法讓RecyclerView的第一個條目僅為1列    layoutManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {      @Override      public int getSpanSize(int position) {        //如果位置是0，那么這個條目將占用SpanCount()這么多的列數，再此也就是3        //而如果不是0，則說明不是Header，就占用1列即可        return adapter.isHeader(position) ? layoutManager.getSpanCount() : 1;      }    });    //把LayoutManager設置給RecyclerView    home_rv.setLayoutManager(layoutManager);  }}

好了，接下來我們運行一下看看效果吧！

201668164609119.png (768×1280)

好了，那么和效果圖還有一點點差距，就是畫線！
線應該怎么畫？在布局文件中畫？貌似可行，但如果每個條目的邊框都不規律怎么辦？畫一堆布局文件嗎？太麻煩了。
所以在此就要用的RecyclerView中了另外一大特性：ItemDecoration。

在此我們寫了一個名為MyItemDecoration的類，如下：

public class MyItemDecoration extends RecyclerView.ItemDecoration {  /**   * 復寫onDraw方法，從而達到在每隔條目的被繪制之前（或之后），讓他先幫我們畫上去幾根線吧   *   * @param c   * @param parent   * @param state   */  @Override  public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {    //先初始化一個Paint來簡單指定一下Canvas的顏色，就黑的吧！    Paint paint = new Paint();    paint.setColor(parent.getContext().getResources().getColor(android.R.color.black));    //獲得RecyclerView中總條目數量    int childCount = parent.getChildCount();    //遍歷一下    for (int i = 0; i < childCount; i++) {      if (i == 0) {        //如果是第一個條目，那么我們就不畫邊框了        continue;      }      //獲得子View，也就是一個條目的View，準備給他畫上邊框      View childView = parent.getChildAt(i);      //先獲得子View的長寬，以及在屏幕上的位置，方便我們得到邊框的具體坐標      float x = childView.getX();      float y = childView.getY();      int width = childView.getWidth();      int height = childView.getHeight();      //根據這些點畫條目的四周的線      c.drawLine(x, y, x + width, y, paint);      c.drawLine(x, y, x, y + height, paint);      c.drawLine(x + width, y, x + width, y + height, paint);      c.drawLine(x, y + height, x + width, y + height, paint);      //當然了，這里大家肯定是要根據自己不同的設計稿進行畫線，或者畫一些其他的東西，都可以在這里搞，非常方便    }    super.onDraw(c, parent, state);  }}

回到我們的Activity中，加如下代碼即可：

//把我們自定義的ItemDecoration設置給RecyclerViewhome_rv.addItemDecoration(new MyItemDecoration());

最后再看看是什么效果：

201668164656844.png (768×1280)

當然，盡管最終效果有一些瑕疵，但是相信大家已經都基本明白了其中的思路，應用在自己的項目中的時候必然也要做出相應的調整。

最后，不得不說，現在RecyclerView已經基本具備了替代ListView和GridView的能力，在我們的項目知學中，大多數的列表都已經是以RecyclerView控件的形式作為展現。本文僅僅是從一個非常入門級的角度去講解如何使用RecyclerView，而對于這個效果而言，還有很多種其他的實現方式，尤其是對于Adapter中的處理，也希望能夠與大家多多交流。謝謝！

上一篇：Android App中的GridView網格布局使用指南

下一篇：Android中使用GridView進行應用程序UI布局的教程