首页新品推荐的布局效果如下图：
这块布局是使用LinearLayout和GridView去实现，新建recommend_item.xml，代码如下所示：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#fff"> <LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:padding="10dp"> <ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/home_arrow_left_new" /> <TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:text="新品推荐"
android:textColor="#000" /> <TextView
android:id="@+id/tv_more_recommend"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:drawablePadding="5dp"
android:drawableRight="@mipmap/home_arrow_right"
android:gravity="end"
android:text="查看更多" />
</LinearLayout> <GridView
android:id="@+id/gv_recommend"
android:layout_width="match_parent"
android:layout_height="380dp"
android:numColumns="3"/> </LinearLayout>
继续在HomeFragmentAdapter类中去添加推荐的ViewHolder，在onCreateViewHolder()方法中创建RecommendViewHolder，代码如下所示：
package com.nyl.shoppingmall.home.adapter; import android.content.Context;
import android.os.Handler;
import android.os.Message;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.GridView;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast; import com.bumptech.glide.Glide;
import com.nyl.shoppingmall.R;
import com.nyl.shoppingmall.home.bean.ResultBeanData;
import com.nyl.shoppingmall.utils.Constants;
import com.youth.banner.Banner;
import com.youth.banner.BannerConfig;
import com.youth.banner.Transformer;
import com.youth.banner.listener.OnBannerClickListener;
import com.youth.banner.listener.OnLoadImageListener;
import com.zhy.magicviewpager.transformer.ScaleInTransformer; import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Date;
import java.util.List; /**
* 首页适配器
*/ public class HomeFragmentAdapter extends RecyclerView.Adapter{ /**
* 广告幅类型
*/
public static final int BANNER = 0; /**
* 频道类型
*/
public static final int CHANNEL = 1; /**
* 活动类型
*/
public static final int ACT = 2; /**
* 秒杀类型
*/
public static final int SECKILL = 3; /**
* 推荐类型
*/
public static final int RECOMMEND = 4; /**
* 热卖类型
*/
public static final int HOT = 5; /**
* 初始化布局
*/
private LayoutInflater mLayoutInflater; /**
* 数据
*/
private ResultBeanData.ResultBean resultBean;
private Context mContext; /**
* 当前类型
*/
private int currenType = BANNER; public HomeFragmentAdapter(Context mContext, ResultBeanData.ResultBean resultBean) {
this.mContext = mContext;
this.resultBean = resultBean;
mLayoutInflater = LayoutInflater.from(mContext);
} /**
* 相当于getView创建ViewHolder部分代码
* @param parent
* @param viewType 当前的类型
* @return
*/
@Override
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
//广告福
if (viewType == BANNER){
//创建BannerViewHolder，Banner里面传布局文件
return new BannerViewHolder(mContext,mLayoutInflater.inflate(R.layout.banner_viewpager,null));
//频道
}else if (viewType == CHANNEL){
return new ChannelViewHolder(mContext,mLayoutInflater.inflate(R.layout.channel_item,null));
//活动
}else if (viewType == ACT){
return new ActViewHolder(mContext,mLayoutInflater.inflate(R.layout.act_item,null));
//秒杀
}else if (viewType == SECKILL){
return new SeckillViewHolder(mContext,mLayoutInflater.inflate(R.layout.seckkill_item,null));
//推荐
}else if (viewType == RECOMMEND){
return new RecommendViewHolder(mContext,mLayoutInflater.inflate(R.layout.recommend_item,null));
}
return null;
} /**
* 相当于getView中绑定数据模块
* @param holder
* @param position
*/
@Override
public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
//轮循广告
if (getItemViewType(position) == BANNER){
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());
}
} /**
* 广告幅
*/
class BannerViewHolder extends RecyclerView.ViewHolder{ private Context mContext;
private Banner banner; public BannerViewHolder(Context mContext, View itemView) {
super(itemView);
this.mContext = mContext;
this.banner = (Banner) itemView.findViewById(R.id.banner);
} public void setData(List<ResultBeanData.ResultBean.BannerInfoEntity> banner_info) {
//得到图片集合地址
List<String> imagesUrl = new ArrayList<>();
for (int i = 0;i<banner_info.size();i++){
String imageUrl = banner_info.get(i).getImage();
imagesUrl.add(imageUrl);
}
//设置循环指示点
banner.setBannerStyle(BannerConfig.CIRCLE_INDICATOR);
//设置手风琴效果
banner.setBannerAnimation(Transformer.Accordion);
//设置Banner图片数据
banner.setImages(imagesUrl, new OnLoadImageListener() {
@Override
public void OnLoadImage(ImageView view, Object url) {
//联网请求图片-Glide
Glide.with(mContext).load(Constants.BASE_URL_IMAGE + url).into(view);
}
});
//设置点击事件
banner.setOnBannerClickListener(new OnBannerClickListener() {
@Override
public void OnBannerClick(int position) {
Toast.makeText(mContext,"position=="+position,Toast.LENGTH_SHORT).show();
}
});
}
} /**
* 频道
*/
class ChannelViewHolder extends RecyclerView.ViewHolder{ private Context mContext;
private GridView gv_channel;
private ChannelAdapter adapter; public ChannelViewHolder(Context mContext, View itemView) {
super(itemView);
this.mContext = mContext;
gv_channel = (GridView) itemView.findViewById(R.id.gv_channel);
} public void setData(List<ResultBeanData.ResultBean.ChannelInfoBean> channel_info) {
//得到数据后，就设置GridView的适配器
adapter = new ChannelAdapter(mContext,channel_info);
gv_channel.setAdapter(adapter); //设置item的点击事件
gv_channel.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> adapterView, View view, int position, long l) {
Toast.makeText(mContext,"position"+position,Toast.LENGTH_SHORT).show();
}
});
}
} /**
* 活动
*/
class ActViewHolder extends RecyclerView.ViewHolder{ private Context mContext;
private ViewPager act_viewpager; public ActViewHolder(Context mContext,View itemView) {
super(itemView);
this.mContext = mContext;
act_viewpager = (ViewPager) itemView.findViewById(R.id.act_viewpager);
} public void setData(final List<ResultBeanData.ResultBean.ActInfoEntity> act_info) {
//设置间距
act_viewpager.setPageMargin(20);
act_viewpager.setOffscreenPageLimit(3);//>=3
//setPageTransformer 决定动画效果
act_viewpager.setPageTransformer(true, new ScaleInTransformer());
//有数据后，就设置数据适配器
act_viewpager.setAdapter(new PagerAdapter() {
@Override
public int getCount() {
return act_info.size();
} /**
*
* @param view 页面
* @param object instantiateItem方法返回的值
* @return
*/
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
} /**
*
* @param container ViewPager
* @param position 对应页面的位置
* @return
*/
@Override
public Object instantiateItem(ViewGroup container, final int position) {
//实例化ImageView
ImageView imageView = new ImageView(mContext);
//设置ImageView的拉伸
imageView.setScaleType(ImageView.ScaleType.FIT_XY);
//根据Glide设置图片
Glide.with(mContext).load(Constants.BASE_URL_IMAGE+act_info.get(position).getIcon_url()).into(imageView);
//添加到容器中
container.addView(imageView); //设置点击事件
imageView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Toast.makeText(mContext,"position=="+position,Toast.LENGTH_SHORT).show();
}
});
return imageView;
} @Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View) object);
}
});
}
} /**
* 秒杀
*/
class SeckillViewHolder extends RecyclerView.ViewHolder{ private Context mContext;
private TextView tv_time_seckill;
private TextView tv_more_seckill;
private RecyclerView rv_seckill;
private SeckillRecycleViewAdapter adapter; /**
* 相差多少时间-毫秒
*/
private long dt = 0;
//不断循环
private Handler handler = new Handler(){
@Override
public void handleMessage(Message msg) {
super.handleMessage(msg);
dt = dt - 1000;
//设置具体的时间
SimpleDateFormat dateFormat = new SimpleDateFormat("hh:mm:ss");
String time = dateFormat.format(new Date(dt));
tv_time_seckill.setText(time); handler.removeMessages(0);
//发送消息，不断减时间
handler.sendEmptyMessageDelayed(0,1000);
if (dt <= 0){
//把消息移除
handler.removeCallbacksAndMessages(null);
}
}
}; public SeckillViewHolder(Context mContext, View itemView) {
super(itemView);
this.mContext = mContext;
//初始化布局控件
tv_time_seckill = (TextView) itemView.findViewById(R.id.tv_time_seckill);
tv_more_seckill = (TextView) itemView.findViewById(R.id.tv_more_seckill);
rv_seckill = (RecyclerView) itemView.findViewById(R.id.rv_seckill);
} public void setData(ResultBeanData.ResultBean.SeckillInfoEntity seckill_info) {
//得到数据后，就是设置数据（TextView和RecyclerView）的数据
adapter = new SeckillRecycleViewAdapter(mContext,seckill_info.getList());
rv_seckill.setAdapter(adapter); //设置布局管理器
rv_seckill.setLayoutManager(new LinearLayoutManager(mContext,LinearLayoutManager.HORIZONTAL,false));
//设置item的点击事件
adapter.setOnSeckillRecyclerView(new SeckillRecycleViewAdapter.OnSeckillRecyclerView() {
@Override
public void onItemClick(int position) {
Toast.makeText(mContext,"秒杀"+position,Toast.LENGTH_SHORT).show();
}
});
//秒杀倒计时-毫秒
dt = Integer.valueOf(seckill_info.getEnd_time()) - Integer.valueOf(seckill_info.getStart_time());
//进入后1秒钟就去发送这个消息
handler.sendEmptyMessageDelayed(0,1000); }
} /**
* 推荐
*/
class RecommendViewHolder extends RecyclerView.ViewHolder{ private final Context mContext;
private TextView tv_more_recommend;
private GridView gv_recommend;
private RecommendGridViewAdapter adapter; public RecommendViewHolder(final Context mContext, View itemView) {
super(itemView);
this.mContext = mContext;
tv_more_recommend = (TextView) itemView.findViewById(R.id.tv_more_recommend);
gv_recommend = (GridView) itemView.findViewById(R.id.gv_recommend); //设置点击事件
gv_recommend.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> adapterView, View view, int position, long l) {
Toast.makeText(mContext,"position=="+position,Toast.LENGTH_SHORT).show();
}
});
} public void setData(List<ResultBeanData.ResultBean.RecommendInfoBean> recommend_info) {
//有数据了之后，就设置适配器
adapter = new RecommendGridViewAdapter(mContext,recommend_info);
gv_recommend.setAdapter(adapter); }
} /**
* 得到不同的类型
* @param position
* @return
*/
@Override
public int getItemViewType(int position) {
switch (position){
case BANNER: //广告幅
currenType = BANNER;
break;
case CHANNEL: //频道
currenType = CHANNEL;
break;
case ACT: //活动
currenType = ACT;
break;
case SECKILL: //秒杀
currenType = SECKILL;
break;
case RECOMMEND: //推荐
currenType = RECOMMEND;
break;
case HOT: //热卖
currenType = HOT;
break;
}
return currenType;
} /**
* 总共有多少个item
* @return
*/
@Override
public int getItemCount() {
return 5;
}
}
有数据了之后，下一步要做的就是使用适配器将数据展示出来，先设计gridView的item的布局，新建item_recommend_grid_view.xml，代码如下所示：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
android:orientation="vertical"
android:padding="10dp"> <ImageView
android:id="@+id/iv_recommend"
android:layout_width="100dp"
android:layout_height="100dp"
android:background="@mipmap/new_img_loading_2" /> <TextView
android:id="@+id/tv_name"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:ellipsize="end"
android:lines="2"
android:text="全款预售【喵鹿酱】樱桃蜜语 毛呢绣花 小高腰半裙"
android:textColor="#000" /> <TextView
android:id="@+id/tv_price"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="￥88.00"
android:textColor="#ff4242" />
</LinearLayout>
新建RecommendGridViewAdapter类，代码如下：
package com.nyl.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.nyl.shoppingmall.R;
import com.nyl.shoppingmall.home.bean.ResultBeanData;
import com.nyl.shoppingmall.utils.Constants; import java.util.List; /**
* 推荐GridView的适配器
*/ public class RecommendGridViewAdapter extends BaseAdapter{ private final Context mContext;
private final List<ResultBeanData.ResultBean.RecommendInfoBean> datas; public RecommendGridViewAdapter(Context mContext, List<ResultBeanData.ResultBean.RecommendInfoBean> recommend_info) {
this.mContext = mContext;
this.datas = recommend_info;
} @Override
public int getCount() {
return datas.size();
} @Override
public Object getItem(int i) {
return null;
} @Override
public long getItemId(int i) {
return 0;
} @Override
public View getView(int position, View view, ViewGroup viewGroup) {
ViewHolder viewHolder;
if (view == null){
view = View.inflate(mContext, R.layout.item_recommend_grid_view,null);
viewHolder = new ViewHolder();
viewHolder.iv_recommend = (ImageView) view.findViewById(R.id.iv_recommend);
viewHolder.tv_name = (TextView) view.findViewById(R.id.tv_name);
viewHolder.tv_price = (TextView) view.findViewById(R.id.tv_price);
view.setTag(viewHolder);
}else {
viewHolder = (ViewHolder) view.getTag();
}
//根据位置得到对应的数据
ResultBeanData.ResultBean.RecommendInfoBean recommendInfoBean = datas.get(position);
//设置网络图片
Glide.with(mContext).load(Constants.BASE_URL_IMAGE+recommendInfoBean.getFigure()).into(viewHolder.iv_recommend);
viewHolder.tv_name.setText(recommendInfoBean.getName());
viewHolder.tv_price.setText("¥"+recommendInfoBean.getCover_price());
return view;
}
static class ViewHolder{
ImageView iv_recommend;
TextView tv_name;
TextView tv_price;
}
}
关于首页推荐布局的内容就那么多！