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>