手机商城第六天，利用GridView实现推荐区域以及火爆区域
代码已提交码云，有兴趣的可以下载看看 https://git.oschina.net/joy_yuan/ShoppingMall 本次代码效果截图： 效果如上图所示，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 <?xmlversion= "1.0" encoding= "utf-8" ?> <LinearLayoutxmlns: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 <?xmlversion= "1.0" encoding= "utf-8" ?> <LinearLayoutxmlns: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部分代码 *@paramparent *@paramviewType当前的类型 *@return返回一个用来展示的控件的布局，如下方的R。layout.banner_viewpager这个布局的页面等 */ @Override public RecyclerView.ViewHolderonCreateViewHolder(ViewGroupparent, 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里的绑定数据 *@paramholder *@paramposition */ @Override public void onBindViewHolder(RecyclerView.ViewHolderholder, int position){ //通过position，来获取当前是哪个类型 if (getItemViewType(position)==BANNER){ //是banner类型，将holder强转为bannerviewholder BannerViewHolderbannerViewHolder=(BannerViewHolder)holder; bannerViewHolder.setData(resultBean.getBanner_info()); } else if (getItemViewType(position)==CHANNEL){ ChannelViewHolderchannelViewHolder=(ChannelViewHolder)holder; channelViewHolder.setData(resultBean.getChannel_info()); } else if (getItemViewType(position)==ACT){ ActViewHolderactviewholder=(ActViewHolder)holder; actviewholder.setData(resultBean.getAct_info()); } else if (getItemViewType(position)==SECKILL){ //秒杀 SeckillViewHolderseckillViewHolder=(SeckillViewHolder)holder; seckillViewHolder.setData(resultBean.getSeckill_info()); } else if (getItemViewType(position)==RECOMMEND){ RecommendViewHolderrecommendViewHolder=(RecommendViewHolder)holder; recommendViewHolder.setData(resultBean.getRecommend_info()); } else if (getItemViewType(position)==HOT){ HotViewHolderhotViewHolder=(HotViewHolder)holder; hotViewHolder.setData(resultBean.getHot_info()); } } /** *推荐的viewholder */ class RecommendViewHolder extends RecyclerView.ViewHolder{ TextViewtv_more_remommend; GridViewgv_commend; public RecommendViewHolder( final Contextcontext,Viewinflate){ 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,Viewview, int position, long id){ Toast.makeText(context, "position==" +position,Toast.LENGTH_SHORT).show(); //点击后跳转到详情页面 startGoodsInfoActivity(); } }); } 3 、设置适配器，来显示数据 public void setData(List<ResultBeanData.ResultBean.RecommendInfoBean>recommend_info){ RecommendAdapteradapter= 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; /** *Createdby原立鹏on2017/8/29. */ public class RecommendAdapter extends BaseAdapter{ private final Contextcontext; private final List<ResultBeanData.ResultBean.RecommendInfoBean>recommend_info; public RecommendAdapter(Contextcontext,List<ResultBeanData.ResultBean.RecommendInfoBean>recommend_info){ this .context=context; this .recommend_info=recommend_info; } @Override public int getCount(){ return recommend_info.size(); } @Override public ViewgetView( int position,ViewconvertView,ViewGroupparent){ ViewHolderviewholder= 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.RecommendInfoBeanrecommendInfoBean=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 ObjectgetItem( int position){ return recommend_info.get(position); } @Override public long getItemId( int position){ return position; } class ViewHolder{ TextViewtv_name; TextViewtv_price; ImageViewiv_recommend; } } 明天讲解利用scrollviewcontainer这个第三方插件，来实现点击商品后跳转商品详情页面。 本文转自老婆的宝宝51CTO博客，原文链接：http://blog.51cto.com/cm0425/1960968，如需转载请自行联系原作者
