Android开发——RecyclerView的使用（二）

Android开发——RecyclerView的使用（一）
Android开发——RecyclerView的使用（三）

上一篇文章介绍了RecyclerView的线性布局加载数据流方式，这里介绍一下网格布局和瀑布流布局加载数据流的方法。

网格布局

GridLayoutManager ：网格布局管理器，看一下他的两个构造方法：

GridLayoutManager(Context context, int spanCount)
spanCount：每列或每行的item个数，数值为1时，就是线性列表样式；
该构造函数默认是竖直方向的网格样式。
GridLayoutManager(Context context, int spanCount, int orientation,boolean reverseLayout)
spanCount：每列或每行的item个数，数值为1时，就是线性列表样式；
orientation：网格样式方向，横向（OrientationHelper.HORIZONTAL）和纵向（OrientationHelper.VERTICAL）两种
reverseLayout：是否逆向，true：布局逆向展示，false：布局正向显示

使用方法和线性布局一样，只是把布局管理器LinearLayoutManager 换成GridLayoutManager 即可。
运行后效果图：

和之前一样，没有提交分割线的界面有点丑，下面就给网格布局的RecyclerView添加分割线。之前自定义的LinearItemDecoration分割线不在适用于网格布局，因为LinearItemDecoration只在横向或者纵向一个方向绘制了分割线，而网格布局需要在两个方向都绘制分割线。
因此我也自定义了一个ItemDecoration的实现类GridItemDecoration。

package com.demo.recyclerview;

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.GridLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.StaggeredGridLayoutManager;
import android.view.View;

public class GridItemDecoration extends RecyclerView.ItemDecoration {

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

    public GridItemDecoration(Context context){
        final TypedArray typedArray = context.obtainStyledAttributes(ATTRS);
        mDrawable = typedArray.getDrawable(0);
        typedArray.recycle();
    }

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

    private void drawHorizontal(Canvas c, RecyclerView parent){
        int childCount = parent.getChildCount();
        for(int i = 0; i < childCount; i++){
            final View child = parent.getChildAt(i);
            final RecyclerView.LayoutParams layoutParams = (RecyclerView.LayoutParams) child.getLayoutParams();
            final int left = child.getLeft() - layoutParams.leftMargin;
            final int right = child.getRight() + layoutParams.rightMargin + mDrawable.getIntrinsicWidth();
            final int top = child.getBottom() + layoutParams.bottomMargin;
            final int bottom = top + mDrawable.getIntrinsicHeight();
            mDrawable.setBounds(left, top, right, bottom);
            mDrawable.draw(c);
        }
    }

    private void drawVertical(Canvas c, RecyclerView parent){
        final int childCount = parent.getChildCount();
        for(int i = 0; i< childCount; i++){
            final View child = parent.getChildAt(i);
            final RecyclerView.LayoutParams layoutParams = (RecyclerView.LayoutParams) child.getLayoutParams();
            final int top = child.getTop() - layoutParams.topMargin;
            final int bottom = child.getBottom() + layoutParams.bottomMargin;
            final int left = child.getRight() + layoutParams.rightMargin;
            final int right = left + mDrawable.getIntrinsicWidth();
            mDrawable.setBounds(left, top, right, bottom);
            mDrawable.draw(c);
        }
    }

    private boolean isLastColum(RecyclerView parent, int pos, int spanCount, int childCount){
        RecyclerView.LayoutManager layoutManager = parent.getLayoutManager();
        if(layoutManager instanceof GridLayoutManager){
            if((pos + 1) % spanCount == 0){
                return true;
            }
        } else if(layoutManager instanceof StaggeredGridLayoutManager){
            int orientation = ((StaggeredGridLayoutManager) layoutManager).getOrientation();
            if(orientation == StaggeredGridLayoutManager.VERTICAL){
                if((pos + 1) % spanCount == 0){
                    return true;
                }
            } else {
                childCount = childCount - childCount % spanCount;
                if(pos >= childCount){
                    return true;
                }
            }
        }
        return false;
    }

