CoordinatorLayout、AppBarLayout及控件扩展到状态栏

原创 2016年06月01日 23:35:30

写在最前面:
1. 要想让某个控件扩展到状态栏,必须将该控件作为 AppBarLayout直接子控件,否则无效;
2. 如果要让该控件随着滚动而消失,必须设置layout_scrollFlag属性;
3. 当然,要让这一切在android4.4及以上生效,theme必须设置为AppCompat,最外层父控件必须为CoordinatorLayout。(纯属废话)
4. 注意fitSystemWindows属性的设置;如果android:fitSystemWindows=true,那么在window初始化该页面时,会调整对应空间的padding属性以适应系统的某些window(例如StatusBar);
5. 关于各种behaviorCoordinatorLayout详解

控件扩展到状态栏

  1. 主题设置
    ##style
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
    ##将对应的Activity主题设置为AppTheme.NoActionBar
    <style name="AppTheme.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>

    ##style21
    <style name="AppTheme.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
        <item name="android:windowDrawsSystemBarBackgrounds">true</item>
        <item name="android:statusBarColor">@android:color/transparent</item>
    </style>
  1. 布局
    <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="cn.bupt.sse309.summary.master_detail_flow.ItemDetailActivity"
    tools:ignore="MergeRootFrame">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="@dimen/app_bar_height"
        android:fitsSystemWindows="true"
        android:foreground="#77000099"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
        <!--要扩展到状态栏的空间,必须为AppBarLayout的直接子控件,记得设置app:layout_scrollFlag属性-->
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@drawable/bg_monkey"
            app:layout_scrollFlags="scroll|exitUntilCollapsed" />

       <!--当然在此处还可以添加其他控件,例如CollapsingToolbarLayout-->
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.NestedScrollView
        android:id="@+id/item_detail_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="@string/large_text" />
    </android.support.v4.widget.NestedScrollView>
    </android.support.design.widget.CoordinatorLayout>

效果如下:
这里写图片描述

正如上图所示:当滑动时,ImageView总有一部分停留在状态栏,所以谷歌是这样干的:

    <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="cn.bupt.sse309.summary.master_detail_flow.ItemDetailActivity"
    tools:ignore="MergeRootFrame">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="@dimen/app_bar_height"
        android:fitsSystemWindows="true"
        android:foreground="#77000099"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@drawable/bg_monkey"
            app:contentScrim="@color/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:statusBarScrim="@color/colorPrimaryDark"

            app:toolbarId="@+id/detail_toolbar">

            <android.support.v7.widget.Toolbar
                android:id="@+id/detail_toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="parallax"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />


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

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

    <android.support.v4.widget.NestedScrollView
        android:id="@+id/item_detail_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="@string/large_text" />
    </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:layout_gravity="center_vertical|start"
        android:layout_margin="@dimen/fab_margin"
        android:src="@android:drawable/stat_notify_chat"
        app:layout_anchor="@+id/item_detail_container"
        app:layout_anchorGravity="top|end" />

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

也就是,当AppBarLayout下的控件滑动到底部时,让toolbar现实出来,并设置Statusbar的颜色,效果如下。
这里写图片描述

相关文章推荐

Android 将App的内容延伸到状态栏/导航栏

看过Android的桌面应用都是介样的: 如何让自己的应用也达到这般效果呢?这里就介绍几种常用的方法以及它们之间的区别。首先展示下此次demo的布局和初始状态: ...

Android 4.4及以后将内容布局延伸到状态栏

【该文章同步发布到简书:http://www.jianshu.com/p/3e73c372b7ce,转载请注明出处: 】 首先说明:该文章不是大家说的沉浸式状态栏,网上沉浸式状态栏的博客很多,搜索...

沉浸式状态栏时和CoordinatorLayout一起时的坑

公司项目有新的修改,为实现界面滚动时头部工具栏隐藏效果,采用了 CoordinatorLayout AppBarLayoutNestedScrollView 等控件 布局文件如下 Rela...

Android4.4沉浸状态栏结合CoordinatorLayout,AppBarLayout,CollapsingToolbarLayout等使用详解

上一篇我们说了Android4.4沉浸状态栏的使用详解 Android4.4沉浸状态栏全解析 现在我们要把它结合CoordinatorLayout,AppBarLayout,Collapsing...
  • jeffleo
  • jeffleo
  • 2016年06月24日 23:07
  • 3549

Android下的沉浸式状态栏+折叠TitleBar(CoordinatorLayout+CollapsingToolbarLayout)+ViewPager切换实现

Android下的沉浸式状态栏+折叠TitleBar(CoordinatorLayout+CollapsingToolbarLayout)+ViewPager切换实现 最终效果以及过程中...
  • M075097
  • M075097
  • 2016年11月12日 19:10
  • 3753

监听CollaspingToolbarLayout折叠完成事件

看了CollaspingToolbarLayout的源码,发现没有关于折叠事件的监听器,要是需要在折叠完成后完成一些设置,就不能直接通过设置监听器完成了。 不过看了AppbarLayout之后,发现...

玩转AppBarLayout,更酷炫的顶部栏

上一篇文章《CoordinateLayout的使用如此简单 》对CoordinateLayout的使用做了讲解,今天我们再讲解常常与其一起使用的几个View:AppBarLayout、Collapsi...

Android 5.0中的CoordinatorLayout使用技巧

CoordinatorLayout 实现了多种Material Design中提到的滚动效果。目前这个框架提供了几种不用写动画代码就能工作的方法,这些效果包括: *让浮动操作按钮上下滑动,为Snac...
  • wsdssss
  • wsdssss
  • 2016年09月29日 16:48
  • 1754

CoordinatorLayout使用中的坑

前言: 因为项目中有个界面使用到父view和子view嵌套滑动的效果,所以想使用CoordinatorLayout来实现。在这当中遇到一些坑,本文作为一个记录。现在用的UI库版本: compile ...

CoordinatorLayout配合Toolbar,注意下方的View容易被toolbar覆盖

内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CoordinatorLayout、AppBarLayout及控件扩展到状态栏
举报原因:
原因补充:

(最多只允许输入30个字)