tags: 耳朵_android

上一節(jié)完成了一個類似今日頭條的頂部導(dǎo)航, 右上角的加號訂閱頻道的功能我也添加上去了, 下面是效果圖:

今天要做的是, 點擊Item進(jìn)入文章詳情, 加載評論并回復(fù).

開局還是一樣的, 不用多說了:

class ArticleDetailActivity(override var layoutResID: Int = R.layout.activity_article_detail) : BaseActivity() {

}

詳情里需要顯示的內(nèi)容有, 文章內(nèi)容詳情及評論列表，這里我突然想用BaseListActivity來做, 即上面使用WebView加載網(wǎng)頁, 下面加一個RecyclerView來顯示評論列表, 說著我們就來動手試試吧.

BaseListActivity其實就是一個普通的BaseActivity里有一個FrameLayout,然后relpace了一個BaseListFragment而已, 所以一般的沒有特殊需求的話, 我們甚至可以不需要為其設(shè)置layoutResID, 直接設(shè)置item的resID即可(布局和Model先用Article列表的來代替顯示一下):

class ArticleDetailActivity(override var itemResID: Int = R.layout.item_article) : BaseListActivity<ArticleModel, ArticleHolder>() {}

然后我們需要接收一個ArticleModel的參數(shù)，注意，接收參數(shù)的方法建議都統(tǒng)一放在checkParams中：

override fun checkParams(): Boolean {
    article = intent.getSerializableExtra(ArgumentUtil.OBJ) as ArticleModel
    title = article?.title
    return article != null
}

對象在Intent中傳遞是需要序列化的, 請將ArticleModel中所有的自定義類型繼承Serializable

然后在ArticleHolder中setContent方法里加上onClick的跳轉(zhuǎn):

    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({

                    //經(jīng)過測試, 在android6.0+的系統(tǒng)中, 音樂沒有自動播放, 
                    //這里用js代碼找到播放按鈕, 調(diào)用其點擊事件以播放
                    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嵌套有時會出現(xiàn)大面積空白, 所以在加載完成后, 重新設(shè)置一下它的高度
                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等等復(fù)合控件時, 在底部出現(xiàn)大面積空白的問題, 以及在6.0時某些事件方法不自動執(zhí)行的笨辦法.

最后就是BaseListFragment的加載數(shù)據(jù)loadData事件, 暫時先用ArticleList的來代替演示:

override fun loadData() {
    val params = fragment!!.listParams
    params.put("json", "get_posts")

    HMRequest.go<ArticleListModel>(params = params, needCallBack = true) {
        //僅需要調(diào)用這一個方法完成上下拉功能
        loadCompleted(it?.posts)
    }
}

ok , 現(xiàn)在運行起來看一看:

好的感覺還不錯的樣子, 那今天的作業(yè)就是, 將現(xiàn)在演示中的換成ArticleList換成CommentList, 并完成評論的功能.

github: https://github.com/bxcx/ear
本節(jié)分支: https://github.com/bxcx/ear/tree/webView