投稿

这个控件你必须会用！—ListView+GirdView合集

下码看花 • • 文档

前言

Hello大家好，8点20分，我又双叒上线了！前面提到过的《亲，麻烦给个五星好评！—RatingBar(星级评分条)》中给大家提供了一个电商类App的思路，那么本节我们来继续学习没有讲完的UI控件部分， ListView+ GridView，这两个控件基本上是个软件都会使用，也是所有电商类App中必然会使用到的，由于手机屏幕空间有限，能够一次性在屏幕上显示的内容并不多，所以允许用户通过手指上下滑动的方式将屏幕外的数据滚动到屏幕内，当程序中有大量的数据需要展示的时候，就需要借助列表来实现。本文将介绍列表的一些常用属性、方法及事件，还会讲解在开发中常用的几种方式，以及使用通用的适配器Adapter定制个性的View视图用于 ListView的展示。

简介

ListView 列表视图，直接继承了 AbsListView，是一个以垂直方式在项目中显示 View视图的列表。ListView的数据项，来自一个继承了 ListAdapter接口的适配器。

GridView 在二维滚动网格中显示项目的视图，它的继承属性与 ListView相似，并且 GridView的用法很多,主要凸显的是网格式布局，既有横向也有纵向的数据显示。

继承关系：

   
    
    
  1. public class ListView(GridView) extends AbsListView
    2. 
    

    3. 
    
  3. java.lang.Object
    4. 
    
  4.  ↳ android.view.View
    5. 
    
  5.  ↳ android.view.ViewGroup
    6. 
    
  6.  ↳ android.widget.AdapterView<T extends android.widget.Adapter>
    7. 
    
  7.  ↳ android.widget.AbsListView
    8. 
    
  8.  ↳ android.widget.ListView(android.widget.GridView)
    9.

使用方式

ListView的使用

1.创建布局文件，首先新建一个 xml，命名为 activity_listview.xml ，代码如下：

   
    
    
  1. <?xml version="1.0" encoding="utf-8"?>
    2. 
    
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    3. 
    
  3.  xmlns:tools="http://schemas.android.com/tools"
    4. 
    
  4.  android:layout_width="match_parent"
    5. 
    
  5.  android:layout_height="match_parent"
    6. 
    
  6.  tools:context=".ListViewActivity">
    7. 
    

    8. 
    
  8.  <ListView
    9. 
    
  9.  android:id="@+id/lv_commodity"
    10. 
    
  10.  android:layout_width="match_parent"
    11. 
    
  11.  android:layout_height="match_parent"
    12. 
    
  12.  android:cacheColorHint="#00000000"
    13. 
    
  13.  android:divider="@null"
    14. 
    
  14.  android:dividerHeight="0dp" />
    15. 
    
  15. </LinearLayout>
    16.

xml属性介绍：

android:cacheColorHint="#00000000"：去除listview的拖动背景色

android:divider：可在列表项之间绘制的可绘制或颜色。

android:dividerHeight：分隔器的高度。

android:entries：对将填充ListView的数组资源的引用。

android:footerDividersEnabled：当设置为false时， ListView不会在每个页脚视图之前绘制分隔符。

android:headerDividersEnabled：当设置为false时， ListView不会在每个标题视图之后绘制分隔符。

2.然后新建一个 xml，命名为 item_shoppingmall_commodity.xml（ ListView中每条信息的显示布局） ，代码如下：

   
    
    
  1. <?xml version="1.0" encoding="utf-8"?>
    2. 
    
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    3. 
    
  3.  android:layout_width="match_parent"
    4. 
    
  4.  android:layout_height="wrap_content"
    5. 
    
  5.  android:gravity="center_horizontal"
    6. 
    
  6.  android:orientation="vertical">
    7. 
    

    8. 
    
  8.  <ImageView
    9. 
    
  9.  android:layout_width="match_parent"
    10. 
    
  10.  android:layout_height="130dp"
    11. 
    
  11.  android:scaleType="centerCrop"
    12. 
    
  12.  android:src="@mipmap/ic_launcher" />
    13. 
    

    14. 
    
  14.  <LinearLayout
    15. 
    
  15.  android:layout_width="match_parent"
    16. 
    
  16.  android:layout_height="wrap_content"
    17. 
    
  17.  android:padding="10dp">
    18. 
    

    19. 
    
  19.  <TextView
    20. 
    
  20.  android:id="@+id/tv_shoppingmall_name"
    21. 
    
  21.  android:layout_width="0dp"
    22. 
    
  22.  android:layout_height="wrap_content"
    23. 
    
  23.  android:layout_weight="1"
    24. 
    
  24.  android:paddingRight="5dp"
    25. 
    
  25.  android:singleLine="true"
    26. 
    
  26.  android:text="haha"
    27. 
    
  27.  android:textColor="@color/black"
    28. 
    
  28.  android:textSize="16sp" />
    29. 
    

    30. 
    
  30.  <TextView
    31. 
    
  31.  android:layout_width="wrap_content"
    32. 
    
  32.  android:layout_height="wrap_content"
    33. 
    
  33.  android:background="@color/colorAccent"
    34. 
    
  34.  android:text="爆款直降"
    35. 
    
  35.  android:textColor="@color/white"
    36. 
    
  36.  android:textSize="16sp" />
    37. 
    
  37.  </LinearLayout>
    38. 
    

    39. 
    
  39.  <LinearLayout
    40. 
    
  40.  android:layout_width="match_parent"
    41. 
    
  41.  android:layout_height="wrap_content"
    42. 
    
  42.  android:paddingLeft="10dp"
    43. 
    
  43.  android:paddingBottom="10dp">
    44. 
    

    45. 
    
  45.  <TextView
    46. 
    
  46.  android:layout_width="wrap_content"
    47. 
    
  47.  android:layout_height="wrap_content"
    48. 
    
  48.  android:text="1.4"
    49. 
    
  49.  android:textColor="@color/colorAccent"
    50. 
    
  50.  android:textSize="16sp" />
    51. 
    

    52. 
    
  52.  <TextView
    53. 
    
  53.  android:layout_width="wrap_content"
    54. 
    
  54.  android:layout_height="wrap_content"
    55. 
    
  55.  android:paddingLeft="5dp"
    56. 
    
  56.  android:singleLine="true"
    57. 
    
  57.  android:text="折起"
    58. 
    
  58.  android:textColor="@color/black"
    59. 
    
  59.  android:textSize="16sp" />
    60. 
    
  60.  </LinearLayout>
    61. 
    

    62. 
    
  62.  <TextView
    63. 
    
  63.  android:layout_width="wrap_content"
    64. 
    
  64.  android:layout_height="10dp"
    65. 
    
  65.  android:background="@color/clear" />
    66. 
    
  66. </LinearLayout>
    67.

