Android 列表形式的切换的示例代码

电商项目中经常有这样的需求：在商品列表页面中，切换列表的展现形式，一般分为列表形式和表格形式。

如京东：

本文最终实现的效果：

关键词：recyclerview

主布局文件：activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<linearlayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent">

  <android.support.v7.widget.recyclerview
    android:id="@+id/recycler_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

</linearlayout>

列表形式布局文件：item_list.xml

<?xml version="1.0" encoding="utf-8"?>
<relativelayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="98dp"
  android:layout_margin="8dp"
  android:background="@color/coloraccent">

  <textview
    android:id="@+id/text"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textappearance="@style/textappearance.appcompat.large.inverse"
    android:layout_centerinparent="true"
    tools:text="1" />

</relativelayout>

表格形式布局文件：item_grid.xml

<?xml version="1.0" encoding="utf-8"?>
<relativelayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="98dp"
  android:layout_margin="8dp"
  android:background="@color/coloraccent">

  <textview
    android:id="@+id/text"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textappearance="@style/textappearance.appcompat.large"
    android:layout_centerinparent="true"
    tools:text="1" />

</relativelayout>

实现原理：使用 recyclerview 的 gridlayoutmanager，列表形式指定列数为1，表格形式指定列数为具体列值。
默认为列表形式，指定列数为1：

recyclerview = (recyclerview) findviewbyid(r.id.recycler_view);
// 指定列数为1
gridlayoutmanager = new gridlayoutmanager(this, column_one);
recyclerview.setlayoutmanager(gridlayoutmanager);  

列表形式和表格形式之间的切换：

  @override
  public boolean onoptionsitemselected(menuitem item) {
    int id = item.getitemid();
    if (id == r.id.action_toggle) {
      if (gridlayoutmanager.getspancount() == column_one) {
        gridlayoutmanager.setspancount(column_three);
        item.seticon(contextcompat.getdrawable(this, r.drawable.ic_grid));
      } else {
        gridlayoutmanager.setspancount(column_one);
        item.seticon(contextcompat.getdrawable(this, r.drawable.ic_list));
      }
      simpleadapter.notifyitemrangechanged(0, simpleadapter.getitemcount());
      return true;
    }
    return super.onoptionsitemselected(item);
  }

通过 gridlayoutmanager.setspancount(int cloumn) 设置列数，最后不要忘记 simpleadapter.notifyitemrangechanged(0, simpleadapter.getitemcount()) 刷新数据。

adapter的处理：

定义两种 view 类型：view_type_list 和 view_type_grid

根据不同的 view 类型加载相应的布局文件，如下：

  @override
  public simpleviewholder oncreateviewholder(viewgroup parent, int viewtype) {
    view itemview;
    if (viewtype == view_type_list) {
      itemview = layoutinflater.from(parent.getcontext())
          .inflate(r.layout.item_list, parent, false);
    } else {
      itemview = layoutinflater.from(parent.getcontext())
          .inflate(r.layout.item_grid, parent, false);
    }
    return new simpleviewholder(itemview, viewtype);
  }

获取 view 类型：列数为1时，view 类型为 view_type_list，列数为3时， view类型为 view_type_grid

  @override
  public int getitemviewtype(int position) {
    final int viewtype;
    int column = layoutmanager.getspancount();
    switch (column) {
      case column_one:
        viewtype = view_type_list;
        break;
      case column_three:
        viewtype = view_type_grid;
        break;
      default:
        throw new runtimeexception("wtf?");
    }
    return viewtype;

完整代码：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。