登录注册
最新博客
最新资源下载
严选Android透明化/沉浸式状态栏实践及源码分析
阿凡达2018-06-28 16:22何为透明状态栏？有人说透明状态栏就是沉浸式状态栏，这里不多解释，详见为什么在国内会有很多用户把「透明栏」（Translucent Bars）称作 「沉浸式顶栏」？。本文将对于透明状态栏设置方法做一个讲解，以及遇到的问题该怎么解决，来面对各种需求。
本文所提到的透明状态栏其实指的是将顶部的导航栏延伸到状态栏，使之浑然一体（Google官方建议状态栏颜色比导航栏的颜色略深一点），并不代表一定不设置背景色，比如导航栏是白色，则可设置状态栏为白色，视情况而定。
相比于iOS系统，Android系统对于状态栏的设置就显得稍微复杂了一点。Android系统提供了API 19以上对状态栏的设置接口，而直到API 23以上才提供对于icon颜色的设置，还有就是各家厂商（如魅族，小米等）对于状态栏的有自己的定制，对于需要使用浅色背景状态栏的应用，没处理好的话往往导致浅色背景，白色icon ，状态栏不分你我的悲剧。。
（嗯？右上角那一个绿色的电池，用户一定知道他是状态栏对吧。）
我随即对比了一些主流app，发现在我的魅蓝2（Android 5.1 Flyme 4.5）上竟然都不支持透明状态栏，这对于我这种追求审美的人（其实是视觉提的需求）来说简直不能忍。在我折腾了几天之后，终于解决了这些问题，希望对大家思路有一些帮助。
言归正传，本文主要针对以下几点进行分析：1.是否隐藏状态栏（全屏模式） 2.状态栏的背景色的设置 3.状态栏icon的颜色的设置，而对于透明状态栏设置过程中，可能造成的icon颜色设置成功，而背景颜色设置失败，等等原因造成的浅色底，浅色字或深色底，深色字等错误情况的处理及兜底方案 4.源码实现。
下面我们就以上几点来讨论一下Android中透明状态栏的实现。
1. 全屏模式（沉浸式状态栏）
这种情况其实用得并不多，基本上使用场景在闪屏页展示广告或logo，以及一些阅读类app需要尽可能的利用到屏幕大小，展示更多的内容。
设置方法很简单，分两种，在API > 16时：
- theme中定义:将自定义该Activtiy的theme，并在其中添加
<item name="android:windowFullscreen">true</item> - 代码中定义：
window.getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN)
2. 状态栏的背景色
我们都知道，在Android5.0（即API > 21）时，Google官方提供接口设置对应的状态栏背景色
window.setStatusBarColor(@ColorInt int color);那我们要想在Android5.0以下设置背景色就真的没有办法了吗？并不是，我们发现在Android4.4以后，出现了windowTranslucentStatus这一特性，所以思路如下：
- 先设置状态栏的透明属性
- 给根布局顶部加上一个和状态栏一样大小的矩形View，充当假的状态栏
- 设置FitsSystemWindows属性为true，此时跟布局会延伸到状态栏，处在顶部位置就是之前设置的view，这样就可以以假乱真了。
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 解决思路
说了那么多，有童鞋可能就问了，上述说的代码可能对大多数机型有效，但是万一某些机型设置失败了呢？体验不但没提升，反倒让用户不能忍受了。
好吧，下面我们来看一下应该怎么解决。思路如下：
- 获取状态栏的背景色，与需要设置的颜色进行比对，如果相等则设置成功。
- 如果背景色设置失败，针对非Flyme机型，我们回退状态栏icon颜色，还原到最初状态。
- 上述为什么要强调非Flyme机型，是因为用过Flyme机型的童鞋肯定知道有一个透明状态栏的开关，当开启后，Flyme会对状态栏进行处理，但处理效果并不和我们想要的一样（比如视图顶部为黑色背景，但是却设置了白色状态栏)，并且两者都对状态栏进行操作，操作的冲突也有可能引起上述的icon颜色不明显的情况，所以我们自己定义一个ColorDrawable进行替换。
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系统对状态栏进行视觉修改，尤其是浅色导航栏的应用。[捂脸]
希望本文能够对大家有一些帮助，如本文出现任何有疑问的地方，欢迎拍砖，谢谢！
本文来自网易实践者社区，经作者罗昶安授权发布。
分享至：