3.创建数据源，新建 ShoppingMallCommodityBean类，存放每个 Item的数据

   
    
    
  1. public class ShoppingMallCommodityBean {
    2. 
    
  2.  private String classifyName;
    3. 
    

    4. 
    
  4.  public ShoppingMallCommodityBean(String classifyName) {
    5. 
    
  5.  this.classifyName = classifyName;
    6. 
    
  6.  }
    7. 
    

    8. 
    
  8.  public String getClassifyName() {
    9. 
    
  9.  return classifyName;
    10. 
    
  10.  }
    11. 
    

    12. 
    
  12.  public void setClassifyName(String classifyName) {
    13. 
    
  13.  this.classifyName = classifyName;
    14. 
    
  14.  }
    15. 
    
  15. }
    16.

4.通过此 Bean类，我们就将要显示的数据与 ListView的布局内容一一对应了，每个 Bean对象对应 ListView的一条数据。这种方法在 ListView中使用的非常广泛。代码如下：

   
    
    
  1. public class ListViewActivity extends AppCompatActivity {
    2. 
    
  2.  @Override
    3. 
    
  3.  protected void onCreate(Bundle savedInstanceState) {
    4. 
    
  4.  super.onCreate(savedInstanceState);
    5. 
    
  5.  setContentView(R.layout.activity_listview);
    6. 
    
  6.  ListView lvCommodity = (ListView) findViewById(R.id.lv_commodity);
    7. 
    
  7.  ShoppingMallCommodityAdapter commodityAdapter = new ShoppingMallCommodityAdapter(this);
    8. 
    
  8.  // 设置ListView的数据适配器
    9. 
    
  9.  lvCommodity.setAdapter(commodityAdapter);
    10. 
    
  10.  //commodityList为数据列表，如果在真实项目里是通过访问接口从后台服务器获取数据，然后JSON解析显示的数据，我们后期会给大家讲Http通讯，这里我们先加载本地数据。
    11. 
    
  11.  List<ShoppingMallClassifyBean> commodityList = new ArrayList<ShoppingMallClassifyBean>();
    12. 
    
  12.  commodityList.add(new ShoppingMallClassifyBean("曼秀雷敦护肤专场"));
    13. 
    
  13.  commodityList.add(new ShoppingMallClassifyBean("欧莱雅Loreal彩妆专场"));
    14. 
    
  14.  commodityList.add(new ShoppingMallClassifyBean("爱美要护肤 freeplus护肤品质专场"));
    15. 
    
  15.  commodityList.add(new ShoppingMallClassifyBean("云南白药口腔护理专场"));
    16. 
    
  16.  commodityList.add(new ShoppingMallClassifyBean("贝览得彩妆工具专场"));
    17. 
    
  17.  commodityList.add(new ShoppingMallClassifyBean("小林制药护肤个护精选专场"));
    18. 
    
  18.  commodityList.add(new ShoppingMallClassifyBean("欧舒丹L＇OCCITANE化妆品专场"));
    19. 
    
  19.  commodityList.add(new ShoppingMallClassifyBean("吕（RYO）奢宠护发专场"));
    20. 
    
  20.  commodityList.add(new ShoppingMallClassifyBean("Lancome护肤彩妆特卖专场"));
    21. 
    
  21.  commodityList.add(new ShoppingMallClassifyBean("完美日记PERFECT DIARY彩妆专场"));
    22. 
    
  22.  commodityList.add(new ShoppingMallClassifyBean("YSL圣罗兰星耀专场"));
    23. 
    
  23.  commodityList.add(new ShoppingMallClassifyBean("贝德玛洁颜护肤专场"));
    24. 
    
  24.  commodityList.add(new ShoppingMallClassifyBean("La Roche-Posay面部护理品质专场"));
    25. 
    
  25.  commodityList.add(new ShoppingMallClassifyBean("牙膏爱马仕Marvis口腔护理专场"));
    26. 
    
  26.  commodityAdapter.getShoppingMallData().addAll(commodityList);
    27. 
    
  27.  // 更新ListView的数据适配器数据
    28. 
    
  28.  commodityAdapter.notifyDataSetChanged();
    29. 
    
  29.  }
    30. 
    
  30. }
    31.

5. Adapter适配器

