4.如何使用RecyclerView实现GridView的效果

96
作者 Pich
2017.04.01 10:37* 字数 557
/**
 * 作者:Pich
 * 原文链接:http://me.woblog.cn/
 * QQ群:129961195
 * 微信公众号:woblog
 * Github:https://github.com/lifengsofts
 */

概述

以前要显示格子效果都需要使用GridView,但是使用方法和ListView一样,可是有时候有需求要实现一会儿是ListView这样的效果,一会儿又要实现GridView的效果,你肯定会问,我嚓有这样的应用,你还别说真有,某宝就有这功能。如果你看了第一篇文章那么你肯定就知道只需要该LayoutManager就可以实现了。

设置布局管理器

在实现列表的基础上,只需要使用GridLayoutManager:

//    GridLayoutManager layoutManager = new GridLayoutManager(this, 3);
GridLayoutManager layoutManager = new GridLayoutManager(this, 3, LinearLayoutManager.VERTICAL,false);

第二参数是控制显示多少列

第三个参数是控制滚动方向和LinearLayout一样

第四个参数是控制是否反向排列单这个分很多种情况

排列方式

VERTICAL+false

滚动方向是上下滚动,item排列方式是,0,1,2…。效果如下图:


VERTICAL+true

这方式滚动还是垂直方向,区别就是他的Item排列是反向的,也就是最后一行第一个是0,...,345,012。这样的。并且他会自动滚动到底部。就是这样的效果:


HORIZONTAL+false

滚动方向水平的,条目的排序方式是竖着的,第一列:0,1,2,第二列,3,4,5依次列推。


HORIZONTAL+false

滚动的方式还是水平的,唯一不同的倒数第一列是,1,2,3,倒数第二列是4,5,6列。


可以看到这几个模式还是很怪。

每个Item宽高一样

这个效果也很常用,意思是假如我们显示三列,但每一列的高度和他们的宽度一样。上一张图应该更容易明白点:


实现方法也很简单就是自定义Item,在onMeasure方法里面讲测量的宽度设置为他的高度。

SquareTextView.java

public class SquareTextView extends TextView {

  public SquareTextView(Context context) {
    super(context);
  }

  public SquareTextView(Context context,
      @Nullable AttributeSet attrs) {
    super(context, attrs);
  }

  public SquareTextView(Context context,
      @Nullable AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
  }

  @RequiresApi(api = VERSION_CODES.LOLLIPOP)
  public SquareTextView(Context context, AttributeSet attrs, int defStyleAttr,
      int defStyleRes) {
    super(context, attrs, defStyleAttr, defStyleRes);
  }

  @Override
  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    setMeasuredDimension(getDefaultSize(0, widthMeasureSpec), getDefaultSize(0, heightMeasureSpec));

    int childWidthSize = getMeasuredWidth();
    //设置高度和宽度一样
    heightMeasureSpec = widthMeasureSpec = MeasureSpec.makeMeasureSpec(childWidthSize, MeasureSpec.EXACTLY);
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
  }
}

然后在布局里面这样使用。

<?xml version="1.0" encoding="utf-8"?>
<cn.woblog.recyclerviewsample.view.SquareTextView xmlns:android="http://schemas.android.com/apk/res/android"
  android:id="@android:id/text1"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:gravity="center"
  android:orientation="vertical"></cn.woblog.recyclerviewsample.view.SquareTextView>

这样一来就实现了我们需要的宽度和高度相等的效果了。敬请期待下一篇如何使用RecyclerView优雅的实现瀑布了。

RecyclerView