tags: 耳朵_android
上一节完成了一个类似今日头条的顶部导航, 右上角的加号订阅频道的功能我也添加上去了, 下面是效果图:
今天要做的是, 点击Item进入文章详情, 加载评论并回复.
开局还是一样的, 不用多说了:
class ArticleDetailActivity(override var layoutResID: Int = R.layout.activity_article_detail) : BaseActivity() {
}
详情里需要显示的内容有, 文章内容详情及评论列表，这里我突然想用BaseListActivity来做, 即上面使用WebView加载网页, 下面加一个RecyclerView来显示评论列表, 说着我们就来动手试试吧.
BaseListActivity其实就是一个普通的BaseActivity里有一个FrameLayout,然后relpace了一个BaseListFragment而已, 所以一般的没有特殊需求的话, 我们甚至可以不需要为其设置layoutResID, 直接设置item的resID即可(布局和Model先用Article列表的来代替显示一下):
class ArticleDetailActivity(override var itemResID: Int = R.layout.item_article) : BaseListActivity<ArticleModel, ArticleHolder>() {}
然后我们需要接收一个ArticleModel的参数，注意，接收参数的方法建议都统一放在checkParams中：
override fun checkParams(): Boolean {
article = intent.getSerializableExtra(ArgumentUtil.OBJ) as ArticleModel
title = article?.title
return article != null
}
对象在Intent中传递是需要序列化的, 请将ArticleModel中所有的自定义类型继承Serializable
然后在ArticleHolder中setContent方法里加上onClick的跳转:
itemView.layout.onClick {
context.startActivity<ArticleDetailActivity>(ArgumentUtil.OBJ to data)
}
接着回到ArticleDetailActivity中, 为recyclerView添加一个HeaderView为WebView:
override fun setHeaderView() {
webView = WebView(this)
webView.scrollBarStyle = View.SCROLLBARS_INSIDE_OVERLAY
val settings = webView.settings
// User settings
settings.javaScriptEnabled = true
settings.loadsImagesAutomatically = true
settings.loadWithOverviewMode = false
settings.domStorageEnabled = true
settings.cacheMode = WebSettings.LOAD_NO_CACHE
webView.isHorizontalScrollBarEnabled = false
webView.addJavascriptInterface(this, "App")
webView.loadUrl(article?.url)
showLoadProgerss()
webView.setWebViewClient(object : WebViewClient() {
override fun shouldOverrideUrlLoading(view: WebView, url: String): Boolean {
view.loadUrl(url)
return false
}
override fun onPageFinished(view: WebView?, url: String?) {
super.onPageFinished(view, url)
cancelLoadProgerss()
runDelayed({
//经过测试, 在android6.0+的系统中, 音乐没有自动播放,
//这里用js代码找到播放按钮, 调用其点击事件以播放
val js = "javascript:(" +
"function(){ " +
"var aEle=document.getElementsByTagName('div');" +
"for(var i=0;i<aEle.length;i++) { " +
"if(aEle[i].className=='wp-player-list'){" +
"aEle[i].focus(); " +
"var alist = aEle[i].getElementsByTagName('*');" +
"for(var j=0;j<3;j++) { " +
"alist[j].focus(); alist[j].click();" +
"}" +
"break;" +
"}" +
"}" +
"}()) "
webView.loadUrl(js)
}, 3000)
//webView嵌套有时会出现大面积空白, 所以在加载完成后, 重新设置一下它的高度
webView.loadUrl("javascript:App.resize(document.body.getBoundingClientRect().height);")
}
})
fragment!!.recyclerView!!.addHeaderView(webView)
}
@JavascriptInterface
fun resize(height: Float) {
runOnUIThread({
webView.layoutParams.width = resources.displayMetrics.widthPixels
webView.layoutParams.height = (height * resources.displayMetrics.density).toInt()
})
}
上面代码通过JS注入解决了webView在嵌套ScrollView或ListView等等复合控件时, 在底部出现大面积空白的问题, 以及在6.0时某些事件方法不自动执行的笨办法.
最后就是BaseListFragment的加载数据loadData事件, 暂时先用ArticleList的来代替演示:
override fun loadData() {
val params = fragment!!.listParams
params.put("json", "get_posts")
HMRequest.go<ArticleListModel>(params = params, needCallBack = true) {
//仅需要调用这一个方法完成上下拉功能
loadCompleted(it?.posts)
}
}
ok , 现在运行起来看一看:
好的感觉还不错的样子, 那今天的作业就是, 将现在演示中的换成ArticleList换成CommentList, 并完成评论的功能.
github: https://github.com/bxcx/ear
本节分支: https://github.com/bxcx/ear/tree/webView