    private boolean isLastRaw(RecyclerView parent, int pos, int spanCount, int childCount){
        RecyclerView.LayoutManager layoutManager = parent.getLayoutManager();
        if(layoutManager instanceof GridLayoutManager){
            childCount = childCount - childCount % spanCount;
            if(pos >= childCount){
                return true;
            }
        } else if(layoutManager instanceof StaggeredGridLayoutManager){
            int orientation = ((StaggeredGridLayoutManager) layoutManager).getOrientation();
            if(orientation == StaggeredGridLayoutManager.VERTICAL){
                childCount = childCount - childCount % spanCount;
                if(pos >= childCount){
                    return true;
                }
            } else {
                if((pos + 1) % spanCount == 0){
                    return true;
                }
            }
        }
        return false;
    }

    private int getSpanCount(RecyclerView parent){
        int spanCount = -1;
        RecyclerView.LayoutManager layoutManager = parent.getLayoutManager();
        if(layoutManager instanceof GridLayoutManager){
            spanCount = ((GridLayoutManager) layoutManager).getSpanCount();
        } else if(layoutManager instanceof StaggeredGridLayoutManager){
            spanCount = ((StaggeredGridLayoutManager) layoutManager).getSpanCount();
        }
        return spanCount;
    }

    @Override
    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
        int itemPosition = parent.getLayoutManager().getPosition(view);
        int spanCount = getSpanCount(parent);
        int childCount = parent.getAdapter().getItemCount();
        if(isLastRaw(parent, itemPosition, spanCount, childCount)){
            outRect.set(0, 0, mDrawable.getIntrinsicWidth(), 0);
        } else if(isLastColum(parent, itemPosition, spanCount, childCount)){
            outRect.set(0, 0, 0, mDrawable.getIntrinsicHeight());
        } else {
            outRect.set(0, 0, mDrawable.getIntrinsicWidth(), mDrawable.getIntrinsicHeight());
        }
    }
}

这里有一点需要注意的地方是，自定义的分割线图片一定要有宽度和高度，否则上面的代码mDrawable.getIntrinsicWidth() 和mDrawable.getIntrinsicHeight()为零，则网格分割线不显示。
到这里RecyclerView的网格布局完成，点击和长按事件的添加和线性布局一样，这里就不再重复了。看一下效果图：

瀑布流布局

StaggeredGridLayoutManager——瀑布流布局管理器，看一下他的构造方法：

StaggeredGridLayoutManager(int spanCount, int orientation)
spanCount：每列或每行的item个数；
orientation：瀑布流样式方向，横向（StaggeredGridLayoutManager.HORIZONTAL）和纵向（StaggeredGridLayoutManager.VERTICAL）两种

使用方法和网格布局一样，只是把布局管理器GridLayoutManager换成StaggeredGridLayoutManager即可。
运行后，效果不理想，看图就知道了，

和网格布局一样，看不出瀑布流的效果，这是因为，我们在item的布局文件里规定了item的高度，每个item高度一致时自然和网格布局效果一致了。要想处理瀑布流的效果就要去掉item布局里面的高度设置，还需要在 adapter 中给每个item动态设置一个高度。这里我给每个item设置随机高度值，Adapter代码如下：

package com.demo.recyclerview;

import android.content.Context;
import android.support.annotation.NonNull;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import com.demo.R;

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

public class DemoAdapter extends RecyclerView.Adapter {

    private Context mContext;
    private List<BaseEntity> mEntityList;
    private List<Integer> mHeightList;//装产出的随机数

    public DemoAdapter (Context context, List<BaseEntity> entityList){
        this.mContext = context;
        this.mEntityList = entityList;
        mHeightList = new ArrayList<>();
        for (int i = 0; i < entityList.size(); i++) {
            int height = new Random().nextInt(200) + 100;//[100,300)的随机数
            mHeightList.add(height);
        }
    }

    public interface OnItemClickLitener{
        void onItemClick(View view, int position);
        void onItemLongClick(View view , int position);
    }

    private OnItemClickLitener mOnItemClickLitener;

    public void setOnItemClickLitener(OnItemClickLitener onItemClickLitener){
        this.mOnItemClickLitener = onItemClickLitener;
    }

