tags: 耳朵_android
最終效果:
上一節(jié)已經(jīng)實(shí)現(xiàn)了一個(gè)上下拉的列表頁(yè), 后面我對(duì)item的樣式做了一下排版, 現(xiàn)在界面稍微好看一些了, 不過(guò)我們還有分類(lèi)的目錄沒(méi)有實(shí)現(xiàn), 像古典砰奕、安靜链患、歡快這樣的廊移，這一節(jié)我們就是需要使用PagerSlidingTabStrip來(lái)實(shí)現(xiàn)一個(gè)類(lèi)似今日頭條的效果。
關(guān)于PagerSlidingTabStrip, 網(wǎng)路上有很多文章介紹它的, 這里我不用多說(shuō)吧, 不過(guò)我忘記我當(dāng)初是擴(kuò)展了一個(gè)什么屬性還是修復(fù)了什么bug, 我居然沒(méi)有使用git上面的, 而是將它源碼直接加到了項(xiàng)目中, 這里我就使用項(xiàng)目中的TabStrip了, 不再拉git了.
先是創(chuàng)建一個(gè)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>
里面是一個(gè)普通的PagerSlidingTabStrip加一個(gè)ViewPager, 右邊再來(lái)了一個(gè)加號(hào)按鈕, 用戶可以選擇自己喜愛(ài)的分類(lèi)頻道.
現(xiàn)在我們先將MainTabActivity中之前的ArticleListFragment替換成剛剛創(chuàng)建的ArticleFragment, 運(yùn)行起來(lái)看一下, 現(xiàn)在界面是這樣的:
我們接著來(lái)對(duì)ArticleFragment編碼:
class ArticleFragment(override var layoutResID: Int = R.layout.fragment_article) : BaseFragment() {
companion object {
val Channel1st = "Channel1st"
val MyChannel = "MyChannel"
}
//分類(lèi)
var channelList: ArrayList<CategorieListModel.CategorieModel>? = null
override fun loadData() {
//先加載用戶本地保存的分類(lèi)信息,如果用戶有自己保存則只顯示用戶自己的
channelList = Cacher[MyChannel]
//如果沒(méi)有用戶評(píng)閱的分類(lèi), 那查看本地有沒(méi)有緩存所有一級(jí)頻道
if (channelList == null || channelList!!.size == 0)
channelList = Cacher[Channel1st]
//好吧, 都沒(méi)有的話, 我們查詢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
//過(guò)濾非一級(jí)頻道
channelList = channelList!!.filter { it.parent == 0 } as ArrayList<CategorieListModel.CategorieModel>
//在最前面加一個(gè)"最新"的頻道, 按發(fā)布時(shí)間來(lái)查看
val all = CategorieListModel.CategorieModel(-1, "", "最新", "", 0, -1)
channelList!!.add(0, all)
//將頻道保存到本地
Cacher[Channel1st] = channelList
initUI()
}
} else {
//上面的情況任意一種查詢到頻道信息后, 填充UI
initUI()
}
}
這里用了HMLibrary中的緩存工具類(lèi)Cacher, 它在是hawk工具類(lèi)上進(jìn)行了簡(jiǎn)單的擴(kuò)展, 感謝原作者.
到這里可以先自行測(cè)試一下, API交互是否成功, 頻道信息是否獲取到并保存至本地了.
然后可以開(kāi)始填充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我們暫時(shí)先統(tǒng)統(tǒng)返回一個(gè)ArticleListFragment回去, 現(xiàn)在運(yùn)行起來(lái)看看效果是怎樣的:
已經(jīng)正常的顯示出來(lái)了, 不過(guò)現(xiàn)在每一個(gè)頻道顯示的內(nèi)容都是一樣的, 我們需要一個(gè)id來(lái)區(qū)別, 修改ArticleListFragment增加一個(gè)newInstance的靜態(tài)方法,
companion object {
fun newInstance(id: Int): ArticleListFragment {
val fragment = ArticleListFragment()
val args = Bundle()
args.putInt(IntentData.ID, id)
fragment.arguments = args
return fragment
}
}
并在checkParams中接收它, 利用它來(lái)區(qū)別loadData時(shí)需要訪問(wèn)的頻道:
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) {
//僅需要調(diào)用這一個(gè)方法完成上下拉功能
loadCompleted(it?.posts)
}
}
回到ArticleFragment中我們將adapter中修改getItem方法將id傳過(guò)去:
override fun getItem(position: Int): Fragment = ArticleListFragment.newInstance(channelList!![position].id)
再次運(yùn)行將會(huì)得到我們想要的:
OK先到這里, 上面"妙筆"的標(biāo)題可以去掉了, 還有點(diǎn)擊+號(hào)訂閱自己喜歡頻道的功能就布置成家庭作業(yè)了.
github: https://github.com/bxcx/ear
本節(jié)分支: https://github.com/bxcx/ear/tree/tabStrip
