Android仿今日頭條詳情頁實現

源碼地址：

Android仿今日頭條詳情頁實現 github源碼地址

動態圖

最近項目有個需求，須要實現一個和今日頭條新聞詳情頁同樣的體驗。上部分是webview來展現新聞內容，下半部分是listview來展現評論區，可無限加載更多。 起初的實現思路是 將webview放置在listview頭部，看似沒有什麼問題，實現以後發現，webview各類奇怪的問題：黑屏，圖片閃爍白屏,渲染速度慢等等問題； 將webview和listview獨立放置遍沒有問題；因而反編譯了一下頭條的實現：

從上圖能夠知道，實現的原理是，ViewGroup包着listview和webview實現的；因而順着這條思路往下走。

今日頭條的代碼是混淆的沒法直接使用，我採用的方案是ScrollView裏邊嵌套了webview+listview;

這套方案有如下幾個問題須要解決：

1. 解決webview在scrollview所有展開的問題。不展開的方法太過複雜，手勢處理太麻煩，這裏採用展開的形式
 2. 咱們知道scrollview包含的childview是沒法複用了，那麼首先要解決listview的複用問題；
 3. 滑動到listview和webview邊界的時候，對於手勢事件的交換和狀態的保存。

一、webview所有展開的問題

mWebView.loadUrl(url);
        mWebView.setWebViewClient(new WebViewClient() {
            @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);
                int w = View.MeasureSpec.makeMeasureSpec(0,
                        View.MeasureSpec.UNSPECIFIED);
                int h = View.MeasureSpec.makeMeasureSpec(0,
                        View.MeasureSpec.UNSPECIFIED);
                //從新測量
                view.measure(w, h);
                mWebViewHeight = view.getHeight();
                Log.i(TAG, "WEBVIEW高度:" + view.getHeight());
            }
        });

2和三、listview複用問題和手勢切換問題

一、複用意味着不能所有展開，現將高度定爲（屏幕高度-狀態欄高度-標題欄高度）；

二、當scrollview滾動到底部的時候，讓listview根據手勢慣性fling一會，以增強體驗，而後將手勢交給listview；

三、當listview滑動到底部的時候，加載更多；

四、當listview滑動到頂部的時候，向上滾5個像素，並將手勢交給scrollview，即可向上流暢滑動；

五、當listview即將到達頂部的時候，手動往下拖動，當到達邊界的時候，須要讓scrollview跟着之前scrollby，讓用戶感知是一塊兒滑動的，當手指鬆開的時候，要讓scrollview慣性滾動一會，以加強體驗；

遺留問題

一、scrollview和listview的內部滾動速度是不一致的，scrollview是比較大的，在scrollview滾動到底部的時候，listview採用scrollview滾動速度的三分之一進行fling，體驗下來感受仍是比較流暢的。但總感受仍是不夠穩妥，優化思路是：接管scrollview和listview的滾動速度，手動控制兩個控件的過渡過程；

二、當listview即將到達頂部的時候，手動往下拖動，當到達邊界的時候，須要讓scrollview跟着之前scrollby，讓用戶感知是一塊兒滑動的，當手指鬆開的時候，要讓scrollview慣性滾動一會，這裏的慣性也因爲速度不一致的問題，形成一點點的那麼不天然；優化思路和1一致；

Done

QQ:452825089

mail:452825089@qq.com

wechat:ice3897315

blog:http://iceAnson.github.io