关闭

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

标签: android扩展到状态栏Behavior
1529人阅读 评论(2) 收藏 举报
分类:

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

1
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:7093次
    • 积分:150
    • 等级:
    • 排名:千里之外
    • 原创:8篇
    • 转载:0篇
    • 译文:0篇
    • 评论:3条
    文章分类
    文章存档
    最新评论