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的颜色,效果如下。
这里写图片描述

coordinatorLayout使用详解及注意事项,看完这篇完全可以开发5.0的高级特效了

coordinatorLayout使用详解及注意事项,看完这篇完全可以开发5.0的高级特效了标签(空格分隔): 未分类一言不合就上个图,还是动态的 代码示例(activity的xml代...
  • qq_31340657
  • qq_31340657
  • 2016年07月15日 16:11
  • 14264

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

公司项目有新的修改,为实现界面滚动时头部工具栏隐藏效果,采用了 CoordinatorLayout AppBarLayoutNestedScrollView 等控件 布局文件如下 Rela...
  • hqiangtai
  • hqiangtai
  • 2016年08月05日 12:00
  • 5878

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

写在最前面: 1. 要想让某个控件扩展到状态栏,必须将该控件作为 AppBarLayout直接子控件,否则无效; 2. 如果要让该控件随着滚动而消失,必须设置layout_scrollFlag属性...
  • zhuxuliao
  • zhuxuliao
  • 2016年06月01日 23:35
  • 2280

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

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

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

  • u011918382
  • u011918382
  • 2016年11月08日 21:43
  • 1702

RecyclerView 盖住 AppBarLayout 问题解决

初学Android,前几天学到Material Design,非常喜欢这个UI。迫不及待就用MD设计尝试写了个App。 然后在开发过程中遇到了些问题。...
  • Rec_Mervyn
  • Rec_Mervyn
  • 2017年08月06日 20:00
  • 518

Android 5.0新控件 AppBarLayout | 嵌套布局 介绍及使用详情

Android 5.0新控件 AppBarLayout | 嵌套布局 介绍及使用详情extends LinearLayout AppBarLayout is a vertical LinearLa...
  • lengxuechiwu1314
  • lengxuechiwu1314
  • 2017年05月18日 16:04
  • 570

AppBarLayout使用个人总结

1.AppBarLayout官网是这么介绍的: AppBarLayout is a vertical LinearLayout which implements many of the feature...
  • zoujian1990520
  • zoujian1990520
  • 2016年12月13日 15:07
  • 2840

使用AppBarLayout实现炫酷的顶部栏

最近一两周一直在研究2005在Gool IO上面提出的Android design support library里面的新的控件。AppBarLayout,Coordinatorlayout,以及C...
  • qq_31927865
  • qq_31927865
  • 2017年01月04日 16:20
  • 309

AppBarLayout 介绍和简单使用

关于Android Design Support Library​ 在Android 5.0 时出现了 Material Design 。瞬时感觉Android 更加牛B哄哄了,可是其它老版本的A...
  • litengit
  • litengit
  • 2016年10月27日 18:45
  • 6677
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CoordinatorLayout、AppBarLayout及控件扩展到状态栏
举报原因:
原因补充:

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