码迷,mamicode.com
首页 > 移动开发 > 详细

Android商城开发系列(十二)—— 首页推荐布局实现

时间:2017-03-27 00:23:07      阅读:1503      评论:0      收藏:0      [点我收藏+]

标签:分代   view的适配   tla   handler   1.0   false   extc   手风琴效果   llb   

  首页新品推荐的布局效果如下图:

  技术分享

   这块布局是使用LinearLayout和GridView去实现,新建recommend_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="#fff">
 8 
 9     <LinearLayout
10         android:layout_width="match_parent"
11         android:layout_height="wrap_content"
12         android:gravity="center_vertical"
13         android:padding="10dp">
14 
15         <ImageView
16             android:layout_width="wrap_content"
17             android:layout_height="wrap_content"
18             android:src="@mipmap/home_arrow_left_new" />
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_recommend"
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     </LinearLayout>
37 
38     <GridView
39         android:id="@+id/gv_recommend"
40         android:layout_width="match_parent"
41         android:layout_height="380dp"
42         android:numColumns="3"/>
43 
44 </LinearLayout>

  继续在HomeFragmentAdapter类中去添加推荐的ViewHolder,在onCreateViewHolder()方法中创建RecommendViewHolder,代码如下所示:

  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         return null;
119     }
120 
121     /**
122      * 相当于getView中绑定数据模块
123      * @param holder
124      * @param position
125      */
126     @Override
127     public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
128         //轮循广告
129         if (getItemViewType(position) == BANNER){
130             BannerViewHolder bannerViewHolder = (BannerViewHolder) holder;
131             bannerViewHolder.setData(resultBean.getBanner_info());
132             /**
133              * 频道
134              */
135         }else if (getItemViewType(position) == CHANNEL){
136             ChannelViewHolder channelViewHolder = (ChannelViewHolder) holder;
137             channelViewHolder.setData(resultBean.getChannel_info());
138             /**
139              * 活动
140              */
141         }else if (getItemViewType(position) == ACT){
142             ActViewHolder actViewHolder = (ActViewHolder) holder;
143             actViewHolder.setData(resultBean.getAct_info());
144             /**
145              * 秒杀
146              */
147         }else if (getItemViewType(position) == SECKILL){
148             SeckillViewHolder seckillViewHolder = (SeckillViewHolder) holder;
149             seckillViewHolder.setData(resultBean.getSeckill_info());
150             /**
151              * 推荐
152              */
153         }else if (getItemViewType(position) == RECOMMEND){
154             RecommendViewHolder recommendViewHolder = (RecommendViewHolder) holder;
155             recommendViewHolder.setData(resultBean.getRecommend_info());
156         }
157     }
158 
159     /**
160      * 广告幅
161      */
162     class BannerViewHolder extends RecyclerView.ViewHolder{
163 
164         private Context mContext;
165         private Banner banner;
166 
167         public BannerViewHolder(Context mContext, View itemView) {
168             super(itemView);
169             this.mContext = mContext;
170             this.banner = (Banner) itemView.findViewById(R.id.banner);
171         }
172 
173         public void setData(List<ResultBeanData.ResultBean.BannerInfoEntity> banner_info) {
174             //得到图片集合地址
175             List<String> imagesUrl = new ArrayList<>();
176             for (int i = 0;i<banner_info.size();i++){
177                 String imageUrl = banner_info.get(i).getImage();
178                 imagesUrl.add(imageUrl);
179             }
180             //设置循环指示点
181             banner.setBannerStyle(BannerConfig.CIRCLE_INDICATOR);
182             //设置手风琴效果
183             banner.setBannerAnimation(Transformer.Accordion);
184             //设置Banner图片数据
185             banner.setImages(imagesUrl, new OnLoadImageListener() {
186                 @Override
187                 public void OnLoadImage(ImageView view, Object url) {
188                     //联网请求图片-Glide
189                     Glide.with(mContext).load(Constants.BASE_URL_IMAGE + url).into(view);
190                 }
191             });
192             //设置点击事件
193             banner.setOnBannerClickListener(new OnBannerClickListener() {
194                 @Override
195                 public void OnBannerClick(int position) {
196                     Toast.makeText(mContext,"position=="+position,Toast.LENGTH_SHORT).show();
197                 }
198             });
199         }
200     }
201 
202     /**
203      * 频道
204      */
205     class ChannelViewHolder extends RecyclerView.ViewHolder{
206 
207         private Context mContext;
208         private GridView gv_channel;
209         private ChannelAdapter adapter;
210 
211         public ChannelViewHolder(Context mContext, View itemView) {
212             super(itemView);
213             this.mContext = mContext;
214             gv_channel = (GridView) itemView.findViewById(R.id.gv_channel);
215         }
216 
217         public void setData(List<ResultBeanData.ResultBean.ChannelInfoBean> channel_info) {
218             //得到数据后,就设置GridView的适配器
219             adapter = new ChannelAdapter(mContext,channel_info);
220             gv_channel.setAdapter(adapter);
221 
222             //设置item的点击事件
223             gv_channel.setOnItemClickListener(new AdapterView.OnItemClickListener() {
224                 @Override
225                 public void onItemClick(AdapterView<?> adapterView, View view, int position, long l) {
226                     Toast.makeText(mContext,"position"+position,Toast.LENGTH_SHORT).show();
227                 }
228             });
229         }
230     }
231 
232     /**
233      * 活动
234      */
235     class ActViewHolder extends RecyclerView.ViewHolder{
236 
237         private Context mContext;
238         private ViewPager act_viewpager;
239 
240         public ActViewHolder(Context mContext,View itemView) {
241             super(itemView);
242             this.mContext = mContext;
243             act_viewpager = (ViewPager) itemView.findViewById(R.id.act_viewpager);
244         }
245 
246         public void setData(final List<ResultBeanData.ResultBean.ActInfoEntity> act_info) {
247             //设置间距
248             act_viewpager.setPageMargin(20);
249             act_viewpager.setOffscreenPageLimit(3);//>=3
250             //setPageTransformer 决定动画效果
251             act_viewpager.setPageTransformer(true, new ScaleInTransformer());
252             //有数据后,就设置数据适配器
253             act_viewpager.setAdapter(new PagerAdapter() {
254                 @Override
255                 public int getCount() {
256                     return act_info.size();
257                 }
258 
259                 /**
260                  *
261                  * @param view 页面
262                  * @param object instantiateItem方法返回的值
263                  * @return
264                  */
265                 @Override
266                 public boolean isViewFromObject(View view, Object object) {
267                     return view == object;
268                 }
269 
270                 /**
271                  *
272                  * @param container ViewPager
273                  * @param position 对应页面的位置
274                  * @return
275                  */
276                 @Override
277                 public Object instantiateItem(ViewGroup container, final int position) {
278                     //实例化ImageView
279                     ImageView imageView = new ImageView(mContext);
280                     //设置ImageView的拉伸
281                     imageView.setScaleType(ImageView.ScaleType.FIT_XY);
282                     //根据Glide设置图片
283                     Glide.with(mContext).load(Constants.BASE_URL_IMAGE+act_info.get(position).getIcon_url()).into(imageView);
284                     //添加到容器中
285                     container.addView(imageView);
286 
287                     //设置点击事件
288                     imageView.setOnClickListener(new View.OnClickListener() {
289                         @Override
290                         public void onClick(View view) {
291                             Toast.makeText(mContext,"position=="+position,Toast.LENGTH_SHORT).show();
292                         }
293                     });
294                     return imageView;
295                 }
296 
297                 @Override
298                 public void destroyItem(ViewGroup container, int position, Object object) {
299                     container.removeView((View) object);
300                 }
301             });
302         }
303     }
304 
305     /**
306      * 秒杀
307      */
308     class SeckillViewHolder extends RecyclerView.ViewHolder{
309 
310         private Context mContext;
311         private TextView tv_time_seckill;
312         private TextView tv_more_seckill;
313         private RecyclerView rv_seckill;
314         private SeckillRecycleViewAdapter adapter;
315 
316         /**
317          * 相差多少时间-毫秒
318          */
319         private long dt = 0;
320         //不断循环
321         private Handler handler = new Handler(){
322             @Override
323             public void handleMessage(Message msg) {
324                 super.handleMessage(msg);
325                 dt = dt - 1000;
326                 //设置具体的时间
327                 SimpleDateFormat dateFormat = new SimpleDateFormat("hh:mm:ss");
328                 String time = dateFormat.format(new Date(dt));
329                 tv_time_seckill.setText(time);
330 
331                 handler.removeMessages(0);
332                 //发送消息,不断减时间
333                 handler.sendEmptyMessageDelayed(0,1000);
334                 if (dt <= 0){
335                     //把消息移除
336                     handler.removeCallbacksAndMessages(null);
337                 }
338             }
339         };
340 
341         public SeckillViewHolder(Context mContext, View itemView) {
342             super(itemView);
343             this.mContext = mContext;
344             //初始化布局控件
345             tv_time_seckill = (TextView) itemView.findViewById(R.id.tv_time_seckill);
346             tv_more_seckill = (TextView) itemView.findViewById(R.id.tv_more_seckill);
347             rv_seckill = (RecyclerView) itemView.findViewById(R.id.rv_seckill);
348         }
349 
350         public void setData(ResultBeanData.ResultBean.SeckillInfoEntity seckill_info) {
351             //得到数据后,就是设置数据(TextView和RecyclerView)的数据
352             adapter = new SeckillRecycleViewAdapter(mContext,seckill_info.getList());
353             rv_seckill.setAdapter(adapter);
354 
355             //设置布局管理器
356             rv_seckill.setLayoutManager(new LinearLayoutManager(mContext,LinearLayoutManager.HORIZONTAL,false));
357             //设置item的点击事件
358             adapter.setOnSeckillRecyclerView(new SeckillRecycleViewAdapter.OnSeckillRecyclerView() {
359                 @Override
360                 public void onItemClick(int position) {
361                     Toast.makeText(mContext,"秒杀"+position,Toast.LENGTH_SHORT).show();
362                 }
363             });
364             //秒杀倒计时-毫秒
365             dt = Integer.valueOf(seckill_info.getEnd_time()) - Integer.valueOf(seckill_info.getStart_time());
366             //进入后1秒钟就去发送这个消息
367             handler.sendEmptyMessageDelayed(0,1000);
368 
369         }
370     }
371 
372     /**
373      * 推荐
374      */
375     class RecommendViewHolder extends RecyclerView.ViewHolder{
376 
377         private final Context mContext;
378         private TextView tv_more_recommend;
379         private GridView gv_recommend;
380         private RecommendGridViewAdapter adapter;
381 
382         public RecommendViewHolder(final Context mContext, View itemView) {
383             super(itemView);
384             this.mContext = mContext;
385             tv_more_recommend = (TextView) itemView.findViewById(R.id.tv_more_recommend);
386             gv_recommend = (GridView) itemView.findViewById(R.id.gv_recommend);
387 
388             //设置点击事件
389             gv_recommend.setOnItemClickListener(new AdapterView.OnItemClickListener() {
390                 @Override
391                 public void onItemClick(AdapterView<?> adapterView, View view, int position, long l) {
392                     Toast.makeText(mContext,"position=="+position,Toast.LENGTH_SHORT).show();
393                 }
394             });
395         }
396 
397         public void setData(List<ResultBeanData.ResultBean.RecommendInfoBean> recommend_info) {
398             //有数据了之后,就设置适配器
399             adapter = new RecommendGridViewAdapter(mContext,recommend_info);
400             gv_recommend.setAdapter(adapter);
401 
402         }
403     }
404 
405     /**
406      * 得到不同的类型
407      * @param position
408      * @return
409      */
410     @Override
411     public int getItemViewType(int position) {
412         switch (position){
413             case BANNER: //广告幅
414                 currenType = BANNER;
415                 break;
416             case CHANNEL: //频道
417                 currenType = CHANNEL;
418                 break;
419             case ACT: //活动
420                 currenType = ACT;
421                 break;
422             case SECKILL: //秒杀
423                 currenType = SECKILL;
424                 break;
425             case RECOMMEND: //推荐
426                 currenType = RECOMMEND;
427                 break;
428             case HOT: //热卖
429                 currenType = HOT;
430                 break;
431         }
432         return currenType;
433     }
434 
435     /**
436      * 总共有多少个item
437      * @return
438      */
439     @Override
440     public int getItemCount() {
441         return 5;
442     }
443 }

  有数据了之后,下一步要做的就是使用适配器将数据展示出来,先设计gridView的item的布局,新建item_recommend_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="match_parent"
 4     android:layout_height="match_parent"
 5     android:gravity="center_horizontal"
 6     android:orientation="vertical"
 7     android:padding="10dp">
 8 
 9     <ImageView
