本程序利用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>
<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>
<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;
}
* 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"
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"