锐客网

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

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

androidIT知识开发系列

一万年来谁著史，三千里外欲封侯。这篇文章主要讲述Android商城开发系列—— 首页推荐布局实现相关的知识，希望能为你提供帮助。
首页新品推荐的布局效果如下图：

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

文章图片

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

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

    推荐阅读


    上一篇：Android 中基于 Binder的进程间通信

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