扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
本文所提到的透明状态栏其实指的是将顶部的导航栏延伸到状态栏,使之浑然一体(Google官方建议状态栏颜色比导航栏的颜色略深一点),并不代表一定不设置背景色,比如导航栏是白色,则可设置状态栏为白色,视情况而定。
创新互联专注于五河企业网站建设,响应式网站,商城网站建设。五河网站建设公司,为五河等地区提供建站服务。全流程按需网站建设,专业设计,全程项目跟踪,创新互联专业和态度为您提供的服务
相比于iOS系统,Android系统对于状态栏的设置就显得稍微复杂了一点。Android系统提供了API 19以上对状态栏的设置接口,而直到API 23以上才提供对于icon颜色的设置,还有就是各家厂商(如魅族,小米等)对于状态栏的有自己的定制,对于需要使用浅色背景状态栏的应用,没处理好的话往往导致浅色背景,白色icon ,状态栏不分你我的悲剧。。
(内心os:嗯?右上角那一个绿色的电池,用户一定知道他是状态栏对吧。)
我随即对比了一些主流app,发现在我的魅蓝2(Android 5.1 Flyme 4.5)上竟然都不支持透明状态栏,这对于我这种追求审美的人(其实是视觉提的需求)来说简直不能忍。在我折腾了几天之后,终于解决了这些问题,希望对大家思路有一些帮助。
言归正传,本文主要针对以下几点进行分析:1.是否隐藏状态栏(全屏模式) 2.状态栏的背景色的设置 3.状态栏icon的颜色的设置,而对于透明状态栏设置过程中,可能造成的icon颜色设置成功,而背景颜色设置失败,等等原因造成的浅色底,浅色字或深色底,深色字等错误情况的处理及兜底方案 4.源码实现。
下面我们就以上几点来讨论一下Android中透明状态栏的实现。
1. 全屏模式(沉浸式状态栏)
这种情况其实用得并不多,基本上使用场景在闪屏页展示广告或logo,以及一些阅读类app需要尽可能的利用到屏幕大小,展示更多的内容。
设置方法很简单,分两种,在API > 16时:
theme中定义:将自定义该Activtiy的theme,并在其中添加
- true
代码中定义:
2. 状态栏的背景色
我们都知道,在Android5.0(即API > 21)时,Google官方提供接口设置对应的状态栏背景色
window.setStatusBarColor(@ColorInt int color);
那我们要想在Android5.0以下设置背景色就真的没有办法了吗?并不是,我们发现在Android4.4以后,出现了windowTranslucentStatus这一特性,所以思路如下:
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) { // 设置状态栏透明 activity.getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS); // 生成一个状态栏大小的矩形View View statusView = createStatusView(activity, color); 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); }
设置矩形色块的代码如下:
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 statusView; }
效果如下:
3. 状态栏icon的颜色
我们通过调研发现,魅族和小米的两个厂商分别对于Flyme及MIUI做了状态栏的定制,所以我们可以在Flyme4.0以上及MIUIV6以上都可以实现icon颜色的替换,结合上述的状态栏背景色的替换,我们就可以对于魅族及小米两款机型适配浅色的导航栏了。
3.1 魅族Flyme4.0+
/** * 魅族Flyme4+以上透明状态栏 * @param window * @param dark 是否把状态栏字体及图标颜色设置为深色 * @return 是否设置成功 */ public static boolean setMeizuStatusBarDarkIcon(Window window, boolean dark) { boolean result = false; if (window != null) { try { WindowManager.LayoutParams lp = window.getAttributes(); Field darkFlag = WindowManager.LayoutParams.class .getDeclaredField("MEIZU_FLAG_DARK_STATUS_BAR_ICON"); Field meizuFlags = WindowManager.LayoutParams.class .getDeclaredField("meizuFlags"); darkFlag.setAccessible(true); meizuFlags.setAccessible(true); int bit = darkFlag.getInt(null); int value = meizuFlags.getInt(lp); if (dark) { value |= bit; } else { value &= ~bit; } meizuFlags.setInt(lp, value); window.setAttributes(lp); result = true; } catch (Exception e) { //错误处理 } } return result; }
3.2 MIUIV6.0+
/** * 设置状态栏字体图标为深色,需要MIUIV6以上 * @param window * @param dark 是否把状态栏字体及图标颜色设置为深色 * @return 是否设置成功 * */ public static boolean setMIUIStatusBarLightMode(Window window, boolean dark) { boolean result = false; if (window != null) { Class clazz = window.getClass(); try { int darkModeFlag = 0; Class layoutParams = Class.forName("android.view.MiuiWindowManager$LayoutParams"); Field field = layoutParams.getField("EXTRA_FLAG_STATUS_BAR_DARK_MODE"); darkModeFlag = field.getInt(layoutParams); Method extraFlagField = clazz.getMethod("setExtraFlags", int.class, int.class); if(dark){ extraFlagField.invoke(window,darkModeFlag,darkModeFlag);//状态栏透明且黑色字体 }else{ extraFlagField.invoke(window, 0, darkModeFlag);//清除黑色字体 } result=true; }catch (Exception e){ //错误处理 } } return result; }
效果如下:
4. 设置背景色失败处理方案
4.1 解决思路
说了那么多,有童鞋可能就问了,上述说的代码可能对大多数机型有效,但是万一某些机型设置失败了呢?体验不但没提升,反倒让用户不能忍受了。
好吧,下面我们来看一下应该怎么解决。思路如下:
4.2 获取状态栏颜色
/** * 获取状态栏颜色 * * @param window 需要获取的activity * @return color 状态栏的颜色值 */ public static int getColor(Window window){ if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { return window.getStatusBarColor(); }else if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) { ViewGroup decorView = (ViewGroup) window.getDecorView(); int count = decorView.getChildCount(); if (count > 0 && decorView.getChildAt(count - 1) instanceof StatusBarView) { int color = Color.TRANSPARENT; Drawable background = decorView.getChildAt(count - 1).getBackground(); if (background instanceof ColorDrawable) color = ((ColorDrawable) background).getColor(); return color; } } return -1; }
下面讲一下针对如何屏蔽Flyme机型沉浸式状态栏打开时的影响:
private static boolean setMeizuStatusColor(Window window, @ColorInt int color, int alpha) { if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { final View view = window.getDecorView().findViewById(android.R.id.statusBarBackground); if (view != null) { if (!(view.getBackground() instanceof MeizuColorDrawable)) { //替换成自定义ColorDrawable view.setBackground(new MeizuColorDrawable()); } if (view.getBackground() instanceof MeizuColorDrawable) { MeizuColorDrawable colorDrawable = (MeizuColorDrawable) view.getBackground(); int finalColor = StatusBarUtil.calculateStatusColor(color, alpha); view.setBackgroundColor(finalColor); colorDrawable.setColor(finalColor); return true; } } } return false; }
4.3 兜底方案
上面提到了一些失败判断途径,那么如果还是对一些机型无效呢?我的建议是可以在本地预埋一个开关,万一出问题,服务器可以对相应机型的沉浸式开关关掉即可,或者采用hotfix等方式来进行修复。
5. 源码分析
看过上面针对魅族和小米设置icon的源代码我们知道,共同点都是通过反射来进行调用相应的方法,或者对于相应的状态栏视图进行设置颜色。我们来看看源码,在Window中有一个抽象方法是setStatusBarColor而在PhoneWindow中我们找到了该方法的实现
@Override public void setStatusBarColor(int color) { mStatusBarColor = color; mForcedStatusBarColor = true; if (mDecor != null) { mDecor.updateColorViews(null, false /* animate */); } }
mDecor.updateColorViews()
private WindowInsets updateColorViews(WindowInsets insets, boolean animate) { ... updateColorViewInt(mNavigationColorViewState, sysUiVisibility, mNavigationBarColor, navBarSize, navBarToRightEdge, 0 /* rightInset */, animate && !disallowAnimate); boolean statusBarNeedsRightInset = navBarToRightEdge && mNavigationColorViewState.present; int statusBarRightInset = statusBarNeedsRightInset ? mLastRightInset : 0; updateColorViewInt(mStatusColorViewState, sysUiVisibility, mStatusBarColor, mLastTopInset, false /* matchVertical */, statusBarRightInset, animate && !disallowAnimate); ... }
那么mNavigationColorViewState和mStatusColorViewState又是什么呢?别着急,我们继续往下看
private final ColorViewState mStatusColorViewState = new ColorViewState( SYSTEM_UI_FLAG_FULLSCREEN, FLAG_TRANSLUCENT_STATUS, Gravity.TOP, Gravity.LEFT, STATUS_BAR_BACKGROUND_TRANSITION_NAME, com.android.internal.R.id.statusBarBackground, FLAG_FULLSCREEN); private final ColorViewState mNavigationColorViewState = new ColorViewState( SYSTEM_UI_FLAG_HIDE_NAVIGATION, FLAG_TRANSLUCENT_NAVIGATION, Gravity.BOTTOM, Gravity.RIGHT, NAVIGATION_BAR_BACKGROUND_TRANSITION_NAME, com.android.internal.R.id.navigationBarBackground, 0 /* hideWindowFlag */);
mNavigationColorViewState和mStatusColorViewState这两个都是ColorViewState定义好的ColorViewState,主要存储了关于statusbar的一些视图信息。包括id,translucentFlag,verticalGravity等等。
接着看updateColorViewInt()方法,这个方法是对一个View设置颜色的,自然这个View也就是指的状态栏的View,下面来看一下实现:
private void updateColorViewInt(final ColorViewState state, int sysUiVis, int color, int size, boolean verticalBar, int rightMargin, boolean animate) { state.present = size > 0 && (sysUiVis & state.systemUiHideFlag) == 0 && (getAttributes().flags & state.hideWindowFlag) == 0 && (getAttributes().flags & FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS) != 0; boolean show = state.present && (color & Color.BLACK) != 0 && (getAttributes().flags & state.translucentFlag) == 0; boolean visibilityChanged = false; View view = state.view; int resolvedHeight = verticalBar ? LayoutParams.MATCH_PARENT : size; int resolvedWidth = verticalBar ? size : LayoutParams.MATCH_PARENT; int resolvedGravity = verticalBar ? state.horizontalGravity : state.verticalGravity; //对传入的ColorViewState的view做非空判断 if (view == null) { if (show) { //新建一个view state.view = view = new View(mContext); //设置背景色 view.setBackgroundColor(color); view.setTransitionName(state.transitionName); view.setId(state.id); visibilityChanged = true; //有人可能会感觉奇怪,为什么show为true的时候,这里反倒要设置INVISIBLE。从后面代码可以知道,这里无非是想通过动画来做一个渐显操作,而不是立马显示出来。 view.setVisibility(INVISIBLE); state.targetVisibility = VISIBLE; LayoutParams lp = new LayoutParams(resolvedWidth, resolvedHeight, resolvedGravity); lp.rightMargin = rightMargin; addView(view, lp); updateColorViewTranslations(); } } else { int vis = show ? VISIBLE : INVISIBLE; visibilityChanged = state.targetVisibility != vis; state.targetVisibility = vis; if (show) { LayoutParams lp = (LayoutParams) view.getLayoutParams(); if (lp.height != resolvedHeight || lp.width != resolvedWidth || lp.gravity != resolvedGravity || lp.rightMargin != rightMargin) { lp.height = resolvedHeight; lp.width = resolvedWidth; lp.gravity = resolvedGravity; lp.rightMargin = rightMargin; view.setLayoutParams(lp); } //设置背景色 view.setBackgroundColor(color); } } //改变状态栏visibility属性时加入动画 if (visibilityChanged) { view.animate().cancel(); if (animate) { if (show) { //显示时先设置为全透明 if (view.getVisibility() != VISIBLE) { view.setVisibility(VISIBLE); view.setAlpha(0.0f); } //关于透明度的动画插值器 view.animate().alpha(1.0f).setInterpolator(mShowInterpolator). setDuration(mBarEnterExitDuration); } else { view.animate().alpha(0.0f).setInterpolator(mHideInterpolator) .setDuration(mBarEnterExitDuration) .withEndAction(new Runnable() { @Override public void run() { state.view.setAlpha(1.0f); state.view.setVisibility(INVISIBLE); } }); } } else { view.setAlpha(1.0f); view.setVisibility(show ? VISIBLE : INVISIBLE); } } }
6. 总结
话说了这么多,其实就是想让大家知道为什么很多app放弃在较低版本的Android系统对状态栏进行视觉修改,尤其是浅色导航栏的应用。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持创新互联。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流