Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Android 沉浸式状态栏 以及 伪沉浸式状态栏

Android 沉浸式状态栏 以及 伪沉浸式状态栏

作者头像
阿策小和尚
发布于 2019-08-12 08:09:45
发布于 2019-08-12 08:09:45
1.7K00
代码可运行
举报
文章被收录于专栏:阿策小和尚阿策小和尚
运行总次数:0
代码可运行

和尚我最近在调整页面状态栏的效果,主要包括沉浸式状态栏伪沉浸状态栏(同事唠嗑给定义的玩的)。 前段时间整理过一篇 Android 沉浸式状态栏的多种样式,现在和尚我在稍微的补充一下,都是在日常应用中测试整理的。


非 Toolbar 标题栏

就和尚我接触的项目中根据业务不同,不是所有的标题栏都是 Toolbar 标题栏样式,很多是自定义的标题栏样式,为了效果统一,和尚我的解决方案是修改顶部状态栏的颜色为程序的主题色,戏称为伪沉浸式状态栏。 以下是和尚我自己测试的最简单的标题栏样式:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<?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:orientation="vertical">
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="46dp"
        android:background="@color/colorAccent"
        android:gravity="center">
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="left|center"
            android:paddingLeft="6dp"
            android:src="@mipmap/icon_back_white" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="我是标题"
            android:textColor="@android:color/white"
            android:textSize="18sp" />
    </FrameLayout>
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="我是内容"
        android:textSize="18sp" />
</LinearLayout>
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_toolbar)
    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.statusBarColor = Color.TRANSPARENT
        //window.decorView.systemUiVisibility = View.SYSTEM_UI_FLAG_LAYOUT_STABLE or View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
    }
}

图1

图2


Tips1: Window 是一个很值得研究的类,设置 statusBarColor 属性即可修改状态栏颜色。 Tips2: 若配合打开代码中注释的两行,整体的效果是隐藏掉状态栏高度,标题栏上移,如图2所示,在其他相应的场景下很有用。


Toolbar 标题栏

和尚我花了不少时间在以前的博客中,大家可以移步审查一下。现在和尚又用了一种方式,主要是为了满足实时网络更换主题图,采用 背景主题色+透明图层 方式。如果不需要来回更换图片可以直接用 layer-list 的 drawable 方式,现在需要随意更换图片,所以和尚我把这主题色和透明涂层区分开。 以下是和尚加载一张图片的 Toolbar 方式:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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"
    tools:context="com.roating.ace.ace06.ToolbarTestActivityK">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorAccent"
        android:gravity="center"
        android:orientation="vertical">
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@mipmap/icon_bg"
            android:fitsSystemWindows="true"
            android:gravity="center" />
    </LinearLayout>
</android.support.constraint.ConstraintLayout>
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
override fun onCreate(savedInstanceState: Bundle?) {
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
        val window = window
        window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS)
        window.statusBarColor = Color.TRANSPARENT
        window.decorView.systemUiVisibility = View.SYSTEM_UI_FLAG_LAYOUT_STABLE or View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
    }
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_toolbar_test)
}

和尚我是在 Toolbar 外添加一层 LinearLayout 作为背景主题色涂层,Toolbar 添加背景图,而 Toolbar 的位置宽高等均可按需求定义,并配合上面刚提到的 Tips2 方式处理以下。


Tips1: 网上有人说 window 的设置需要放在 setContentView 加载布局文件之前,和尚我特意用前后两种位置尝试,效果是一致的。 Tips2: 在使用 window.statusBarColor 时,会提示:Call requires API level 21(current min is 15):android.view.Window#setStatusBarColor,此时不建议用 @TargetApi(Build.VERSION_CODES.KITKAT) 这种方式,这样会固定一个版本,且顶部状态栏有时会修改无效,建议用如上 if方式 判断处理。


