Android使用分類型RecyclerView仿各大商城首頁
**正所謂,一入商城深似海~
商城類的App,確實是有許多東西值得學(xué)習(xí),但是只要略微斟酌一下,你又會發(fā)現(xiàn),它們之間存在著許多不謀而合的相似,也就是所謂的雷同~既然如此,讓我們也來接下地氣,先從一個簡單的首頁做起吧~**
實現(xiàn)的效果如下圖:

1.大布局就是一個簡單的RecyclerView:
也可以通過添加多個header實現(xiàn)
4.這里我僅以四種類型為例
/** * 4種類型 */ /** * 類型1:黑色星期五--使用banner實現(xiàn) */ public static final int BLACK_5_BANNER0 = 0; /** *類型2:今日新品--使用GridView實現(xiàn) */ public static final int TODAY_NEW_GV1 = 1; /** * 類型3:品牌福利--使用ImageView實現(xiàn) */ public static final int PIN_PAI_IV2=2; /** * 類型4:搭配趨勢--使用RecyclerView實現(xiàn) */ public static final int DAPEIQS_GV3 =3; /** * 當(dāng)前類型 */ public int currentType = BLACK_5_BANNER0;
寫構(gòu)造器并傳入?yún)?shù),完善getItemCount() 和 getItemType()方法
/**
* 數(shù)據(jù)對象
*/
private final Context mContext;
private final List<WomenBean.WomenData.ModuleBean> moduleBeanList;
//以后用它來初始化布局
private final LayoutInflater mLayoutInflater;
//構(gòu)造器
public HomeRecycleViewAdapter3(Context mContext, List<WomenBean.WomenData.ModuleBean> moduleBeanList) {
this.mContext = mContext;
this.moduleBeanList = moduleBeanList;
//以后用它來初始化布局
mLayoutInflater = LayoutInflater.from(mContext);
}
@Override
public int getItemCount() {
//以后完成后改為4,現(xiàn)在只完成第一種類型暫時寫1
return 1;
}
@Override
public int getItemViewType(int position) {
switch (position) {
case BLACK_5_BANNER0:
currentType = BLACK_5_BANNER0;
break;
case TODAY_NEW_GV1:
currentType = TODAY_NEW_GV1;
break;
case PIN_PAI_IV2:
currentType = PIN_PAI_IV2;
break;
case DAPEIQS_GV3:
currentType = DAPEIQS_GV3;
break;
}
return currentType;
}
5.下面就來一一實現(xiàn)這四種類型
5.1設(shè)置 第1種類型–黑色星期五(使用的是banner)的適配器
@Override
public int getItemCount() {
//以后完成后改為4,現(xiàn)在只完成第一種類型暫時寫1
return 1;
}
@Override
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
if (viewType == BLACK_5_BANNER0) {
return new BBNViewHolder(mContext, mLayoutInflater.inflate(R.layout.banner_viewpager, null));
}
return null;
}
@Override
public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
if (getItemViewType(position) == BLACK_5_BANNER0) {
BBNViewHolder bbnViewHolder = (BBNViewHolder) holder;
List<WomenBean.WomenData.ModuleBean.DataBean> module0data = moduleBeanList.get(0).getData();
bbnViewHolder.setData(module0data);
}
}
public class BBNViewHolder extends RecyclerView.ViewHolder {
private final Context mContext;
private Banner banner;
public BBNViewHolder(Context mContext, View itemView) {
super(itemView);
this.mContext = mContext;
banner = (Banner) itemView.findViewById(R.id.banner);
}
public void setData(List<WomenBean.WomenData.ModuleBean.DataBean> module0data) {
//得到圖片地址的集合
List<String> imageUrls = new ArrayList<>();
for (int i = 0; i < module0data.size(); i++) {
String image = module0data.get(i).getImg();
imageUrls.add(image);
}
//新版的banner的使用----偷下懶的使用方法
banner.setImages(imageUrls).setImageLoader(new GlideImageLoader()).start();
}
}
public class GlideImageLoader extends ImageLoader {
@Override
public void displayImage(Context context, Object path, ImageView imageView) {
imageView.setScaleType(ImageView.ScaleType.FIT_XY);
//Glide 加載圖片簡單用法
Glide.with(context).load(path).into(imageView);
}
}
5.2設(shè)置 第2種類型–今日新品–(使用GridView實現(xiàn))的適配器
public class TodayGVAdapter extends BaseAdapter {
private final Context mContext;
private final List<WomenBean.WomenData.ModuleBean.DataBean> module1data;
public TodayGVAdapter(Context mContext, List<WomenBean.WomenData.ModuleBean.DataBean> module1data) {
this.mContext = mContext;
this.module1data = module1data;
}
@Override
public int getCount() {
return module1data == null ? 0 : module1data.size();
}
@Override
public Object getItem(int i) {
return null;
}
@Override
public long getItemId(int i) {
return 0;
}
@Override
public View getView(int position, View convertView, ViewGroup viewGroup) {
ViewHolder holder;
if (convertView == null) {
//item的布局:垂直線性,ImagView+TextView
convertView = View.inflate(mContext, R.layout.item_channel, null);
holder = new ViewHolder();
holder.iv_channel = (ImageView) convertView.findViewById(R.id.iv_channel);
holder.tv_channel = (TextView) convertView.findViewById(R.id.tv_channel);
convertView.setTag(holder);
} else {
holder = (ViewHolder) convertView.getTag();
}
//裝配數(shù)據(jù)
WomenBean.WomenData.ModuleBean.DataBean datasig = module1data.get(position);
//使用Glide加載圖片
Glide.with(mContext).load(datasig.getImg()).into(holder.iv_channel);
//設(shè)置文本
holder.tv_channel.setText(datasig.getTitle());
return convertView;
}
public static class ViewHolder {
public ImageView iv_channel;
public TextView tv_channel;
}
}
5.3 第3種類型–品牌福利–(直接使用ImagView)
@Override
public int getItemCount() {
//以后完成后改為4,現(xiàn)在只完成第3種類型暫時寫3
return 3;
}
@Override
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
if (viewType == BLACK_5_BANNER0) {
return new BBNViewHolder(mContext, mLayoutInflater.inflate(R.layout.banner_viewpager, null));
} else if (viewType == TODAY_NEW_GV1) {
return new TODAYViewHolder(mContext, mLayoutInflater.inflate(R.layout.gv_channel, null));
} else if (viewType == PIN_PAI_IV2) {
return new PINPAIViewHolder(mContext, mLayoutInflater.inflate(R.layout.iv_pinpai, null));
}
return null;
}
@Override
public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
if (getItemViewType(position) == BLACK_5_BANNER0) {
BBNViewHolder bbnViewHolder = (BBNViewHolder) holder;
List<WomenBean.WomenData.ModuleBean.DataBean> module0data = moduleBeanList.get(0).getData();
bbnViewHolder.setData(module0data);
} else if (getItemViewType(position) == TODAY_NEW_GV1) {
TODAYViewHolder todayViewHolder = (TODAYViewHolder) holder;
List<WomenBean.WomenData.ModuleBean.DataBean> module1data = moduleBeanList.get(1).getData();
todayViewHolder.setData(module1data);
} else if (getItemViewType(position) == PIN_PAI_IV2) {
PINPAIViewHolder pinpaiViewHolder = (PINPAIViewHolder) holder;
List<WomenBean.WomenData.ModuleBean.DataBean> pinpai2data = moduleBeanList.get(2).getData();
pinpaiViewHolder.setData(pinpai2data);
}
}
class PINPAIViewHolder extends RecyclerView.ViewHolder {
private final Context mContext;
@Bind(R.id.iv_new_chok)
ImageView ivNewChok;
PINPAIViewHolder(Context mContext, View itemView) {
super(itemView);
this.mContext = mContext;
ButterKnife.bind(this, itemView);
ivNewChok = (ImageView) itemView.findViewById(R.id.iv_new_chok);
}
public void setData(List<WomenBean.WomenData.ModuleBean.DataBean> pinpai2data) {
//使用Glide加載圖片
Glide.with(mContext)
.load(pinpai2data.get(0).getImg())
.diskCacheStrategy(DiskCacheStrategy.ALL)
.crossFade() //設(shè)置淡入淡出效果,默認(rèn)300ms,可以傳參
.into(ivNewChok);
}
}
5.4設(shè)置 第4種類型–搭配趨勢–(使用RecyclerView實現(xiàn))的適配器
@Override
public int getItemCount() {
//四種類型都已經(jīng)完成,返回4
return 4;
}
@Override
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
if (viewType == BLACK_5_BANNER0) {
return new BBNViewHolder(mContext, mLayoutInflater.inflate(R.layout.banner_viewpager, null));
} else if (viewType == TODAY_NEW_GV1) {
return new TODAYViewHolder(mContext, mLayoutInflater.inflate(R.layout.gv_channel, null));
} else if (viewType == PIN_PAI_IV2) {
return new PINPAIViewHolder(mContext, mLayoutInflater.inflate(R.layout.iv_pinpai, null));
} else if (viewType == DAPEIQS_GV3) {
//布局:垂直線性,TextView+RecyclerView
return new DaPeiViewHolder(mContext, mLayoutInflater.inflate(R.layout.dapeiqs_rv, null));
}
return null;
}
@Override
public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
if (getItemViewType(position) == BLACK_5_BANNER0) {
BBNViewHolder bbnViewHolder = (BBNViewHolder) holder;
List<WomenBean.WomenData.ModuleBean.DataBean> module0data = moduleBeanList.get(0).getData();
bbnViewHolder.setData(module0data);
} else if (getItemViewType(position) == TODAY_NEW_GV1) {
TODAYViewHolder todayViewHolder = (TODAYViewHolder) holder;
List<WomenBean.WomenData.ModuleBean.DataBean> module1data = moduleBeanList.get(1).getData();
todayViewHolder.setData(module1data);
} else if (getItemViewType(position) == PIN_PAI_IV2) {
PINPAIViewHolder pinpaiViewHolder = (PINPAIViewHolder) holder;
List<WomenBean.WomenData.ModuleBean.DataBean> pinpai2data = moduleBeanList.get(2).getData();
pinpaiViewHolder.setData(pinpai2data);
} else if (getItemViewType(position) == DAPEIQS_GV3) {
DaPeiViewHolder dapeiViewHolder = (DaPeiViewHolder) holder;
List<WomenBean.WomenData.ModuleBean.DataBean> dapeiqs6data = moduleBeanList.get(6).getData();
dapeiViewHolder.setData(dapeiqs6data);
}
}
class DaPeiViewHolder extends RecyclerView.ViewHolder {
private final Context mContext;
private RecyclerView dapeiqs_rv;
public DaPeiViewHolder(Context mContext, View itemView) {
super(itemView);
this.mContext = mContext;
dapeiqs_rv = (RecyclerView) itemView.findViewById(R.id.dapeiqs_rv);
}
public void setData(List<WomenBean.WomenData.ModuleBean.DataBean> dapeiqs6data) {
//1.已有數(shù)據(jù)
//2.設(shè)置適配器
DaPeiQSRecycleViewAdapter adapter = new DaPeiQSRecycleViewAdapter(mContext, dapeiqs6data);
dapeiqs_rv.setAdapter(adapter);
//recycleView不僅要設(shè)置適配器還要設(shè)置布局管理者,否則圖片不顯示
LinearLayoutManager manager = new LinearLayoutManager(mContext, LinearLayoutManager.HORIZONTAL, false);
dapeiqs_rv.setLayoutManager(manager);
}
}
public class DaPeiQSRecycleViewAdapter extends RecyclerView.Adapter {
private final Context mContext;
private final List<WomenBean.WomenData.ModuleBean.DataBean> dapeiqs6data;
public DaPeiQSRecycleViewAdapter(Context mContext, List<WomenBean.WomenData.ModuleBean.DataBean> dapeiqs6data) {
this.mContext = mContext;
this.dapeiqs6data = dapeiqs6data;
}
@Override
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
return new MyViewHolder(LayoutInflater.from(mContext).inflate(R.layout.item_dapeiqs, null));
}
@Override
public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
MyViewHolder myViewHolder = (MyViewHolder) holder;
myViewHolder.setData(position);
}
@Override
public int getItemCount() {
return dapeiqs6data.size();
}
class MyViewHolder extends RecyclerView.ViewHolder {
private ImageView iv_figure;
public MyViewHolder(View itemView) {
super(itemView);
iv_figure = (ImageView) itemView.findViewById(R.id.iv_figure);
}
public void setData(int position) {
WomenBean.WomenData.ModuleBean.DataBean dapeiBean = dapeiqs6data.get(position);
//使用Glide加載圖片
Glide.with(mContext)
.load(dapeiBean.getImg())
.into(iv_figure);
}
}
}
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
android實現(xiàn)緩存圖片等數(shù)據(jù)
本文給大家分享的是Android采用LinkedHashMap自帶的LRU 算法緩存數(shù)據(jù)的方法和示例,有需要的小伙伴可以參考下。2015-07-07
Android使用SoundPool實現(xiàn)播放音效
這篇文章主要為大家詳細(xì)介紹了Android使用SoundPool實現(xiàn)播放音效,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2019-11-11
Android使用RollViewPager實現(xiàn)輪播圖
這篇文章主要為大家詳細(xì)介紹了Android使用RollViewPager實現(xiàn)輪播圖,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-04-04
Android中判斷網(wǎng)絡(luò)連接狀態(tài)的方法
App判斷用戶是否聯(lián)網(wǎng)是很普遍的需求,這篇文章主要介紹了Android中判斷網(wǎng)絡(luò)連接狀態(tài)的方法,感興趣的朋友可以參考一下2016-02-02
Android自定義view實現(xiàn)圓形、圓角和橢圓圖片(BitmapShader圖形渲染)
這篇文章運用實例代碼介紹如何在Android中自定義view,使用BitmapShader圖形渲染方法來實現(xiàn)圓形、圓角和橢圓的繪制,有需要的可以參考借鑒。2016-08-08
Android根據(jù)電話號碼獲得聯(lián)系人頭像實例代碼
這篇文章主要介紹了Android根據(jù)電話號碼獲得聯(lián)系人頭像實例代碼,是Android程序開發(fā)中非常重要的技巧,需要的朋友可以參考下2014-09-09

