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
