Android 沉浸式状态栏的多种样式-阿里云开发者社区

开发者社区> 阿策~> 正文

Android 沉浸式状态栏的多种样式

简介:       小菜最近正在处理客户端顶部沉浸式展示图片,借此整理了一下小菜自己研究测试的沉浸式状态栏。       沉浸式状态栏大家都很熟悉,即 APP 界面图片延伸到状态栏, 应用本身沉浸于状态栏,即顶部不会默认展示系统的黑条。
+关注继续查看

      小菜最近正在处理客户端顶部沉浸式展示图片,借此整理了一下小菜自己研究测试的沉浸式状态栏。
      沉浸式状态栏大家都很熟悉,即 APP 界面图片延伸到状态栏, 应用本身沉浸于状态栏,即顶部不会默认展示系统的黑条。因为小菜技术有限,理解不透彻,所以仅分享一下自己应用测试中可以呈现的几种样式。


基本样式

公共的步骤:

  1. 布局文件中添加使用 Toolbar 控件(纯色 Toolbar 背景色为颜色,图片 Toolbar 样式设置背景色为图片或添加一个 ImageView 控件),在文件根布局与 Toolbar 中添加 android:fitsSystemWindows="true",这个很重要,可以使背景图片延伸至状态栏,当然在 Java 文件中设置一样的效果;
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white"
    android:fitsSystemWindows="true"
    android:orientation="vertical">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorAccent"
        android:fitsSystemWindows="true">
    </android.support.v7.widget.Toolbar>
</LinearLayout>
  1. 设置主题样式,一般是三个 style.xml 文件,分别是 values (默认)、 values-v19 (处理 Android4.4 版本) 和 values-v21 (处理 Android5.0以后的半透明);
values style.xml
<style name="ToorbarTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="android:windowNoTitle">true</item>
    <item name="android:windowFullscreen">false</item>
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
    <item name="android:windowIsTranslucent">true</item>
    <item name="android:windowActionBar">false</item>
</style>
values-v19 style.xml
<style name="ToorbarTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="android:windowNoTitle">true</item>
    <item name="android:windowFullscreen">false</item>
    <item name="android:windowTranslucentStatus">false</item>
    <item name="android:windowTranslucentNavigation">true</item>
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
    <item name="android:windowIsTranslucent">true</item>
</style>
values-v21 style.xml
<style name="ToorbarTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="android:windowNoTitle">true</item>
    <item name="android:windowFullscreen">false</item>
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
    <item name="android:windowIsTranslucent">true</item>
    <item name="android:windowActionBar">false</item>
</style>
  1. Java 代码中处理导航栏变黑和透明的主题版本判断;
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    val window = window
    window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS)
    window.statusBarColor = resources.getColor(R.color.colorAccent)
    window.decorView.systemUiVisibility = View.SYSTEM_UI_FLAG_LAYOUT_STABLE or View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
}

纯色 Toolbar 样式

正常纯色 Toolbar 样式

      纯色 Toolbar 在使用中一般会将顶部状态栏设置与 Toolbar 背景色一致;

val window = window
window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS)
window.statusBarColor = resources.getColor(R.color.colorAccent)

被遮挡操作栏 Toolbar

      在测试过程中会出现底部虚拟操作按纽栏目被遮挡,如下图,此时应注意设置 systemUiVisibility 属性。

window.decorView.systemUiVisibility = View.SYSTEM_UI_FLAG_LAYOUT_STABLE or View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN

无状态栏 Toolbar 样式(一般不会应用)

无状态栏 Toolbar 样式

无状态栏 Toolbar 样式一般不会在日常中使用,但是测试的过程中发现,分享给大家,其根本原因是主题中 <item name="android:windowFullscreen">true</item>,其他处理上面完全相同。

<style name="ToorbarNoBarTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="android:windowBackground">@null</item>
    <item name="android:windowNoTitle">true</item>
    <item name="android:windowFullscreen">true</item>
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
</style>

图片 Toolbar 样式

图片 Toolbar 样式

      图片 Toolbar 样式,一般分两种:一种是设置 Toolbar 背景图 background;另一种是添加一个 ImageView 控件。小菜用的是作为 Toolbar 背景图 background 方式处理,使用 ImageView 控件时还需要单独处理图片,并有部分拉伸的可能。

图片作为布局背景沉浸样式

图片布局背景

