源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

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

  • 时间:2020-07-16 21:33 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:Android 列表形式的切换的示例代码
电商项目中经常有这样的需求:在商品列表页面中,切换列表的展现形式,一般分为列表形式和表格形式。 如京东: [img]http://files.jb51.net/file_images/article/201709/201709140856034.jpg[/img] [img]http://files.jb51.net/file_images/article/201709/201709140856035.jpg[/img] 本文最终实现的效果: [img]http://files.jb51.net/file_images/article/201709/201709140856036.gif[/img] 关键词: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;
完整代码:[url=https://github.com/wangshouquan/list-to-grid]https://github.com/wangshouquan/list-to-grid[/url] 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程素材网。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部