所谓"沉浸状态栏"的实现需要两点:
- 设置状态栏为透明或者半透明状态;
- 整体布局可以置于状态栏下方.
1. 状态栏的配置
对于状态栏的配置有两种方式:
- 在manifest中配置Activity的theme属性
在theme文件中添加android:windowTranslucentStatus属性(当然仅支持api19, 即Android4.4及以上, 且根据这个属性名称可知只是半透明);
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
...
<item name="android:windowTranslucentStatus">true</item>
</style>
效果:
| 键盘隐藏 | 键盘显示 |
|---|---|
Android5.0键盘未弹出
|
Android5.0键盘弹出
|
- 通过代码动态设置
相对于通过theme的属性配置, 这种方案可以实现状态栏全透明.
/**
* 设置状态栏为全透明
* 通过设置theme的方式无法达到全透明效果
*
* @param activity
*/
@TargetApi(19)
private static void transparencyStatusBar(Activity activity) {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
//5.0及其以上
Window window = activity.getWindow();
window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
window.getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
| View.SYSTEM_UI_FLAG_LAYOUT_STABLE);
window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
window.setStatusBarColor(Color.TRANSPARENT);
} else if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
//4.4及其以上
activity.getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
}
}
以上两种方案都没能达到想要的效果. 如上图所示,现在有两个问题:
问题1. 整体布局上移, statusBar遮挡contentView显示的内容;
问题2. 键盘遮挡了输入框, 我们在manifest里给activity声明的android:windowSoftInputMode="adjustResize"失效了;
针对以上两个问题, 现在有两种着手方案:
- 设置Activity的根布局
android:fitsSystemWindows="true"- 顶部view添加paddingTop属性, 高度取当前手机的statusbar高度
方案一, 可以使得整体contentView下移至statusBar下方, 同时问题2解决, 但是此时的statusBar颜色是整体background的颜色, 未能解决问题. 此方案放弃
下面着重介绍方案二:
2. 以上两个问题的解决
2.1解决问题1: contentView上移, statusBar遮挡内容显示
解决方案很简单, 就是给顶部的view加个paddingTop, 而这个paddingTop的值取当前手机的statusbar高度.
比如这里我给自定义的toolbar添加了paddingTop
//动态获取statusBar的高度
private static int sHeight = -1;
public static int getStatusBarHeight(Context context) {
if (sHeight == -1) {
//获取status_bar_height资源的ID
int resourceId = context.getResources().getIdentifier("status_bar_height", "dimen", "android");
if (resourceId > 0) {
//根据资源ID获取响应的尺寸值
sHeight = context.getResources().getDimensionPixelSize(resourceId);
}
}
return sHeight;
}
//给顶部的view添加paddingTop
int height = getStatusBarHeight(context);
customeToolbar.setPadding(root.getPaddingRight(), height + root.getPaddingTop(),
root.getPaddingLeft(), root.getPaddingBottom());
看效果
Android5.0
2.2 解决问题2: 键盘遮挡输入框
经过测试发现影响adjustResize生效以及contentView上移 的关键是设置contentView根布局 android:fitsSystemWindows="true"
那么我们只需要
1.重写View的fitSystemWindows(Rect insets)的方法, 使得其控制contentView位移的功能失效,
public class CustomInsetsLinearLayout extends LinearLayout {
private int[] mInsets = new int[4];
public CustomInsetsLinearLayout(Context context) {
super(context);
}
public CustomInsetsLinearLayout(Context context, AttributeSet attrs) {
super(context, attrs);
}
public CustomInsetsLinearLayout(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
public final int[] getInsets() {
return mInsets;
}
@Override
protected final boolean fitSystemWindows(Rect insets) {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
// Intentionally do not modify the bottom inset. For some reason,
// if the bottom inset is modified, window resizing stops working.
mInsets[0] = insets.left;
mInsets[1] = insets.top;
mInsets[2] = insets.right;
insets.left = 0;
insets.top = 0;
insets.right = 0;
}
return super.fitSystemWindows(insets);
}
}
- 同时配置
android:fitsSystemWindows="true"保留对于adjustResize属性的影响;
<?xml version="1.0" encoding="utf-8"?>
<com.example.j.verticaltextdemo.view.CustomInsetsLinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:orientation="vertical">
<include layout="@layout/center_title_toolbar" />
<Space
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<EditText
android:id="@+id/et1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:hint="请输入" />
</com.example.j.verticaltextdemo.view.CustomInsetsLinearLayout>
最终效果展示
| Android 5.0及其以上的显示效果 | Android4.4的显示效果 |
|---|---|
解决问题2
|
Android4.4
|
3. 完全沉浸效果
- 设置状态栏全透明后的效果展示
| Android6.0及其以上 | Android5.x | Android4.4 |
|---|---|---|
Android6.0
|
Android5.0
|
Android4.4
|
4. 进阶篇: 浅色状态栏及兼容性配置
目前市面上的浅色状态栏基本都是 白底黑字, 比如 [微博]
支持这种设置的有Android6.0及其以上; MIUI v6及以上, Flyme 4.0及以上, 所以我的兼容方案如下:
- 对于支持[状态栏透明 + 状态栏文字图标黑白切换]的机型(Android 6.0及以上,MIUI v6及以上, Flyme 4.0及以上), 全透明状态栏 + 黑色文字图标
- 对于仅支持[状态栏透明]的机型(Android 4.4及其以上), 采用: 半透明状态栏 + 白色文字图标
- 对于不支持的机型(Android 4.4以下), 采用默认状态: 黑色状态栏 + 白色文字图标
具体实现
/**
* Android 6.0 原生
*
* @param activity
* @param dark
*/
private static void setAndroidNativeLightStatusBar(Activity activity, boolean dark) {
//状态栏字体图标颜色
View decor = activity.getWindow().getDecorView();
if (dark) {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
decor.setSystemUiVisibility(View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR //浅色状态栏(字体图标白色)
| View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN //contentView 全屏(置于statusbar之下)
| View.SYSTEM_UI_FLAG_LAYOUT_STABLE);
}
} else {
decor.setSystemUiVisibility(View.SYSTEM_UI_FLAG_VISIBLE);
}
}
网友评论