标签：手机商城第六天 利用gridview实现推荐区域以及火爆区域
代码已提交码云，有兴趣的可以下载看看
https://git.oschina.net/joy_yuan/ShoppingMall
本次代码效果截图：
效果如上图所示，2个区域，一个是分三列显示，一个是分2列显示，代码类似，就拿一个区域做例子好了
一、推荐区域
布局文件： 整体是个线性布局，里面有2个子布局，一个线性布局，一个gridview.
重点是gridview里，设置numCloumns=3，表示分三列显示数据
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns: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的布局如下:
外围是线性布局，然后里面包含图片、文本
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns: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
/**
* 创建viewholder 相当于baseadapter里的getview，相当于viewholder部分代码
* @param parent
* @param viewType 当前的类型
* @return 返回一个用来展示的控件的布局，如下方的R。layout.banner_viewpager这个布局的页面等
*/
@Override
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, 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里的绑定数据
* @param holder
* @param position
*/
@Override
public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
//通过position，来获取当前是哪个类型
if (getItemViewType(position)==BANNER){
//是banner类型，将holder强转为bannerviewholder
BannerViewHolder bannerViewHolder= (BannerViewHolder) holder;
bannerViewHolder.setData(resultBean.getBanner_info());
}else if (getItemViewType(position)==CHANNEL){
ChannelViewHolder channelViewHolder= (ChannelViewHolder) holder;
channelViewHolder.setData(resultBean.getChannel_info());
}else if (getItemViewType(position)==ACT){
ActViewHolder actviewholder= (ActViewHolder) holder;
actviewholder.setData(resultBean.getAct_info());
}else if (getItemViewType(position)==SECKILL){ //秒杀
SeckillViewHolder seckillViewHolder= (SeckillViewHolder) holder;
seckillViewHolder.setData(resultBean.getSeckill_info());
}else if (getItemViewType(position)==RECOMMEND){
RecommendViewHolder recommendViewHolder= (RecommendViewHolder) holder;
recommendViewHolder.setData(resultBean.getRecommend_info());
}else if (getItemViewType(position)==HOT){
HotViewHolder hotViewHolder= (HotViewHolder) holder;
hotViewHolder.setData(resultBean.getHot_info());
}
}
/**
* 推荐的viewholder
*/
class RecommendViewHolder extends RecyclerView.ViewHolder{
TextView tv_more_remommend;
GridView gv_commend;
public RecommendViewHolder(final Context context, View inflate) {
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, View view, int position, long id) {
Toast.makeText(context, "position=="+position, Toast.LENGTH_SHORT).show();
//点击后跳转到详情页面
startGoodsInfoActivity();
}
});
}
3、 设置适配器，来显示数据
public void setData(List<ResultBeanData.ResultBean.RecommendInfoBean> recommend_info) {
RecommendAdapter adapter=new RecommendAdapter(context,recommend_info);
gv_commend.setAdapter(adapter);
}
}三、gridview的适配器，与listview的适配器类似，都是extends BaseAdapter，实现里面的方法
注意在里面创建内部类viewholder，用来临时存放每个gridview的item内部控件
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;
/**
* Created by 原立鹏 on 2017/8/29.
*/
public class RecommendAdapter extends BaseAdapter {
private final Context context;
private final List<ResultBeanData.ResultBean.RecommendInfoBean> recommend_info;
public RecommendAdapter(Context context, List<ResultBeanData.ResultBean.RecommendInfoBean> recommend_info) {
this.context=context;
this.recommend_info=recommend_info;
}
@Override
public int getCount() {
return recommend_info.size();
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
ViewHolder viewholder=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.RecommendInfoBean recommendInfoBean = 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 Object getItem(int position) {
return recommend_info.get(position);
}
@Override
public long getItemId(int position) {
return position;
}
class ViewHolder {
TextView tv_name;
TextView tv_price;
ImageView iv_recommend;
}
}明天讲解利用scrollviewcontainer这个第三方插件，来实现点击商品后跳转商品详情页面。
本文出自 “YuanGuShi” 博客，请务必保留此出处http://cm0425.blog.51cto.com/10819451/1960968
手机商城第六天，利用GridView实现推荐区域以及火爆区域
标签：手机商城第六天 利用gridview实现推荐区域以及火爆区域
原文地址：http://cm0425.blog.51cto.com/10819451/1960968
