Android之AppBarLayout实现悬停吸附伸缩效果，kotlin标准库

<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.support.v4.widget.NestedScrollView

android:layout_width=“match_parent”

android:layout_height=“match_parent”

app:layout_behavior="@string/appbar_scrolling_view_behavior" >

</android.support.v4.widget.NestedScrollView>

</android.support.design.widget.CoordinatorLayout>

app:layout_behavior="@string/appbar_scrolling_view_behavior" >

``

app:layout_behavior="@string/appbar_scrolling_view_behavior" >

CollapsingToolbarLayout:

---

CollapsingToolbarLayout也是android.support:design包中的支持的控件,继承自FrameLayout.主要用于实现ToolBar的伸缩效果,而且必须为AppBarLayout的直接子View;

继承结构图如下:

java.lang.Object

↳ android.view.View

↳ android.view.ViewGroup

↳ android.widget.FrameLayout

↳ android.support.design.widget.CollapsingToolbarLayout

主要使用到的方法如下:

• setCollapsedTitleGravity

void setCollapsedTitleGravity（int gravity）

设置折叠标题和垂直重力的水平对齐方式，当折叠边界中有额外空间超出标题本身所需的空间时，将使用该对齐方式

相关的XML属性：

CollapsingToolbarLayout_collapsedTitleGravity

2.setExpandedTitleGravity

void setExpandedTitleGravity（int gravity）

设置展开标题和垂直重力的水平对齐方式，当扩展边界中有额外空间超出标题本身所需的空间时，将使用该对齐方式。

相关的XML属性：

CollapsingToolbarLayout_expandedTitleGravity

3.setExpandedTitleTextColor

void setExpandedTitleTextColor（ColorStateList colors）

设置展开标题的文本颜色。

4.setCollapsedTitleTextColor

void setCollapsedTitleTextColor（ColorStateList colors）

设置折叠标题的文本颜色。

5.setCollapsedTitleTypeface

void setCollapsedTitleTypeface（字体字体）

设置用于折叠标题的字体。

5.setExpandedTitleMarginBottom

void setExpandedTitleMarginBottom（int margin）

以像素为单位设置底部展开的标题边距。

相关的XML属性：

CollapsingToolbarLayout_expandedTitleMarginBottom

• 固定Toolbar

app:layout_collapseMode=“pin”

6.更多方法见文档

关于AppBarLayout的三剑客组合就介绍的差不多了,想进一步了解的可以去查阅官方文档,上面都给出了连接的.

特别说明:

三剑客配合使用，可以做出一些很炫酷的UI效果.

但是前提必须满足:AppbarLayout 要作为CoordinatorLayout 的直接子View，而CollapsingToolbarLayout 要作为AppbarLayout 的直接子View ，否则，上面展示的效果将实现不了.

AppbarLayout实例展示

---

1.仿 [开眼App]个人中心效果

• .xml布局文件:

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

<android.support.design.widget.CoordinatorLayout

xmlns:android=“http://schemas.android.com/apk/res/android”

android:layout_width=“match_parent”

android:layout_height=“match_parent”

xmlns:fresco=“http://schemas.android.com/apk/res-auto”

xmlns:imagetext=“http://schemas.android.com/apk/res-auto”

xmlns:app=“http://schemas.android.com/apk/res-auto”

android:orientation=“vertical”

android:background="@color/colorWhite"

<android.support.design.widget.AppBarLayout

android:id="@+id/center_appbar_layout"

android:layout_width=“match_parent”

android:layout_height=“wrap_content”

app:elevation=“0dp”

android:background="@color/colorWhite"

android:fitsSystemWindows=“true”

<android.support.design.widget.CollapsingToolbarLayout

android:id="@+id/collapsing_toobar"

android:layout_width=“match_parent”

android:layout_height=“260dp”

app:layout_scrollFlags=“scroll|exitUntilCollapsed”

app:contentScrim="@color/colorGraylight"