首页 文章 精选 留言 我的

手机商城第六天，利用GridView实现推荐区域以及火爆区域

2017-11-21 562

    代码已提交码云，有兴趣的可以下载看看

        https://git.oschina.net/joy_yuan/ShoppingMall


    本次代码效果截图：

wKiom1mlhtTCNdIVAAHLpCj-7As965.png-wh_50

效果如上图所示，2个区域，一个是分三列显示，一个是分2列显示，代码类似，就拿一个区域做例子好了

    一、推荐区域

        布局文件： 整体是个线性布局，里面有2个子布局，一个线性布局，一个gridview.

    重点是gridview里，设置numCloumns=3，表示分三列显示数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<?xml version= "1.0"  encoding= "utf-8" ?>
<LinearLayout xmlns:android= "http://schemas.android.com/apk/res/android"
               android:background= "#fff"
               android:orientation= "vertical"
               android:layout_width= "match_parent"
               android:layout_height= "match_parent" >
 
     <LinearLayout
         android:padding= "10dp"
         android:gravity= "center_vertical"
         android:layout_width= "match_parent"
         android:layout_height= "wrap_content" >
 
         <ImageView
             android:src= "@drawable/home_arrow_left_new"
             android:layout_width= "wrap_content"
             android:layout_height= "wrap_content" />
 
         <TextView
             android:text= "新品推荐"
             android:textColor= "#000"
             android:layout_marginLeft= "10dp"
             android:layout_width= "wrap_content"
             android:layout_height= "wrap_content" />
 
         <TextView
             android:id= "@+id/tv_more_remommend"
             android:text= "查看更多"
             android:gravity= "end"
             android:drawableRight= "@drawable/home_arrow_right"
             android:drawablePadding= "5dp"
             android:layout_weight= "1"
             android:layout_width= "wrap_content"
             android:layout_height= "wrap_content" />
 
     </LinearLayout>
 
     <GridView
         android:id= "@+id/gv_commend"
         android:numColumns= "3"
         android:layout_width= "match_parent"
         android:layout_height= "380dp" ></GridView>
</LinearLayout>


    gridview的每个item的布局如下:

    外围是线性布局，然后里面包含图片、文本

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<?xml version= "1.0"  encoding= "utf-8" ?>
<LinearLayout xmlns:android= "http://schemas.android.com/apk/res/android"
               android:orientation= "vertical"
               android:gravity= "center_horizontal"
               android:padding= "10dp"
               android:layout_width= "match_parent"
               android:layout_height= "match_parent" >
 
     <ImageView
         android:id= "@+id/iv_recommend"
         android:background= "@drawable/new_img_loading_2"
         android:layout_width= "100dp"
         android:layout_height= "100dp" />
 
     <TextView
         android:id= "@+id/tv_name"
         android:textColor= "#000"
         android:text= "全款预售【喵鹿酱】樱桃蜜语 毛呢绣花 小高腰半裙"
         android:lines= "2"
         android:ellipsize= "end"
         android:layout_marginTop= "10dp"
         android:layout_width= "100dp"
         android:layout_height= "wrap_content" />
 
     <TextView
         android:id= "@+id/tv_price"
         android:textColor= "#ff4242"
         android:text= "￥88.00"
         android:layout_width= "wrap_content"
         android:layout_height= "wrap_content" />
</LinearLayout>


二、在HomeFragmentAdapter中

        1、创建推荐区域的viewholder

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
/**
  * 创建viewholder 相当于baseadapter里的getview，相当于viewholder部分代码
  * @param parent
  * @param viewType  当前的类型
  * @return  返回一个用来展示的控件的布局，如下方的R。layout.banner_viewpager这个布局的页面等
  */
@Override
public  RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent,  int  viewType) {
 
     if  (viewType==BANNER){
         return  new  BannerViewHolder(context,layoutInflater.inflate(R.layout.banner_viewpager, null ));
     } else  if  (viewType==CHANNEL){
         return  new  ChannelViewHolder(context,layoutInflater.inflate(R.layout.channel_item, null ));
     } else  if  (viewType==ACT){
         return  new  ActViewHolder(context,layoutInflater.inflate(R.layout.act_item, null ));
     } else  if  (viewType==SECKILL){   //秒杀
         return   new  SeckillViewHolder(context,layoutInflater.inflate(R.layout.seckill_item, null ));
     } else  if  (viewType==RECOMMEND){
         return  new  RecommendViewHolder(context,layoutInflater.inflate(R.layout.recomment_item, null ));
     } else  if  (viewType==HOT){
         return  new  HotViewHolder(context, layoutInflater.inflate(R.layout.hot_item, null ));
     }
     return  null ;
}
 
2 、绑定数据到这个区域
/**
  * 相当于getview里的绑定数据
  * @param holder
  * @param position
  */
