何为沉浸模式,沉浸式状态栏是什么顶栏,变色龙状态栏

银牌会员, 积分 3234, 距离下一级还需 1766 积分
主题帖子社区积分
机&&&&&&&型:魅族 MX5版&&&&&&&本:5.1.5.0A总签到数:235
轻松注册,让你轻松玩转Flyme社区
才可以下载或查看,没有帐号?
本帖最后由 干嘛叫我輝哥哥 于
13:15 编辑
我这人喜欢直接,所以话不多说,看图,喜欢的拿走。以后持续更新!!!
更新目录:
1.29& &qq空间,天天动听,酷狗,qq浏览器
1.30& &墨迹天气
CYMERA_104.jpg (193.36 KB, 下载次数: 29)
19:21 上传
CYMERA_136.jpg (136.28 KB, 下载次数: 2)
19:21 上传
S.jpg (157.76 KB, 下载次数: 2)
19:22 上传
S.jpg (164.7 KB, 下载次数: 2)
19:22 上传
S.jpg (164.09 KB, 下载次数: 2)
19:22 上传
CYMERA_150.jpg (179.47 KB, 下载次数: 2)
13:12 上传
现在有qq空间,天天动听,酷狗,qq浏览器。以后会在此贴持续更新。
游客,如果您要查看本帖隐藏内容请
如使用魅工具箱的,发现诸如天天动听不能完美沉浸的,请试一下在工具箱-应用设置里找到该应用,关闭第三方应用程序沉浸状态栏。
Fio_海爷: 2:55
求顶栏!%%!!
梦呓旧乐章: Zank 4.0 beta测试版也支持沉浸了
签名我魅友,故魅族伴随着 Android 5.0 发布的 Material Design,让 Android 应用告别了以前的工程师审美,迎来了全新的界面,灵动的交互,也让越来越多的 App 开始遵从 material design 设计原则,不再是以前拿着iOS设计稿,做着Android开发。本文就其中的沉浸式状态栏这一特性,描述其兼容到4.4的实现,以及一些使用中的小细节。
在4.4之前状态栏一直是黑色的,在4.4中带来了 windowTranslucentStatus 这一特性,因此可以实现给状态栏设置颜色,如下图所示,状态栏颜色不再是黑色,而是可以定制的颜色。
国内将状态栏变色叫做沉浸式状态栏,时间久了,叫的人多了,大家就不再深究,默认了这种叫法。
可以在知乎上看到关于这个问题的讨论:
需要解决的问题
4.4及其以上都是可以实现沉浸式状态栏效果的,5.0及其以上可以直接在主题中设置颜色,或者调用 Window 类中的 setStatusBarColor(int color) 来实现,这两种方式在5.0上都比较简单,但是如何兼容到4.4呢?
图片背景的页面,怎样让状态栏透明或者半透明(效果如下)?
使用 DrawerLayout 时,主界面实现沉浸状态栏同时,怎样保证抽屉视图也能延伸到状态栏(如下图所示),且兼容到4.4?
以上就是本文要解决的问题,下面给出解决方案。
1. 给状态栏设置颜色
先设置状态栏透明属性;
给根布局加上一个和状态栏一样大小的矩形View(色块),添加到顶上;
然后设置根布局的 FitsSystemWindows 属性为 true,此时根布局会延伸到状态栏,处在状态栏位置的就是之前添加的色块,这样就给状态栏设置上颜色了。
代码如下:
/** * 设置状态栏颜色 * * @param activity 需要设置的activity * @param color 状态栏颜色值 */
public static void setColor(Activity activity, int color) {
if (Build.VERSION.SDK_INT &= Build.VERSION_CODES.KITKAT) {
// 设置状态栏透明
activity.getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
// 生成一个状态栏大小的矩形
View statusView = createStatusView(activity, color);
// 添加 statusView 到布局中
ViewGroup decorView = (ViewGroup) activity.getWindow().getDecorView();
decorView.addView(statusView);
// 设置根布局的参数
ViewGroup rootView = (ViewGroup) ((ViewGroup) activity.findViewById(android.R.id.content)).getChildAt(0);
rootView.setFitsSystemWindows(true);
rootView.setClipToPadding(true);
其中生成状态栏一样大小的矩形色块的代码如下:
/** * 生成一个和状态栏大小相同的矩形条 * * @param activity 需要设置的activity * @param color 状态栏颜色值 * @return 状态栏矩形条 */
private static View createStatusView(Activity activity, int color) {
// 获得状态栏高度
int resourceId = activity.getResources().getIdentifier("status_bar_height", "dimen", "android");
int statusBarHeight = activity.getResources().getDimensionPixelSize(resourceId);
// 绘制一个和状态栏一样高的矩形
View statusView = new View(activity);
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
statusBarHeight);
statusView.setLayoutParams(params);
statusView.setBackgroundColor(color);
return statusV
在 setContentView() 之后调用 setColor(Activity activity, int color) 方法即可。
2. 图片作背景时,状态栏透明
这个实现比较简单,根布局背景设置为图片,然后添加状态栏透明 Flag, 然后设置根布局的 FitsSystemWindows 属性为 true 即可。代码如下:
/** * 使状态栏透明 * &p& * 适用于图片作为背景的界面,此时需要图片填充到状态栏 * * @param activity 需要设置的activity */
public static void setTranslucent(Activity activity) {
if (Build.VERSION.SDK_INT &= Build.VERSION_CODES.KITKAT) {
// 设置状态栏透明
activity.getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
// 设置根布局的参数
ViewGroup rootView = (ViewGroup) ((ViewGroup) activity.findViewById(android.R.id.content)).getChildAt(0);
rootView.setFitsSystemWindows(true);
rootView.setClipToPadding(true);
同样的,在 setContentView() 之后调用 setTranslucent(Activity activity) 方法即可。
3. 使用 DrawerLayout 时的特殊处理
使用 DrawerLayout 时,此时不能再对根布局,即 DrawerLayout 进行设置,而要针对 DrawerLayout 的内容布局进行设置,即抽屉之外的另一个布局。
如下是一个典型的 DrawerLayout 的布局,其内容布局即 FrameLayout,我们需要对 FrameLayout 进行仿状态栏色块的添加、FitsSystemWindows 属性的设置。
&?xml version="1.0" encoding="utf-8"?&
&android.support.v4.widget.DrawerLayout
android:id="@+id/drawer_layout"
xmlns:android="/apk/res/android"
xmlns:app="/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"&
&FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"&
&LinearLayout
android:id="@+id/main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"&
&android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/colorPrimary"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/&
&/LinearLayout&
&/FrameLayout&
&android.support.design.widget.NavigationView
android:id="@+id/navigation"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="@layout/nav_header"
app:menu="@menu/activity_main_drawer"/&
&/android.support.v4.widget.DrawerLayout&
还有一个需要注意的设置抽屉布局(Drawer)的 FitsSystemWindows 属性为 false,即上面布局中的 NavigationView。
DrawerLayout 状态栏变色
代码如下:
/** * 为DrawerLayout 布局设置状态栏变色 * * @param activity 需要设置的activity * @param drawerLayout DrawerLayout * @param color 状态栏颜色值 */
public static void setColorForDrawerLayout(Activity activity, DrawerLayout drawerLayout, int color) {
if (Build.VERSION.SDK_INT &= Build.VERSION_CODES.KITKAT) {
activity.getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
// 生成一个状态栏大小的矩形
View statusBarView = createStatusBarView(activity, color);
// 添加 statusBarView 到布局中
ViewGroup contentLayout = (ViewGroup) drawerLayout.getChildAt(0);
contentLayout.addView(statusBarView, 0);
// 内容布局不是 LinearLayout 时,设置padding top
if (!(contentLayout instanceof LinearLayout) && contentLayout.getChildAt(1) != null) {
contentLayout.getChildAt(1).setPadding(0, getStatusBarHeight(activity), 0, 0);
// 设置属性
ViewGroup drawer = (ViewGroup) drawerLayout.getChildAt(1);
drawerLayout.setFitsSystemWindows(false);
contentLayout.setFitsSystemWindows(false);
contentLayout.setClipToPadding(true);
drawer.setFitsSystemWindows(false);
需要注意的是,DrawerLayout 的布局只能包含两个直接子布局,一个是内容布局,一个是抽屉布局,结构如前面的示例布局所示,如果内容布局的根布局如果不是 LinearLayout 需要对其子布局设置padding top值,否则仿状态栏色块会被遮挡在最下面,布局内容延伸到状态栏,如下图所示:
(ps:就上图中的问题,目前的解决方案感觉并不是很好,如果你有更好的解决方案,请告诉我~)
DrawerLayout 状态栏透明
/** * 为 DrawerLayout 布局设置状态栏透明 * * @param activity 需要设置的activity * @param drawerLayout DrawerLayout */
public static void setTranslucentForDrawerLayout(Activity activity, DrawerLayout drawerLayout) {
if (Build.VERSION.SDK_INT &= Build.VERSION_CODES.KITKAT) {
// 设置状态栏透明
activity.getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
// 设置内容布局属性
ViewGroup contentLayout = (ViewGroup) drawerLayout.getChildAt(0);
contentLayout.setFitsSystemWindows(true);
contentLayout.setClipToPadding(true);
// 设置抽屉布局属性
ViewGroup vg = (ViewGroup) drawerLayout.getChildAt(1);
vg.setFitsSystemWindows(false);
// 设置 DrawerLayout 属性
drawerLayout.setFitsSystemWindows(false);
同样的,在 setContentView() 之后调用上述解决方案中的方法即可。
在项目中使用
以上代码我整理成了一个工具类,放在 github 上:
在项目中推荐这样使用,在 BaseActivity 中重写 setContentView(int layoutResID) 方法,新建一个 setStatusBarColor()方法,全局设置状态栏颜色,因为一般 App 大部分界面状态栏都是主题色。
public class BaseActivity extends AppCompatActivity {
public void setContentView(int layoutResID) {
super.setContentView(layoutResID);
setStatusBarColor();
protected void setStatusBar() {
StatusBarUtils.setColor(this, getResources().getColor(R.color.colorPrimary));
当子类 Activity 的状态栏需要特殊处理时,比如设置不同的颜色,或者设置图片为背景时,重写父类的 setStatusBarColor() 方法即可,例如:
public class ImageStatusBarActivity extends BaseActivity {
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_image_status_bar);
protected void setStatusBar() {
StatusBarUtils.setTranslucent(this);
对 DrawerLayout 布局使用时,需要注意一点,因为方法是在 setContentView() 之后立即调用的,所以传进来的 DrawerLayout 要通过 findViewById() 传进来。如果传入在 setContentView() 之后通过 findViewById() 得到的 DrawerLayout, 则会造成空指针异常。
StatusBarUtils.setColorForDrawerLayout(this, (DrawerLayout) findViewById(R.id.drawer_layout), getResources()
.getColor(R.color.colorPrimary));
源码和Demo下载
效果在前文中都有截图,就不多放了。
如文章中有疏漏的地方,请联系我或在评论里告知。
相关文档  — 
相关经验  — 
相关讨论  — 
& 深度开源经验14521 米
在线时间823 小时
版本V7.1.6.0.LXKCNCK
MIUI X体验组
积分 16862, 距离下一级还需 3138 积分
积分 16862, 距离下一级还需 3138 积分
机型小米手机4c
签到次数46
MIUI版本V7.1.6.0.LXKCNCK
因为和第三方APP不协调,索性表要了
看了下com.android.systemui也没找到?!求指点!
分享到微信朋友圈
打开微信,点击底部的“发现”,使用 “扫一扫” 即可将网页分享到我的朋友圈。
已有&1&人评分
MIUI 因你更精彩!
经验14521 米
在线时间823 小时
版本V7.1.6.0.LXKCNCK
MIUI X体验组
积分 16862, 距离下一级还需 3138 积分
积分 16862, 距离下一级还需 3138 积分
机型小米手机4c
签到次数46
MIUI版本V7.1.6.0.LXKCNCK
com.tencent.qqlite\res\drawable-hdpi& &&&notify_general& && && & notify_newmessage不知道对不对,别 ...
不是,刚研究了下,放附件
(1.54 KB, 下载次数: 37)
22:00 上传
点击文件名下载附件
下载积分: 经验 -1 米
经验3123 米
在线时间219 小时
版本4.3.14
积分 4320, 距离下一级还需 680 积分
积分 4320, 距离下一级还需 680 积分
机型小米手机2A
签到次数22
MIUI版本4.3.14
就是把状态栏背景色和一些软件顶栏颜色一致?想删通知栏底色就在systemui里找那个status_bar_background.9,软件的就在包里找对应软件的文件解包删图片吧。
已有&2&人评分
助人为乐^_^
助人为乐^_^
经验14521 米
在线时间823 小时
版本V7.1.6.0.LXKCNCK
MIUI X体验组
积分 16862, 距离下一级还需 3138 积分
积分 16862, 距离下一级还需 3138 积分
机型小米手机4c
签到次数46
MIUI版本V7.1.6.0.LXKCNCK
就是把状态栏背景色和一些软件顶栏颜色一致?想删通知栏底色就在systemui里找那个status_bar_background.9, ...
status_bar_background_fullscreen.9这个算吗?
经验63618 米
威望264 米
在线时间2182 小时
版本6.5.27
MIUI9 首席内测
机型小米Max
签到次数162
MIUI版本6.5.27
v5_title_bar_bg_light.9& &title_bar_bg.9 还有很多
已有&3&人评分
MIUI 因你更精彩!
MIUI 因你更精彩
助人为乐^_^
经验14521 米
在线时间823 小时
版本V7.1.6.0.LXKCNCK
MIUI X体验组
积分 16862, 距离下一级还需 3138 积分
积分 16862, 距离下一级还需 3138 积分
机型小米手机4c
签到次数46
MIUI版本V7.1.6.0.LXKCNCK
v5_title_bar_bg_light.9& &title_bar_bg.9 还有很多
你知道QQ轻聊版的挂机图标在主题包里是怎么命名的吗?
经验63618 米
威望264 米
在线时间2182 小时
版本6.5.27
MIUI9 首席内测
机型小米Max
签到次数162
MIUI版本6.5.27
你知道QQ轻聊版的挂机图标在主题包里是怎么命名的吗?
com.tencent.qqlite\res\drawable-hdpi& &&&notify_general& && && & notify_newmessage不知道对不对,别的主题的,还有最新QQ4.7.2.2165覆盖不了了
经验3150 米
在线时间37 小时
积分 4493, 距离下一级还需 507 积分
积分 4493, 距离下一级还需 507 积分
不是大神。但是帮顶。。
经验18488 米
在线时间714 小时
版本6.4.29
高三苦逼学子
机型一加手机
签到次数86
MIUI版本6.4.29
通过手机发布
看着就头痛。
经验13860 米
在线时间624 小时
版本6.5.12
积分 19664, 距离下一级还需 336 积分
积分 19664, 距离下一级还需 336 积分
机型小米手机3/4 WCDMA版
签到次数123
MIUI版本6.5.12
通过手机发布
我不懂这个词语
已关注极客秀微信
已关注微信
关注腾讯微博
已关注腾讯微博
关注新浪微博
已关注新浪微博
小米六周年
小米六周年米粉节
MIUI 3000万
MIUI 3000万发烧友纪念勋章
MIUI 2000万
MIUI 2000万发烧友纪念勋章
1000万用户纪念勋章
MIUI1000万用户纪念勋章
MIUI 7纪念勋章
参加流量购买活动
MIUI五周年
MIUI五周年纪念勋章
MIUI三周年
MIUI三周年纪念勋章
MIUI俱乐部发烧友
MIUI俱乐部发烧友
MIUI年度优秀勋章
Copyright (C) 2016 MIUI
京ICP备号 | 京公网安备34号 | 京ICP证110507号

我要回帖

更多关于 沉浸顶栏 的文章

 

随机推荐