软件编程
位置:首页>> 软件编程>> Android编程>> Android 列表形式的切换的示例代码

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

作者:看窗外的小狗  发布时间:2022-12-17 07:38:24 

标签:Android,列表,切换

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

如京东:

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

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

本文最终实现的效果:

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;

完整代码:https://github.com/wangshouquan/list-to-grid

来源:http://www.jianshu.com/p/41406ce9545f?utm_source=tuicool&utm_medium=referral

0
投稿

猜你喜欢

手机版 软件编程 asp之家 www.aspxhome.com