15.4 協調佈局（CoordinatorLayout）實現 詳情頁

1.接口分析

可以看到接口提供了網頁數據，需要webView控件呈現。

{
  "body": "<div class=\"main-wrap content-wrap\">\n<div class=\"headline\">\n\n<div class=\"img-place-holder\"></div>\n\n\n\n</div>\n\n<div class=\"content-inner\">\n\n\n\n\n<div class=\"question\">\n<h2 class=\"question-title\">電視劇《長安十二時辰》中有哪些值得剖析的細節和彩蛋？</h2>\n\n<div class=\"answer\">\n\n<div class=\"meta\">\n<img class=\"avatar\" .....</p>\r\n<p><strong>【葡萄酒】</strong>.........記食雨</p>\n</div>\n</div>\n\n\n<div class=\"view-more\"><a href=\"https://www.zhihu.com/question/302592028\">查看知乎討論<span class=\"js-question-holder\"></span></a></div>\n\n</div>\n\n\n</div>\n</div><script type=“text/javascript”>window.daily=true</script>",
  "image_hue": "0x26202e",
  "image_source": "《長安十二時辰》",
  "title": "《長安十二時辰》中有哪些值得剖析的細節和彩蛋？",
  "url": "https://daily.zhihu.com/story/9713242",
  "image": "https://pic4.zhimg.com/v2-a3ba34ca7385c9a04fcfa4df2c95b3bb.jpg",
  "share_url": "http://daily.zhihu.com/story/9713242",
  "js": [
    
  ],
  "ga_prefix": "071120",
  "images": [
    "https://pic3.zhimg.com/v2-58be47c85b2af380557a752ed2ca6cca.jpg"
  ],
  "type": 0,
  "id": 9713242,
  "css": [
    "http://news-at.zhihu.com/css/news_qa.auto.css?v=4b3e3"
  ]
}

2.網頁代碼實現

    public static final String MIME_TYPE = "text/html; charset=utf-8";

    public static final String ENCODING = "utf-8";

        // 加載css 和js
     String htmlData = HtmlUtil.createHtmlData(zhihuDetailBean.getBody(),zhihuDetailBean.getCss(),zhihuDetailBean.getJs());
       // 加載網頁內容
     mWebview.loadData(htmlData, HtmlUtil.MIME_TYPE,HtmlUtil.ENCODING);
        

3.頁面動效分析

根據滑動，圖片會向上摺疊，摺疊完畢後toolbar置頂固定。同時標題會移動到toolbar,且收藏按鈕會消失。得出我們需要使用協調佈局實現，CoordinatorLayout AppBarLayout CollapsingToolbarLayout Toolbar FloatingActionButton來共同實現效果。

注意點：

CollapsingToolbarLayout

app:layout_scrollFlags=“scroll|exitUntilCollapsed”
scroll 列表滾動，控件也滾動，exitUntilCollapsed 當向上滾動到最小高度時，不再滾動。
app:collapsedTitleGravity=“left” 摺疊後title 位置
app:contentScrim="?attr/colorPrimary" 摺疊後toolbar背景色
app:expandedTitleMarginEnd=“64dp” 標題展開距離左邊的距離
app:expandedTitleMarginStart="64dp"標題展開距離右邊的距離

Toolbar

app:layout_collapseMode=“pin” toolbar 最後固定到頂部

FloatingActionButton

app:layout_anchor="@id/appbar" 錨點爲appbar
app:layout_anchorGravity=“bottom|end” 右下角位置

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">


    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">


        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="250dp"
            app:collapsedTitleGravity="left"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginEnd="64dp"
            app:expandedTitleMarginStart="64dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"


            >


            <ImageView
                android:id="@+id/top_img"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:scaleType="centerCrop" />


            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"

                />


        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>


    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scrollbars="vertical"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">


        <WebView
            android:id="@+id/webview"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
             />
    </android.support.v4.widget.NestedScrollView>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/colorAccent"
        android:src="@mipmap/ic_gold_like"
        app:layout_anchor="@id/appbar"
        android:layout_margin="15dp"
        app:layout_anchorGravity="bottom|end"
        app:pressedTranslationZ="12dp" />
</android.support.design.widget.CoordinatorLayout>