多数据显示之强大的RecycleView 使用完全解析（中级篇）

• 前言
  上一章主要介绍了RecycleView的基本使用，但是相对于ListView还是少一个东西——分割线。上一章有提到RecycleView添加分割线的方法：RecycleView.addItemDecoration（） 但是，api并没有提供任何一种样式，所以这里就需要我们自己去继承ItemDecoration自定义分割线。

• 同类文章：
  多数据显示之强大的RecycleView 使用完全解析（初级基础篇）

此博文内容参考：张鸿洋的博客，Frank-Zhu等
开源不易，珍惜每个人的劳动成果，转载请标明出处

• ListItemDecoration

package com.demo.demorecycleview.widget;

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.view.View;

/**
 * Created by ailen on 2016/5/23.
 */
public class ListItemDecoration extends RecyclerView.ItemDecoration {

    private static final int[] ATTRS = new int[]{
            android.R.attr.listDivider
    };

    public static final int HORIZONTAL_LIST = LinearLayoutManager.HORIZONTAL;
    public static final int VERTICAL_LIST = LinearLayoutManager.VERTICAL;

    private int mOrientation;
    private Drawable mDivider;

    public ListItemDecoration(Context context, int orientation) {
        final TypedArray a = context.obtainStyledAttributes(ATTRS);
        mDivider = a.getDrawable(0);
        a.recycle();
        setOrientation(orientation);
    }

    @Override
    public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
        if(mOrientation == HORIZONTAL_LIST){
            drawHorizontal(c, parent);
        }else{
            drawVertical(c, parent);
        }

    }

    /**
     * 画竖直方向的的分割线（当orientation为 Horizontal 时）
     *
     * @param c canvas
     * @param parent recycleview
     *
     */
    private void drawHorizontal(Canvas c, RecyclerView parent) {
        /*
            当orientation为 Horizontal 时，Item的分割线为多条竖直的条形
            所以，分割线的Top和Bottom就比较容易确定
            top = parent.top = parent.paddingTop
            bottom = parent.getHeight() - parent.getPaddingBottom()
            分割线的 left 和 right 则需要计算出有多少个Item
            根据Item的位置获取到child的位置坐标
            所以分割线的left = child的右边的坐标 + child的外边距的距离
            left = child.right + parms.rightMargin
            然后根据左边 + 分割线的宽度 得到右边的坐标
            right = left + mDivider.getIntrinsicHeight()
            为了统一分割线的间隔，故共同使用Height的数值作为间隔的距离
         */


        final int top = parent.getPaddingTop();
        final int bottom = parent.getHeight() - parent.getPaddingBottom();
        int childCount = parent.getChildCount();
        for(int i = 0;i<childCount;i++){
            View child = parent.getChildAt(i);
            RecyclerView.LayoutParams parms = (RecyclerView.LayoutParams) child.getLayoutParams();
            final int left = child.getRight()+parms.rightMargin;
            final int right = left + mDivider.getIntrinsicHeight();
            mDivider.setBounds(left,top,right,bottom);
            mDivider.draw(c);
        }
    }

    /**
     * 画水平方向的的分割线（当orientation为 Vertical 时）
     *
     * @param c canvas
     * @param parent recycleview
     *
     */
    private void drawVertical(Canvas c, RecyclerView parent) {
        /*
            当orientation为 Vertical 时，Item的分割线为多条水平的条形
            所以，分割线的Left和Right就比较容易确定
            Left = parent.left = parent.paddingLeft
            right = parent.getWidth() - parent.getPaddingRight
            分割线的 Top 和 Bottom 则需要计算出有多少个Item
            根据Item的位置获取到child的位置坐标
            所以分割线的Top = child的下边的坐标 + child的外边距的距离
            top = child.getBottom() + parms.bottomMargin
            然后根据上边 + 分割线的高度 得到右边的坐标
            bottom = top + mDivider.getIntrinsicHeight()
            为了统一分割线的间隔，故共同使用Height的数值作为间隔的距离
         */
        final int left = parent.getPaddingLeft();
        final int right = parent.getWidth() - parent.getPaddingRight();
        int childCount = parent.getChildCount();
        for(int i = 0;i<childCount;i++){
            View child = parent.getChildAt(i);
            RecyclerView.LayoutParams parms = (RecyclerView.LayoutParams) child.getLayoutParams();
            final int top = child.getBottom() + parms.bottomMargin;
            final int bottom = top + mDivider.getIntrinsicHeight();
            mDivider.setBounds(left,top,right,bottom);
            mDivider.draw(c);
        }
    }


    @Override
    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
    /*
     *  outRect.set(left, top, right, bottom);
     *  在Item的四周设定距离
     *  所以当Orientation为垂直时，我们只需要在每个Item的下方预留出分割线的高度就可以了
     *  同理当Orientation为水平时，我们只需要在每个Item的右方预留出分割线的宽度就可以了
     *  但通常我们使用分割线的style都是统一的，这样我们在attrs中只需要定义一个即可，即共同使用Height
     */
        if (mOrientation == VERTICAL_LIST) {
            outRect.set(0, 0, 0, mDivider.getIntrinsicHeight());
        } else {
            outRect.set(0, 0, mDivider.getIntrinsicHeight(), 0);
        }

    }

    private void setOrientation(int orientation){
        if(orientation != HORIZONTAL_LIST && orientation!= VERTICAL_LIST){
            throw new IllegalArgumentException("invalid orientation");
        }
        mOrientation = orientation;
    }

}

