Android中RecyclerView布局代替GridView实现类似支付宝的界面

Item布局文件：

<RelativeLayout xmlns:android="http://www.easck.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);
  }
}

好了，接下来我们运行一下看看效果吧！

好了，那么和效果图还有一点点差距，就是画线！
线应该怎么画？在布局文件中画？貌似可行，但如果每个条目的边框都不规律怎么办？画一堆布局文件吗？太麻烦了。
所以在此就要用的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);
  }
}

								 
 3/4   首页 上一页 1 2 3 4 下一页 尾页