我在簡書上發布了我個人的第一篇技術文檔:RecyclerView系列之： RecyclerView系列之（1）為RecyclerView添加Header和Footer，也很有幸，能夠得到那么多人的支持，這讓我迫不及待的趕緊寫第二篇文章。今天我將談談：為RecyclerView添加分隔線。
一. 理解ListView和RecyclerView中的ChildView
在講為Item加入分割線本質的前，先來介紹，認識一下ChildView，也就是平時我們用到的ListView，RecyclerView中的getChildAt(int position)這個返回的ChildView是哪一部分？到底是哪一部分呢？一開始的時候，我理解錯了，但是經過下面兩張圖這么一比較，你就明白了：
Item布局layout_margin == 0
Item布局Layout_margin == 16dp
下面看代碼的區別：
第一張圖的代碼， 也就是每一個list_item的布局文件（下同）如下：
<?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="50dp"> <TextView android:id="@+id/list_item" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" android:textSize="20sp" android:textColor="#262526" android:background="#08da1d"/></LinearLayout>
第二張圖的代碼：
<?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="50dp"android:layout_margin="16dp"> <TextView android:id="@+id/list_item" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" android:textSize="20sp" android:textColor="#262526" android:background="#08da1d"/></LinearLayout>
仔細看一下，它們的不同之處， 就是第二個圖的代碼中多了：
android:layout_margin = "16dp"
就多這一句而已。
所以到這里我們應該知道了ChildView是哪一部分了，就是圖二中綠色這一部分，邊距這一部分并不屬于ChildView, 而是屬于ChildView的布局。
這樣我們了解ChildView之后，下面再來理解加入分隔線的原理就簡單多了。
二. 理解加入分隔線的原理
在ListView中，Google為我們提供了SetDivider(Drawable divider)這樣的方法來設置分隔線，那么在RecyclerView中，Google又為我們提供了什么樣的方法去添加分隔線呢？通過查看官方文檔，它，提供了:addItemDecoration(RecyclerView.ItemDecoration decor)這個方法了設置分隔線，那問題又來了，RecyclerView.ItemDecoration是什么東西呢？繼續查：然后發現如下:它原來是一個類，里面封裝了三個方法：
（1）void getItemOffsets ()
（2）void onDraw ()
（3）void onDrawOver ()
通過上面的三個方法，可以看出，這是要自己直接畫上去，準確的說這幾個方法是：添加Divider,主要是找到添加Divider的位置， 而Divider是在drawable文件中寫好了的。 利用onDraw和onDrawOver都差不多，我們在創建自己的Decoration類繼承RecyclerView.ItemDecoration的時候，我們只要重寫getItemOffsets()，還有onDraw()和onDrawOver兩者其中之一就可以了.
那getItemOffsets()方法有什么用呢？從字面意思就是Item要偏移， 由于我們在Item和Item之間加入了分隔線，線其實本質就是一個長方形，也是用戶自定義的，既然線也有長寬高，就畫橫線來說，上面的Item加入了分隔線，那下面的Item就要往下平移，平移的量就是分隔線的高度。不理解每關系，后面看代碼就容易理解了。
現在我們知道了如何添加了，就是通過畫，那到底是畫在哪里呢？畫的位置又怎么確定呢？下面看圖：
分隔線的位置圖
我現在拿畫橫線來說，從上面這個圖中，我們很容易就可以看到，我們畫分隔線的位置，是在每一個Item的布局之間，注意：是布局之間。
好了，我們確定了畫在哪里，那我們怎么確定畫線的具體的坐標位置呢？也就是我們要確定：分隔線的left, top, right, Bottom. 在Adapter中，我們很容易通過parent(這個parent它其實就是我們能看到的部分)獲取每一個childView：
（1）left：parent.getPaddingLeft()
（2）right: parent. getWidth()-parent.getPaddingRight();
（3）top : 就是紅線的上面：我們通過ChildView.getBottom()來得到這個Item的底部的高度，也就是藍線位置，藍線和紅線之間間距：就是這個Item布局文件的：layout_marginBottom， 然后top的位置就是兩者之和。
（4）bttom: 就是top加上分隔線的高度：top+線高
通過上面的解析，你也許知道了加入分隔線的原理，不理解也沒有關系，說也不是說得很清楚，下面直接上代碼，通過代碼來理解。
三. Talk is cheap, show you the code.
（1）首先，先來看主布局文件：activity_main.xml:
<?xml version="1.0" encoding="utf-8"?><android.support.design.widget.CoordinatorLayout 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" android:fitsSystemWindows="true" tools:context="com.study.wnw.recyclerviewdivider.MainActivity"> <android.support.v7.widget.RecyclerView android:id="@+id/recyclerview" android:layout_width="match_parent" android:layout_height="match_parent"> </android.support.v7.widget.RecyclerView></android.support.design.widget.CoordinatorLayout>
我在這里面僅僅加入了一個RecyclerView
（2）RecyclerView里面每個Item的布局文件：item_view.xml
<?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="50dp" android:layout_margin="16sp"> <TextView android:id="@+id/list_item" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" android:textSize="20sp" android:textColor="#f7f4f7" android:background="#08da1d"/></LinearLayout>
這也沒有什么可講的，就是在里面添加一個TextView用來顯示文本
（3）我們RecyclerView的適配器MyAdapater.java:
package com.study.wnw.recyclerviewdivider;import android.content.Context;import android.support.v7.widget.RecyclerView;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.TextView;import java.util.List;import java.util.concurrent.CopyOnWriteArrayList;/** * Created by wnw on 16-5-22. */public class MyAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> { //定義一個集合，接收從Activity中傳遞過來的數據和上下文 private List<String> mList; private Context mContext; MyAdapter(Context context, List<String> list){ this.mContext = context; this.mList = list; } //得到child的數量 @Override public int getItemCount() { return mList.size(); } //創建ChildView @Override public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { View layout = LayoutInflater.from(mContext).inflate(R.layout.item_view, parent, false); return new MyHolder(layout); } //將數據綁定到每一個childView中 @Override public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) { if (holder instanceof MyHolder){ final String itemText = mList.get(position); ((MyHolder)holder).tv.setText(itemText); } } // 通過holder的方式來初始化每一個ChildView的內容 class MyHolder extends RecyclerView.ViewHolder{ TextView tv; public MyHolder(View itemView) { super(itemView); tv = (TextView)itemView.findViewById(R.id.list_item); } }}好了，這里也沒有什么好講的，也不是我們這篇文章的重點，下面重點來了。
（4）我們自定義的MyDecoration.java：（繼承RecyclerView.ItemDecoration）
package com.study.wnw.recyclerviewdivider;import android.content.Context;import android.content.res.TypedArray;import android.graphics.Canvas;import android.graphics.Rect;import android.graphics.drawable.Drawable;import android.support.v7.widget.LinearLayoutManager;import android.support.v7.widget.RecyclerView;import android.util.Log;import android.view.View;/** * Created by wnw on 16-5-22. */public class MyDecoration extends RecyclerView.ItemDecoration{ private Context mContext; private Drawable mDivider; private int mOrientation; public static final int HORIZONTAL_LIST = LinearLayoutManager.HORIZONTAL; public static final int VERTICAL_LIST = LinearLayoutManager.VERTICAL; //我們通過獲取系統屬性中的listDivider來添加，在系統中的AppTheme中設置 public static final int[] ATRRS = new int[]{ android.R.attr.listDivider }; public MyDecoration(Context context, int orientation) { this.mContext = context; final TypedArray ta = context.obtainStyledAttributes(ATRRS); this.mDivider = ta.getDrawable(0); ta.recycle(); setOrientation(orientation); } //設置屏幕的方向 public void setOrientation(int orientation){ if (orientation != HORIZONTAL_LIST && orientation != VERTICAL_LIST){ throw new IllegalArgumentException("invalid orientation"); } mOrientation = orientation; } @Override public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) { if (mOrientation == HORIZONTAL_LIST){ drawVerticalLine(c, parent, state); }else { drawHorizontalLine(c, parent, state); } } //畫橫線, 這里的parent其實是顯示在屏幕顯示的這部分 public void drawHorizontalLine(Canvas c, RecyclerView parent, RecyclerView.State state){ int left = parent.getPaddingLeft(); int right = parent.getWidth() - parent.getPaddingRight(); final int childCount = parent.getChildCount(); for (int i = 0; i < childCount; i++){ final View child = parent.getChildAt(i); //獲得child的布局信息 final RecyclerView.LayoutParams params = (RecyclerView.LayoutParams)child.getLayoutParams(); final int top = child.getBottom() + params.bottomMargin; final int bottom = top + mDivider.getIntrinsicHeight(); mDivider.setBounds(left, top, right, bottom); mDivider.draw(c); //Log.d("wnw", left + " " + top + " "+right+" "+bottom+" "+i); } } //畫豎線 public void drawVerticalLine(Canvas c, RecyclerView parent, RecyclerView.State state){ int top = parent.getPaddingTop(); int bottom = parent.getHeight() - parent.getPaddingBottom(); final int childCount = parent.getChildCount(); for (int i = 0; i < childCount; i++){ final View child = parent.getChildAt(i); //獲得child的布局信息 final RecyclerView.LayoutParams params = (RecyclerView.LayoutParams)child.getLayoutParams(); final int left = child.getRight() + params.rightMargin; final int right = left + mDivider.getIntrinsicWidth(); mDivider.setBounds(left, top, right, bottom); mDivider.draw(c); } } //由于Divider也有長寬高，每一個Item需要向下或者向右偏移 @Override public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) { if(mOrientation == HORIZONTAL_LIST){ //畫橫線，就是往下偏移一個分割線的高度 outRect.set(0, 0, 0, mDivider.getIntrinsicHeight()); }else { //畫豎線，就是往右偏移一個分割線的寬度 outRect.set(0, 0, mDivider.getIntrinsicWidth(), 0); } }}從上面的代碼中，我們還通過系統屬性來適應屏幕的橫屏和豎屏，然后確定畫橫的，還是豎的Divider，其實在里面我們做了三件事，第一件是：獲取到系統中的listDivider， 我們就是通過它在主題中去設置的，下面第（6）小點看一下代碼就知道了。第二件事：就是找到我們需要添加Divider的位置，從onDraw方法中去找到，并將Divider添加進去。第三個是：得到Item的偏移量。
（5）看看我們的MainActivity.java
package com.study.wnw.recyclerviewdivider;import android.os.Bundle;import android.support.v7.app.AppCompatActivity;import android.support.v7.widget.LinearLayoutManager;import android.support.v7.widget.RecyclerView;import java.util.ArrayList;import java.util.List;public class MainActivity extends AppCompatActivity { //定義RecyclerView private RecyclerView mRecyclerView = null; //定義一個List集合，用于存放RecyclerView中的每一個數據 private List<String> mData = null; //定義一個Adapter private MyAdapter mAdapter; //定義一個LinearLayoutManager private LinearLayoutManager mLayoutManager; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); //RecyclerView三步曲+LayoutManager initView(); initData(); mAdapter = new MyAdapter(this,mData); mRecyclerView.setLayoutManager(mLayoutManager); mRecyclerView.setAdapter(mAdapter); //這句就是添加我們自定義的分隔線 mRecyclerView.addItemDecoration(new MyDecoration(this, MyDecoration.VERTICAL_LIST)); } //初始化View private void initView(){ mLayoutManager = new LinearLayoutManager(this); mRecyclerView = (RecyclerView)findViewById(R.id.recyclerview); } //初始化加載到RecyclerView中的數據, 我這里只是給每一個Item添加了String類型的數據 private void initData(){ mData = new ArrayList<String>(); for (int i = 0; i < 20; i++){ mData.add("Item" + i); } }}（6）分隔線Divider的drawable文件：divider..xml
<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <solid android:color="#7b7a7a"/> <size android:height="1dp"/></shape>
我們在這里面，畫了一個：rectangle, 給它填充顏色，還有高度，這樣就搞定了，高度小，顯示出來也是一條線：其實線的本質就是長方形。這里可以根據個人需要，畫不同類型的divider
（7）在styles.xml的AppTheme中，設置listDivider為我們的divider.xml文件：
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"> <item name="android:listDivider">@drawable/divider</item></style>
這樣，我們將系統的listDivider設置成我們自定義的divider. 還記得我們在MyDecoration中獲取系統的listDivider這個屬性嗎，這樣通過這個屬性，我們就可以將我們的divider.xml文件和MyDecoration.java進行關聯了。
到這里所有的工作就完成了，下面展示一下運行結果：
豎屏效果圖
橫屏效果圖
經過幾個小時的寫作，終于搞定了，雖然僅僅是一個添加分隔線的功能，但是還是想盡可能的通過自己的語言去理解，去認知它的原理，這樣做起來就簡單多了。一開始的時候，我夜不知道怎么去用，也參考了別人寫的文章，特別是鴻洋大神的：Android RecyclerView 使用完全解析 體驗藝術般的控件， 寫得特別的棒，從中也學到了一些知識。
好了，這篇文章暫時寫到這里了，簡單的介紹了一些RecyclerView分隔線的原理和添加方法，希望大家能夠多多交流，過幾天我會繼續寫下一篇文章，RecyclerView系列之（3）：為RecyclerView添加下拉刷新和上拉加載的功能。最后還是要感謝大家，感謝這個平臺，能夠讓我們一起交流，一切學習。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