本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2018-05-21,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 阿策小和尚 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
Android 沉浸式状态栏的多种样式
和尚我最近正在处理客户端顶部沉浸式展示图片,借此整理了一下和尚自己研究测试的沉浸式状态栏。 沉浸式状态栏大家都很熟悉,即 APP 界面图片延伸到状态栏, 应用本身沉浸于状态栏,即顶部不会默认展示系统的黑条。和尚我技术有限,理解不透彻,仅分享一下自己应用测试中可以呈现的几种样式。
阿策小和尚
2019/08/12
1.6K0
Android 沉浸式状态栏的多种样式
Android如何实现超级棒的沉浸式体验
做APP开发的过程中,有很多时候,我们需要实现沉浸式的体验。
老码小张
2018/10/25
3K1
关于 Android 状态栏的适配总结
Android 5.0 及其以后版本:设置属性 View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN 使得我们的内容布局可以延伸到系统状态栏,然后直接使用方法 setStatusBarColor() 把系统状态栏设置成透明就好了。
开发者
2019/12/26
1.3K0
关于 Android 状态栏的适配总结
Android 沉浸式状态栏的实现
之所以不添加values-v21是因为 Android5.0(api21)的黑色层通过style去掉后 应用切出去后再切进来后会再次出现
码客说
2019/10/22
7660
Android 沉浸式解析和轮子使用
我们先一起来回顾一下实现沉浸式状态栏的一般套路。在 Android 上,关于对 StatusBar(状态栏)的操作,一直都在不断改善,并且表现越来越好,在 Android4.4 以下,我们可以对 StatusBar 和 NavigationBar 进行显示和隐藏操作。但是直到 Android4.4,我们才能真正意义上的实现沉浸式状态栏。从 Android4.4 到现在(Android 9),关于沉浸式大概可以分成三个阶段:
有赞coder
2020/08/25
3.4K0
Android 沉浸式解析和轮子使用
Android 沉浸式状态栏与华为虚拟按键的冲突处理
最近在写自己的小东西的时候,遇到了一个Bug,就是沉浸式转态栏与华为虚拟按键的冲突的问题。 先看一下出现问题的图
全栈程序员站长
2021/04/07
6650
Android Java 动态修改 CheckBox 样式
和尚我一直在处理动态配置页面颜色方面的工作,包括各布局,各控件等,而和尚我却在最常用最基本的 CheckBox 选项框这个控件却栽了跟头,折腾了好久,今天有机会总结整理一下。 大家都很熟悉,xml 在很多时候大大节省了我们开发的时间,但 xml 里面配置的样式只有默认的,在动态修改方面还是要靠 Java/Kotlin 代码优化。基本上 xml 中可以配置的属性在 Java/Kotlin 代码中都有相对应的方法,然而和尚我在对应使用 CheckBox 控件的 android:buttonTint="@color/colorAccent" 属性时,却不尽如人意,不仅在设置过程中需要版本大于21,更重要的是设置完之后并不起效果。和尚我也查阅了不少资料,请教了几位大神,依旧没有解决问题。 实在没办法,和尚我决定放弃 CheckBox 转投 v7 包中的 AppCompatCheckBox,通过设置 setSupportButtonTintList 方法来动态修改选项框颜色。
阿策小和尚
2019/08/12
2.6K0
Android Java 动态修改 CheckBox 样式
android 设置标题栏背景颜色_状态栏菜单栏都在哪
android中沉浸式状态栏的文章已经满大街了,可是在实现某些效果时,还是得各种搜索,测试一通后,最后还常常满足不了要求,即使好不容易在一部手机上满足了需求,放在另外一手机上,发现效果还各种不适配。今天把自己这几天学到的关于沉浸式状态栏知识进行总结下。
全栈程序员站长
2022/11/01
2.5K0
android 设置标题栏背景颜色_状态栏菜单栏都在哪
Material Design 实战 之 第六弹 —— 可折叠式标题栏(CollapsingToolbarLayout) & 系统差异型的功能实现(充分利用系统状态栏空间)
顾名思义,CollapsingToolbarLayout是一个作用于Toolbar基础之上的布局,由DesignSupport库提供。
凌川江雪
2018/10/09
2.5K0
Material Design 实战 之 第六弹 —— 可折叠式标题栏(CollapsingToolbarLayout) & 系统差异型的功能实现(充分利用系统状态栏空间)
沉浸式状态栏的三种实现方式
沉浸式算是目前Android行业比较流行的一种App设计风格,将菜单栏北京设置为导航栏的颜色,感觉顶部状态栏像是被入侵了一样,因此称为沉浸式菜单栏。本文将介绍三种方式去实现沉浸式状态栏。
开发者技术前线
2020/11/23
1.9K0
沉浸式状态栏的三种实现方式
再学一遍android:fitsSystemWindows属性
对于android:fitsSystemWindows这个属性你是否感觉又熟悉又陌生呢?
用户1158055
2022/05/10
1.4K0
再学一遍android:fitsSystemWindows属性
轻松实现app中的导航Tab栏悬浮功能
又到了更博的时间了,今天给大家带来的就是“导航Tab栏悬浮功能”了。通常大家在玩手机的过程中应该会注意到很多的app都有这种功能,比如说外卖达人常用的“饿了么”。下面就给出了“饿了么”导航Tab栏悬浮的效果图。
俞其荣
2022/07/28
2.2K0
轻松实现app中的导航Tab栏悬浮功能
沉浸式状态栏的封装使用
  随着用户要求的不断提高,Android版本的不断升级,沉浸式状态栏似乎已经成为了每个App的必备功能。   首先要实现它我们得先理解他,状态栏不同于标题栏,状态栏是Android手机自带的,显示一些Android内置的信息。正常情况下位于我们标题栏上方,以黑色居多。我们的标题栏多数是不会使用黑色标题的,所以,如果不控制状态栏的颜色,就是和我们的标题栏有明显的色彩差。   在笔者的使用中,沉浸式状态栏分为两种:
饮水思源为名
2018/09/06
1.1K0
沉浸式状态栏的封装使用
Android应用界面开发——ListView,GridView,ScrollView
ListView的意思是列表视图,是应用最广泛的一种视图,例如联系人,功能列表,菜单等等都会用到ListView。
trampcr
2018/09/28
1.8K0
Android应用界面开发——ListView,GridView,ScrollView
Android:O泡果奶——来场恶作剧
我将背景音乐换成了周星驰经典的狂笑,图片也换得鬼畜了一些,下面放一下核心代码: activity_main.xml:
zstar
2022/06/14
6490
Android:O泡果奶——来场恶作剧
项目需求讨论-标题栏上的搜索功能
今天讲的就是一个很简单的具体开始时候遇到的需求,在标题栏中实现搜索功能,而且美工要求需要实现下面GIF图的效果,我就实现了下,可能不是最好的,有哪里可以更方便请大家指出。正好仔细的讲解了下SearchView和Toolbar。希望大家看看我哪里是不是讲错了。哈哈。
青蛙要fly
2018/08/29
1.6K0
项目需求讨论-标题栏上的搜索功能
Android 天气APP(十七)热门城市 - 国内城市
在上一篇做了国外的热门城市数据的展示,这一篇就简单一些,增加国内的热门城市。 效果图
晨曦_LLW
2020/09/25
8080
Android 基础动画之 scale 渐变缩放
和尚最近在学习 ViewPager 的小动画,说来惭愧,工作这么久了一直没有认真了解过动画这部分,今天特意学习一下 Android 的基本动画。
阿策小和尚
2019/08/12
1.6K0
Android 基础动画之 scale 渐变缩放
推荐阅读
相关推荐
Android 沉浸式状态栏的多种样式
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验