沉浸式设计android,android 沉浸式设计方案总结

末蓝、 2022-10-05 10:53 232阅读 0赞

沉浸式设计已经应用到几乎所有的app，但是各种百度出来的资料都是不全面的，无奈之下只好自己从头总结一番，包括的内容有：

\- 4.4以及5.0以上各种情况解决方案

\- 设置状态栏黑色字体

修改状态栏、导航栏颜色

4.4实现方案

values-v19/style.xml：

4.4的运行效果

![3ffc7af15d93fc0b03577bfbaea93ca2.png][]

布局占了整个屏幕，根布局里加上android:fitsSystemWindows=”true”后效果

![3227ce53d836833d87eed61b4702059e.png][]

系统自动给根布局加了一个padding,可以看到显示的还是根布局的颜色。但是实际项目不推荐这么做，实际使用在顶部和底部加一个View来占位以及修改状态栏和导航栏的颜色，通过代码来实现，省下在每个布局里添加。

getWindow().addFlags(WindowManager.LayoutParams.FLAG\_TRANSLUCENT\_STATUS);

getWindow().addFlags(WindowManager.LayoutParams.FLAG\_TRANSLUCENT\_NAVIGATION);

setContentView(R.layout.activity\_main);

// 获得状态栏 导航栏高度

int statusResourceId = getResources().getIdentifier("status\_bar\_height", "dimen", "android");

float statusHeight = getResources().getDimensionPixelSize(statusResourceId);

int navigateResourceId = getResources().getIdentifier("navigation\_bar\_height", "dimen", "android");

float navigateHeight = getResources().getDimensionPixelSize(navigateResourceId);

ViewGroup decorView = (ViewGroup) getWindow().getDecorView();

//添加状态栏

View statusBar = new View(this);

statusBar.setBackgroundColor(0xff00ff00);

FrameLayout.LayoutParams statusP = new FrameLayout.LayoutParams(ViewGroup.LayoutParams.MATCH\_PARENT, (int) statusHeight);

statusBar.setLayoutParams(statusP);

statusP.gravity = Gravity.TOP;

decorView.addView(statusBar, statusP);

//添加导航栏

View navigateBar = new View(this);

navigateBar.setBackgroundColor(0xff00ff00);

FrameLayout.LayoutParams naviP = new FrameLayout.LayoutParams(ViewGroup.LayoutParams.MATCH\_PARENT, (int) navigateHeight);

navigateBar.setLayoutParams(naviP);

naviP.gravity = Gravity.BOTTOM;

decorView.addView(navigateBar, naviP);

//设置padding

ViewGroup parent = (ViewGroup) decorView.findViewById(android.R.id.content);

ViewGroup root = (ViewGroup) parent.getChildAt(0);

