首页 > 代码库 > Android商城开发系列(十三)—— 首页热卖商品布局实现

Android商城开发系列(十三)—— 首页热卖商品布局实现

  热卖商品布局效果如下图:

  技术分享

  这个布局跟我们上节做的推荐是一样的,也是用LinearLayout和GridView去实现的,新建一个hot_item.xml,代码如下所示:

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout
 3     xmlns:android="http://schemas.android.com/apk/res/android"
 4     android:orientation="vertical"
 5     android:layout_width="match_parent"
 6     android:layout_height="match_parent"
 7     android:background="#eee"
 8     android:padding="10dp">
 9 
10     <LinearLayout
11         android:layout_width="match_parent"
12         android:layout_height="wrap_content"
13         android:gravity="center_vertical">
14 
15         <ImageView
16             android:layout_width="wrap_content"
17             android:layout_height="wrap_content"
18             android:src="http://www.mamicode.com/@mipmap/home_arrow_left_hot"/>
19 
20         <TextView
21             android:layout_width="wrap_content"
22             android:layout_height="wrap_content"
23             android:layout_marginLeft="10dp"
24             android:text="这里都是买的棒棒哒"
25             android:textColor="#000"/>
26 
27         <TextView
28             android:id="@+id/tv_more_hot"
29             android:layout_width="wrap_content"
30             android:layout_height="wrap_content"
31             android:layout_weight="1"
32             android:drawablePadding="5dp"
33             android:drawableRight="@mipmap/home_arrow_right"
34             android:gravity="end"
35             android:text="查看更多"/>
36 
37     </LinearLayout>
38 
39     <GridView
40         android:id="@+id/gv_hot"
41         android:layout_width="match_parent"
42         android:layout_height="1020dp"
43         android:layout_marginTop="10dp"
44         android:horizontalSpacing="10dp"
45         android:numColumns="2"
46         android:verticalSpacing="10dp"/>
47 
48 </LinearLayout>

  接着在HomeFragmentAdapter类中的onCreateViewHolder()方法中去创建HotViewHolder,代码如下所示:

  1 package com.nyl.shoppingmall.home.adapter;
  2 
  3 import android.content.Context;
  4 import android.os.Handler;
  5 import android.os.Message;
  6 import android.support.v4.view.PagerAdapter;
  7 import android.support.v4.view.ViewPager;
  8 import android.support.v7.widget.LinearLayoutManager;
  9 import android.support.v7.widget.RecyclerView;
 10 import android.view.LayoutInflater;
 11 import android.view.View;
 12 import android.view.ViewGroup;
 13 import android.widget.AdapterView;
 14 import android.widget.GridView;
 15 import android.widget.ImageView;
 16 import android.widget.TextView;
 17 import android.widget.Toast;
 18 
 19 import com.bumptech.glide.Glide;
 20 import com.nyl.shoppingmall.R;
 21 import com.nyl.shoppingmall.home.bean.ResultBeanData;
 22 import com.nyl.shoppingmall.utils.Constants;
 23 import com.youth.banner.Banner;
 24 import com.youth.banner.BannerConfig;
 25 import com.youth.banner.Transformer;
 26 import com.youth.banner.listener.OnBannerClickListener;
 27 import com.youth.banner.listener.OnLoadImageListener;
 28 import com.zhy.magicviewpager.transformer.ScaleInTransformer;
 29 
 30 import java.text.SimpleDateFormat;
 31 import java.util.ArrayList;
 32 import java.util.Date;
 33 import java.util.List;
 34 
 35 /**
 36  * 首页适配器
 37  */
 38 
 39 public class HomeFragmentAdapter extends RecyclerView.Adapter{
 40 
 41     /**
 42      * 广告幅类型
 43      */
 44     public static final int BANNER = 0;
 45 
 46     /**
 47      * 频道类型
 48      */
 49     public static final int CHANNEL = 1;
 50 
 51     /**
 52      * 活动类型
 53      */
 54     public static final int ACT = 2;
 55 
 56     /**
 57      * 秒杀类型
 58      */
 59     public static final int SECKILL = 3;
 60 
 61     /**
 62      * 推荐类型
 63      */
 64     public static final int RECOMMEND = 4;
 65 
 66     /**
 67      * 热卖类型
 68      */
 69     public static final int HOT = 5;
 70 
 71     /**
 72      * 初始化布局
 73      */
 74     private LayoutInflater mLayoutInflater;
 75 
 76     /**
 77      * 数据
 78      */
 79     private ResultBeanData.ResultBean resultBean;
 80     private Context mContext;
 81 
 82     /**
 83      * 当前类型
 84      */
 85     private int currenType = BANNER;
 86 
 87     public HomeFragmentAdapter(Context mContext, ResultBeanData.ResultBean resultBean) {
 88         this.mContext = mContext;
 89         this.resultBean = resultBean;
 90         mLayoutInflater = LayoutInflater.from(mContext);
 91     }
 92 
 93     /**
 94      * 相当于getView创建ViewHolder部分代码
 95      * @param parent
 96      * @param viewType 当前的类型
 97      * @return
 98      */
 99     @Override
100     public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
101         //广告福
102         if (viewType == BANNER){
103             //创建BannerViewHolder,Banner里面传布局文件
104             return new BannerViewHolder(mContext,mLayoutInflater.inflate(R.layout.banner_viewpager,null));
105             //频道
106         }else if (viewType == CHANNEL){
107             return new ChannelViewHolder(mContext,mLayoutInflater.inflate(R.layout.channel_item,null));
108             //活动
109         }else if (viewType == ACT){
110             return new ActViewHolder(mContext,mLayoutInflater.inflate(R.layout.act_item,null));
111             //秒杀
112         }else if (viewType == SECKILL){
113             return new SeckillViewHolder(mContext,mLayoutInflater.inflate(R.layout.seckkill_item,null));
114             //推荐
115         }else if (viewType == RECOMMEND){
116             return new RecommendViewHolder(mContext,mLayoutInflater.inflate(R.layout.recommend_item,null));
117             //热卖
118         }else if (viewType == HOT){
119             return new HotViewHolder(mContext,mLayoutInflater.inflate(R.layout.hot_item,null));
120         }
121         return null;
122     }
123 
124     /**
125      * 相当于getView中绑定数据模块
126      * @param holder
127      * @param position
128      */
129     @Override
130     public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
131         //轮循广告
132         if (getItemViewType(position) == BANNER){
133             BannerViewHolder bannerViewHolder = (BannerViewHolder) holder;
134             bannerViewHolder.setData(resultBean.getBanner_info());
135             /**
136              * 频道
137              */
138         }else if (getItemViewType(position) == CHANNEL){
139             ChannelViewHolder channelViewHolder = (ChannelViewHolder) holder;
140             channelViewHolder.setData(resultBean.getChannel_info());
141             /**
142              * 活动
143              */
144         }else if (getItemViewType(position) == ACT){
145             ActViewHolder actViewHolder = (ActViewHolder) holder;
146             actViewHolder.setData(resultBean.getAct_info());
147             /**
148              * 秒杀
149              */
150         }else if (getItemViewType(position) == SECKILL){
151             SeckillViewHolder seckillViewHolder = (SeckillViewHolder) holder;
152             seckillViewHolder.setData(resultBean.getSeckill_info());
153             /**
154              * 推荐
155              */
156         }else if (getItemViewType(position) == RECOMMEND){
157             RecommendViewHolder recommendViewHolder = (RecommendViewHolder) holder;
158             recommendViewHolder.setData(resultBean.getRecommend_info());
159             /**
160              * 热卖
161              */
162         }else if (getItemViewType(position) == HOT){
163             HotViewHolder hotViewHolder = (HotViewHolder) holder;
164             hotViewHolder.setData(resultBean.getHot_info());
165         }
166     }
167 
168     /**
169      * 广告幅
170      */
171     class BannerViewHolder extends RecyclerView.ViewHolder{
172 
173         private Context mContext;
174         private Banner banner;
175 
176         public BannerViewHolder(Context mContext, View itemView) {
177             super(itemView);
178             this.mContext = mContext;
179             this.banner = (Banner) itemView.findViewById(R.id.banner);
180         }
181 
182         public void setData(List<ResultBeanData.ResultBean.BannerInfoEntity> banner_info) {
183             //得到图片集合地址
184             List<String> imagesUrl = new ArrayList<>();
185             for (int i = 0;i<banner_info.size();i++){
186                 String imageUrl = banner_info.get(i).getImage();
187                 imagesUrl.add(imageUrl);
188             }
189             //设置循环指示点
190             banner.setBannerStyle(BannerConfig.CIRCLE_INDICATOR);
191             //设置手风琴效果
192             banner.setBannerAnimation(Transformer.Accordion);
193             //设置Banner图片数据
194             banner.setImages(imagesUrl, new onl oadImageListener() {
195                 @Override
196                 public void onl oadImage(ImageView view, Object url) {
197                     //联网请求图片-Glide
198                     Glide.with(mContext).load(Constants.BASE_URL_IMAGE + url).into(view);
199                 }
200             });
201             //设置点击事件
202             banner.setOnBannerClickListener(new OnBannerClickListener() {
203                 @Override
204                 public void OnBannerClick(int position) {
205                     Toast.makeText(mContext,"position=="+position,Toast.LENGTH_SHORT).show();
206                 }
207             });
208         }
209     }
210 
211     /**
212      * 频道
213      */
214     class ChannelViewHolder extends RecyclerView.ViewHolder{
215 
216         private Context mContext;
217         private GridView gv_channel;
218         private ChannelAdapter adapter;
219 
220         public ChannelViewHolder(Context mContext, View itemView) {
221             super(itemView);
222             this.mContext = mContext;
223             gv_channel = (GridView) itemView.findViewById(R.id.gv_channel);
224         }
225 
226         public void setData(List<ResultBeanData.ResultBean.ChannelInfoBean> channel_info) {
227             //得到数据后,就设置GridView的适配器
228             adapter = new ChannelAdapter(mContext,channel_info);
229             gv_channel.setAdapter(adapter);
230 
231             //设置item的点击事件
232             gv_channel.setOnItemClickListener(new AdapterView.OnItemClickListener() {
233                 @Override
234                 public void onItemClick(AdapterView<?> adapterView, View view, int position, long l) {
235                     Toast.makeText(mContext,"position"+position,Toast.LENGTH_SHORT).show();
236                 }
237             });
238         }
239     }
240 
241     /**
242      * 活动
243      */
244     class ActViewHolder extends RecyclerView.ViewHolder{
245 
246         private Context mContext;
247         private ViewPager act_viewpager;
248 
249         public ActViewHolder(Context mContext,View itemView) {
250             super(itemView);
251             this.mContext = mContext;
252             act_viewpager = (ViewPager) itemView.findViewById(R.id.act_viewpager);
253         }
254 
255         public void setData(final List<ResultBeanData.ResultBean.ActInfoEntity> act_info) {
256             //设置间距
257             act_viewpager.setPageMargin(20);
258             act_viewpager.setOffscreenPageLimit(3);//>=3
259             //setPageTransformer 决定动画效果
260             act_viewpager.setPageTransformer(true, new ScaleInTransformer());
261             //有数据后,就设置数据适配器
262             act_viewpager.setAdapter(new PagerAdapter() {
263                 @Override
264                 public int getCount() {
265                     return act_info.size();
266                 }
267 
268                 /**
269                  *
270                  * @param view 页面
271                  * @param object instantiateItem方法返回的值
272                  * @return
273                  */
274                 @Override
275                 public boolean isViewFromObject(View view, Object object) {
276                     return view == object;
277                 }
278 
279                 /**
280                  *
281                  * @param container ViewPager
282                  * @param position 对应页面的位置
283                  * @return
284                  */
285                 @Override
286                 public Object instantiateItem(ViewGroup container, final int position) {
287                     //实例化ImageView
288                     ImageView imageView = new ImageView(mContext);
289                     //设置ImageView的拉伸
290                     imageView.setScaleType(ImageView.ScaleType.FIT_XY);
291                     //根据Glide设置图片
292                     Glide.with(mContext).load(Constants.BASE_URL_IMAGE+act_info.get(position).getIcon_url()).into(imageView);
293                     //添加到容器中
294                     container.addView(imageView);
295 
296                     //设置点击事件
297                     imageView.setOnClickListener(new View.OnClickListener() {
298                         @Override
299                         public void onClick(View view) {
300                             Toast.makeText(mContext,"position=="+position,Toast.LENGTH_SHORT).show();
301                         }
302                     });
303                     return imageView;
304                 }
305 
306                 @Override
307                 public void destroyItem(ViewGroup container, int position, Object object) {
308                     container.removeView((View) object);
309                 }
310             });
311         }
312     }
313 
314     /**
315      * 秒杀
316      */
317     class SeckillViewHolder extends RecyclerView.ViewHolder{
318 
319         private Context mContext;
320         private TextView tv_time_seckill;
321         private TextView tv_more_seckill;
322         private RecyclerView rv_seckill;
323         private SeckillRecycleViewAdapter adapter;
324 
325         /**
326          * 相差多少时间-毫秒
327          */
328         private long dt = 0;
329         //不断循环
330         private Handler handler = new Handler(){
331             @Override
332             public void handleMessage(Message msg) {
333                 super.handleMessage(msg);
334                 dt = dt - 1000;
335                 //设置具体的时间
336                 SimpleDateFormat dateFormat = new SimpleDateFormat("hh:mm:ss");
337                 String time = dateFormat.format(new Date(dt));
338                 tv_time_seckill.setText(time);
339 
340                 handler.removeMessages(0);
341                 //发送消息,不断减时间
342                 handler.sendEmptyMessageDelayed(0,1000);
343                 if (dt <= 0){
344                     //把消息移除
345                     handler.removeCallbacksAndMessages(null);
346                 }
347             }
348         };
349 
350         public SeckillViewHolder(Context mContext, View itemView) {
351             super(itemView);
352             this.mContext = mContext;
353             //初始化布局控件
354             tv_time_seckill = (TextView) itemView.findViewById(R.id.tv_time_seckill);
355             tv_more_seckill = (TextView) itemView.findViewById(R.id.tv_more_seckill);
356             rv_seckill = (RecyclerView) itemView.findViewById(R.id.rv_seckill);
357         }
358 
359         public void setData(ResultBeanData.ResultBean.SeckillInfoEntity seckill_info) {
360             //得到数据后,就是设置数据(TextView和RecyclerView)的数据
361             adapter = new SeckillRecycleViewAdapter(mContext,seckill_info.getList());
362             rv_seckill.setAdapter(adapter);
363 
364             //设置布局管理器
365             rv_seckill.setLayoutManager(new LinearLayoutManager(mContext,LinearLayoutManager.HORIZONTAL,false));
366             //设置item的点击事件
367             adapter.setOnSeckillRecyclerView(new SeckillRecycleViewAdapter.OnSeckillRecyclerView() {
368                 @Override
369                 public void onItemClick(int position) {
370                     Toast.makeText(mContext,"秒杀"+position,Toast.LENGTH_SHORT).show();
371                 }
372             });
373             //秒杀倒计时-毫秒
374             dt = Integer.valueOf(seckill_info.getEnd_time()) - Integer.valueOf(seckill_info.getStart_time());
375             //进入后1秒钟就去发送这个消息
376             handler.sendEmptyMessageDelayed(0,1000);
377 
378         }
379     }
380 
381     /**
382      * 推荐
383      */
384     class RecommendViewHolder extends RecyclerView.ViewHolder{
385 
386         private final Context mContext;
387         private TextView tv_more_recommend;
388         private GridView gv_recommend;
389         private RecommendGridViewAdapter adapter;
390 
391         public RecommendViewHolder(final Context mContext, View itemView) {
392             super(itemView);
393             this.mContext = mContext;
394             tv_more_recommend = (TextView) itemView.findViewById(R.id.tv_more_recommend);
395             gv_recommend = (GridView) itemView.findViewById(R.id.gv_recommend);
396 
397             //设置点击事件
398             gv_recommend.setOnItemClickListener(new AdapterView.OnItemClickListener() {
399                 @Override
400                 public void onItemClick(AdapterView<?> adapterView, View view, int position, long l) {
401                     Toast.makeText(mContext,"position=="+position,Toast.LENGTH_SHORT).show();
402                 }
403             });
404         }
405 
406         public void setData(List<ResultBeanData.ResultBean.RecommendInfoBean> recommend_info) {
407             //有数据了之后,就设置适配器
408             adapter = new RecommendGridViewAdapter(mContext,recommend_info);
409             gv_recommend.setAdapter(adapter);
410 
411         }
412     }
413 
414     /**
415      * 热门
416      */
417     class HotViewHolder extends RecyclerView.ViewHolder{
418 
419         private final Context mContext;
420         private TextView tv_more_hot;
421         private GridView gv_hot;
422         private HotGridViewAdapter adapter;
423 
424         public HotViewHolder(final Context mContext, View itemView) {
425             super(itemView);
426             this.mContext = mContext;
427             tv_more_hot = (TextView) itemView.findViewById(R.id.tv_more_hot);
428             gv_hot = (GridView) itemView.findViewById(R.id.gv_hot);
429             //设置item的点击事件
430             gv_hot.setOnItemClickListener(new AdapterView.OnItemClickListener() {
431                 @Override
432                 public void onItemClick(AdapterView<?> adapterView, View view, int position, long l) {
433                     Toast.makeText(mContext,"position"+position,Toast.LENGTH_SHORT).show();
434                 }
435             });
436         }
437 
438         public void setData(List<ResultBeanData.ResultBean.HotInfoBean> hot_info) {
439             //有数据后,就设置GridView的适配器
440             adapter = new HotGridViewAdapter(mContext,hot_info);
441             gv_hot.setAdapter(adapter);
442         }
443     }
444 
445     /**
446      * 得到不同的类型
447      * @param position
448      * @return
449      */
450     @Override
451     public int getItemViewType(int position) {
452         switch (position){
453             case BANNER: //广告幅
454                 currenType = BANNER;
455                 break;
456             case CHANNEL: //频道
457                 currenType = CHANNEL;
458                 break;
459             case ACT: //活动
460                 currenType = ACT;
461                 break;
462             case SECKILL: //秒杀
463                 currenType = SECKILL;
464                 break;
465             case RECOMMEND: //推荐
466                 currenType = RECOMMEND;
467                 break;
468             case HOT: //热卖
469                 currenType = HOT;
470                 break;
471         }
472         return currenType;
473     }
474 
475     /**
476      * 总共有多少个item
477      * @return
478      */
479     @Override
480     public int getItemCount() {
481         return 6;
482     }
483 }

  有数据了,接着就是将数据通过适配器展示出来,首先设计gridview的item布局,新建item_hot_grid_view.xml,代码如下所示:

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:layout_width="wrap_content"
 4     android:layout_height="wrap_content"
 5     android:layout_margin="10dp"
 6     android:background="#fff"
 7     android:gravity="center"
 8     android:orientation="vertical">
 9 
