app透明/沉浸状态栏的实现方案
原文链接 :
1. http://www.jianshu.com/p/34a8b40b9308
2. http://stormzhang.com/android/2015/08/16/boohee-toolbar/
前言
网上已经有很多有关于系统状态栏的解决方案,这篇文章也不会有什么新奇的解决方案,都是本人经过自己试验,统计提炼出来的相对靠谱的一套解决方案.
如果是android大牛可以忽略本文,怕让您贱笑.只面向小白,帮助小白减少摸索的时间.
关于术语
网上有很多争论:
你这状态栏是变色龙状态栏,不是沉浸式的
这应该是沉浸式的状态栏吧,系统栏与actionbar颜色设为一致
我只想说去你妹的,老子只要自己的app的状态栏能和主题颜色一致就行了,定义那么多术语,让我等小白情以何堪?
吐槽归吐槽,但还是不得不去试着理解下这些术语怎么来的,引用这里的一段话:
- 沉浸式全屏模式
隐藏status bar(状态栏)使屏幕全屏,让Activity接收所有的(整个屏幕的)触摸事件。 - 透明化系统状态栏
透明化系统状态栏,使得布局侵入系统栏的后面,必须启用fitsSystemWindows属性来调整布局才不至于被系统栏覆盖。
因此,我就这样理解了:
沉浸式不就是隐藏状态栏嘛,状态栏不见了?这不就是app全屏模式嘛?wtf?
而透明式式状态栏就是让app的内容布局可以扩展到系统状态栏?这里有个问题就是为什么能在系统状态栏还显示的情况下,将内容布局扩展到系统状态栏?恩,这应该很好理解,就是Z坐标系的作用了,系统状态栏是覆盖在内容布局上面的,并且是透明的。
貌似这里所谓透明化系统状态栏才是本菜想要的,不管了,现在开始一一试验,至于这概念理解的对不对,管他呢?那到底应该叫什么,那我就叫自适应状态栏,行不行?
前提条件
让系统状态栏颜色随app主题颜色变化而变化这一设计,毫无疑问,也是向ios学习的:从android4.4开始引进的,并且在5.0进行了改进。因此,也只能将这一特性应用在android4.4以上的手机,无法做到全部适配。记得stormzhang(貌似是)曾说过:
作为一个android程序员,还能有什么比做出ios风格的app更感到悲哀的呢?哎...
两种情况下的解决方案:
- 使用toolbar
这种方案相对简单,个人喜欢这种方案,本菜虽菜,但喜欢紧跟潮流。toolbar太好用了, - 不使用toolbar
1. 使用toolbar的解决方案
这个方法参照了这里,薄荷app的toolbar适配方案
其基本原理就是:
theme里添加style: <item name="android:windowTranslucentStatus"> true </item>后,包含toolbar的内容布局就可以扩展至系统状态栏,状态栏会覆盖在toolbar上,如果此时使用android:fitsSystemWindows="true",就可以调整内容布局(估计也是在根布局上加padding)恢复到原来位置.但是,上面的解决方案确是给toolbar加上一个padding-top="25dp",这样就可以做到系统状态栏的颜色和toolbar的颜色保持一致.具体方案可以参照上面的薄荷app的方案链接.
简述下步骤(只是简述,有疑问请参照上面薄荷app的链接即可):
- 引入v7包,并在布局里添加toolbar
compile ‘com.android.support:appcompat-v7:22.2.1’
- 在代码中设置透明化:
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {WindowManager.LayoutParams localLayoutParams = getWindow().getAttributes();local LayoutParams.flags = (WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS | localLayoutParams.flags); }
当然也可以在theme的样式文件里添加style:<item name="android:windowTranslucentStatus">true</item>,效果相同,但是大神们都说样式文件里设置在某些型号里不生效.ok,大家都在代码里设置就好了
- 给toolbar加上padding-top,toolbar代码如下
<android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent"android:layout_height="wrap_content"android:paddingTop="@dimen/toolbar_padding_top"app:popupTheme="@style/ThemeOverlay.AppCompat.Light"app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"android:background="#30469b"><TextView android:layout_gravity="center" android:layout_width="wrap_content"android:layout_height="wrap_content"android:textSize="20sp"android:text="@string/app_name"/> </android.support.v7.widget.Toolbar>
4.其中android:paddingTop="@dimen/toolbar_padding_top"要在values中的styles文件里设为0dp,在values-v19的styles里设为25dp,原因不多说了
这样就可以达成了我们的目标,如果只是这样也就罢了,按照上面做就可以了,关键是本菜是喜欢紧跟潮流的,使用MD风格的DrawerLayout+NavigationView时,在android4.4的手机下,就会变这样了:
![](http://upload-images.jianshu.io/upload_images/1839594-d8127e1d94db7806.jpg?imageMogr2/auto-orient/strip)
很明显,drawerlayout并没用被扩展至系统状态栏,但在android5.0以上效果还是可以的,这让我很奇怪,只能归咎于5.0的优化了
![](http://upload-images.jianshu.io/upload_images/1839594-36846daa7defb203.jpg?imageMogr2/auto-orient/strip)
经过各种折腾终于想起来,可以把fitsSystemWindows的特性用在drawerlayout上试试,最后发现居然可以,最终将设置windowTranslucentStatus的代码调整如下:
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {WindowManager.LayoutParams localLayoutParams = getWindow().getAttributes(); local LayoutParams.flags = (WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS | localLayoutParams.flags);if(Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP){//将侧边栏顶部延伸至status barmDrawerLayout.setFitsSystemWindows(true); //将主页面顶部延伸至status bar;虽默认为false,但经测试,DrawerLayout需显示设置mDrawerLayout.setClipToPadding(false);}
}
最终android4.4上也可以显示正常:
![](http://upload-images.jianshu.io/upload_images/1839594-7e56cd06c3db7fb5.jpg?imageMogr2/auto-orient/strip)
2. 不使用toolbar的解决方案
不使用toolbar时,而是actionbar时,因为actionbar不好定制,所以无法采用上面那个方法,只能采用其它方法,这里的方案主要参考这里:Translucent System Bar 的最佳实践
这篇简书看的本菜晕乎乎的,仔细看下来,其实都是基于一个原理:
不管有没有actionbar,内容布局的背景颜色一律设为主题颜色,然后有actionbar的话,就将actionbar与内容布局的背景颜色同时设为主题颜色,然后,每个内容布局的根布局都要设上fitsSystemWindows="true"进行调整,感觉超麻烦有没有?
不说多少,简述步骤:
- 在代码中设置透明化,步骤同上
- 设置内容布局的根布局的背景颜色为主题颜色,同时设置fitsSystemWindows="true"
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:background="@color/colorPrimary"android:fitsSystemWindows="true" android:orientation="vertical">
- 在内容布局的下面再设置一层内容布局,设背景颜色为白色(或其它颜色):
<LinearLayout android:layout_width="match_parent"android:layout_height="match_parent"android:background="@color/c_light_white"android:gravity="center"android:orientation="vertical">
至此,这种方案也完成了,看下效果:
![](http://upload-images.jianshu.io/upload_images/1839594-dfdfbdf0c4a7489d.jpg?imageMogr2/auto-orient/strip)
可以看出,这种方案一般情况下,还是可行的,但是有三个问题:
- 如果用上drawerlayout+navigationview,actionbar就会覆盖在侧边栏上(如上图),暂时未找到解决方案,但是我想说你都用drawerlayout+navigationview了,为何不用toolbar,因此这个问题应该不是问题,况且还可以使用其它的侧边栏实现方式,各位道友可以试试
- 这种方案在每个根布局上都要设fitsSystemWindows="true"进行调整,当然上面也有优化方案,可仍然觉得很麻烦,
- 每个根布局里都要多加的一层布局来覆盖根布局的背景主题颜色
因此,这种方案的确不是上上之选.
总结
本文主要在考虑使用标题栏(actionbar/toolbar)的情况下,做出的方案,当然你也可以自定义标题栏,或者不使用标题栏;其实都可以基于上面一样的道理:
在状态栏透明化的前提下,调整顶部view的padding-top,来达到状态栏自适应一体化的目的
网上还有其它蛮多的解决方案,如:
- 使用开源库SystemBarTint,这个库也挺不错的,可以动态改变系统状态栏颜色,但是作者已经2年没有维护了,现在技术更新迭代这么快,鬼知道这个库会不会出现什么问题,因此可以放弃使用了
- 如果不怕麻烦,还可以new一个高度和状态栏一样高的view,插入到内容布局的上面,但是,想想都觉得麻烦,我也懒得试了
app透明/沉浸状态栏的实现方案相关推荐
- android status_bar_height动态调整,Android沉浸状态栏(StatusBar)兼容方案
所谓"沉浸状态栏"的实现需要两点: 设置状态栏为透明或者半透明状态; 整体布局可以置于状态栏下方. 1. 状态栏的配置 对于状态栏的配置有两种方式: 在manifest中配置Act ...
- Android之高仿QQ6.6.0侧滑效果(背景动画、透明+沉浸式状态栏、渐变效果)
根据需求实现类似QQ侧滑效果,之前看到过很多实现方式通过SlidingMenu,但是既然官方推出了自己的专属控件,那么使用DrawerLayout就是不二选择.且看下文. 一.先来看看官方文档解释 D ...
- android透明度大全,状态栏大全-状态栏透明(沉浸式)、变色及全屏的区别
手机的顶部状态栏,也就是信号.电量那条,有4种状态,分别是正常.变色.透明(也称沉浸式状态栏).消失(也就是全屏). 后3种特殊用法,具体见下: 状态栏变色 常见使用场景:如果title背景为纯色且显 ...
- 【Flutter】如何完成一个透明沉浸式状态栏
文章目录 前言 一.默认状态栏 二.修改状态栏 1.基本的沉浸式状态栏 2.透明沉浸式状态栏 3.优化透明沉浸式状态栏 结语 前言 之前遇到的一个需求需要做一个透明的沉浸式状态栏,中间遇到一些问题,记 ...
- 2022-10-13 Android APP 全屏幕显示全透明沉浸式主题android:theme样式 Theme.TranslucentTheme
一.android8真机上运行默认的app主题是这样的,有titile,状态栏不透明. 二.我想改成全透明沉浸式主题样式. 1.res/values/themes.xml 文件添加Translucen ...
- (AS笔记)Android全透明沉浸式主题样式——顶部状态栏+底部导航栏
目录 1.前言 2.自定义主题theme 3.全透明沉浸式主题theme 4.设置状态栏颜色(Android 5.0+) 5.设置状态栏半透明 6.设置状态栏全透明 7.设置底部导航栏半透明 8.全透 ...
- Android沉浸式状态栏(透明系统状态栏)
Android沉浸式状态栏(透明系统状态栏)的目的:顶部系统状态栏和App的导航栏一体化,不给用户突兀的感觉,使用户把更多的视角留在我们的App上. 沉浸式状态栏的兼容情况 Android版本 透明状 ...
- Android 沉浸状态栏
Android 沉浸状态栏 前言 原文:http://blog.csdn.net/mybeta/article/details/50760323 这里说的沉浸状态栏是指透明状态栏,至于为什么国内喜欢将 ...
- flutter全屏背景图(包括appbar和状态栏)以及沉浸状态栏的设置
设置背景图还是挺简单的,直接container里加个decration然后加个图片就行了,就像这样 import 'package:flutter/material.dart';void main() ...
最新文章
- boost::spirit模块实现使用迭代器位置注释 AST的测试程序
- windows 2012执行计划任务错误:操作员或系统管理员拒绝了请求(0x800710E0)
- 解决- SecureCRT上运行 linux vim 命令中文出现乱码
- Visual Studio会让嵌入式开发变得更香
- defconfig、 .config
- hive2 java连接_用Java代码通过JDBC连接Hiveserver2
- 台式机电脑配置单_游戏直播电脑配置要求2019,附配置单及价格
- UML和模式应用5:细化阶段(5)---系统顺序图
- SpringBoot----日志框架和配置,熬夜整理Java面试笔试题
- leetcode刷题:合并两个有序链表
- /etc/apt/sources.list.d/ros-latest.list' permission denied
- 所有for循环都可以用while循环改写python_python-for循环与while循环
- 浏览器对象模型BOM、文档对象模型DOM
- iphone换android手机铃声,iPhone6s怎么更换手机铃声 iPhone苹果6s更换铃声教程
- 小程序保存视频/图片到相册并且授权
- 【能效管理】电力监控系统在某商业数据中心的应用分析
- iOS App签名的原理
- java:获取两个日期相隔天数
- 云服务器安装MYSQL
- 随机场(Random field)