RecycleView添加分割线不同于ListView，RecycleView需要自定义一个类继承RecyclerView.ItemDecoration并重写两个方法

1. onDraw(Canvas c, RecyclerView parent, RecyclerView.State state)
   此方法需要我们计算出绘制的分割线的【位置和范围】，并绘制在Canvas上。主要的逻辑就是通过parent获取到child，然后从child中获取到Item的四个边的位置，从而计算出位置和范围。

2. getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state)
   此方法主要是为了在每个Item的某一位置预留出分割线的空间 ，从而让Decoration绘制在预留的空间内。

3. onDrawOver(Canvas c, RecyclerView parent, RecyclerView.State state)
   此方法和onDraw类同，不过触发时机不同，onDraw()是在绘制childView之前触发，而onDrawOver()是在绘制childView完成之后。主要用途是通过结合ValueAnimation实现分割线延时动画，目前很少应用到。当然也有其他用途，在此不多做介绍

   • MainActivity

package com.demo.demorecycleview;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;

import com.demo.demorecycleview.Adapter.MyRecycleViewAdapter;
import com.demo.demorecycleview.widget.ListItemDecoration;

import java.util.ArrayList;
import java.util.List;

import butterknife.Bind;
import butterknife.ButterKnife;

public class MainActivity extends AppCompatActivity {

    @Bind(R.id.my_recycleView)
    RecyclerView myRecycleView;

    private MyRecycleViewAdapter mAdapter;
    private List mListData ;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.bind(this);
        initData();
        initView();
    }

    private void initView() {

        //设置显示方式
        myRecycleView.setLayoutManager(new LinearLayoutManager(this));
        //添加分割线
        myRecycleView.addItemDecoration(new ListItemDecoration(this,ListItemDecoration.VERTICAL_LIST));
        //设置Adapter
        mAdapter = new MyRecycleViewAdapter();
        mAdapter.setListData(mListData);
        myRecycleView.setAdapter(mAdapter);

    }

    private void initData() {
        mListData = new ArrayList();
        for(int i =1;i<15;i++){
            mListData.add("这是第"+i+"个Item");
        }
    }
}

在Activity就只需要调用addItemDecoration()方法就可以了

这个用到的是系统内置的分割线的样式，如果需要自定义分割线的样式则只需要在values/style.xml中定义一个item标签

• styles.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="android:listDivider">@drawable/divider_bg</item>
    </style>
</resources>

• devider_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >

    <solid
        android:color="@android:color/holo_blue_bright"/>
    <size android:height="6dp"/>

</shape>

• 关于定义在 style.xml 和 theme.xml 属性的区别，可以看下方的一个博文
  Android中Style和Theme的使用

• 多个Item样式的Adapter实现
  网上一个博客写这个已经很详细了，在这里就不分析研究了，地址在下方：
  多Item布局实现(MultipleItem)