@Override
public  void  onBindViewHolder(RecyclerView.ViewHolder holder,  int  position) {
 
     //通过position，来获取当前是哪个类型
     if  (getItemViewType(position)==BANNER){
         //是banner类型，将holder强转为bannerviewholder
         BannerViewHolder bannerViewHolder= (BannerViewHolder) holder;
         bannerViewHolder.setData(resultBean.getBanner_info());
     } else  if  (getItemViewType(position)==CHANNEL){
         ChannelViewHolder channelViewHolder= (ChannelViewHolder) holder;
         channelViewHolder.setData(resultBean.getChannel_info());
     } else  if  (getItemViewType(position)==ACT){
         ActViewHolder actviewholder= (ActViewHolder) holder;
         actviewholder.setData(resultBean.getAct_info());
     } else  if  (getItemViewType(position)==SECKILL){   //秒杀
         SeckillViewHolder seckillViewHolder= (SeckillViewHolder) holder;
         seckillViewHolder.setData(resultBean.getSeckill_info());
     } else  if  (getItemViewType(position)==RECOMMEND){
         RecommendViewHolder recommendViewHolder= (RecommendViewHolder) holder;
         recommendViewHolder.setData(resultBean.getRecommend_info());
     } else  if  (getItemViewType(position)==HOT){
         HotViewHolder hotViewHolder= (HotViewHolder) holder;
         hotViewHolder.setData(resultBean.getHot_info());
     }
}
 
 
 
/**
  * 推荐的viewholder
  */
class  RecommendViewHolder  extends  RecyclerView.ViewHolder{
     TextView tv_more_remommend;
     GridView gv_commend;
 
     public  RecommendViewHolder( final  Context context, View inflate) {
         super (inflate);
         tv_more_remommend= (TextView) inflate.findViewById(R.id.tv_more_remommend);
         gv_commend= (GridView) inflate.findViewById(R.id.gv_commend);
         gv_commend.setOnItemClickListener( new  AdapterView.OnItemClickListener() {
             @Override
             public  void  onItemClick(AdapterView<?> parent, View view,  int  position,  long  id) {
                 Toast.makeText(context,  "position==" +position, Toast.LENGTH_SHORT).show();
                 //点击后跳转到详情页面
                 startGoodsInfoActivity();
             }
         });
     }
 
     3 、 设置适配器，来显示数据
     public  void  setData(List<ResultBeanData.ResultBean.RecommendInfoBean> recommend_info) {
         RecommendAdapter adapter= new  RecommendAdapter(context,recommend_info);
         gv_commend.setAdapter(adapter);
     }
}


三、gridview的适配器，与listview的适配器类似，都是extends BaseAdapter，实现里面的方法

    注意在里面创建内部类viewholder，用来临时存放每个gridview的item内部控件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
package  com.yuanlp.shoppingmall.home.adapter;
 
import  android.content.Context;
import  android.view.View;
import  android.view.ViewGroup;
import  android.widget.BaseAdapter;
import  android.widget.ImageView;
import  android.widget.TextView;
 
import  com.bumptech.glide.Glide;
import  com.yuanlp.shoppingmall.R;
import  com.yuanlp.shoppingmall.home.model.ResultBeanData;
import  com.yuanlp.shoppingmall.utils.Constants;
 
import  java.util.List;
 
/**
  * Created by 原立鹏 on 2017/8/29.
  */
 
public  class  RecommendAdapter  extends  BaseAdapter {
 
     private  final  Context context;
     private  final  List<ResultBeanData.ResultBean.RecommendInfoBean> recommend_info;
 
     public  RecommendAdapter(Context context, List<ResultBeanData.ResultBean.RecommendInfoBean> recommend_info) {
         this .context=context;
         this .recommend_info=recommend_info;
     }
 
     @Override
     public  int  getCount() {
         return  recommend_info.size();
     }
 
     @Override
     public  View getView( int  position, View convertView, ViewGroup parent) {
         ViewHolder viewholder= new  ViewHolder();
         if  (convertView== null ){
             convertView=View.inflate(context, R.layout.item_recommend, null );
             viewholder.iv_recommend= (ImageView) convertView.findViewById(R.id.iv_recommend);
             viewholder.tv_name= (TextView) convertView.findViewById(R.id.tv_name);
             viewholder.tv_price= (TextView) convertView.findViewById(R.id.tv_price);
             convertView.setTag(viewholder);
         } else {
             viewholder= (ViewHolder) convertView.getTag();
         }
         ResultBeanData.ResultBean.RecommendInfoBean recommendInfoBean = recommend_info.get(position);
         Glide.with(context).load(Constants.IMG_URL+recommendInfoBean.getFigure()).into(viewholder.iv_recommend);
         viewholder.tv_name.setText(recommendInfoBean.getName());
         viewholder.tv_price.setText(recommendInfoBean.getCover_price());
         return  convertView;
     }
 
