Osheep

时光不回头,当下最重要。

商城项目实战 | 16.1 TabLayout 实现商品排序功能

本文为菜鸟窝作者刘婷的连载。”商城项目实战”系列来聊聊仿”京东淘宝的购物商城”如何实现。

还记得商城项目的首页模块吗,上面是滚动的炫酷轮播广告,下面是商品活动分类,不记得话就看下效果图,就明白了。

《商城项目实战 | 16.1 TabLayout 实现商品排序功能》

首页

在下面部分的商品活动分类中,点击任意商品项,就可以跳转到活动商品列表页面去,先来看下活动商品列表的界面。

《商城项目实战 | 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 则是列表。这里实现的就是改变排序方式,然后刷新列表,并且列表滑动到最顶部。

效果图

码完了所有的代码,最后就是看效果的时候啊。

《商城项目实战 | 16.1 TabLayout 实现商品排序功能》

效果

效果我们基本上都已经实现了,不过有大家应该也注意到了在最上面 Toolbar 的右侧,也就是标题的右侧有个网格的图标,这个图标是用来干什么的呢?那是用来实现商品列表 list 和 grid 模式切换的,如何实现呢?请继续关注,在下篇文章中将着重介绍。

撸这个项目的一半,你就是大神 , 戳http://mp.weixin.qq.com/s/ZagocTlDfxZpC2IjUSFhHg

点赞