10         android:id="@+id/iv_recommend"
11         android:layout_width="100dp"
12         android:layout_height="100dp"
13         android:background="@mipmap/new_img_loading_2" />
14 
15     <TextView
16         android:id="@+id/tv_name"
17         android:layout_width="100dp"
18         android:layout_height="wrap_content"
19         android:layout_marginTop="10dp"
20         android:ellipsize="end"
21         android:lines="2"
22         android:text="全款预售【喵鹿酱】樱桃蜜语 毛呢绣花 小高腰半裙"
23         android:textColor="#000" />
24 
25     <TextView
26         android:id="@+id/tv_price"
27         android:layout_width="wrap_content"
28         android:layout_height="wrap_content"
29         android:text="¥88.00"
30         android:textColor="#ff4242" />
31 </LinearLayout>

  新建RecommendGridViewAdapter类,代码如下:

 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 RecommendGridViewAdapter extends BaseAdapter{
22 
23     private final Context mContext;
24     private final List<ResultBeanData.ResultBean.RecommendInfoBean> datas;
25 
26     public RecommendGridViewAdapter(Context mContext, List<ResultBeanData.ResultBean.RecommendInfoBean> recommend_info) {
27         this.mContext = mContext;
28         this.datas = recommend_info;
29     }
30 
31     @Override
32     public int getCount() {
33         return datas.size();
34     }
35 
36     @Override
37     public Object getItem(int i) {
38         return null;
39     }
40 
41     @Override
42     public long getItemId(int i) {
43         return 0;
44     }
45 
46     @Override
47     public View getView(int position, View view, ViewGroup viewGroup) {
48         ViewHolder viewHolder;
49         if (view == null){
50             view = View.inflate(mContext, R.layout.item_recommend_grid_view,null);
51             viewHolder = new ViewHolder();
52             viewHolder.iv_recommend = (ImageView) view.findViewById(R.id.iv_recommend);
53             viewHolder.tv_name = (TextView) view.findViewById(R.id.tv_name);
54             viewHolder.tv_price = (TextView) view.findViewById(R.id.tv_price);
55             view.setTag(viewHolder);
56         }else {
57             viewHolder = (ViewHolder) view.getTag();
58         }
59         //根据位置得到对应的数据
60         ResultBeanData.ResultBean.RecommendInfoBean recommendInfoBean = datas.get(position);
61         //设置网络图片
62         Glide.with(mContext).load(Constants.BASE_URL_IMAGE+recommendInfoBean.getFigure()).into(viewHolder.iv_recommend);
63         viewHolder.tv_name.setText(recommendInfoBean.getName());
64         viewHolder.tv_price.setText("¥"+recommendInfoBean.getCover_price());
65         return view;
66     }
67     static class ViewHolder{
68         ImageView iv_recommend;
69         TextView tv_name;
70         TextView tv_price;
71     }
72 }

   关于首页推荐布局的内容就那么多!

Android商城开发系列(十二)—— 首页推荐布局实现

标签:分代   view的适配   tla   handler   1.0   false   extc   手风琴效果   llb   

原文地址:http://www.cnblogs.com/nylcy/p/6607018.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!