     @Override
     public  Object getItem( int  position) {
         return  recommend_info.get(position);
     }
 
 
     @Override
     public  long  getItemId( int  position) {
         return  position;
     }
 
     class  ViewHolder {
         TextView tv_name;
         TextView tv_price;
         ImageView iv_recommend;
     }
 
}


明天讲解利用scrollviewcontainer这个第三方插件，来实现点击商品后跳转商品详情页面。














本文转自老婆的宝宝51CTO博客，原文链接：http://blog.51cto.com/cm0425/1960968 ，如需转载请自行联系原作者



上一篇 下一篇
优秀的个人博客,低调大师

微信关注我们

原文链接：https://yq.aliyun.com/articles/548459

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

IOS开发——Protocol使用协议

protocol ['prəutəkɔl](样例：http://blog.sina.com.cn/s/blog_6aafe9c90100yozz.html)一、说明 两个类进行通讯，用协议就比較方便。 1.协议声明了能够被不论什么类实现的方法 2.协议不是类，它是定义了一个其它对象能够实现的接口 3.假设在某个类中实现了协议中的某个方法，也就是这个类实现了那个协议。 4.协议经经常使用来实现托付对象。一个托付对象是一种用来协同或者代表其它对象的特殊对象。 5:托付，就是调用自定义方法，别的类来实现。 6.新特性说明 @optional预编译指令：表示能够选择实现的方法 @required预编译指令：表示必须强制实现的方法 二、定义 .h @protocol ContactCtrlDelegate -(void)DismissContactsCtrl; @end @interface ContactsCtrl : UIViewController { id <ContactCtrlDelegate> delegate; } @property (non...
2017-11-22
537
上一篇

【Android UI设计与开发】2.引导界面（二）使用ViewPager实现欢迎引导页面

1.实现的效果 2.编码前的准备工作 ViewPager是Android3.0之后提供的新特性，所以要想让你的应用向下兼容就必须要android-support-v4.jar这个包的支持，这是一个来自google提供的一个附加包。没有的百度下就有了。 3.具体的编码实现 (1)布局界面比较简单，加入ViewPager组件，以及底部的引导小点 activity_main.xml (2)其中小点的图片用一个selector来控制颜色 point.xml (3)重写ViewPager适配器 ViewPagerAdapter.class (4)编辑主程序入口类 MainActivity.class 本文转自叶超Luka博客园博客，原文链接：http://www.cnblogs.com/yc-755909659/p/4283294.html，如需转载请自行联系原作者
2017-11-22
634
下一篇

相关文章

发表评论

资源下载

更多资源
Mario

Mario

马里奥是站在游戏界顶峰的超人气多面角色。马里奥靠吃蘑菇成长，特征是大鼻子、头戴帽子、身穿背带裤，还留着胡子。与他的双胞胎兄弟路易基一起，长年担任任天堂的招牌角色。

时间: 2025-12-12 大小: 211.28KB 下载: 54次
腾讯云软件源

腾讯云软件源

为解决软件依赖安装时官方源访问速度慢的问题，腾讯云为一些软件搭建了缓存服务。您可以通过使用腾讯云软件源站来提升依赖包的安装速度。为了方便用户自由搭建服务架构，目前腾讯云软件源站支持公网访问和内网访问。

时间: 2026-01-27 大小: 1MB 下载: 5次
Spring

Spring

Spring框架（Spring Framework）是由Rod Johnson于2002年提出的开源Java企业级应用框架，旨在通过使用JavaBean替代传统EJB实现方式降低企业级编程开发的复杂性。该框架基于简单性、可测试性和松耦合性设计理念，提供核心容器、应用上下文、数据访问集成等模块，支持整合Hibernate、Struts等第三方框架，其适用范围不仅限于服务器端开发，绝大多数Java应用均可从中受益。

时间: 2025-12-17 大小: 5MB 下载: 1次
Sublime Text

Sublime Text

Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。还可自定义键绑定，菜单和工具栏。Sublime Text 的主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。Sublime Text 是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。

时间: 2025-12-03 大小: 9.84MB 下载: 39次
手机查看

扫码在手机上查看文章

扫描二维码，手机阅读更方便

热门标签
Gemini3 OpenAi Docker DeepSeek Kubernetes HarmonyOS6 Redis Nacos3 Rocky SpringCloud Service Mesh Jdk25 SpringBoot4

欢迎您来访！

登录后，您将获得更多功能！
热门文章
联系我们

有任何问题或合作意向欢迎联系我们

Email: 99873273@qq.com

QQ: 99873273

用户登录
用户注册