就我自己来看，我觉得这是一个非常重要的知识点。下图展示了数据源、适配器、 ListView等数据展示控件之间的关系。我们知道，数据源是各种各样的，而 ListView所展示数据的格式则是有一定的要求的。数据适配器正是建立了数据源与 ListView之间的适配关系，将数据源转换为 ListView能够显示的数据格式，从而将数据的来源与数据的显示进行解耦，降低程序的耦合性。这也体现了 Android的适配器模式的使用。

这个控件你必须会用！—ListView+GirdView合集

对于 ListView、 GridView等数据展示控件有多种数据适配器，这里就我们常用的几个进行讲解：

（1） ArrayAdapter<T> ：用来绑定一个数组，支持泛型操作，最简单的一个 Adapter，只能展现一行文字。

（2） SimpleAdapter：用来绑定在 xml中定义的控件对应的数据，同样具有良好扩展性的一个 Adapter，可以自定义多种效果。

（3） SimpleCursorAdapter：用来绑定游标得到的数据

（4） BaseAdapter：通用的基础适配器，抽象类。实际开发中我们会继承这个类并且重写 BaseAdapter的四个方法，可以完成自己定义的 Adapter，可以将任何复杂组合的数据和资源，以任何你想要的显示效果展示给大家用得最多的一个 Adapter。

本文讲解最通用的数据适配器—— BaseAdapter

设计自己的适配器，新建一个 adapter包，然后新建 ShoppingMallCommodityAdapter，代码如下：

   
    
    
  1. public class ShoppingMallCommodityAdapter extends BaseAdapter {
    2. 
    
  2.  private Context mContext;
    3. 
    
  3.  private List<ShoppingMallClassifyBean> mallBeanList = new ArrayList<ShoppingMallClassifyBean>();
    4. 
    

    5. 
    
  5.  /**
    6. 
    
  6.  * 构造方法
    7. 
    
  7.  */
    8. 
    
  8.  public ShoppingMallCommodityAdapter(Context mContext) {
    9. 
    
  9.  this.mContext = mContext;
    10. 
    
  10.  }
    11. 
    

    12. 
    
  12.  /**
    13. 
    
  13.  * 设置数据源与数据适配器进行关联
    14. 
    
  14.  */
    15. 
    
  15.  public List<ShoppingMallClassifyBean> getShoppingMallData() {
    16. 
    
  16.  return mallBeanList;
    17. 
    
  17.  }
    18. 
    

    19. 
    
  19.  /**
    20. 
    
  20.  * 适配器中数据集中数据的个数
    21. 
    
  21.  */
    22. 
    
  22.  @Override
    23. 
    
  23.  public int getCount() {
    24. 
    
  24.  return mallBeanList.size();
    25. 
    
  25.  }
    26. 
    

    27. 
    
  27.  /**
    28. 
    
  28.  * 指定索引对应的数据项
    29. 
    
  29.  */
    30. 
    
  30.  @Override
    31. 
    
  31.  public Object getItem(int position) {
    32. 
    
  32.  return null;
    33. 
    
  33.  }
    34. 
    

    35. 
    
  35.  /**
    36. 
    
  36.  * 对应的索引项
    37. 
    
  37.  */
    38. 
    
  38.  @Override
    39. 
    
  39.  public long getItemId(int position) {
    40. 
    
  40.  return 0;
    41. 
    
  41.  }
    42. 
    

    43. 
    
  43.  /**
    44. 
    
  44.  * 获取每一行Item的显示内容
    45. 
    
  45.  */
    46. 
    
  46.  @Override
    47. 
    
  47.  public View getView(int position, View convertView, ViewGroup parent) {
    48. 
    
  48.  ViewHolder holder = null;
    49. 
    
  49.  ////如果view未被实例化过，缓存池中没有对应的缓存
    50. 
    
  50.  if (convertView == null) {
    51. 
    
  51.  holder = new ViewHolder();
    52. 
    
  52.  // 由于我们只需要将XML转化为View，并不涉及到具体的布局，所以第二个参数通常设置为null
    53. 
    
  53.  convertView = View.inflate(mContext, R.layout.item_shoppingmall_commodity, null);
    54. 
    
  54.  //对viewHolder的属性进行赋值
    55. 
    
  55.  holder.tvShoppingMallName = (TextView) convertView.findViewById(R.id.tv_shoppingmall_name);
    56. 
    
  56.  //通过setTag将convertView与viewHolder关联
    57. 
    
  57.  convertView.setTag(holder);
    58. 
    
  58.  } else {
    59. 
    
  59.  //如果缓存池中有对应的view缓存，则直接通过getTag取出viewHolder
    60. 
    
  60.  holder = (ViewHolder) convertView.getTag();
    61. 
    
  61.  }
    62. 
    
  62.  // 设置控件的数据
    63. 
    
  63.  ShoppingMallClassifyBean mallBean = mallBeanList.get(position);
    64. 
    
  64.  if ((mallBean != null)) {
    65. 
    
  65.  holder.tvShoppingMallName.setText(mallBean.getClassifyName());
    66. 
    
  66.  }
    67. 
    
  67.  return convertView;
    68. 
    
  68.  }
    69. 
    

    70. 
    
  70.  /**
    71. 
    
  71.  * ViewHolder用于缓存控件，属性分别对应item布局文件的控件
    72. 
    
  72.  */
    73. 
    
  73.  class ViewHolder {
    74. 
    
  74.  TextView tvShoppingMallName;
    75. 
    
  75.  }
    76. 
    
  76. }
    77.

此方式不仅利用了 ListView的缓存机制，而且使用 ViewHolder类来实现显示数据视图的缓存，避免多次调用 findViewById来寻找控件，以达到优化程序的目的。所以，大家在平时的开发中应当尽量使用这种方式进行 getView的实现。总结一下用创建内部类 ViewHolder优化 BaseAdapter的整体步骤：