if (root != null) \{

root.setFitsSystemWindows(true);

root.setPadding(root.getPaddingLeft(), root.getPaddingTop(), root.getPaddingRight(), root.getPaddingBottom() + navigateResourceId);

注意setContentView的位置，这样写的效果。

![22bceafb7fc962b8909ea9a1476dd560.png][]

以上可以解决4.4版本的绝大部分需求，同样可以按照项目实际情况来自己定制一个。

5.0及以上实现方案

1.直接修改状态栏和导航栏颜色

5.0修改状态栏颜色十分简单，主题里定义了很多颜色，直接修改就可以实现。

进入style.xml右上角就会弹出通知

![5c701693f1acfe6822181c3ef5e49a85.png][]

点击Open editor就会进入主题编辑页面

![1f79eca92e534754dc49c25df3f4269a.png][]

这里直接找到对应的色块进行修改就能实现效果，注意很多是有api限制的，需要看仔细。

代码实现主要调用这两个api就可以直接修改了

getWindow().setStatusBarColor();

getWindow().setNavigationBarColor();

这里设置导航栏全透明在主题里设置会出现一个错位的现象，我也不知道是为什么，如果要把导航栏设置全透明最好在代码里设置

Window window = getWindow();

window.clearFlags(WindowManager.LayoutParams.FLAG\_TRANSLUCENT\_STATUS | WindowManager.LayoutParams.FLAG\_TRANSLUCENT\_NAVIGATION);

window.getDecorView().setSystemUiVisibility(View.SYSTEM\_UI\_FLAG\_LAYOUT\_FULLSCREEN | View.SYSTEM\_UI\_FLAG\_LAYOUT\_HIDE\_NAVIGATION | View.SYSTEM\_UI\_FLAG\_LAYOUT\_STABLE);

window.addFlags(WindowManager.LayoutParams.FLAG\_DRAWS\_SYSTEM\_BAR\_BACKGROUNDS);

window.setNavigationBarColor(Color.TRANSPARENT);

2.实现全透明状态栏

修改主题

values-v21/style.xml：

5.0及以上的运行效果

![0915e3cc88ee9420c72fce6aff8194cd.png][]

代码实现

getWindow().setStatusBarColor(Color.TRANSPARENT);

getWindow().getDecorView()

.setSystemUiVisibility(View.SYSTEM\_UI\_FLAG\_LAYOUT\_STABLE | View.SYSTEM\_UI\_FLAG\_LAYOUT\_FULLSCREEN);

dialog的透明实现，需要5.0以上要多加一个属性。

private void setTranslucentStatus() \{

if(Build.VERSION.SDK\_INT >= Build.VERSION\_CODES.LOLLIPOP) \{//5.0 全透明实现

Window window = getWindow();

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 \{//4.4 全透明状态栏

getWindow().addFlags(WindowManager.LayoutParams.FLAG\_TRANSLUCENT\_STATUS);

浅色状态栏解决方案

浅色状态栏的问题就是状态栏的字体会看不清，这时候就需要把状态栏的自己变为黑色，这个是6.0才有的api。

values-v23/style.xml：

trueitem>

代码实现:

getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM\_UI\_FLAG\_LAYOUT\_FULLSCREEN | View.SYSTEM\_UI\_FLAG\_LIGHT\_STATUS\_BAR);

6.0一下MIUI和Flyme提供了修改方法

/\*\*

\* 设置状态栏字体图标为深色，需要MIUIV6以上

\*@param window 需要设置的窗口

\*@param dark 是否把状态栏字体及图标颜色设置为深色

\*@return boolean 成功执行返回true

\*/

public static boolean MIUISetStatusBarLightMode(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;

/\*\*

\* 设置状态栏图标为深色和魅族特定的文字风格

\* 可以用来判断是否为Flyme用户

\*@param window 需要设置的窗口

\*@param dark 是否把状态栏字体及图标颜色设置为深色

\*@return boolean 成功执行返回true

\*/

public static boolean FlymeSetStatusBarLightMode(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;

使用这两个方法可以将状态栏的字体设置为深色。

总结

沉浸式设计的大多数情况都已经列举了，基本可以满足需求，网上还有不少的解决方案，其实完全可以自己写一个工具类来实现功能。Ok，文章就到这里了~~

[3ffc7af15d93fc0b03577bfbaea93ca2.png]: /images/20221005/00eebb2e407240a991df049fd5eb94e3.png
[3227ce53d836833d87eed61b4702059e.png]: /images/20221005/b02cccff91024304bd2df354ddf31252.png
[22bceafb7fc962b8909ea9a1476dd560.png]: /images/20221005/b33092a76e274747b1e62966be3da80a.png
[5c701693f1acfe6822181c3ef5e49a85.png]: /images/20221005/07ff3b22af904e2a8645b26e0ea6063c.png
[1f79eca92e534754dc49c25df3f4269a.png]: /images/20221005/e1ced06bce6a4a129184e8e268fa1f42.png
[0915e3cc88ee9420c72fce6aff8194cd.png]: /images/20221005/20cd0b15e142471589fd7cca1f27095b.png