10     <ImageView
11         android:id="@+id/iv_hot"
12         android:layout_width="180dp"
13         android:layout_height="180dp"
14         android:layout_gravity="center"
15         android:background="@mipmap/new_img_loading_2" />
16 
17     <TextView
18         android:id="@+id/tv_name"
19         android:layout_width="180dp"
20         android:layout_height="wrap_content"
21         android:layout_marginTop="10dp"
22         android:ellipsize="end"
23         android:lines="2"
24         android:padding="10dp"
25         android:text="【智趣屋】DIY小屋盒子剧场 手工拼装房子 模型玩具创意礼品 送工具"
26         android:textColor="#000" />
27 
28     <TextView
29         android:id="@+id/tv_price"
30         android:layout_width="wrap_content"
31         android:layout_height="wrap_content"
32         android:layout_gravity="left"
33         android:layout_marginTop="3dp"
34         android:text="¥88.00"
35         android:textColor="#ff4242" />
36 </LinearLayout>

  接着新建一个HotGridViewAdapter类,代码如下所示:

 1 package com.nyl.shoppingmall.home.adapter;
 2 
 3 import android.content.Context;
 4 import android.view.View;
 5 import android.view.ViewGroup;
 6 import android.widget.BaseAdapter;
 7 import android.widget.ImageView;
 8 import android.widget.TextView;
 9 