创建Bean对象，用于封装数据

在构造方法中初始化用于映射的数据List

创建 ViewHolder类，创建布局映射关系

判断 convertView，为空则创建，并设置tag，否则通过tag来取出 ViewHolder

给 ViewHolder中的控件设置数据

最终效果如下：

这个控件你必须会用！—ListView+GirdView合集

Gridview的使用方法 ListView相似

1.这里新建一个 xml，命名为 activity_gridview.xml 中的代码，如下：

   
    
    
  1. <?xml version="1.0" encoding="utf-8"?>
    2. 
    
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    3. 
    
  3.  xmlns:tools="http://schemas.android.com/tools"
    4. 
    
  4.  android:layout_width="match_parent"
    5. 
    
  5.  android:layout_height="match_parent"
    6. 
    
  6.  tools:context=".GridViewActivity">
    7. 
    

    8. 
    
  8.  <GridView
    9. 
    
  9.  android:id="@+id/gv_classify"
    10. 
    
  10.  android:layout_width="match_parent"
    11. 
    
  11.  android:layout_height="wrap_content"
    12. 
    
  12.  android:horizontalSpacing="5dp"
    13. 
    
  13.  android:listSelector="@null"
    14. 
    
  14.  android:numColumns="5"
    15. 
    
  15.  android:verticalSpacing="5dp" />
    16. 
    
  16. </LinearLayout>
    17.

XML属性介绍：

android:columnWidth：指定每列的固定宽度。

android:gravity：指定每个单元内的重力。

android:horizontalSpacing：定义列之间的默认水平间距。

android:numColumns：定义要显示的列数。

android:stretchMode：定义列应如何拉伸以填充可用的空白空间（如果有）。

android:verticalSpacing：定义行之间的默认垂直间距。

android:scrollbars="none" ：隐藏GridView的滚动条

注意：android:listSelector="#00000000" 与 android:listSelector="@null"之区别 若设置成“ @null”时，点击该 gridview中的某个 item时，会显示橘黄色的显示背景（android系统默认设置颜色），若想设置点击时无色（透明色，不用系统背景色），并设置自己的点击效果，只需将上述设置成：android:listSelector="#00000000"

2.后面的步骤同 ListView的2、3、4、5即可。

点击运行项目你就能看到一个简单的 GridView，效果如下：

这个控件你必须会用！—ListView+GirdView合集

项目实操：

这里我们仿唯品会做一个简单的首页，这里用到的就是 ListView+ GridView，我们将界面上面的分类用 GridView来写，商品列表用 ListView来写。具体代码如下：

