使用 CoordinatorLayout 打造一个炫酷的详情页（上）

(点击 上方公众号 ，可快速关注)

来源：尹star

链接：http://www.jianshu.com/p/5287d090e777

开发中如果能恰当的使用material design的一些设计，不仅能让你的APP更炫酷，最重要的是开发起来easy多了。这里介绍下material design里一个很重要的控件：CoordinatorLayout，以及配合其子view的一些用法。

我们在创建Activity的时候，有一个Activity模板叫Scrolling Activity，它实现的就是简单的可折叠工具栏，我们在创建Activity的时候选择此模板，然后并不需要添加任何代码，跑起来就是下图的样子，有没有很漂亮。这个模板一般来说比较适用于App的详情页，比如商品详情，个人详情，视频详情之类的。

Scrolling Activity.gif

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"

xmlns : tools = "http://schemas.android.com/tools"

android : layout_width = "match_parent"

android : layout_height = "match_parent"

android : fitsSystemWindows = "true"

tools : context = "test.com.scrollactivity.ScrollingActivity" >

android . support . design . widget . AppBarLayout

android : id = "@+id/app_bar"

android : fitsSystemWindows = "true"

android : layout_height = "@dimen/app_bar_height"

android : layout_width = "match_parent"

android : theme = "@style/AppTheme.AppBarOverlay" >

android . support . design . widget . CollapsingToolbarLayout

android : id = "@+id/toolbar_layout"

android : fitsSystemWindows = "true"

android : layout_width = "match_parent"

android : layout_height = "match_parent"

app : layout_scrollFlags = "scroll|exitUntilCollapsed"

app : contentScrim = "?attr/colorPrimary" >

android . support . v7 . widget . Toolbar

android : id = "@+id/toolbar"

android : layout_height = "?attr/actionBarSize"

android : layout_width = "match_parent"

app : layout_collapseMode = "pin"

app : popupTheme = "@style/AppTheme.PopupOverlay" />

android . support . design . widget . CollapsingToolbarLayout >

android . support . design . widget . AppBarLayout >

include layout = "@layout/content_scrolling" />

android . support . design . widget . FloatingActionButton

android : id = "@+id/fab"

android : layout_width = "wrap_content"

android : layout_height = "wrap_content"

android : layout_margin = "@dimen/fab_margin"

app : layout_anchor = "@id/app_bar"

app : layout_anchorGravity = "bottom|end"

android : src = "@android:drawable/ic_dialog_email" />

android . support . design . widget . CoordinatorLayout >

这是上面布局引用的NestedScrollView

xml version = "1.0" encoding = "utf-8" ?>

android . support . v4 . widget . NestedScrollView

xmlns : android = "http://schemas.android.com/apk/res/android"

xmlns : tools = "http://schemas.android.com/tools"

xmlns : app