10 import com.bumptech.glide.Glide;
11 import com.nyl.shoppingmall.R;
12 import com.nyl.shoppingmall.home.bean.ResultBeanData;
13 import com.nyl.shoppingmall.utils.Constants;
14 
15 import java.util.List;
16 
17 /**
18  * 热卖GridView的适配器
19  */
20 
21 public class HotGridViewAdapter extends BaseAdapter{
22     private final Context mContext;
23     private final List<ResultBeanData.ResultBean.HotInfoBean> datas;
24 
25     public HotGridViewAdapter(Context mContext, List<ResultBeanData.ResultBean.HotInfoBean> hot_info) {
26         this.mContext = mContext;
27         this.datas = hot_info;
28     }
29 
30     @Override
31     public int getCount() {
32         return datas.size();
33     }
34 
35     @Override
36     public Object getItem(int i) {
37         return null;
38     }
39 
40     @Override
41     public long getItemId(int i) {
42         return 0;
43     }
44 
45     @Override
46     public View getView(int position, View convertView, ViewGroup viewGroup) {
47         ViewHolder viewHolder;
48         if (convertView == null){
49             convertView = View.inflate(mContext, R.layout.item_hot_grid_view,null);
50             viewHolder = new ViewHolder();
51             viewHolder.iv_hot = (ImageView) convertView.findViewById(R.id.iv_hot);
52             viewHolder.tv_name = (TextView) convertView.findViewById(R.id.tv_name);
53             viewHolder.tv_price = (TextView) convertView.findViewById(R.id.tv_price);
54             convertView.setTag(viewHolder);
55         }else {
56             viewHolder = (ViewHolder) convertView.getTag();
57         }
58         //根据位置得到相对应的数据
59         ResultBeanData.ResultBean.HotInfoBean hotInfoBean = datas.get(position);
60         //设置图片
61         Glide.with(mContext).load(Constants.BASE_URL_IMAGE + hotInfoBean.getFigure()).into(viewHolder.iv_hot);
62         //设置名称
63         viewHolder.tv_name.setText(hotInfoBean.getName());
64         //设置价格
65         viewHolder.tv_price.setText("¥"+hotInfoBean.getCover_price());
66         return convertView;
67     }
68     static class ViewHolder{
69         ImageView iv_hot;
70         TextView tv_name;
71         TextView tv_price;
72     }
73 }

  首页热卖商品布局实现的内容就这么多,到此,关于首页布局实现的所有内容就全部介绍完了。

Android商城开发系列(十三)—— 首页热卖商品布局实现