这里 ListView和 GridView的 item要显示的字段比较多，考虑到显示问题，这里就要结合用到我们上一篇学到的 ScrollView来实现

   
    
    
  1. <?xml version="1.0" encoding="utf-8"?>
    2. 
    
  2. <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    3. 
    
  3.  xmlns:tools="http://schemas.android.com/tools"
    4. 
    
  4.  android:layout_width="match_parent"
    5. 
    
  5.  android:layout_height="match_parent"
    6. 
    
  6.  android:background="@color/white"
    7. 
    
  7.  tools:context=".ShoppingMallActivity">
    8. 
    

    9. 
    
  9.  <LinearLayout
    10. 
    
  10.  android:layout_width="match_parent"
    11. 
    
  11.  android:layout_height="wrap_content"
    12. 
    
  12.  android:orientation="vertical">
    13. 
    

    14. 
    
  14.  <GridView
    15. 
    
  15.  android:id="@+id/gv_classify"
    16. 
    
  16.  android:layout_width="match_parent"
    17. 
    
  17.  android:layout_height="wrap_content"
    18. 
    
  18.  android:layout_marginTop="10dp"
    19. 
    
  19.  android:layout_marginBottom="20dp"
    20. 
    
  20.  android:horizontalSpacing="5dp"
    21. 
    
  21.  android:listSelector="@null"
    22. 
    
  22.  android:numColumns="5"
    23. 
    
  23.  android:verticalSpacing="5dp" />
    24. 
    

    25. 
    
  25.  <ListView
    26. 
    
  26.  android:id="@+id/lv_commodity"
    27. 
    
  27.  android:layout_width="match_parent"
    28. 
    
  28.  android:layout_height="match_parent"
    29. 
    
  29.  android:cacheColorHint="#00000000"
    30. 
    
  30.  android:divider="@null"
    31. 
    
  31.  android:dividerHeight="0dp" />
    32. 
    
  32.  </LinearLayout>
    33. 
    
  33. </ScrollView>
    34. 
   
   
    
    
  1. <?xml version="1.0" encoding="utf-8"?>
    2. 
    
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    3. 
    
  3.  android:layout_width="wrap_content"
    4. 
    
  4.  android:layout_height="wrap_content"
    5. 
    
  5.  android:gravity="center_horizontal"
    6. 
    
  6.  android:orientation="vertical">
    7. 
    

    8. 
    
  8.  <ImageView
    9. 
    
  9.  android:layout_width="50dp"
    10. 
    
  10.  android:layout_height="50dp"
    11. 
    
  11.  android:src="@mipmap/icon_classify" />
    12. 
    

    13. 
    
  13.  <TextView
    14. 
    
  14.  android:id="@+id/tv_shoppingmall_name"
    15. 
    
  15.  android:layout_width="wrap_content"
    16. 
    
  16.  android:layout_height="wrap_content"
    17. 
    
  17.  android:text="haha"
    18. 
    
  18.  android:textColor="@color/black"
    19. 
    
  19.  android:textSize="15sp"
    20. 
    
  20.  android:textStyle="bold" />
    21. 
    
  21. </LinearLayout>
    22. 
   
   
    
    
  1. <?xml version="1.0" encoding="utf-8"?>
    2. 
    
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    3. 
    
  3.  android:layout_width="match_parent"
    4. 
    
  4.  android:layout_height="wrap_content"
    5. 
    
  5.  android:gravity="center_horizontal"
    6. 
    
  6.  android:orientation="vertical">
    7. 
    

    8. 
    
  8.  <ImageView
    9. 
    
  9.  android:layout_width="match_parent"
    10. 
    
  10.  android:layout_height="130dp"
    11. 
    
  11.  android:scaleType="centerCrop"
    12. 
    
  12.  android:src="@mipmap/icon_commodity" />
    13. 
    

    14. 
    
  14.  <LinearLayout
    15. 
    
  15.  android:layout_width="match_parent"
    16. 
    
  16.  android:layout_height="wrap_content"
    17. 
    
  17.  android:padding="10dp">
    18. 
    

    19. 
    
  19.  <TextView
    20. 
    
  20.  android:id="@+id/tv_shoppingmall_name"
    21. 
    
  21.  android:layout_width="0dp"
    22. 
    
  22.  android:layout_height="wrap_content"
    23. 
    
  23.  android:layout_weight="1"
    24. 
    
  24.  android:paddingRight="5dp"
    25. 
    
  25.  android:singleLine="true"
    26. 
    
  26.  android:text="haha"
    27. 
    
  27.  android:textColor="@color/black"
    28. 
    
  28.  android:textSize="16sp" />
    29. 
    

    30. 
    
  30.  <TextView
    31. 
    
  31.  android:layout_width="wrap_content"
    32. 
    
  32.  android:layout_height="wrap_content"
    33. 
    
  33.  android:background="@color/colorAccent"
    34. 
    
  34.  android:text="爆款直降"
    35. 
    
  35.  android:textColor="@color/white"
    36. 
    
  36.  android:textSize="16sp" />
    37. 
    
  37.  </LinearLayout>
    38. 
    

    39. 
    
  39.  <LinearLayout
    40. 
    
  40.  android:layout_width="match_parent"
    41. 
    
  41.  android:layout_height="wrap_content"
    42. 
    
  42.  android:paddingLeft="10dp"
    43. 
    
  43.  android:paddingBottom="10dp">
    44. 
    

    45. 
    
  45.  <TextView
    46. 
    
  46.  android:layout_width="wrap_content"
    47. 
    
  47.  android:layout_height="wrap_content"
    48. 
    
  48.  android:text="1.4"
    49. 
    
  49.  android:textColor="@color/colorAccent"
    50. 
    
  50.  android:textSize="16sp" />
    51. 
    

    52. 
    
  52.  <TextView
    53. 
    
  53.  android:layout_width="wrap_content"
    54. 
    
  54.  android:layout_height="wrap_content"
    55. 
    
  55.  android:paddingLeft="5dp"
    56. 
    
  56.  android:singleLine="true"
    57. 
    
  57.  android:text="折起"
    58. 
    
  58.  android:textColor="@color/black"
    59. 
    
  59.  android:textSize="16sp" />
    60. 
    
  60.  </LinearLayout>
    61. 
    
  61. </LinearLayout>
    62. 
   
   
    
    
  1. public class ShoppingMallClassifyBean {
    2. 
    
  2.  private String classifyName;
    3. 
    

    4. 
    
  4.  public ShoppingMallClassifyBean(String classifyName) {
    5. 
    
  5.  this.classifyName = classifyName;
    6. 
    
  6.  }
    7. 
    

    8. 
    
  8.  public String getClassifyName() {
    9. 
    
  9.  return classifyName;
    10. 
    
  10.  }
    11. 
    

    12. 
    
  12.  public void setClassifyName(String classifyName) {
    13. 
    
  13.  this.classifyName = classifyName;
    14. 
    
  14.  }
    15. 
    
  15. }
    16. 
   
   
    
    
  1. public class ShoppingMallCommodityBean {
    2. 
    
  2.  private String commodityName;
    3. 
    

    4. 
    
  4.  public ShoppingMallCommodityBean(String commodityName) {
    5. 
    
  5.  this.commodityName = commodityName;
    6. 
    
  6.  }
    7. 
    

    8. 
    
  8.  public String getCommodityName() {
    9. 
    
  9.  return commodityName;
    10. 
    
  10.  }
    11. 
    

    12. 
    
  12.  public void setCommodityName(String commodityName) {
    13. 
    
  13.  this.commodityName = commodityName;
    14. 
    
  14.  }
    15. 
    
  15. }
    16. 
   
   
    
    
  1. public class ShoppingMallActivity extends AppCompatActivity {
    2. 
    
  2.  private GridView gvClassify;
    3. 
    
  3.  private ListView lvCommodity;
    4. 
    
  4.  private List<ShoppingMallClassifyBean> classifyList = new ArrayList<ShoppingMallClassifyBean>();
    5. 
    
  5.  private List<ShoppingMallCommodityBean> commodityList = new ArrayList<ShoppingMallCommodityBean>();
    6. 
    
  6.  private ShoppingMallClassifyAdapter classifyAdapter;
    7. 
    
  7.  private ShoppingMallCommodityAdapter commodityAdapter;
    8. 
    

    9. 
    
  9.  @Override
    10. 
    
  10.  protected void onCreate(Bundle savedInstanceState) {
    11. 
    
  11.  super.onCreate(savedInstanceState);
    12. 
    
  12.  setContentView(R.layout.activity_shoppingmall);
    13. 
    
  13.  gvClassify = (GridView) findViewById(R.id.gv_classify);
    14. 
    
  14.  classifyAdapter = new ShoppingMallClassifyAdapter(this);
    15. 
    
  15.  gvClassify.setAdapter(classifyAdapter);
    16. 
    
  16.  setClassifyData();
    17. 
    
  17.  //给分类（GridView）设置item点击事件
    18. 
    
  18.  gvClassify.setOnItemClickListener(new AdapterView.OnItemClickListener() {
    19. 
    
  19.  @Override
    20. 
    
  20.  public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
    21. 
    
  21.  Toast.makeText(ShoppingMallActivity.this, "选中了分类：\n" + classifyList.get(position).getClassifyName(), Toast.LENGTH_SHORT).show();
    22. 
    
  22.  }
    23. 
    
  23.  });
    24. 
    

    25. 
    
  25.  lvCommodity = (ListView) findViewById(R.id.lv_commodity);
    26. 
    
  26.  commodityAdapter = new ShoppingMallCommodityAdapter(this);
    27. 
    
  27.  lvCommodity.setAdapter(commodityAdapter);
    28. 
    
  28.  setCommodityData();
    29. 
    
  29.  //给商品列表（ListView）设置item点击事件
    30. 
    
  30.  lvCommodity.setOnItemClickListener(new AdapterView.OnItemClickListener() {
    31. 
    
  31.  @Override
    32. 
    
  32.  public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
    33. 
    
  33.  Toast.makeText(ShoppingMallActivity.this, "选中了商品：\n" + commodityList.get(position).getCommodityName(), Toast.LENGTH_SHORT).show();
    34. 
    
  34.  }
    35. 
    
  35.  });
    36. 
    
  36.  }
    37. 
    

    38. 
    
  38.  /**
    39. 
    
  39.  * 设置分类数据（GridView）
    40. 
    
  40.  */
    41. 
    
  41.  private void setClassifyData() {
    42. 
    
  42.  classifyList.add(new ShoppingMallClassifyBean("女装"));
    43. 
    
  43.  classifyList.add(new ShoppingMallClassifyBean("男装"));
    44. 
    
  44.  classifyList.add(new ShoppingMallClassifyBean("鞋包"));
    45. 
    
  45.  classifyList.add(new ShoppingMallClassifyBean("手表配饰"));
    46. 
    
  46.  classifyList.add(new ShoppingMallClassifyBean("家居"));
    47. 
    
  47.  classifyList.add(new ShoppingMallClassifyBean("运动户外"));
    48. 
    
  48.  classifyList.add(new ShoppingMallClassifyBean("童装童鞋"));
    49. 
    
  49.  classifyList.add(new ShoppingMallClassifyBean("面部护肤"));
    50. 
    
  50.  classifyList.add(new ShoppingMallClassifyBean("国际品牌"));
    51. 
    
  51.  classifyList.add(new ShoppingMallClassifyBean("清仓"));
    52. 
    
  52.  classifyAdapter.getShoppingMallData().addAll(classifyList);
    53. 
    
  53.  classifyAdapter.notifyDataSetChanged();
    54. 
    
  54.  }
    55. 
    

    56. 
    
  56.  /**
    57. 
    
  57.  * 设置商品列表数据（ListView）
    58. 
    
  58.  */
    59. 
    
  59.  private void setCommodityData() {
    60. 
    
  60.  commodityList.add(new ShoppingMallCommodityBean("曼秀雷敦护肤专场"));
    61. 
    
  61.  commodityList.add(new ShoppingMallCommodityBean("欧莱雅Loreal彩妆专场"));
    62. 
    
  62.  commodityList.add(new ShoppingMallCommodityBean("爱美要护肤 freeplus护肤品质专场"));
    63. 
    
  63.  commodityList.add(new ShoppingMallCommodityBean("云南白药口腔护理专场"));
    64. 
    
  64.  commodityList.add(new ShoppingMallCommodityBean("贝览得彩妆工具专场"));
    65. 
    
  65.  commodityList.add(new ShoppingMallCommodityBean("小林制药护肤个护精选专场"));
    66. 
    
  66.  commodityList.add(new ShoppingMallCommodityBean("欧舒丹L＇OCCITANE化妆品专场"));
    67. 
    
  67.  commodityList.add(new ShoppingMallCommodityBean("吕（RYO）奢宠护发专场"));
    68. 
    
  68.  commodityList.add(new ShoppingMallCommodityBean("Lancome护肤彩妆特卖专场"));
    69. 
    
  69.  commodityList.add(new ShoppingMallCommodityBean("完美日记PERFECT DIARY彩妆专场"));
    70. 
    
  70.  commodityList.add(new ShoppingMallCommodityBean("YSL圣罗兰星耀专场"));
    71. 
    
  71.  commodityList.add(new ShoppingMallCommodityBean("贝德玛洁颜护肤专场"));
    72. 
    
  72.  commodityList.add(new ShoppingMallCommodityBean("La Roche-Posay面部护理品质专场"));
    73. 
    
  73.  commodityList.add(new ShoppingMallCommodityBean("牙膏爱马仕Marvis口腔护理专场"));
    74. 
    
  74.  commodityAdapter.getShoppingMallData().addAll(commodityList);
    75. 
    
  75.  commodityAdapter.notifyDataSetChanged();
    76. 
    
  76.  }
    77. 
    
  77. }
    78. 
   
   
    
    
  1. public class ShoppingMallClassifyAdapter extends BaseAdapter {
    2. 
    
  2.  private Context mContext;
    3. 
    
  3.  private List<ShoppingMallClassifyBean> mallBeanList = new ArrayList<ShoppingMallClassifyBean>();
    4. 
    

    5. 
    
  5.  public ShoppingMallClassifyAdapter(Context mContext) {
    6. 
    
  6.  this.mContext = mContext;
    7. 
    
  7.  }
    8. 
    

    9. 
    
  9.  public List<ShoppingMallClassifyBean> getShoppingMallData() {
    10. 
    
  10.  return mallBeanList;
    11. 
    
  11.  }
    12. 
    

    13. 
    
  13.  @Override
    14. 
    
  14.  public int getCount() {
    15. 
    
  15.  return mallBeanList.size();
    16. 
    
  16.  }
    17. 
    

    18. 
    
  18.  @Override
    19. 
    
  19.  public Object getItem(int position) {
    20. 
    
  20.  return null;
    21. 
    
  21.  }
    22. 
    

    23. 
    
  23.  @Override
    24. 
    
  24.  public long getItemId(int position) {
    25. 
    
  25.  return 0;
    26. 
    
  26.  }
    27. 
    

    28. 
    
  28.  @Override
    29. 
    
  29.  public View getView(int position, View convertView, ViewGroup parent) {
    30. 
    
  30.  ViewHolder holder = null;
    31. 
    
  31.  if (convertView == null) {
    32. 
    
  32.  holder = new ViewHolder();
    33. 
    
  33.  convertView = View.inflate(mContext, R.layout.item_shoppingmall_classify, null);
    34. 
    
  34.  holder.tvShoppingMallName = (TextView) convertView.findViewById(R.id.tv_shoppingmall_name);
    35. 
    
  35.  convertView.setTag(holder);
    36. 
    
  36.  } else {
    37. 
    
  37.  holder = (ViewHolder) convertView.getTag();
    38. 
    
  38.  }
    39. 
    
  39.  ShoppingMallClassifyBean mallBean = mallBeanList.get(position);
    40. 
    
  40.  if ((mallBean != null)) {
    41. 
    
  41.  holder.tvShoppingMallName.setText(mallBean.getClassifyName());
    42. 
    
  42.  }
    43. 
    
  43.  return convertView;
    44. 
    
  44.  }
    45. 
    

    46. 
    
  46.  class ViewHolder {
    47. 
    
  47.  TextView tvShoppingMallName;
    48. 
    
  48.  TextView item_mRankNameTxtl;
    49. 
    
  49.  TextView item_mTotalScoreTxt;
    50. 
    
  50.  TextView item_mTotalScoreUnit;
    51. 
    
  51.  }
    52. 
    
  52. }
    53. 
   
   
    
    
  1. public class ShoppingMallCommodityAdapter extends BaseAdapter {
    2. 
    
  2.  private Context mContext;
    3. 
    
  3.  private List<ShoppingMallCommodityBean> mallBeanList = new ArrayList<ShoppingMallCommodityBean>();
    4. 
    

    5. 
    
  5.  public ShoppingMallCommodityAdapter(Context mContext) {
    6. 
    
  6.  this.mContext = mContext;
    7. 
    
  7.  }
    8. 
    

    9. 
    
  9.  public List<ShoppingMallCommodityBean> getShoppingMallData() {
    10. 
    
  10.  return mallBeanList;
    11. 
    
  11.  }
    12. 
    

    13. 
    
  13.  @Override
    14. 
    
  14.  public int getCount() {
    15. 
    
  15.  return mallBeanList.size();
    16. 
    
  16.  }
    17. 
    

    18. 
    
  18.  @Override
    19. 
    
  19.  public Object getItem(int position) {
    20. 
    
  20.  return null;
    21. 
    
  21.  }
    22. 
    

    23. 
    
  23.  @Override
    24. 
    
  24.  public long getItemId(int position) {
    25. 
    
  25.  return 0;
    26. 
    
  26.  }
    27. 
    

    28. 
    
  28.  @Override
    29. 
    
  29.  public View getView(int position, View convertView, ViewGroup parent) {
    30. 
    
  30.  ViewHolder holder = null;
    31. 
    
  31.  if (convertView == null) {
    32. 
    
  32.  holder = new ViewHolder();
    33. 
    
  33.  convertView = View.inflate(mContext, R.layout.item_shoppingmall_commodity, null);
    34. 
    
  34.  holder.tvShoppingMallName = (TextView) convertView.findViewById(R.id.tv_shoppingmall_name);
    35. 
    
  35.  convertView.setTag(holder);
    36. 
    
  36.  } else {
    37. 
    
  37.  holder = (ViewHolder) convertView.getTag();
    38. 
    
  38.  }
    39. 
    
  39.  ShoppingMallCommodityBean mallBean = mallBeanList.get(position);
    40. 
    
  40.  if ((mallBean != null)) {
    41. 
    
  41.  holder.tvShoppingMallName.setText(mallBean.getCommodityName());
    42. 
    
  42.  }
    43. 
    
  43.  return convertView;
    44. 
    
  44.  }
    45. 
    

    46. 
    
  46.  class ViewHolder {
    47. 
    
  47.  TextView tvShoppingMallName;
    48. 
    
  48.  TextView item_mRankNameTxt;
    49. 
    
  49.  TextView item_mTotalScoreTxt;
    50. 
    
  50.  TextView item_mTotalScoreUnit;
    51. 
    
  51.  }
    52. 
    
  52. }
    53.