图片背景被拉伸
  1. 图片作为布局背景的方式比较简单,方式与公共的相同,只是不需要 Toolbar 而已。
  2. 测试发现,若将根布局的高设为 android:layout_height="wrap_content" 时图片正常展示,如果为 android:layout_height="match_parent" 则图片会被拉伸,当然小菜认为根布局设置为 wrap_content 方式是不合理的。
  3. 小菜的解决方法是使用 layer-list 的 drawable,类似于启动页初始加载时的样式。
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/colorPrimary"></item>
    <item android:top="26dp">
        <bitmap
            android:gravity="top|center_horizontal"
            android:src="@mipmap/icon_bg" />
    </item>
</layer-list>

      Tips1:还有一种样式与沉浸式展示效果一样,就是折叠布局 CollapsingToolbarLayout 折叠后的效果也是沉浸式状态,可以固定折叠后的状态,但是并不建议这样处理,只是偶然想到而已,各位有兴趣可以研究一下。
      Tips2:使用 Toolbar 时,建议不要再多添加一层布局 Layout,需要的话可以用 CoordinatorLayout。

Screenshot_20180424-224557.jpg

<!-- 不建议用: -->
<LinearLayout
    android:id="@+id/user_header_new_login_lay"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:orientation="vertical">
    <android.support.v7.widget.Toolbar
        android:layout_width="match_parent"
        android:id="@+id/test_tb"
        android:fitsSystemWindows="true"
        android:layout_height="100dp">
    </android.support.v7.widget.Toolbar>
</LinearLayout>
<!-- 建议使用: -->
<android.support.design.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">
    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        app:elevation="0dp">
        <android.support.v7.widget.Toolbar
            android:layout_width="match_parent"
            android:id="@+id/test_tb"
            android:fitsSystemWindows="true"
            android:layout_height="100dp">
        </android.support.v7.widget.Toolbar>
    </android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>

      GitHub 实例


      下面的是小菜我的公众号,欢迎闲来吐槽哦~


公众号

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Android开发学习之使用Toolbar实现不同的Fragment使用不同颜色的标题栏与状态栏
Android开发学习之使用Toolbar实现不同的Fragment使用不同颜色的标题栏与状态栏                                            先看效果图。
2307 0
Android ToggleButton:状态切换的Button
 Android ToggleButton:状态切换的Button Android ToggleButton和Android Button类似,但是ToggleButton提供了一种选择机制,可以表达Button处于何种状态,比如常见的WiFi打开或者关闭状态等等这种类似与非门的状态机。
658 0
Android在一个TextView里显示不同样式的字体
在同一个TextView里显示不同样式的字体 public void setSpan(Object what, int start, int end, int flags); 样式1:...
866 0
怎么设置阿里云服务器安全组?阿里云安全组规则详细解说
阿里云服务器安全组设置规则分享,阿里云服务器安全组如何放行端口设置教程
8430 0
Android手写状态切换布局
实现状态切换布局 image 效果图 image 原理 继承RelativeLayout,然后向其中添加各种状态的View,通过对各种View的显示隐藏的切换来实现各种状态的切换。
922 0
Android状态栏透明(沉浸式效果)
Android状态栏透明(沉浸式效果) 默认效果 沉浸式效果 方式一 源码 下载地址(Android Studio工程):http://download.
913 0
android(cm11)状态栏源码分析(一)
版权声明:您好,转载请留下本人博客的地址,谢谢 https://blog.csdn.net/hongbochen1223/article/details/50216563 (一):写在前面 最近由于工作需要,需要了解CM11中的有关于StatusBar相关的内容。
950 0
Android状态管理优化
目录介绍 01.界面状态有哪些 02.采用include方式管理 03.在Base类中处理逻辑 04.如何降低偶性和入侵性 05.封装低入侵性状态库 5.1 自定义帧布局 5.2 自定义状态管理器 5.
2598 0
Android屏幕适配之状态栏导航栏半透明、全透明(5.0以上去阴影),方法多样
1.1 StatusBar半透明用StatusBarView实现(4.4以上有效) 1.2 StatusBar半透明用setStatusBarColor实现(5.0以上有效) 2.1 StatusBar全透明用fitSystemWindows实现(4.
3933 0
一文详解 Android状态机StateMachine 使用方式及实现原理
`StateMachine`不是`Android SDK`中的相关API,是存在于`frameworks`层源码中的一个Java类。通过这篇文章探究一下其使用方式以及实现原理。
12 0
+关注
阿策~
Android/Kotlin/Flutter 小菜鸟,基础技术博客学习与整理~
189
文章
11
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载