    @NonNull
    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(mContext).inflate(R.layout.item_demo, parent, false);
        return new DemoViewHolder(view);
    }

    @Override
    public void onBindViewHolder(@NonNull final RecyclerView.ViewHolder holder, int position) {
        BaseEntity entity = mEntityList.get(position);
        ((DemoViewHolder)holder).mText.setText(entity.getText());

        //由于需要实现瀑布流的效果,所以就需要动态的改变控件的高度了
        ViewGroup.LayoutParams params = ((DemoViewHolder)holder).mText.getLayoutParams();
        params.height = mHeightList.get(position);
        ((DemoViewHolder)holder).mText.setLayoutParams(params);

        if(mOnItemClickLitener != null){
            holder.itemView.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    int pos = holder.getLayoutPosition();
                    mOnItemClickLitener.onItemClick(holder.itemView, pos);
                }
            });

            holder.itemView.setOnLongClickListener(new View.OnLongClickListener() {
                @Override
                public boolean onLongClick(View view) {
                    int pos = holder.getLayoutPosition();
                    mOnItemClickLitener.onItemLongClick(holder.itemView, pos);
                    return false;
                }
            });
        }
    }

    @Override
    public int getItemCount() {
        return mEntityList.size();
    }

    private class DemoViewHolder extends RecyclerView.ViewHolder{

        private TextView mText;

        public DemoViewHolder(View itemView) {
            super(itemView);
            mText = (TextView) itemView.findViewById(R.id.item_text);
        }
    }
}

这样再运行，瀑布流效果就出来了。

瀑布流加载数据源时我没有添加分割线，而是利用了layout_margin给item布局添加了外边距。如果添加分割线有一个问题，就是item的位置不确定，没法判断item是不是在最后一行或最后一列。所以效果图不理想。

这个问题记录在册，找到解决方法后，我会在后续文章中更新。如果有人知道解决方法也可留言给我。

ItemAnimator

最后看一下ItemAnimator，ItemAnimator也是一个抽象类，好在系统为我们提供了一种默认的实现类，期待系统多添加些默认的实现。借助默认的实现，当Item添加和移除的时候，添加动画效果很简单:

// 设置item的增删动画
mRecyclerView.setItemAnimator(new DefaultItemAnimator());

系统提供的动画效果只有一种，推荐去RecyclerViewItemAnimators这里下载查看，里面有多种Item的增删动画。

而item的增删方法，是在adapter中实现，在adapter中添加下面两个方法：

/**
     * 添加一条数据
     * @param position
     */
    public void addData(int position){
        BaseEntity entity = new BaseEntity();
        entity.setText("New One");
        mEntityList.add(position, entity);
        notifyItemInserted(position);
    }

    /**
     * 删除一条数据
     * @param position
     */
    private void removeData(int position){
        mEntityList.remove(position);
        notifyItemRemoved(position);
    }

注意数据更新时不是用adapter.notifyDataSetChanged()，而是notifyItemInserted(position)和notifyItemRemoved(position)这两个方法。然后在activity中直接调用即可。

最后附上RecyclerView实现瀑布流的l两个主要文件代码。
DemoActivity .java

package com.demo.recyclerview;

import android.os.Bundle;
import android.support.v7.widget.DefaultItemAnimator;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.StaggeredGridLayoutManager;
import android.view.View;
import android.widget.Toast;

import com.demo.BaseActivity;
import com.demo.R;

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


public class DemoActivity extends BaseActivity {

    private RecyclerView mRecyclerView;
    private List<BaseEntity> mEntityList;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_demo);
        // 初始化控件
        mRecyclerView = findViewById(R.id.demo_recycler_view);
        initData();
        initRecyclerView();
    }

    private void initData(){
        mEntityList = new ArrayList<>();
        for(int i = 'A'; i <= 'z'; i++){
            BaseEntity entity = new BaseEntity();
            entity.setText("" + (char)i);
            mEntityList.add(entity);
        }
    }

    /**
     * 初始化RecyclerView
     */
    private void initRecyclerView(){
        // 定义一个线性布局管理器
        StaggeredGridLayoutManager manager = new StaggeredGridLayoutManager(3, StaggeredGridLayoutManager.VERTICAL);

        // 设置布局管理器
        mRecyclerView.setLayoutManager(manager);
        // 设置adapter
        DemoAdapter adapter = new DemoAdapter(DemoActivity.this, mEntityList);
        adapter.setOnItemClickLitener(new DemoAdapter.OnItemClickLitener() {
            @Override
            public void onItemClick(View view, int position) {
                Toast.makeText(DemoActivity.this, "单击了" + mEntityList.get(position).getText(), Toast.LENGTH_SHORT).show();
            }

            @Override
            public void onItemLongClick(View view, int position) {
                Toast.makeText(DemoActivity.this, "长按了" + mEntityList.get(position).getText(), Toast.LENGTH_SHORT).show();
            }
        });
        mRecyclerView.setAdapter(adapter);
        // 设置item的增删动画
        mRecyclerView.setItemAnimator(new DefaultItemAnimator());
        // 添加分割线
//        mRecyclerView.addItemDecoration(new GridItemDecoration(DemoActivity.this));

    }
}