效果：

这个控件你必须会用！—ListView+GirdView合集

OMG！这是什么神仙操作这个控件你必须会用！—ListView+GirdView合集

嘿嘿，这里就有个问题当 ScrollView嵌套 GridView或 ListView一起用的时候会冲突，你会发现 ListView始终显示的是第一个 Item而其他的 item不见了，其实不是其他的 item不见了，而是其他的item被第一个 item遮挡了，其实是你的 ScrollView的滑动时间和 Listview的滑动事件起冲突了，这里我们就要重写 ListView和 GridView。

1.这里新建一个自定义 GridView，命名为 ScrollGridView ，如下：

   
    
    
  1. public class ScrollGridView extends GridView {
    2. 
    
  2.  public ScrollGridView(Context context, AttributeSet attrs) {
    3. 
    
  3.  super(context, attrs);
    4. 
    
  4.  }
    5. 
    

    6. 
    
  6.  public ScrollGridView(Context context) {
    7. 
    
  7.  super(context);
    8. 
    
  8.  }
    9. 
    

    10. 
    
  10.  public ScrollGridView(Context context, AttributeSet attrs, int defStyle) {
    11. 
    
  11.  super(context, attrs, defStyle);
    12. 
    
  12.  }
    13. 
    

    14. 
    
  14.  @Override
    15. 
    
  15.  public void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    16. 
    
  16.  int expandSpec = MeasureSpec.makeMeasureSpec(Integer.MAX_VALUE >> 2, MeasureSpec.AT_MOST);
    17. 
    
  17.  super.onMeasure(widthMeasureSpec, expandSpec);
    18. 
    
  18.  }
    19. 
    
  19. }
    20.

