耳朵(五)仿今日头条的分类实现

tags: 耳朵_android

最终效果:

上一节已经实现了一个上下拉的列表页, 后面我对item的样式做了一下排版, 现在界面稍微好看一些了, 不过我们还有分类的目录没有实现, 像古典、安静、欢快这样的，这一节我们就是需要使用PagerSlidingTabStrip来实现一个类似今日头条的效果。

关于PagerSlidingTabStrip, 网路上有很多文章介绍它的, 这里我不用多说吧, 不过我忘记我当初是扩展了一个什么属性还是修复了什么bug, 我居然没有使用git上面的, 而是将它源码直接加到了项目中, 这里我就使用项目中的TabStrip了, 不再拉git了.

先是创建一个Fragment, 并继承自BaseFragment:

    /**
     * 妙笔
     */
    class ArticleFragment(override var layoutResID: Int = R.layout.fragment_article) : BaseFragment() 
    {
    
    }

修改布局文件:

<RelativeLayout android:id="@+id/layout_content"
            xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:att="http://schemas.android.com/apk/res-auto"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            android:orientation="vertical">

    <com.hm.library.resource.tabstrip.PagerSlidingTabStrip
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:layout_toLeftOf="@+id/iv_plus"
        android:background="@color/colorPrimary"
        android:fillViewport="false"
        att:pstsDividerColor="@android:color/transparent"
        att:pstsIndicatorColor="@android:color/white"
        att:pstsIndicatorHeight="5dp"
        att:pstsUnderlineColor="@android:color/transparent"
        att:zmsSelectedTabTextSize="@dimen/title"
        att:zmsTabTextColor="@color/tabstrip_title_color"
        att:zmsTabTextSize="14sp"
        />

    <com.balysv.materialripple.MaterialRippleLayout
        android:id="@+id/iv_plus"
        android:layout_width="wrap_content"
        android:layout_height="?attr/actionBarSize"
        android:layout_alignParentRight="true"
        att:mrl_rippleColor="#ffffff"
        att:mrl_rippleDelayClick="true"
        att:mrl_rippleOverlay="true">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="?attr/actionBarSize"

            android:background="@color/colorPrimary"
            android:padding="3dp"
            android:scaleType="center"
            android:src="@drawable/icon_plus"/>
    </com.balysv.materialripple.MaterialRippleLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/tabs"/>

</RelativeLayout>

里面是一个普通的PagerSlidingTabStrip加一个ViewPager, 右边再来了一个加号按钮, 用户可以选择自己喜爱的分类频道.
现在我们先将MainTabActivity中之前的ArticleListFragment替换成刚刚创建的ArticleFragment, 运行起来看一下, 现在界面是这样的:

我们接着来对ArticleFragment编码:

class ArticleFragment(override var layoutResID: Int = R.layout.fragment_article) : BaseFragment() {

    companion object {
        val Channel1st = "Channel1st"
        val MyChannel = "MyChannel"
    }

    //分类
    var channelList: ArrayList<CategorieListModel.CategorieModel>? = null

        override fun loadData() {

    //先加载用户本地保存的分类信息,如果用户有自己保存则只显示用户自己的
    channelList = Cacher[MyChannel]

    //如果没有用户评阅的分类, 那查看本地有没有缓存所有一级频道
    if (channelList == null || channelList!!.size == 0)
        channelList = Cacher[Channel1st]

    //好吧, 都没有的话, 我们查询API
    //API地址: http://ear.life?json=get_category_index
    if (channelList == null || channelList!!.size == 0) {
        val params = HashMap<String, Any>()
        params.put("json", "get_category_index")

        HMRequest.go<CategorieListModel>(params = params) {
            channelList = it?.categories
            //过滤非一级频道
            channelList = channelList!!.filter { it.parent == 0 } as ArrayList<CategorieListModel.CategorieModel>
            //在最前面加一个"最新"的频道, 按发布时间来查看
            val all = CategorieListModel.CategorieModel(-1, "", "最新", "", 0, -1)
            channelList!!.add(0, all)
            //将频道保存到本地
            Cacher[Channel1st] = channelList
            initUI()
        }

    } else {
        //上面的情况任意一种查询到频道信息后, 填充UI
        initUI()
    }
}

这里用了HMLibrary中的缓存工具类Cacher, 它在是hawk工具类上进行了简单的扩展, 感谢原作者.
到这里可以先自行测试一下, API交互是否成功, 频道信息是否获取到并保存至本地了.

然后可以开始填充UI了:

    override fun initUI() {
        super.initUI()
        pager.adapter = MyPagerAdapter()
        tabs.setViewPager(pager)
    }

    inner class MyPagerAdapter : FragmentPagerAdapter(fragmentManager) {

        override fun getPageTitle(position: Int): CharSequence = channelList!![position].title

        override fun getCount(): Int = channelList!!.size

        override fun getItem(position: Int): Fragment = ArticleListFragment()
    }

getItem我们暂时先统统返回一个ArticleListFragment回去, 现在运行起来看看效果是怎样的:

已经正常的显示出来了, 不过现在每一个频道显示的内容都是一样的, 我们需要一个id来区别, 修改ArticleListFragment增加一个newInstance的静态方法,

companion object {
    fun newInstance(id: Int): ArticleListFragment {
        val fragment = ArticleListFragment()
        val args = Bundle()
        args.putInt(IntentData.ID, id)
        fragment.arguments = args
        return fragment
    }
}

并在checkParams中接收它, 利用它来区别loadData时需要访问的频道:

    var channelID: Int = -1

    override fun checkParams(): Boolean {
        channelID = arguments.getInt(IntentData.ID)
        return id != -1
    }
    
    override fun loadData() {
        val params = listParams
        if (channelID == -1) {
            params.put("json", "get_posts")
        } else {
            params.put("json", "get_category_posts")
            params.put("id", channelID)
        }

        HMRequest.go<ArticleListModel>(params = params, needCallBack = true) {
            //仅需要调用这一个方法完成上下拉功能
            loadCompleted(it?.posts)
        }
    }

回到ArticleFragment中我们将adapter中修改getItem方法将id传过去:

override fun getItem(position: Int): Fragment = ArticleListFragment.newInstance(channelList!![position].id)

再次运行将会得到我们想要的:

OK先到这里, 上面"妙笔"的标题可以去掉了, 还有点击+号订阅自己喜欢频道的功能就布置成家庭作业了.

github: https://github.com/bxcx/ear
本节分支: https://github.com/bxcx/ear/tree/tabStrip

耳朵(五)仿今日头条的分类实现

推荐阅读更多精彩内容