DemoAdapter .java

package com.demo.recyclerview;

import android.content.Context;
import android.support.annotation.NonNull;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import com.demo.R;

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

public class DemoAdapter extends RecyclerView.Adapter {

    private Context mContext;
    private List<BaseEntity> mEntityList;
    private List<Integer> mHeightList;//装产出的随机数

    public DemoAdapter (Context context, List<BaseEntity> entityList){
        this.mContext = context;
        this.mEntityList = entityList;
        mHeightList = new ArrayList<>();
        for (int i = 0; i < entityList.size(); i++) {
            int height = new Random().nextInt(200) + 100;//[100,300)的随机数
            mHeightList.add(height);
        }
    }

    public interface OnItemClickLitener{
        void onItemClick(View view, int position);
        void onItemLongClick(View view , int position);
    }

    private OnItemClickLitener mOnItemClickLitener;

    public void setOnItemClickLitener(OnItemClickLitener onItemClickLitener){
        this.mOnItemClickLitener = onItemClickLitener;
    }

    @NonNull
    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(mContext).inflate(R.layout.item_demo, parent, false);
        return new DemoViewHolder(view);
    }

    @Override
    public void onBindViewHolder(@NonNull final RecyclerView.ViewHolder holder, int position) {
        BaseEntity entity = mEntityList.get(position);
        ((DemoViewHolder)holder).mText.setText(entity.getText());

        //由于需要实现瀑布流的效果,所以就需要动态的改变控件的高度了
        ViewGroup.LayoutParams params = ((DemoViewHolder)holder).mText.getLayoutParams();
        params.height = mHeightList.get(position);
        ((DemoViewHolder)holder).mText.setLayoutParams(params);

        if(mOnItemClickLitener != null){
            holder.itemView.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    int pos = holder.getLayoutPosition();
                    mOnItemClickLitener.onItemClick(holder.itemView, pos);
                }
            });

            holder.itemView.setOnLongClickListener(new View.OnLongClickListener() {
                @Override
                public boolean onLongClick(View view) {
                    int pos = holder.getLayoutPosition();
                    mOnItemClickLitener.onItemLongClick(holder.itemView, pos);
                    return false;
                }
            });
        }
    }

    @Override
    public int getItemCount() {
        return mEntityList.size();
    }

    /**
     * 添加一条数据
     * @param position
     */
    public void addData(int position){
        BaseEntity entity = new BaseEntity();
        entity.setText("New One");
        mEntityList.add(position, entity);
        notifyItemInserted(position);
    }

    /**
     * 删除一条数据
     * @param position
     */
    private void removeData(int position){
        mEntityList.remove(position);
        notifyItemRemoved(position);
    }

    private class DemoViewHolder extends RecyclerView.ViewHolder{

        private TextView mText;

        public DemoViewHolder(View itemView) {
            super(itemView);
            mText = (TextView) itemView.findViewById(R.id.item_text);
        }
    }
}

到这里RecyclerView的基本使用过程已经介绍完了。RecyclerView能实现的效果当然不限于此。后续会再追加一下利用RecyclerView实现的炫酷效果。

最后编辑于：2018.12.03 19:50:25

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 212,029评论 6赞 492
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 90,395评论 3赞 385
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 157,570评论 0赞 348
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 56,535评论 1赞 284
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 65,650评论 6赞 386
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 49,850评论 1赞 290
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 39,006评论 3赞 408
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 37,747评论 0赞 268
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,207评论 1赞 303
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 36,536评论 2赞 327
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 38,683评论 1赞 341
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 34,342评论 4赞 330
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,964评论 3赞 315
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,772评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,004评论 1赞 266
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 46,401评论 2赞 360
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 43,566评论 2赞 349

Android开发——RecyclerView的使用（二）

网格布局

瀑布流布局

ItemAnimator

推荐阅读更多精彩内容