商城項(xiàng)目實(shí)戰(zhàn) | 11.1 實(shí)現(xiàn)商城分類(lèi)模塊的一級(jí)目錄和二級(jí)目錄效果（一）

本文為菜鳥(niǎo)窩作者劉婷的連載?！鄙坛琼?xiàng)目實(shí)戰(zhàn)”系列來(lái)聊聊仿”京東淘寶的購(gòu)物商城”如何實(shí)現(xiàn)。

商城項(xiàng)目中分為了5大模塊，分別為首頁(yè)、熱門(mén)、分類(lèi)、購(gòu)物車(chē)以及我的，前面已經(jīng)基本實(shí)現(xiàn)了首頁(yè)和熱門(mén)的效果了，下面就是要開(kāi)始實(shí)現(xiàn)分類(lèi)的效果了，同樣的，先來(lái)看下效果圖。

效果圖
效果圖

** 所要實(shí)現(xiàn)的功能**

根據(jù)上面的效果，大致分析分類(lèi)模塊中所要實(shí)現(xiàn)的功能，其中的點(diǎn)擊跳轉(zhuǎn)事件暫時(shí)不用考慮。

  1. 1.擁有一級(jí)目錄和二級(jí)目錄。
  2. 2.一級(jí)目錄需要是列表，并且每項(xiàng)只有一個(gè)文本。
  3. 3.二級(jí)目錄中是網(wǎng)格形式的列表，每行為兩列，每一項(xiàng)中有圖片、商品名稱(chēng)以及價(jià)格信息。
  4. 4.在二級(jí)目錄上面有輪播的廣告欄，和之前主頁(yè)的一樣。
  5. 5.點(diǎn)擊一級(jí)目錄中的選項(xiàng)時(shí)，二級(jí)目錄會(huì)相應(yīng)地改變。
  6. 6.二級(jí)目錄的商品網(wǎng)格列表需要下拉刷新和加載更多的功能。

所要實(shí)現(xiàn)的功能都已經(jīng)列出來(lái)了，下面就是開(kāi)始實(shí)現(xiàn)步驟了。

** 實(shí)現(xiàn)一級(jí)目錄**

一級(jí)目錄是線性列表的形式，每項(xiàng)只有一個(gè)文本，所以這里就使用 RecyclerView 來(lái)實(shí)現(xiàn)列表。

1. Gradle 添加依賴(lài)

使用 RecyclerView 的話(huà)，必須要在 Gradle 中添加相應(yīng)的依賴(lài)，同時(shí)分類(lèi)中的廣告欄的輪播滾動(dòng)和主頁(yè)是一樣的，所以就使用第三方開(kāi)源框架 AndroidImageSlider，所以這里所需要添加的依賴(lài)如下。

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. 添加權(quán)限

網(wǎng)絡(luò)請(qǐng)求數(shù)據(jù)一定需要網(wǎng)絡(luò)請(qǐng)求的權(quán)限，這里還有圖片的加載等，就要在 AndroidManifest 文件中添加如下權(quán)限。

<uses-permission android:name="android.permission.INTERNET"></uses-permission>
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"></uses-permission>

3. 寫(xiě)好 item 布局文件

首先來(lái)寫(xiě)好 item 中 xml 布局文件，布局文件很簡(jiǎn)單，只有一個(gè) 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 用來(lái)顯示一級(jí)目錄中的選項(xiàng)名稱(chēng)。

4. 定義實(shí)體類(lèi)

這里的一級(jí)目錄的列表數(shù)據(jù)是從網(wǎng)絡(luò)獲取 Json 格式的數(shù)據(jù)，我們需要定義相應(yīng)的實(shí)體類(lèi)來(lái)解析網(wǎng)絡(luò)數(shù)據(jù)。

public class TopCategoryInfo extends BaseInfo {
    private String name;//名稱(chēng)
    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. 實(shí)現(xiàn) Adapter

item 的布局文件已經(jīng)寫(xiě)好了，然后就是適配器要寫(xiě)好來(lái)，之前我們已經(jīng)封裝了共同的適配器 SimpleAdapter ，這里就直接新建 CategoryAdapter 繼承于 SimpleAdapter，然后添加布局，并且讓 TextView 顯示名稱(chēng)。

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 分類(lèi) xml 布局文件中添加 RecyclerView ，這里 RecyclerView 是用來(lái)裝載一級(jí)目錄的列表數(shù)據(jù)的。

<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="分類(lèi)"
        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. 請(qǐng)求網(wǎng)絡(luò)數(shù)據(jù)并且顯示

在分類(lèi)的 Fragment 中添加對(duì) RecyclerView 的聲明，我們這里使用了 xUtils3 中 ViewUtils 來(lái)注解 View，所以直接注入 RecyclerView 就好了。

@ViewInject(R.id.category_recycler_view_top)
private RecyclerView recyclerViewTop;//一級(jí)目錄

請(qǐng)求網(wǎng)絡(luò)數(shù)據(jù)的方法也很簡(jiǎn)單，直接使用封裝好的 OkHttp，所以首先要初始化 OkHttpHelper。


private OkHttpHelper mHttpHelper = OkHttpHelper.getInstance();

下面就是網(wǎng)絡(luò)請(qǐng)求數(shù)據(jù)的方法了。

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);
            }
        });

    }

將網(wǎng)絡(luò)請(qǐng)求寫(xiě)入 requestCategoryData() 方法中，在請(qǐng)求成功的 onSuccess() 方法中添加顯示數(shù)據(jù)的處理，數(shù)據(jù)的顯示也單獨(dú)寫(xiě)在了一個(gè)方法中，如下。

private  void showCategoryData(List<TopCategoryInfo> categories){


        mCategoryAdapter = new CategoryAdapter(getContext(),categories);

        mCategoryAdapter.setOnItemClickListener(new BaseAdapter.OnItemClickListener() {
            @Override
            public void onItemClick(View view, int position) {

                ...//點(diǎn)擊事件
            }
        });

        recyclerViewTop.setAdapter(mCategoryAdapter);
        recyclerViewTop.setLayoutManager(new LinearLayoutManager(getContext()));
        recyclerViewTop.setItemAnimator(new DefaultItemAnimator());
        recyclerViewTop.addItemDecoration(new WareItemDecoration(getContext(),WareItemDecoration.VERTICAL_LIST));
    }

寫(xiě)好了數(shù)據(jù)顯示的方法，把 showCategoryData() 添加到之前的請(qǐng)求成功的 onSuccess() 中，到這里就寫(xiě)好了。

8. 效果圖

已經(jīng)寫(xiě)好了一級(jí)目錄的實(shí)現(xiàn)代碼，運(yùn)行代碼，獲取效果圖。

效果圖
效果圖

到這里一級(jí)目錄就已經(jīng)很好的實(shí)現(xiàn)了，因?yàn)槲恼缕灰走^(guò)長(zhǎng)，所以廣告的輪播以及二級(jí)目錄的實(shí)現(xiàn)，就在下一篇文章中繼續(xù)詳細(xì)介紹。

【五一大促】菜鳥(niǎo)窩全場(chǎng)android項(xiàng)目實(shí)戰(zhàn)課程低至五折，更有價(jià)值33元的四款熱門(mén)技術(shù)免費(fèi)領(lǐng)，17年初優(yōu)惠力度最大的一次活動(dòng)，有意向的童鞋不要錯(cuò)過(guò)
狂戳>>http://www.cniao5.com/hd/2017/51.html

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容