AppBarLayout使用与详解

来源:互联网 发布:hello 树先生 知乎 编辑:程序博客网 时间:2024/05/03 13:28

先来看看效果图(图片借用的哈,效果是这样的)
这里写图片描述

<?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:id="@+id/activity_coordinator_toolbar_test"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context="com.example.ws.scrollviewdemo.CoordinatorToolbarTest">    <android.support.design.widget.AppBarLayout        android:layout_width="match_parent"        android:layout_height="wrap_content">        <android.support.design.widget.CollapsingToolbarLayout            android:layout_width="match_parent"            android:layout_height="wrap_content"            app:layout_scrollFlags="exitUntilCollapsed|scroll">            <ImageView                android:layout_width="match_parent"                android:layout_height="300dp"                android:src="@drawable/ic_pay_zhifubao"                app:layout_collapseMode="parallax" />            <android.support.v7.widget.Toolbar                android:id="@+id/toolbar"                android:layout_width="match_parent"                android:layout_height="?android:attr/actionBarSize"                app:layout_collapseMode="pin">            </android.support.v7.widget.Toolbar>        </android.support.design.widget.CollapsingToolbarLayout>    </android.support.design.widget.AppBarLayout>    <android.support.v4.widget.NestedScrollView        android:layout_width="match_parent"        android:layout_height="wrap_content"        app:layout_behavior="@string/appbar_scrolling_view_behavior">        <LinearLayout            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:orientation="vertical">            <ImageView                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:src="@drawable/ic_pay_yilian" />            <ImageView                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:src="@drawable/ic_pay_yilian" />            <!--……此处n个ImageView,为了滑动的效果-->        </LinearLayout>    </android.support.v4.widget.NestedScrollView></android.support.design.widget.CoordinatorLayout>

在这个布局中我们可以看到几个陌生而又熟悉的控件:CoordinatorLayout、NestedScrollView、CollapsingToolbarLayout、Toolbar还有AppBarLayout。

1、CoordinatorLayout

CoordinatorLayout详解

CoordinatorLayout简单说就是作为父布局来协调子View,为什么要用它呢?在android的开发文档中说,如果AppBarLayout用其他的ViewGroup会不起作用,所以就老老实实的按着文档搞吧……^_^。

2、NestedScrollView

看上面的效果图,可以理解为滑动下面的可以滚动的控件,使上面的AppBarLayout也可以动,所以这就需要上面提到的那个可以协调子View的父 布局了;那么怎么将下面滚动的控件和上面的AppbarLayout关联起来呢?我门可以看到下面的可滚动的控件设置了一个layout_behavior的属性,对就是根据它关联的,自己去写这个Behavior很不方便,文档已经告诉我们了一个已经具有Behavior的可滚动的控件NestedScrollView。

3、Toolbar

Toolbar就不用多说了吧?
想了解看ToolBar详解

4、CollapsingToolbarLayout

CollapsingToolbarLayout是一个包裹ToolBar并实现了可折叠的app bar,它被设计用作AppBarLayout的直接子View。

大概的原理都是这样,下面来介绍一下代码里出现的还有一些没有出现的属性吧:

1、AppBarLayout的子View应该设置app:layout_scrollFlags属性,可设置的值为:

1)scrol:View设置为该值时,会跟随滚动事件一起滚动,就像和NestedScrollView是一体的,一起动。

2)enterAlways:View设置为该值时,当NestedScrollView向下滑动的时候,View会直接向下滑动,不考虑NestedScrollView是否在滑动。

3)exitUntilCollapsed:View设置为该值的时候,当这个View要往上逐渐“消逝”时,会一直往上滑动,直到剩下的的高度达到它的最小高度后,再响应ScrollView的内部滑动事件。(android:attr/actionBarSize最小高度)。

4)enterAlwaysCollapsed:是enterAlways的附加选项,一般跟enterAlways一起使用,它是指,View在往下“出现”的时候,首先是enterAlways效果,当View的高度达到最小高度时,View就暂时不去往下滚动,直到ScrollView滑动到顶部不再滑动时,View再继续往下滑动,直到滑到View的顶部结束。

2、CollapsingToolbarLayout主要包括几个功能:

(1) 折叠Title(Collapsing title):当布局内容全部显示出来时,title是最大的,但是随着View逐步移出屏幕顶部,title变得越来越小。你可以通过调用setTitle函数来设置title。

(2)内容纱布(Content scrim):根据滚动的位置是否到达一个阀值,来决定是否对View“盖上纱布”。可以通过setContentScrim(Drawable)来设置纱布的图片.

(3)状态栏纱布(Status barscrim):根据滚动位置是否到达一个阀值决定是否对状态栏“盖上纱布”,你可以通过setStatusBarScrim(Drawable)来设置纱布图片,但是只能在LOLLIPOP设备上面有作用。

(4)视差滚动子View(Parallax scrolling children):子View可以选择在当前的布局当时是否以“视差”的方式来跟随滚动。(PS:其实就是让这个View的滚动的速度比其他正常滚动的View速度稍微慢一点)。将布局参数app:layout_collapseMode设为parallax

(5)将子View位置固定(Pinned position children):子View可以选择是否在全局空间上固定位置,这对于Toolbar来说非常有用,因为当布局在移动时,可以将Toolbar固定位置而不受移动的影响。
将app:layout_collapseMode设为pin。

参考文档

1 0
原创粉丝点击