商城项目实战 | 11.2 实现商城分类模块的一级目录和二级目录
2017-05-03 本文已影响695人
菜鸟窝
本文为菜鸟窝作者刘婷的连载。”商城项目实战”系列来聊聊仿”京东淘宝的购物商城”如何实现。
每个程序猿必备的110本经典编程书，免费领取地址：http://mp.weixin.qq.com/s/cx433vAj_CDLzmhOoUS6zA
在文章《商城项目实战 | 11.1 实现商城分类模块的一级目录和二级目录效果（一）》中已经详细介绍了一级目录的实现，下面就继续往下实现轮播广告以及二级目录的效果，效果图还是要先来贴一贴的。
效果图
实现轮播广告
分类模块中的轮播广告效果和主页的是一样的，就使用一样的方法实现就可以了。
1. 修改主布局
之前的主布局中只有右侧的一级目录 RecyclerView，现在就要添加轮播广告的控件 SliderLayout。
<?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"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:custom="http://schemas.android.com/tools"
android:orientation="vertical">
<com.liuting.cniao_shop.widget.CNiaoToolbar
android:id="@id/toolbar"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:title="分类"
android:layout_alignParentTop="true"
/>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="@dimen/basicPaddingTop">
<android.support.v7.widget.RecyclerView
android:id="@+id/category_recycler_view_top"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:background="@color/white"
>
</android.support.v7.widget.RecyclerView>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_marginLeft="2dp"
>
<com.daimajia.slider.library.SliderLayout
android:id="@+id/category_slider_ads"
android:layout_width="match_parent"
android:layout_height="180dp"
custom:pager_animation="Accordion"
custom:auto_cycle="true"
custom:indicator_visibility="visible"
custom:pager_animation_span="1100"
/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
2. 请求网络数据
这里的轮播广告栏所要请求的 Json 数据的格式和主页的一样的，所要使用的实体类也是之前已经定义过了的 BannerInfo 对象，里面包括了 name、imgUrl 和 ID 三个属性，实体类的具体定义就不展示了，直接请求网络数据了。
private void requestBannerData(int type) {
String url = Constants.API.BANNER+"?type="+type;
mHttpHelper.get(url, new SpotsCallBack<List<BannerInfo>>(getContext()){
@Override
public void onSuccess(Response response, List<BannerInfo> banners) {
...
}
@Override
public void onError(Response response, int code, Exception e) {
}
@Override
public void onFailure(Request request, Exception e) {
super.onFailure(request, e);
}
});
}
轮播广告的网络数据的请求写在了 requestBannerData() 方法中，相应地在请求成功 onSuccess() 方法、请求失败 onFailure() 以及请求出错的 onError() 方法中做处理。
3. 显示轮播图片
获取到了数据，下面就是要把广告图片加载显示出来。
private void showSliderViews(List<BannerInfo> banners){
if(banners !=null){
for (BannerInfo banner : banners){
DefaultSliderView sliderView = new DefaultSliderView(this.getActivity());
sliderView.image(banner.getImgUrl());
sliderView.description(banner.getName());
sliderView.setScaleType(BaseSliderView.ScaleType.Fit);
sliderAds.addSlider(sliderView);
}
}
sliderAds.setPresetIndicator(SliderLayout.PresetIndicators.Center_Bottom);
sliderAds.setCustomAnimation(new DescriptionAnimation());
sliderAds.setPresetTransformer(SliderLayout.Transformer.Default);
sliderAds.setDuration(3000);
}
广告图片的显示加载则写在了 showSliderViews() 方法中，最后只要把这个方法写入网络请求成功的 onSuccess() 中就大功告成了。
@Override
public void onSuccess(Response response, List<BannerInfo> banners) {
showSliderViews(banners);
}
4. 效果图
运行代码看下轮播广告的效果图。
效果图
轮播广告实现完成了，接下来就是最后一步，二级目录的实现。
实现二级目录
二级目录中是商品的网格列表，还是使用 RecyclerView，不过这次是网格形式的。
1. 修改主布局
在主布局中添加二级目录，这里还是使用 RecyclerView。
<?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"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:custom="http://schemas.android.com/tools"
android:orientation="vertical">
<com.liuting.cniao_shop.widget.CNiaoToolbar
android:id="@id/toolbar"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:title="分类"
android:layout_alignParentTop="true"
/>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="@dimen/basicPaddingTop">
<android.support.v7.widget.RecyclerView
android:id="@+id/category_recycler_view_top"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:background="@color/white"
>
</android.support.v7.widget.RecyclerView>
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollbars="none">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_marginLeft="2dp"
>
<com.daimajia.slider.library.SliderLayout
android:id="@+id/category_slider_ads"
android:layout_width="match_parent"
android:layout_height="180dp"
custom:pager_animation="Accordion"
custom:auto_cycle="true"
custom:indicator_visibility="visible"
custom:pager_animation_span="1100"
/>
<com.cjj.MaterialRefreshLayout
android:id="@+id/category_layout_refresh"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="10dp"
app:overlay="false"
app:wave_show="false"
app:progress_colors="@array/material_colors"
app:wave_height_type="higher"
app:progress_show_circle_backgroud="false"
>
<com.liuting.cniao_shop.widget.NoScrollRecyclerView
android:id="@+id/category_recycler_view_secondary"
android:layout_width="match_parent"
android:layout_height="match_parent">
</com.liuting.cniao_shop.widget.NoScrollRecyclerView>
</com.cjj.MaterialRefreshLayout>
</LinearLayout>
</ScrollView>
</LinearLayout>
</LinearLayout>
2. 定义商品实体类
public class WaresInfo implements Serializable{
private Long id;
private String name;
private String imgUrl;
private String description;
private Float price;
public Long getId() {
return id;
}
public void setId(Long id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getImgUrl() {
return imgUrl;
}
public void setImgUrl(String imgUrl) {
this.imgUrl = imgUrl;
}
public String getDescription() {
return description;
}
public void setDescription(String description) {
this.description = description;
}
public Float getPrice() {
return price;
}
public void setPrice(Float price) {
this.price = price;
}
}
id 就是商品 ID，name 是商品名称，imgUrl 是商品图片的路径，description 是商品描述，至于 price 就是价格了。
3. 实现商品列表 item 布局以及 Adapter
商品列表的布局中需要有图片实现、商品名称以及价格的显示，所以布局如下。
<?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="wrap_content"
android:background="@drawable/selector_list_item"
android:orientation="vertical"
android:padding="@dimen/basicPaddingTop">
<com.facebook.drawee.view.SimpleDraweeView
android:id="@+id/wares_drawee_img"
android:layout_width="@dimen/ware_grid_img_width"
android:layout_height="@dimen/ware_grid_img_height"
android:layout_alignParentLeft="true"
android:layout_gravity="center"></com.facebook.drawee.view.SimpleDraweeView>
<TextView
android:id="@+id/wares_tv_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:maxLines="3"
android:textColor="@color/gray"
android:textSize="16sp" />
<TextView
android:id="@+id/wares_tv_price"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:textColor="@color/crimson"
android:textSize="18sp" />
</LinearLayout>
item 布局写好了，就可以实现 Adapter，实现很简单，直接继承之前已经封装好的 SimpleAdapter。
public class WaresAdapter extends SimpleAdapter<WaresInfo> {
public WaresAdapter(Context context, List<WaresInfo> datas) {
super(context, R.layout.grid_item_wares_layout, datas);
}
@Override
protected void convert(BaseViewHolder viewHoder, WaresInfo item) {
viewHoder.getTextView(R.id.wares_tv_title).setText(item.getName());
viewHoder.getTextView(R.id.wares_tv_price).setText("￥" + item.getPrice());
SimpleDraweeView draweeView = (SimpleDraweeView) viewHoder.getView(R.id.wares_drawee_img);
draweeView.setImageURI(Uri.parse(item.getImgUrl()));
}
}
这里使用的是 SimpleDraweeView 来显示图片，也就是 Fresco 中的图片组件，具体可以参考文章《商城项目实战 | 7.1 强大的 Fresco 专为 Android 加载图片》。
4. 请求网络数据
同样的将二级目录商品列表的数据请求写在一个单独的方法中。
private void requestWares(long categoryId){
String url = Constants.API.WARES_LIST+"?categoryId="+categoryId+"&curPage="+currPage+"&pageSize="+pageSize;
mHttpHelper.get(url, new SpotsCallBack<PageInfo<WaresInfo>>(getActivity()) {
@Override
public void onError(Response response, int code, Exception e) {
super.onError(response, code, e);
}
@Override
public void onFailure(Request request, Exception e) {
super.onFailure(request, e);
}
@Override
public void onSuccess(Response response, PageInfo<WaresInfo> waresPage) {
....
}
});
}
5. 实现下拉刷新和加载更多
列表数据虽然是拿到了，但是有个问题，那就是要实现下拉刷新和加载更多，所以我们要先把下拉刷新和加载更多的方法写好，这里区分三种状态，分为正常状态 STATE_NORMAL，刷新状态 STATE_REFREH 以及加载更多状态 STATE_MORE。
private void refreshData(){
currPage =1;
state=STATE_REFREH;
requestWares(category_id);
}
刷新数据时，需要把当前页面 currPage 设置为1，同时状态变为刷新状态 STATE_REFREH，最后请求最新的网络数据。
而加载更多的实现就不一样了。
private void loadMoreData(){
currPage = ++currPage;
state = STATE_MORE;
requestWares(category_id);
}
加载更多则是不断往后获取更多的数据，当前页面 currPage 要加1。
6. 显示商品列表
根据不同的状态，来显示商品列表，刷新时刷新数据，加载更多时获取更多的数据，正常状态时初始化数据。
private void showWaresData(List<WaresInfo> wares){
switch (state){
case STATE_NORMAL:
if(mWaresAdatper ==null) {
mWaresAdatper = new WaresAdapter(getContext(), wares);
recyclerViewSecondary.setAdapter(mWaresAdatper);
recyclerViewSecondary.setLayoutManager(new GridLayoutManager(getContext(), 2));
recyclerViewSecondary.setItemAnimator(new DefaultItemAnimator());
recyclerViewSecondary.addItemDecoration(new DividerGridItemDecoration(getContext()));
}
else{
mWaresAdatper.clearData();
mWaresAdatper.addData(wares);
}
break;
case STATE_REFREH:
mWaresAdatper.clearData();
mWaresAdatper.addData(wares);
recyclerViewSecondary.scrollToPosition(0);
layoutRefresh.finishRefresh();
break;
case STATE_MORE:
mWaresAdatper.addData(mWaresAdatper.getDatas().size(),wares);
recyclerViewSecondary.scrollToPosition(mWaresAdatper.getDatas().size());
layoutRefresh.finishRefreshLoadMore();
break;
}
}
数据的增删直接调用写好的 addData() 方法和 clearData() 就可以了。
7. 一级目录与二级目录联动
二级目录虽然已经可以显示了，但是还差了一点点，那就是和一级目录的联动效果，这也很简单了，在一级目录列表中添加 item 的点击事件，然后传入对应的 category_id，然后调用请求方法 requestWares() 就可以动起来了。
mCategoryAdapter.setOnItemClickListener(new BaseAdapter.OnItemClickListener() {
@Override
public void onItemClick(View view, int position) {
TopCategoryInfo category = mCategoryAdapter.getItem(position);
category_id = category.getId();
currPage=1;
state=STATE_NORMAL;
requestWares(category_id);
}
});
根据 category_id 来联动二级目录。
8. 效果图
获取到效果图如下。
效果图
最终效果图
分类模块已经基本写好了，最终的效果图来看下。
效果图
每个程序猿必备的110本经典编程书，免费领取地址：http://mp.weixin.qq.com/s/cx433vAj_CDLzmhOoUS6zA
