本文为菜鸟窝作者刘婷的连载。”商城项目实战”系列来聊聊仿”京东淘宝的购物商城”如何实现。
还记得商城项目的首页模块吗，上面是滚动的炫酷轮播广告，下面是商品活动分类，不记得话就看下效果图，就明白了。
首页
在下面部分的商品活动分类中，点击任意商品项，就可以跳转到活动商品列表页面去，先来看下活动商品列表的界面。
商品列表
这个界面很简单，上部三个分类，为默认、价格和销量，然后就是显示总共多少商品数，以及一个显示商品的列表，这个界面的实现，也就是本文的关键，使用 TabLayout 来实现商品排序的功能。
TabLayout 的介绍
TabLayout 是 Android Support Design 中的其中一个控件，有了它，可以轻松实现滑动标签页的效果，也是受到广大开发者的喜爱。
1. TabLayout 的相关属性
要了解 TabLayout 的相关属性，就要知道它的相应的 Style 源码，开发者可以通过自定义 Style 来改变 TabLayout 的样式和属性。
<style name="Widget.Design.TabLayout" parent="Base.Widget.Design.TabLayout">
<item name="tabGravity">fill</item>
<item name="tabMode">fixed</item>
</style>
<style name="Base.Widget.Design.TabLayout" parent="android:Widget">
<item name="tabMaxWidth">@dimen/design_tab_max_width</item>
<item name="tabIndicatorColor">?attr/colorAccent</item>
<item name="tabIndicatorHeight">2dp</item>
<item name="tabPaddingStart">12dp</item>
<item name="tabPaddingEnd">12dp</item>
<item name="tabBackground">?attr/selectableItemBackground</item>
<item name="tabTextAppearance">@style/TextAppearance.Design.Tab</item>
<item name="tabSelectedTextColor">?android:textColorPrimary</item>
</style>
TabLayout 的主要组成就是 Tab，所以它相关的属性也主要是 Tab 的属性。从上面的源码中可以看下， TabLayout 的 Tab 的背景、最大宽度、位置模式等都是可以通过自定义来调整和修改的，十分灵活。
2. TabLayout 的基本用法
TabLayout 的主要组成是 Tab，它的基本用法也就和 Tab 有关了，也很简单，但是记住 TabLayout 是 Android Support Design 中的控件，所以必须要添加对 Android Support Design 的依赖，这里是在 build.gradle 中添加依赖。
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:design:25.2.0'
}
然后先在 xml 文件中添加 TabLayout。
<android.support.design.widget.TabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
</android.support.design.widget.TabLayout>
最后就是要添加 Tab 以及事件的监听，先来看下 Tab 的添加。
TabLayout.Tab tab = tabLayout.newTab();
tab.setText(getResources().getString(R.string.default_campaign));
tab.setTag(TAG_DEFAULT);
tabLayout.addTab(tab);
先 new 一个 Tab ，然后给对应的 Tab 添加文字、tag等属性，最后添加到 TabLayout 中。
而至于 TabLayout 的监听事件就更加简单了，直接调用 API 接口就好，这里就展示下最常用的 Tab 选择事件监听。
tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
//Tab 被选择时的处理
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
//Tab 未被选择的处理
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
//Tab 重新被选择的处理
}
});
已经对 TabLayout 做了简单的介绍了，也已经对 TabLayout 有了一定的认识，言归正传，下面开始详细讲解如何使用 TabLayout 实现商品排序功能。
TabLayout 实现商品排序功能
活动商品列表界面中商品会根据上面的默认、销售和价格三个 Tab 的选择情况来确定怎样的排序方法，然后将商品展示在列表中，同时列表上面的还会显示总的商品数量，如何实现呢？往下看。
1. Gradle 添加依赖
既然使用了 TabLayout，那么首先就是要添加 Android Support Design 的依赖，在 build.gradle 中添加。
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'
compile 'com.android.support:design:25.2.0'
}
商城项目开发到这里，build.gradle 中依赖也越来越多了。
2. 添加权限
权限的添加就不用多解释了啊，这里是网络数据请求，自然要网络权限，加上图片的显示需要缓存，所以需要的权限也就是网络权限和写的权限。
<uses-permission android:name="android.permission.INTERNET"></uses-permission>
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"></uses-permission>
权限加好了，就可以开始动工设计界面了。
3. 自定义 TabLayout 的样式
自定义 TabLayout 的 Style，命名为 customTabLayout，扩展于 Widget.Design.TabLayout 的 Style。
<style name="customTabLayout" parent="Widget.Design.TabLayout">
<!--<item name="tabMaxWidth">@dimen/tab_max_width</item>-->
<item name="tabIndicatorColor">#eb4f38</item>
<item name="tabIndicatorHeight">2dp</item>
<item name="tabPaddingStart">12dp</item>
<item name="tabPaddingEnd">12dp</item>
<item name="tabBackground">@color/white</item>
<item name="tabTextAppearance">@style/customTabTextAppearance</item>
<item name="tabSelectedTextColor">#eb4f38</item>
</style>
TabLayout 的自定义样式可以根据实际情况进行调整。
4. 添加活动商品主界面布局
上文效果图中可以看到的是上部的 Toolbar、可滑动的标签页、显示商品总数的文本以及显示商品的列表，这个列表也要可以下拉刷新和上拉加载更多。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/bg_color">
<com.liuting.cniao_shop.widget.CNiaoToolbar
android:id="@id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
app:isShowSearchView="false"
app:navigationIcon="@mipmap/ic_back"
app:contentInsetEnd="56dp"
app:title="@string/product_list">
</com.liuting.cniao_shop.widget.CNiaoToolbar>
<android.support.design.widget.TabLayout
android:id="@+id/ware_tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="@style/customTabLayout"
app:tabGravity="fill"
app:tabMode="fixed"
>
</android.support.design.widget.TabLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:minHeight="30dp"
android:gravity="center_vertical"
android:padding="5dp"
android:background="@color/gold_yellow">
<TextView
android:id="@+id/ware_tv_summary"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="@color/gray"/>
</LinearLayout>
<com.cjj.MaterialRefreshLayout
android:id="@+id/ware_refresh_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:overlay="false"
app:wave_show="false"
app:wave_color="#90ffffff"
app:progress_colors="@array/material_colors"
app:wave_height_type="higher"
>
<android.support.v7.widget.RecyclerView
android:id="@+id/ware_recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v7.widget.RecyclerView>
</com.cjj.MaterialRefreshLayout>
</LinearLayout>
因为列表也要可以下拉刷新和上拉加载更多，所以就还是使用之前的 MaterialRefreshLayout 下拉刷新和上拉加载更多的控件。
而商品列表的 item 布局和之前写好的热门商品列表 item 布局是一样的，另外商品属性也一致，这里就直接请参考文章《商城项目实战 | 8.2 SwipeRefreshLayout 实现可以下拉刷新和加载更多的热门商品列表》，这里就不多废话了。
5. 初始化 TabLayout
在活动商品列表的 Activity 中初始化 TabLayout，也就是要初始化 Tab。
TabLayout.Tab tab = tabLayout.newTab();
tab.setText("默认");
tab.setTag(TAG_DEFAULT);
tabLayout.addTab(tab);
tab = tabLayout.newTab();
tab.setText("价格");
tab.setTag(TAG_PRICE);
tabLayout.addTab(tab);
tab = tabLayout.newTab();
tab.setText("销量");
tab.setTag(TAG_SALE);
tabLayout.addTab(tab);
总共有默认、价格和销量三个 Tab， new 好后，添加到 TabLayout，初始化就写好了。
6. 添加事件监听
选择上部不同的 Tab 项，下面的商品列表就会相应改变排序，就要为 TabLayout 添加 setOnTabSelectedListener() Tab 选择事件监听。
tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
orderBy = (int) tab.getTag();
pager.putParam("orderBy", orderBy);
pager.refresh();
recyclerView.scrollToPosition(0);
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
//Tab 未被选择的处理
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
//Tab 重新被选择的处理
}
});
orderBy 为排序方式，pager 则是分页工具类，在文章《商城项目实战 | 15.1 实现分页工具类的封装》中已经有详细说明，recyclerView 则是列表。这里实现的就是改变排序方式，然后刷新列表，并且列表滑动到最顶部。
效果图
码完了所有的代码，最后就是看效果的时候啊。
效果
效果我们基本上都已经实现了，不过有大家应该也注意到了在最上面 Toolbar 的右侧，也就是标题的右侧有个网格的图标，这个图标是用来干什么的呢？那是用来实现商品列表 list 和 grid 模式切换的，如何实现呢？请继续关注，在下篇文章中将着重介绍。
撸这个项目的一半，你就是大神 , 戳http://mp.weixin.qq.com/s/ZagocTlDfxZpC2IjUSFhHg
网友评论