CoordinatorLayout:AppBarLayout应用标题栏容器

首先稍微说下CoordinatorLayout(协调者布局)实现了多种Material Design中提到的滚动效果,把CoordinatorLayout作为根布局容器,

其子控件可以不用写动画相关的代码就能产生动画;

MD提供的主要子控件有:

FloatingActionButton浮动操作按钮

AppBarLayout应用标题栏容器

NestedScrollView类似ScrillView,配合AppBarLayout执行动画使用

ToolBar工具栏

Snackbar反馈提示栏

今天demo里面主要用到CoordinatorLayout(协调者布局),AppBarLayout(应用标题栏容器),NestedScrollView,ToolBar工具栏

不了解ToolBar的可以看下这个博客:

http://blog.csdn.net/zheng_jiao/article/details/52587746


想要使用这些5.0的特效,必须在build中配置:

dependencies {
    compile 'com.android.support:design:23.1.1'
}

xml布局:

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:fitsSystemWindows="true"
    tools:context="www.abld.com.appbarlayoutdemo.MainActivity"
    >

    <!--AppBarLayout标题的容器,只能作为coordinatorlayout里面的第一个子View
    AppBarLayout是一个容器,需要滚动的子view必须放到这个容器里面

    android:fitsSystemWindows="true"          适应系统,是否把内容显示到状态栏

    app:layout_scrollFlags="scroll"           决定子view能否滚出屏幕
    -->
    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="250dp"
            android:src="@drawable/lbone"
            android:scaleType="centerCrop"
            app:layout_scrollFlags="scroll"/>

        <android.support.v7.widget.Toolbar
            android:id="@+id/toobar"
            android:layout_width="match_parent"
            android:layout_height="56dp"
            app:layout_scrollFlags="scroll"
            android:background="@android:color/holo_blue_dark" />

        <TextView
            android:background="@android:color/holo_orange_dark"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:padding="15dp"
            android:text="小成功靠磨难,大成就靠灾难!"/>

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

    <!--主内容写在这里

    必须是NestedScrollView或者是RecyclerView,其他控件不能滑动
    因为他们都能配置layout_behavior这个属性
    NestedScrollView和ScrollView使用方法一模一样

    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    不写这个属性整个布局会占满屏幕;用来通知AppBarLayout界面内容发生了滚动事件,
    不配置滚动的话上面内容会一下子滚上去
    -->
    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/app_text"
            android:padding="15dp"/>
    </android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

向上滑动的时候文章的标题能够停留在屏幕的顶端就是因为没有配置app:layout_scrollFlags

其实可以通过配置app:layout_scrollFlags的属性来实现不同的动画效果:

scroll:列表在顶端时,可以跟着滑动方向滑动(只有配置scroll其他属性才能生效)

enterAlways:不管滑动列表到哪,只要往下拉当前控件就跟着向下划出

enterAlwaysCollapsed:跟enterAlways类似,但是最大只能划出折叠后的大小,要配合android:minHeight属性使用,最小高度即为折叠后的高度

(配置方式“scroll | enterAlways | enterAlwaysCollapsed”)

exitUntilCollapsed:不管滑动列表到哪只要向上拉,这个View会跟着滑动直到折叠,配合android:minHeight属性使用,最小高度即为折叠后的高度

(配置方式"scroll | exitUntilCollapsed")

snap:滑动结束的时候,如果这个View部分显示,它会滑动到离他最近的上边缘或下边缘


默认可以兼容到android2.2,但是清单文件中的theme要配置好,不然在5.0一下的版本中运行会报错:

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="windowActionBar">false</item>
        <item name="android:windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
        <item name="android:windowNoTitle">true</item>
    </style>


点击打开链接免费下载源码

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章