2.然后再新建一个自定义 ListView，命名为 ScrollListView ，如下：

   
    
    
  1. public class ScrollListView extends ListView {
    2. 
    

    3. 
    
  3.  public ScrollListView(Context context) {
    4. 
    
  4.  super(context);
    5. 
    
  5.  }
    6. 
    

    7. 
    
  7.  public ScrollListView(Context context, AttributeSet attrs) {
    8. 
    
  8.  super(context, attrs);
    9. 
    
  9.  }
    10. 
    

    11. 
    
  11.  public ScrollListView(Context context, AttributeSet attrs, int defStyle) {
    12. 
    
  12.  super(context, attrs, defStyle);
    13. 
    
  13.  }
    14. 
    

    15. 
    
  15.  @Override
    16. 
    
  16.  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    17. 
    
  17.  //加上下面的话即可实现listview在scrollview中滑动
    18. 
    
  18.  int expandSpec = MeasureSpec.makeMeasureSpec(Integer.MAX_VALUE >> 2, MeasureSpec.AT_MOST);
    19. 
    
  19.  super.onMeasure(widthMeasureSpec, expandSpec);
    20. 
    
  20.  }
    21. 
    
  21. }
    22.

最后我们将 activity_shoppingmall.xml改一下

   
    
    
  1. <?xml version="1.0" encoding="utf-8"?>
    2. 
    
  2. <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    3. 
    
  3.  xmlns:tools="http://schemas.android.com/tools"
    4. 
    
  4.  android:layout_width="match_parent"
    5. 
    
  5.  android:layout_height="match_parent"
    6. 
    
  6.  android:background="@color/white"
    7. 
    
  7.  tools:context=".ShoppingMallActivity">
    8. 
    

    9. 
    
  9.  <LinearLayout
    10. 
    
  10.  android:layout_width="match_parent"
    11. 
    
  11.  android:layout_height="wrap_content"
    12. 
    
  12.  android:orientation="vertical">
    13. 
    

    14. 
    
  14.  <com.xmkh.test.widget.ScrollGridView
    15. 
    
  15.  android:id="@+id/gv_classify"
    16. 
    
  16.  android:layout_width="match_parent"
    17. 
    
  17.  android:layout_height="wrap_content"
    18. 
    
  18.  android:layout_marginTop="10dp"
    19. 
    
  19.  android:layout_marginBottom="20dp"
    20. 
    
  20.  android:horizontalSpacing="5dp"
    21. 
    
  21.  android:listSelector="@null"
    22. 
    
  22.  android:numColumns="5"
    23. 
    
  23.  android:verticalSpacing="5dp" />
    24. 
    

    25. 
    
  25.  <com.xmkh.test.widget.ScrollListView
    26. 
    
  26.  android:id="@+id/lv_commodity"
    27. 
    
  27.  android:layout_width="match_parent"
    28. 
    
  28.  android:layout_height="match_parent"
    29. 
    
  29.  android:cacheColorHint="#00000000"
    30. 
    
  30.  android:divider="@null"
    31. 
    
  31.  android:dividerHeight="0dp" />
    32. 
    
  32.  </LinearLayout>
    33. 
    
  33. </ScrollView>
    34.

最终效果如下：

这个控件你必须会用！—ListView+GirdView合集

结语

相信小伙伴们一定已经会用列表控件了，demo中还增加了列表的单击事件，更多方法你自己试试就知道了，因为纸上得来终觉浅嘛。还想看更多实用的控件用法，记得点赞留言告诉我，贴心小花花时刻在线等着你！欢迎各位小伙伴加入我们的微信技术交流群，在公众号中回复微信群，就可以加入其中，也可以在公众号中回复视频，里面有一些初学者视频哦~

PS:如果还有未看懂的小伙伴，欢迎加入我们的QQ技术交流群：892271582，里面有各种大神回答小伙伴们遇到的问题。


简介：主人有点忙，还没来得及写简介~
赞 (1)
打赏 喜欢就点个赞支持下吧 喜欢就点个赞支持下吧
下码看花下码看花
0

声明：本文来自“下码看花”，分享链接：https://www.zyxiao.com/p/8436    侵权投诉

网站客服
网站客服
内容投稿 侵权处理
分享本页
返回顶部