一入商城深似海~
商城类的App,确实是有许多东西值得学习,但是只要略微斟酌一下,你又会发现,它们之间存在着许多不谋而合的相似,也就是所谓的雷同~既然如此,让我们也来接下地气,先从一个简单的首页做起吧~
实现的效果如下图:
准备:
①build.gradle文件需要添加的依赖:
compile 'com.jakewharton:butterknife:7.0.1'
compile 'com.android.support:recyclerview-v7:25.0.1'
compile 'com.zhy:okhttputils:2.6.2'
compile 'com.alibaba:fastjson:1.2.21'
compile 'com.youth.banner:banner:1.4.4'
compile 'com.github.bumptech.glide:glide:3.7.0'
②相关的联网权限不要忘了!
现在正式开始吧:
1.大布局就是一个简单的RecyclerView:
2.接着我们就要实例化RecyclerView,并设置适配器了。
但是在设置适配器之前我们要先准备好数据,这里我们使用okhttputils进行联网请求数据,并使用fastJson进行解析:
(注:bean类WomenBean直接使用GsonFormat生成)
private void getDataFromNet() {
String url = "http://api.funwear.com/mbfun_server/index.php?m=Home&a=getAppLayoutV2&page=home&cid=2&deviceCode=00000000-6469-5d7a-ffff-ffff99d603a9&osCode=android&osVersion=19&deviceId=00000000-6469-5d7a-ffff-ffff99d603a9&token=&source=android&version=v4.2.2&osName=HTC+M8t&appName=youfanguanfang";
OkHttpUtils.
get()
.url(url)
.build()
.execute(new StringCallback() {
@Override
public void onError(okhttp3.Call call, Exception e, int id) {
Log.e("TAG", "联网失败" + e.getMessage());
}
@Override
public void onResponse(String response, int id) {
Log.e("TAG", "联网成功==" + response);
processData(response);
}
});
}
private void processData(String json) {
JSONObject jsonObject = JSON.parseObject(json);
String data = jsonObject.getString("data");
JSONObject jsonData = JSON.parseObject(data);
String module = jsonData.getString("module");
List moduleBeanList = parseArray(module, WomenBean.WomenData.ModuleBean.class);
if (moduleBeanList != null) {
homeRecycleAdapter = new HomeRecycleViewAdapter(mContext, moduleBeanList);
rvHome.setAdapter(homeRecycleAdapter);
GridLayoutManager manager = new GridLayoutManager(getActivity(), 1);
rvHome.setLayoutManager(manager);
}
}
3.下面我们就可以来写我们的适配器类(HomeRecyclerViewAdapter.java)了:
让我们先来了解一下各个方法是来干什么的
public class HomeRecycleViewAdapter extends RecyclerView.Adapter {
@Override
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
return null;
}
@Override
public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
}
@Override
public int getItemCount() {
return 0;
}
@Override
public int getItemViewType(int position) {
return super.getItemViewType(position);
}
}
4.这里我仅以四种类型为例
public static final int BLACK_5_BANNER0 = 0;
public static final int TODAY_NEW_GV1 = 1;
public static final int PIN_PAI_IV2=2;
public static final int DAPEIQS_GV3 =3;
public int currentType = BLACK_5_BANNER0;
写构造器并传入参数,完善getItemCount() 和 getItemType()方法
private final Context mContext;
private final List moduleBeanList;
private final LayoutInflater mLayoutInflater;
public HomeRecycleViewAdapter3(Context mContext, List moduleBeanList) {
this.mContext = mContext;
this.moduleBeanList = moduleBeanList;
mLayoutInflater = LayoutInflater.from(mContext);
}
@Override
public int getItemCount() {
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.下面就来一一实现这四种类型
5.1设置 第1种类型--黑色星期五(使用的是banner)的适配器
@Override
public int getItemCount() {
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 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 module0data) {
List imageUrls = new ArrayList<>();
for (int i = 0; i < module0data.size(); i++) { string image =" module0data.get(i).getImg(); " imageurls.add(image); ="" } ="" ="" 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.with(context).load(path).into(imageview); ="" } <="" code="">
public class TodayGVAdapter extends BaseAdapter {
private final Context mContext;
private final List module1data;
public TodayGVAdapter(Context mContext, List 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) {
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();
}
WomenBean.WomenData.ModuleBean.DataBean datasig = module1data.get(position);
Glide.with(mContext).load(datasig.getImg()).into(holder.iv_channel);
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() {
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 module0data = moduleBeanList.get(0).getData();
bbnViewHolder.setData(module0data);
} else if (getItemViewType(position) == TODAY_NEW_GV1) {
TODAYViewHolder todayViewHolder = (TODAYViewHolder) holder;
List module1data = moduleBeanList.get(1).getData();
todayViewHolder.setData(module1data);
} else if (getItemViewType(position) == PIN_PAI_IV2) {
PINPAIViewHolder pinpaiViewHolder = (PINPAIViewHolder) holder;
List 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 pinpai2data) {
Glide.with(mContext)
.load(pinpai2data.get(0).getImg())
.diskCacheStrategy(DiskCacheStrategy.ALL)
.crossFade()
.into(ivNewChok);
}
}
5.4设置 第4种类型--搭配趋势--(使用RecyclerView实现)的适配器
@Override
public int getItemCount() {
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) {
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 module0data = moduleBeanList.get(0).getData();
bbnViewHolder.setData(module0data);
} else if (getItemViewType(position) == TODAY_NEW_GV1) {
TODAYViewHolder todayViewHolder = (TODAYViewHolder) holder;
List module1data = moduleBeanList.get(1).getData();
todayViewHolder.setData(module1data);
} else if (getItemViewType(position) == PIN_PAI_IV2) {
PINPAIViewHolder pinpaiViewHolder = (PINPAIViewHolder) holder;
List pinpai2data = moduleBeanList.get(2).getData();
pinpaiViewHolder.setData(pinpai2data);
} else if (getItemViewType(position) == DAPEIQS_GV3) {
DaPeiViewHolder dapeiViewHolder = (DaPeiViewHolder) holder;
List 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 dapeiqs6data) {
DaPeiQSRecycleViewAdapter adapter = new DaPeiQSRecycleViewAdapter(mContext, dapeiqs6data);
dapeiqs_rv.setAdapter(adapter);
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 dapeiqs6data;
public DaPeiQSRecycleViewAdapter(Context mContext, List 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.with(mContext)
.load(dapeiBean.getImg())
.into(iv_figure);
}
}
}
到此,一个基本的商城首页就完成了,其实大家看了思路和代码后大概也都明白了,它并不难,只是比较花时间,需要对每种类型都进行相应的操作。所以现在你也可以没事来整个商城页面玩玩了~
感兴趣的朋友可以看看我的源代码:(已上传至我的资源:商城首页.rar)
(ps:但是因为是从项目中抽出来的,所以可能会有些许凌乱,还望大家见谅~)