耳朵(六)文章详情_WebView嵌套列表

来源：情诗网 2021-01-10 分类：情感文章

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

耳朵(六)文章详情_WebView嵌套列表

热门文章