锐客网

  1. 首页 > 睿知 > it技术 > >

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

androidIT知识开发系列

一身转战三千里，一剑曾百万师。这篇文章主要讲述Android商城开发系列（十三）—— 首页热卖商品布局实现相关的知识，希望能为你提供帮助。
热卖商品布局效果如下图：
【Android商城开发系列（十三）—— 首页热卖商品布局实现】

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

文章图片

这个布局跟我们上节做的推荐是一样的，也是用LinearLayout和GridView去实现的，新建一个hot_item.xml，代码如下所示：
1 < ?xml version="1.0" encoding="utf-8"?> 2 < LinearLayout 3xmlns:android="http://schemas.android.com/apk/res/android" 4android:orientation="vertical" 5android:layout_width="match_parent" 6android:layout_height="match_parent" 7android:background="#eee" 8android:padding="10dp"> 9 10< LinearLayout 11android:layout_width="match_parent" 12android:layout_height="wrap_content" 13android:gravity="center_vertical"> 14 15< ImageView 16android:layout_width="wrap_content" 17android:layout_height="wrap_content" 18android:src="https://www.songbingjia.com/android/@mipmap/home_arrow_left_hot"/> 19 20< TextView 21android:layout_width="wrap_content" 22android:layout_height="wrap_content" 23android:layout_marginLeft="10dp" 24android:text="这里都是买的棒棒哒" 25android:textColor="#000"/> 26 27< TextView 28android:id="@+id/tv_more_hot" 29android:layout_width="wrap_content" 30android:layout_height="wrap_content" 31android:layout_weight="1" 32android:drawablePadding="5dp" 33android:drawableRight="@mipmap/home_arrow_right" 34android:gravity="end" 35android:text="查看更多"/> 36 37< /LinearLayout> 38 39< GridView 40android:id="@+id/gv_hot" 41android:layout_width="match_parent" 42android:layout_height="1020dp" 43android:layout_marginTop="10dp" 44android:horizontalSpacing="10dp" 45android:numColumns="2" 46android: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*/ 44public static final int BANNER = 0; 45 46/** 47* 频道类型 48*/ 49public static final int CHANNEL = 1; 50 51/** 52* 活动类型 53*/ 54public static final int ACT = 2; 55 56/** 57* 秒杀类型 58*/ 59public static final int SECKILL = 3; 60 61/** 62* 推荐类型 63*/ 64public static final int RECOMMEND = 4; 65 66/** 67* 热卖类型 68*/ 69public static final int HOT = 5; 70 71/** 72* 初始化布局 73*/ 74private LayoutInflater mLayoutInflater; 75 76/** 77* 数据 78*/ 79private ResultBeanData.ResultBean resultBean; 80private Context mContext; 81 82/** 83* 当前类型 84*/ 85private int currenType = BANNER; 86 87public HomeFragmentAdapter(Context mContext, ResultBeanData.ResultBean resultBean) { 88this.mContext = mContext; 89this.resultBean = resultBean; 90mLayoutInflater = LayoutInflater.from(mContext); 91} 92 93/** 94* 相当于getView创建ViewHolder部分代码 95* @param parent 96* @param viewType 当前的类型 97* @return 98*/ 99@Override 100public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { 101//广告福 102if (viewType == BANNER){ 103//创建BannerViewHolder，Banner里面传布局文件 104return new BannerViewHolder(mContext,mLayoutInflater.inflate(R.layout.banner_viewpager,null)); 105//频道 106}else if (viewType == CHANNEL){ 107return new ChannelViewHolder(mContext,mLayoutInflater.inflate(R.layout.channel_item,null)); 108//活动 109}else if (viewType == ACT){ 110return new ActViewHolder(mContext,mLayoutInflater.inflate(R.layout.act_item,null)); 111//秒杀 112}else if (viewType == SECKILL){ 113return new SeckillViewHolder(mContext,mLayoutInflater.inflate(R.layout.seckkill_item,null)); 114//推荐 115}else if (viewType == RECOMMEND){ 116return new RecommendViewHolder(mContext,mLayoutInflater.inflate(R.layout.recommend_item,null)); 117//热卖 118}else if (viewType == HOT){ 119return new HotViewHolder(mContext,mLayoutInflater.inflate(R.layout.hot_item,null)); 120} 121return null; 122} 123 124/** 125* 相当于getView中绑定数据模块 126* @param holder 127* @param position 128*/ 129@Override 130public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) { 131//轮循广告 132if (getItemViewType(position) == BANNER){ 133BannerViewHolder bannerViewHolder = (BannerViewHolder) holder; 134bannerViewHolder.setData(resultBean.getBanner_info()); 135/** 136* 频道 137*/ 138}else if (getItemViewType(position) == CHANNEL){ 139ChannelViewHolder channelViewHolder = (ChannelViewHolder) holder; 140channelViewHolder.setData(resultBean.getChannel_info()); 141/** 142* 活动 143*/ 144}else if (getItemViewType(position) == ACT){ 145ActViewHolder actViewHolder = (ActViewHolder) holder; 146actViewHolder.setData(resultBean.getAct_info()); 147/** 148* 秒杀 149*/ 150}else if (getItemViewType(position) == SECKILL){ 151SeckillViewHolder seckillViewHolder = (SeckillViewHolder) holder; 152seckillViewHolder.setData(resultBean.getSeckill_info()); 153/** 154* 推荐 155*/ 156}else if (getItemViewType(position) == RECOMMEND){ 157RecommendViewHolder recommendViewHolder = (RecommendViewHolder) holder; 158recommendViewHolder.setData(resultBean.getRecommend_info()); 159/** 160* 热卖 161*/ 162}else if (getItemViewType(position) == HOT){ 163HotViewHolder hotViewHolder = (HotViewHolder) holder; 164hotViewHolder.setData(resultBean.getHot_info()); 165} 166} 167 168/** 169* 广告幅 170*/ 171class BannerViewHolder extends RecyclerView.ViewHolder{ 172 173private Context mContext; 174private Banner banner; 175 176public BannerViewHolder(Context mContext, View itemView) { 177super(itemView); 178this.mContext = mContext; 179this.banner = (Banner) itemView.findViewById(R.id.banner); 180} 181 182public void setData(List< ResultBeanData.ResultBean.BannerInfoEntity> banner_info) { 183//得到图片集合地址 184List< String> imagesUrl = new ArrayList< > (); 185for (int i = 0; i< banner_info.size(); i++){ 186String imageUrl = banner_info.get(i).getImage(); 187imagesUrl.add(imageUrl); 188} 189//设置循环指示点 190banner.setBannerStyle(BannerConfig.CIRCLE_INDICATOR); 191//设置手风琴效果 192banner.setBannerAnimation(Transformer.Accordion); 193//设置Banner图片数据 194banner.setImages(imagesUrl, new OnLoadImageListener() { 195@Override 196public void OnLoadImage(ImageView view, Object url) { 197//联网请求图片-Glide 198Glide.with(mContext).load(Constants.BASE_URL_IMAGE + url).into(view); 199} 200}); 201//设置点击事件 202banner.setOnBannerClickListener(new OnBannerClickListener() { 203@Override 204public void OnBannerClick(int position) { 205Toast.makeText(mContext,"position=="+position,Toast.LENGTH_SHORT).show(); 206} 207}); 208} 209} 210 211/** 212* 频道 213*/ 214class ChannelViewHolder extends RecyclerView.ViewHolder{ 215 216private Context mContext; 217private GridView gv_channel; 218private ChannelAdapter adapter; 219 220public ChannelViewHolder(Context mContext, View itemView) { 221super(itemView); 222this.mContext = mContext; 223gv_channel = (GridView) itemView.findViewById(R.id.gv_channel); 224} 225 226public void setData(List< ResultBeanData.ResultBean.ChannelInfoBean> channel_info) { 227//得到数据后，就设置GridView的适配器 228adapter = new ChannelAdapter(mContext,channel_info); 229gv_channel.setAdapter(adapter); 230 231//设置item的点击事件 232gv_channel.setOnItemClickListener(new AdapterView.OnItemClickListener() { 233@Override 234public void onItemClick(AdapterView< ?> adapterView, View view, int position, long l) { 235Toast.makeText(mContext,"position"+position,Toast.LENGTH_SHORT).show(); 236} 237}); 238} 239} 240 241/** 242* 活动 243*/ 244class ActViewHolder extends RecyclerView.ViewHolder{ 245 246private Context mContext; 247private ViewPager act_viewpager; 248 249public ActViewHolder(Context mContext,View itemView) { 250super(itemView); 251this.mContext = mContext; 252act_viewpager = (ViewPager) itemView.findViewById(R.id.act_viewpager); 253} 254 255public void setData(final List< ResultBeanData.ResultBean.ActInfoEntity> act_info) { 256//设置间距 257act_viewpager.setPageMargin(20); 258act_viewpager.setOffscreenPageLimit(3); //> =3 259//setPageTransformer 决定动画效果 260act_viewpager.setPageTransformer(true, new ScaleInTransformer()); 261//有数据后，就设置数据适配器 262act_viewpager.setAdapter(new PagerAdapter() { 263@Override 264public int getCount() { 265return act_info.size(); 266} 267 268/** 269* 270* @param view 页面 271* @param object instantiateItem方法返回的值 272* @return 273*/ 274@Override 275public boolean isViewFromObject(View view, Object object) { 276return view == object; 277} 278 279/** 280* 281* @param container ViewPager 282* @param position 对应页面的位置 283* @return 284*/ 285@Override 286public Object instantiateItem(ViewGroup container, final int position) { 287//实例化ImageView 288ImageView imageView = new ImageView(mContext); 289//设置ImageView的拉伸 290imageView.setScaleType(ImageView.ScaleType.FIT_XY); 291//根据Glide设置图片 292Glide.with(mContext).load(Constants.BASE_URL_IMAGE+act_info.get(position).getIcon_url()).into(imageView); 293//添加到容器中 294container.addView(imageView); 295 296//设置点击事件 297imageView.setOnClickListener(new View.OnClickListener() { 298@Override 299public void onClick(View view) { 300Toast.makeText(mContext,"position=="+position,Toast.LENGTH_SHORT).show(); 301} 302}); 303return imageView; 304} 305 306@Override 307public void destroyItem(ViewGroup container, int position, Object object) { 308container.removeView((View) object); 309} 310}); 311} 312} 313 314/** 315* 秒杀 316*/ 317class SeckillViewHolder extends RecyclerView.ViewHolder{ 318 319private Context mContext; 320private TextView tv_time_seckill; 321private TextView tv_more_seckill; 322private RecyclerView rv_seckill; 323private SeckillRecycleViewAdapter adapter; 324 325/** 326* 相差多少时间-毫秒 327*/ 328private long dt = 0; 329//不断循环 330private Handler handler = new Handler(){ 331@Override 332public void handleMessage(Message msg) { 333super.handleMessage(msg); 334dt = dt - 1000; 335//设置具体的时间 336SimpleDateFormat dateFormat = new SimpleDateFormat("hh:mm:ss"); 337String time = dateFormat.format(new Date(dt)); 338tv_time_seckill.setText(time); 339 340handler.removeMessages(0); 341//发送消息，不断减时间 342handler.sendEmptyMessageDelayed(0,1000); 343if (dt < = 0){ 344//把消息移除 345handler.removeCallbacksAndMessages(null); 346} 347} 348}; 349 350public SeckillViewHolder(Context mContext, View itemView) { 351super(itemView); 352this.mContext = mContext; 353//初始化布局控件 354tv_time_seckill = (TextView) itemView.findViewById(R.id.tv_time_seckill); 355tv_more_seckill = (TextView) itemView.findViewById(R.id.tv_more_seckill); 356rv_seckill = (RecyclerView) itemView.findViewById(R.id.rv_seckill); 357} 358 359public void setData(ResultBeanData.ResultBean.SeckillInfoEntity seckill_info) { 360//得到数据后，就是设置数据（TextView和RecyclerView）的数据 361adapter = new SeckillRecycleViewAdapter(mContext,seckill_info.getList()); 362rv_seckill.setAdapter(adapter); 363 364//设置布局管理器 365rv_seckill.setLayoutManager(new LinearLayoutManager(mContext,LinearLayoutManager.HORIZONTAL,false)); 366//设置item的点击事件 367adapter.setOnSeckillRecyclerView(new SeckillRecycleViewAdapter.OnSeckillRecyclerView() { 368@Override 369public void onItemClick(int position) { 370Toast.makeText(mContext,"秒杀"+position,Toast.LENGTH_SHORT).show(); 371} 372}); 373//秒杀倒计时-毫秒

    推荐阅读


    上一篇：Android商城开发系列—— 首页推荐布局实现

    下一篇：Android蓝牙通讯