// 状态栏透明，内容进入状态栏，此时可以使用fitsSystemWindows原理是给rootView设置一个padding，恢复内容不进入状态栏，还有输入法顶起失效的问题可借鉴小财迷产品详情页
<item name="android:windowTranslucentStatus">true</item>
//虚拟按键栏透明，内容进入虚拟按键栏
<item name="android:windowTranslucentNavigation">true</item>
//设置activity为全屏不受状态栏透明度设置影响，受虚拟按键影响
this.getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,WindowManager.LayoutParams.FLAG_FULLSCREEN);
//背景透明属性
windowIsTranslucent
法一：设置 fitsSystemWindows 属性
当该属性设置 true 时，会在屏幕最上方预留出状态栏高度的 padding。
在布局的最外层设置 android:fitsSystemWindows="true" 属性。当然，也可以通过代码设置：
/**
* 设置页面最外层布局 FitsSystemWindows 属性
* @param activity
* @param value
*/
public static void setFitsSystemWindows(Activity activity, boolean value) {
ViewGroup contentFrameLayout = (ViewGroup) activity.findViewById(android.R.id.content);
View parentView = contentFrameLayout.getChildAt(0);
if (parentView != null && Build.VERSION.SDK_INT >= 14) {
parentView.setFitsSystemWindows(value);
}
}
通过该设置保留状态栏高度的 paddingTop 后，再设置状态栏的颜色。就可以达到设想的效果。但这种方式实现有些问题，例如我们想设置状态栏为蓝色，只能通过设置最外层布局的背景为蓝色来实现，然而一旦设置后，整个布局就都变成了蓝色，只能在下方的布局内容里另外再设置白色背景，而这样就存在过度绘制了。而且设置了 fitsSystemWindows=true 属性的页面，在点击 EditText 调出 软键盘时，整个视图都会被顶上去。
法二：布局里添加占位状态栏
法一：在根布局加入一个占位状态栏，这样虽然整个内容页面时顶到头的，但是因为在内容布局里添加了一个占位状态栏，所以效果与设想的一致。
<View
android:id="@+id/statusBarView"
android:background="@color/blue"
android:layout_width="match_parent"
android:layout_height="wrap_content"></View>
通过反射获取状态栏高度：
/**
* 利用反射获取状态栏高度
* @return
*/
public int getStatusBarHeight() {
int result = 0;
//获取状态栏高度的资源id
int resourceId = getResources().getIdentifier("status_bar_height", "dimen", "android");
if (resourceId > 0) {
result = getResources().getDimensionPixelSize(resourceId);
}
return result;
}
设置占位视图高度
View statusBar = findViewById(R.id.statusBarView);
ViewGroup.LayoutParams layoutParams = statusBar.getLayoutParams();
layoutParams.height = getStatusBarHeight();
当然，除了从布局文件中添加这一方式之外，一样可以在代码中添加。比较推荐使用代码添加的方式，方便封装使用。
/**
* 添加状态栏占位视图
*
* @param activity
*/
private void addStatusViewWithColor(Activity activity, int color) {
ViewGroup contentView = (ViewGroup) activity.findViewById(android.R.id.content);
View statusBarView = new View(activity);
ViewGroup.LayoutParams lp = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
getStatusBarHeight(activity));
statusBarView.setBackgroundColor(color);
contentView.addView(statusBarView, lp);
}
添加占位状态栏
法三：代码中设置 paddingTop 并添加占位状态栏
手动给根视图设置一个 paddingTop ，高度为状态栏高度，相当于手动实现了 fitsSystemWindows=true 的效果，然后再在根视图加入一个占位视图，其高度也设置为状态栏高度。
//设置 paddingTop
ViewGroup rootView = (ViewGroup) mActivity.getWindow().getDecorView().findViewById(android.R.id.content);
rootView.setPadding(0, getStatusBarHeight(mActivity), 0, 0);
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
//5.0 以上直接设置状态栏颜色
activity.getWindow().setStatusBarColor(color);
} else {
//根布局添加占位状态栏
ViewGroup decorView = (ViewGroup) mActivity.getWindow().getDecorView();
View statusBarView = new View(activity);
ViewGroup.LayoutParams lp = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
getStatusBarHeight(activity));
statusBarView.setBackgroundColor(color);
decorView.addView(statusBarView, lp);
}
个人认为最优解应该是第三种方法，通过这种方法达到沉浸式的效果后面也可以很方便地拓展出渐变色的状态栏。
方法二：代码中设置
通过在代码中设置，实现方法一中在 Theme 主题样式里设置的属性，便于封装。
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
int flagTranslucentStatus = WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS;
int flagTranslucentNavigation = WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION;
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
Window window = getWindow();
WindowManager.LayoutParams attributes = window.getAttributes();
attributes.flags |= flagTranslucentNavigation;
window.setAttributes(attributes);
getWindow().setStatusBarColor(Color.TRANSPARENT);
} else {
Window window = getWindow();
WindowManager.LayoutParams attributes = window.getAttributes();
attributes.flags |= flagTranslucentStatus | flagTranslucentNavigation;
window.setAttributes(attributes);
}
}
但是从图片中也看到了，该方案会导致一个问题就是导航栏颜色变灰。
经测试，在 5.x 以下导航栏透明是可以生效的，但 5.x 以上导航栏会变灰色（正常情况下我们期望导航栏保持默认颜色黑色不变），但因为设置了FLAG_TRANSLUCENT_NAVIGATION，所以即使代码中设置 getWindow().setNavigationBarColor(Color.BLACK); 也是不起作用的。但如果不设置该 FLAG ，状态栏又无法被置为隐藏和设置透明。
方案二：全屏模式的延伸
通过设置 FLAG ，让应用内容占用系统状态栏的空间，经测试该方式不会影响对导航栏的设置。
/**
* 通过设置全屏，设置状态栏透明
*
* @param activity
*/
private void fullScreen(Activity activity) {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
//5.x开始需要把颜色设置透明，否则导航栏会呈现系统默认的浅灰色
Window window = activity.getWindow();
View decorView = window.getDecorView();
//两个 flag 要结合使用，表示让应用的主体内容占用系统状态栏的空间
int option = View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
| View.SYSTEM_UI_FLAG_LAYOUT_STABLE;
decorView.setSystemUiVisibility(option);
window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
window.setStatusBarColor(Color.TRANSPARENT);
//导航栏颜色也可以正常设置
// window.setNavigationBarColor(Color.TRANSPARENT);
} else {
Window window = activity.getWindow();
WindowManager.LayoutParams attributes = window.getAttributes();
int flagTranslucentStatus = WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS;
int flagTranslucentNavigation = WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION;
attributes.flags |= flagTranslucentStatus;
// attributes.flags |= flagTranslucentNavigation;
window.setAttributes(attributes);
}
}
}
可以正常设置导航栏颜色
验证其他使用场景
侧滑菜单
使用 AS 自动创建 Navigation Drawer Activity ，布局结构为：
- DrawerLayout
- include ：内容布局，默认使用 ToolBar
- NavigationView ：侧滑布局
这里只调用了 fullScreen()， 测试一下运行结果如何：
侧滑菜单
可以看到都有不尽如人意的地方，4.4 系统中内容视图是可以正常延伸到状态栏中，但侧滑菜单中却在上方出现了白条，而在 6.0 中侧滑菜单上会有半透明遮罩。针对 6.0 侧滑菜单半透明遮罩问题，通过设置为 NavigationView 设置属性 app:insetForeground="#00000000" 即可解决。针对 4.4 侧滑菜单白条问题，经过测试，通过对最外层布局设置 setFitsSystemWindows(true) 和 setClipToPadding(false) 可以解决，所以这里对之前的 fitsSystemWindows 方法稍加修改：
/**
* 设置页面最外层布局 FitsSystemWindows 属性
*
* @param activity
*/
private void fitsSystemWindows(Activity activity) {
ViewGroup contentFrameLayout = (ViewGroup) activity.findViewById(android.R.id.content);
View parentView = contentFrameLayout.getChildAt(0);
if (parentView != null && Build.VERSION.SDK_INT >= 14) {
//布局预留状态栏高度的 padding
parentView.setFitsSystemWindows(true);
if (parentView instanceof DrawerLayout) {
DrawerLayout drawer = (DrawerLayout) parentView;
//将主页面顶部延伸至status bar;虽默认为false,但经测试,DrawerLayout需显示设置
drawer.setClipToPadding(false);
}
}
}
这样是解决了上述的问题，既然延伸内容没问题了，那就开开心心地像上面一样调用 addStatusViewWithColor() 方法增加个占位状态栏，解决一下内容顶到头的问题吧：
4.4 系统，增加占位状态栏异常
可以看到，效果依然不是我们想要的，虽然占位状态栏是有了，但是却也覆盖到了侧滑菜单上，并且即使设置了 android:fitsSystemWindows="true" 也并没有什么卵用，内容布局依然顶到了头部。这里有两种解决方法：1. 第一种方案是网上提到比较多的，改变 ToolBar 的高度，并增加状态栏高度的 paddingTop，这也是
ImmersionBar 库采用的方案。2. 第二种方案其实思路与第一种差不多，就是将原有的内容布局从 DrawerLayout 中移除，并添加到线性布局（布局中已有占位状态栏），之后再将这个线性布局添加到 DrawerLayout 中成为新的内容布局，此谓狸猫换太子。
/**
* 是否是最外层布局为 DrawerLayout 的侧滑菜单
* @param drawerLayout 是否最外层布局为 DrawerLayout
* @param contentId 内容视图的 id
* @return
*/
public StatusBarUtils setIsDrawerLayout(boolean drawerLayout, int contentId) {
mIsDrawerLayout = drawerLayout;
mContentResourseIdInDrawer = contentId;
return this;
}
/**
* 添加状态栏占位视图
*
* @param activity
*/
private void addStatusViewWithColor(Activity activity, int color) {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
if (isDrawerLayout()) {
//要在内容布局增加状态栏，否则会盖在侧滑菜单上
ViewGroup rootView = (ViewGroup) activity.findViewById(android.R.id.content);
//DrawerLayout 则需要在第一个子视图即内容试图中添加padding
View parentView = rootView.getChildAt(0);
LinearLayout linearLayout = new LinearLayout(activity);
linearLayout.setOrientation(LinearLayout.VERTICAL);
View statusBarView = new View(activity);
ViewGroup.LayoutParams lp = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
getStatusBarHeight(activity));
statusBarView.setBackgroundColor(color);
//添加占位状态栏到线性布局中
linearLayout.addView(statusBarView, lp);
//侧滑菜单
DrawerLayout drawer = (DrawerLayout) parentView;
//内容视图
View content = activity.findViewById(mContentResourseIdInDrawer);
//将内容视图从 DrawerLayout 中移除
drawer.removeView(content);
//添加内容视图
linearLayout.addView(content, content.getLayoutParams());
//将带有占位状态栏的新的内容视图设置给 DrawerLayout
drawer.addView(linearLayout, 0);
} else {
//设置 paddingTop
ViewGroup rootView = (ViewGroup) mActivity.getWindow().getDecorView().findViewById(android.R.id.content);
rootView.setPadding(0, getStatusBarHeight(mActivity), 0, 0);
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
//直接设置状态栏颜色
activity.getWindow().setStatusBarColor(color);
} else {
//增加占位状态栏
ViewGroup decorView = (ViewGroup) mActivity.getWindow().getDecorView();
View statusBarView = new View(activity);
ViewGroup.LayoutParams lp = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
getStatusBarHeight(activity));
statusBarView.setBackgroundColor(color);
decorView.addView(statusBarView, lp);
}
}
}
}
一番操作后，效果如下：
改进 addStatusViewWithColor() 后的效果
对于内容视图未使用到 ToolBar 的情况方案二依然可以适用。
ActionBar
上述代码在使用 ActionBar 时可以完美适配吗？测试后效果如下图所示
6.0 状态栏黑边
可以看到，通过添加指定颜色的占位状态来达到沉浸效果的方案，在 4.4 系统上效果是正常的，但是在 6.0 上，在状态栏和 Actionbar 之间会有阴影，这个阴影是主题的效果。不知道大家还记不记得 Theme 主题里的几个设计颜色的属性：
各属性颜色
colorPrimary 指定 ActionBar 的颜色，colorPrimaryDark 指定状态栏颜色，经过测试，在主题里将二者设为统一颜色，状态栏和 ActionBar 之间不会有黑边。自然，我们除了在 Theme 主题里设置，还可以直接在代码里通过上文提到过的代码修改 5.x 以上系统的状态栏颜色：
Window window = activity.getWindow();
window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
window.setStatusBarColor(Color.BLUE);
但是因为 setStatusBarColor() 方法的参数无法传入 Drawble ，所以这种方式是无法实现渐变色状态栏的效果的。所以还是应该聚焦在怎么解决 ActionBar 阴影的问题，上面说了，既然这个阴影是 Theme 的效果，那就肯定有移除这种效果的方法，一种解决方法是更改主题为 ActionBar 不带阴影的主题样式：
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
<item name="android:windowContentOverlay">@null</item>
//更改 ActionBar 风格样式
<item name="actionBarStyle">@style/ActionBarStyleWithoutShadow</item>
</style>
//ActionBar 不带阴影的主题样式
<style name="ActionBarStyleWithoutShadow" parent="android:Theme.Holo.ActionBar">
<item name="background">@color/blue</item>
</style>
还有第二种更简单的方式，那就是直接在代码里设置去除阴影：
/**
* 去除 ActionBar 阴影
*/
public StatusBarUtils clearActionBarShadow() {
if (Build.VERSION.SDK_INT >= 21) {
ActionBar supportActionBar = ((AppCompatActivity) mActivity).getSupportActionBar();
if (supportActionBar != null) {
supportActionBar.setElevation(0);
}
}
return this;
}
并且因为内容是位于 ActionBar 之下的，我们还必须给内容视图是指一个 paddingTop，高度为状态栏高度+ActionBar 高度，才可以使内容正常显示。我们给 ActionBar 设置一个渐变色试试看：
//drawble 文件夹内新建 shape 渐变色
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:angle="0"
android:centerX="0.7"
android:endColor="@color/shape2"
android:startColor="@color/shape1"
android:centerColor="@color/shape3"
android:type="linear" />
</shape>
//ActionBar 设置渐变背景色
getSupportActionBar().setBackgroundDrawable(getResources().getDrawable(R.drawable.shape));
//占位状态栏 设置渐变背景色
View statusBarView = new View(activity);
...
//增加占位状态栏方法同上，只是在设置 statusBarView 背景上有 color 和 drawble 之分
statusBarView.setBackground(drawable);
if (isActionBar()) {
//要增加内容视图的 paddingTop,否则内容被 ActionBar 遮盖
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
ViewGroup rootView = (ViewGroup) mActivity.getWindow().getDecorView().findViewById(android.R.id.content);
rootView.setPadding(0, getStatusBarHeight(mActivity) + getActionBarHeight(mActivity), 0, 0);
}
}
扫一扫
305
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
