android 沉浸式设计方案总结

心已赠人 2022-06-12 05:42 169阅读 0赞

沉浸式设计已经应用到几乎所有的app，但是各种百度出来的资料都是不全面的，无奈之下只好自己从头总结一番，包括的内容有：  
\- 4.4以及5.0以上各种情况解决方案  
\- 设置状态栏黑色字体

## 修改状态栏、导航栏颜色 ##

### 4.4实现方案 ###

values-v19/style.xml：

4.4的运行效果  
![这里写图片描述][SouthEast]

布局占了整个屏幕，根布局里加上android:fitsSystemWindows=”true”后效果  
![这里写图片描述][SouthEast 1]  
系统自动给根布局加了一个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的位置，这样写的效果。

![这里写图片描述][SouthEast 2]

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

### 5.0及以上实现方案 ###

**1.直接修改状态栏和导航栏颜色**  
5.0修改状态栏颜色十分简单，主题里定义了很多颜色，直接修改就可以实现。  
进入style.xml右上角就会弹出通知  
![这里写图片描述][SouthEast 3]  
点击Open editor就会进入主题编辑页面  
![这里写图片描述][SouthEast 4]  
这里直接找到对应的色块进行修改就能实现效果，注意很多是有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及以上的运行效果  
![这里写图片描述][SouthEast 5]

代码实现

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：

代码实现:

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，文章就到这里了~~

[SouthEast]: /images/20220612/13802dc45563467da998e434acbcad6d.png
[SouthEast 1]: /images/20220612/737f003d79b343b6a4a7964bbf0718d3.png
[SouthEast 2]: /images/20220612/c6f81d1d8066436fa5f4ba5f94477102.png
[SouthEast 3]: /images/20220612/51e07b0fda0d4564b3354d7186f19ec3.png
[SouthEast 4]: /images/20220612/334d6935df7d463e9163df1e38011d16.png
[SouthEast 5]: /images/20220612/255b923a35354aaa882d6c0777f98949.png