本文为菜鸟窝作者刘婷的连载。”商城项目实战”系列来聊聊仿”京东淘宝的购物商城”如何实现。
商城项目中分为了5大模块，分别为首页、热门、分类、购物车以及我的，前面已经基本实现了首页和热门的效果了，下面就是要开始实现分类的效果了，同样的，先来看下效果图。
效果图
** 所要实现的功能**
根据上面的效果，大致分析分类模块中所要实现的功能，其中的点击跳转事件暂时不用考虑。
- 1.拥有一级目录和二级目录。
- 2.一级目录需要是列表，并且每项只有一个文本。
- 3.二级目录中是网格形式的列表，每行为两列，每一项中有图片、商品名称以及价格信息。
- 4.在二级目录上面有轮播的广告栏，和之前主页的一样。
- 5.点击一级目录中的选项时，二级目录会相应地改变。
- 6.二级目录的商品网格列表需要下拉刷新和加载更多的功能。
所要实现的功能都已经列出来了，下面就是开始实现步骤了。
** 实现一级目录**
一级目录是线性列表的形式，每项只有一个文本，所以这里就使用 RecyclerView 来实现列表。
1. Gradle 添加依赖
使用 RecyclerView 的话，必须要在 Gradle 中添加相应的依赖，同时分类中的广告栏的轮播滚动和主页是一样的，所以就使用第三方开源框架 AndroidImageSlider，所以这里所需要添加的依赖如下。
dependencies {
compile fileTree(include: ['*.jar'], dir: 'libs')
androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
exclude group: 'com.android.support', module: 'support-annotations'
})
compile 'com.android.support:appcompat-v7:25.2.0'
compile 'com.android.support.constraint:constraint-layout:1.0.1'
testCompile 'junit:junit:4.12'
compile 'com.daimajia.slider:library:1.1.5@aar'
compile 'com.squareup.picasso:picasso:2.5.2'
compile 'com.nineoldandroids:library:2.4.0'
compile 'com.android.support:support-v4:25.2.0'
compile 'com.android.support:recyclerview-v7:25.2.0'
compile 'com.android.support:cardview-v7:25.2.0'
compile 'com.squareup.okhttp3:okhttp:3.6.0'
compile 'com.google.code.gson:gson:2.8.0'
compile 'com.github.d-max:spots-dialog:0.7'
compile 'com.facebook.fresco:fresco:1.2.0'
compile 'com.cjj.materialrefeshlayout:library:1.3.0'
compile 'org.xutils:xutils:3.5.0'
}
2. 添加权限
网络请求数据一定需要网络请求的权限，这里还有图片的加载等，就要在 AndroidManifest 文件中添加如下权限。
<uses-permission android:name="android.permission.INTERNET"></uses-permission>
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"></uses-permission>
3. 写好 item 布局文件
首先来写好 item 中 xml 布局文件，布局文件很简单，只有一个 TextView。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="16dp"
android:background="@drawable/selector_list_item"
>
<TextView
android:id="@+id/category_tv_name"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
style="@style/category_tv_name_style"
/>
</LinearLayout>
TextView 用来显示一级目录中的选项名称。
4. 定义实体类
这里的一级目录的列表数据是从网络获取 Json 格式的数据，我们需要定义相应的实体类来解析网络数据。
public class TopCategoryInfo extends BaseInfo {
private String name;//名称
private String sort;//排序
private long id;//ID
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getSort() {
return sort;
}
public void setSort(String sort) {
this.sort = sort;
}
public long getId() {
return id;
}
public void setId(long id) {
this.id = id;
}
}
5. 实现 Adapter
item 的布局文件已经写好了，然后就是适配器要写好来，之前我们已经封装了共同的适配器 SimpleAdapter ，这里就直接新建 CategoryAdapter 继承于 SimpleAdapter，然后添加布局，并且让 TextView 显示名称。
public class CategoryAdapter extends SimpleAdapter<TopCategoryInfo> {
public CategoryAdapter(Context context, List<TopCategoryInfo> datas) {
super(context, R.layout.recycler_item_category_layout, datas);
}
@Override
protected void convert(BaseViewHolder viewHoder, TopCategoryInfo item) {
viewHoder.getTextView(R.id.category_tv_name).setText(item.getName());
}
}
6. 定义主布局
在原本新建的 fragment_category_layout 分类 xml 布局文件中添加 RecyclerView ，这里 RecyclerView 是用来装载一级目录的列表数据的。
<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>
</LinearLayout>
7. 请求网络数据并且显示
在分类的 Fragment 中添加对 RecyclerView 的声明，我们这里使用了 xUtils3 中 ViewUtils 来注解 View，所以直接注入 RecyclerView 就好了。
@ViewInject(R.id.category_recycler_view_top)
private RecyclerView recyclerViewTop;//一级目录
请求网络数据的方法也很简单，直接使用封装好的 OkHttp，所以首先要初始化 OkHttpHelper。
private OkHttpHelper mHttpHelper = OkHttpHelper.getInstance();
下面就是网络请求数据的方法了。
private void requestCategoryData(){
mHttpHelper.get(Constants.API.CATEGORY_LIST, new SpotsCallBack<List<TopCategoryInfo>>(getContext()) {
@Override
public void onSuccess(Response response, List<TopCategoryInfo> categories) {
.....
}
@Override
public void onError(Response response, int code, Exception e) {
}
@Override
public void onFailure(Request request, Exception e) {
super.onFailure(request, e);
}
});
}
将网络请求写入 requestCategoryData() 方法中，在请求成功的 onSuccess() 方法中添加显示数据的处理，数据的显示也单独写在了一个方法中，如下。
private void showCategoryData(List<TopCategoryInfo> categories){
mCategoryAdapter = new CategoryAdapter(getContext(),categories);
mCategoryAdapter.setOnItemClickListener(new BaseAdapter.OnItemClickListener() {
@Override
public void onItemClick(View view, int position) {
...//点击事件
}
});
recyclerViewTop.setAdapter(mCategoryAdapter);
recyclerViewTop.setLayoutManager(new LinearLayoutManager(getContext()));
recyclerViewTop.setItemAnimator(new DefaultItemAnimator());
recyclerViewTop.addItemDecoration(new WareItemDecoration(getContext(),WareItemDecoration.VERTICAL_LIST));
}
写好了数据显示的方法，把 showCategoryData() 添加到之前的请求成功的 onSuccess() 中，到这里就写好了。
8. 效果图
已经写好了一级目录的实现代码，运行代码，获取效果图。
效果图
到这里一级目录就已经很好的实现了，因为文章篇幅不易过长，所以广告的轮播以及二级目录的实现，就在下一篇文章中继续详细介绍。
【五一大促】菜鸟窝全场android项目实战课程低至五折，更有价值33元的四款热门技术免费领，17年初优惠力度最大的一次活动，有意向的童鞋不要错过
狂戳>>http://www.cniao5.com/hd/2017/51.html
网友评论