ViewPager+GridView实现商品分类

最新推荐文章于 2019-03-22 21:50:09 发布

原创

最新推荐文章于 2019-03-22 21:50:09 发布 · 915 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ViewPager #GridView

本示例展示了如何利用ViewPager和GridView在Android中创建类似美团的商品分类功能。主要涉及的技术包括：ViewPager用于页面滑动，GridView展示分类，自定义适配器处理数据和视图，以及使用资源文件来存储图片和文字数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本程序利用ViewPager+GridView实现了类似美团中的商品分类的功能

程序效果如图所示

本程序用的核心技术:ViewPager GridView 自定义控件

本程序实现的基本步骤

1. 加载项目里用到的资源放到集合里,以方便后续使用

2. 初始化两个GridView控件

3. 初始化VIewPager控件

代码框架

实现步骤

0.在res/values/下建一个arrays.xml文件,完成后在里面添加数据资源,并将图片放到mipmap文件下

 
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
    <!-- 一个array就是一个数组,name就是数组名,item就是一个元素,
    里面包裹的元素重上到下就是角标从0开始递增-->
     <array name="home_bar_labels">
         <item>美食</item>
         <item>电影</item>
         <item>酒店</item>
         <item>休闲娱乐</item>
         <item>自助餐</item>
         <item>KTV</item>
         <item>蛋糕甜点</item>
         <item>旅游</item>
         <item>购物</item>
         <item>摄影写真</item>
         <item>丽人</item>
         <item>生活服务</item>
         <item>门票</item>
         <item>抽奖公益</item>
         <item>今日新单</item>
         <item>全部分类</item>
     </array> 

 
     <array name="home_bar_icon">
         <item>@mipmap/icon_home_food_99</item>
         <item>@mipmap/icon_home_movie_29</item>
         <item>@mipmap/icon_home_hotel_300</item>
         <item>@mipmap/icon_home_happy_2</item>
         <item>@mipmap/icon_home_self_189</item>
         <item>@mipmap/icon_home_ktv_31</item>
         <item>@mipmap/icon_home_93</item>
         <item>@mipmap/icon_home_400</item>
         <item>@mipmap/icon_home_3</item>
         <item>@mipmap/icon_home_37</item>
         <item>@mipmap/icon_home_42</item>
         <item>@mipmap/icon_home_life_46</item>
         <item>@mipmap/icon_home_18</item>
         <item>@mipmap/icon_home_16</item>
         <item>@mipmap/icon_home_999</item>
         <item>@mipmap/icon_home_all_0</item>
 
     </array>
 </resources> 

1.创建实体类HomeIconInfo

 
 /**
  * date:2016/12/15
  * author:耿佳伟
  * function:一个装载主页商品分类的容器,一个装图片,一个装文字
  */
 public class HomeIconInfo { 
  
     String iconName;
     int iconId;
 
     public HomeIconInfo() { 
  
     }
 
     public HomeIconInfo(String iconName, int iconId) { 
  
         this.iconName = iconName;
         this.iconId = iconId;
     }
 
     public String getIconName() { 
  
         return iconName;
     }
 
     public void setIconName(String iconName) { 
  
         this.iconName = iconName;
     }
 
     public int getIconId() { 
  
         return iconId;
     }
 
     public void setIconId(int iconId) { 
  
         this.iconId = iconId;
     } 

}

2.在res/layout/下创建home_grid_view.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"
     >
     <!--定义一行显示