商城项目实战 | 16.1 TabLayout 实现商品排序功能
本文为菜鸟窝作者刘婷的连载。”商城项目实战”系列来聊聊仿”京东淘宝的购物商城”如何实现。
还记得商城项目的首页模块吗，上面是滚动的炫酷轮播广告，下面是商品活动分类，不记得话就看下效果图，就明白了。
在下面部分的商品活动分类中，点击任意商品项，就可以跳转到活动商品列表页面去，先来看下活动商品列表的界面。
这个界面很简单，上部三个分类，为默认、价格和销量，然后就是显示总共多少商品数，以及一个显示商品的列表，这个界面的实现，也就是本文的关键，使用 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