MobDevGroupAndroidAndroid 开发技术交流

android4.4以上沉浸式状态栏和导航栏实现以及Bar的其他

2017-05-16  本文已影响17411人  HeLe小子拽

自从android4.4开始，android手机状态栏再也不是一成黑的时代，之前叫做变色龙，miui6发布会把他叫做沉浸式，之后大家就自然而然的接受了沉浸式这个名称，其实实际应该叫做Translucent Bar，即为透明状态栏。
  沉浸式实现原理其实是使整个activity布局延伸到整个屏幕，然后使状态栏变成透明色，有些手机会有导航栏，同样也可以把导航栏变成透明色，这样会使一些app更加美观。

先看两个概念

废话不多说了，直接看GIF

logo.png 
dependencies {
    compile 'com.gyf.barlibrary:barlibrary:2.3.0'
}

2、特性

1）基本介绍

public class BaseActivity extends AppCompatActivity {

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        ImmersionBar.with(this).init(); //初始化，默认透明状态栏和黑色导航栏
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        ImmersionBar.with(this).destroy(); //不调用该方法，如果界面bar发生改变，在不关闭app的情况下，退出此界面再进入将记忆最后一次bar改变的状态
    }
}

        ImmersionBar.with(this)
                 .transparentStatusBar()  //透明状态栏，不写默认透明色
                 .transparentNavigationBar()  //透明导航栏，不写默认黑色(设置此方法，fullScreen()方法自动为true)
                 .transparentBar()             //透明状态栏和导航栏，不写默认状态栏为透明色，导航栏为黑色（设置此方法，fullScreen()方法自动为true）
                 .statusBarColor(R.color.colorPrimary)     //状态栏颜色，不写默认透明色
                 .navigationBarColor(R.color.colorPrimary) //导航栏颜色，不写默认黑色
                 .barColor(R.color.colorPrimary)  //同时自定义状态栏和导航栏颜色，不写默认状态栏为透明色，导航栏为黑色
                 .statusBarAlpha(0.3f)  //状态栏透明度，不写默认0.0f
                 .navigationBarAlpha(0.4f)  //导航栏透明度，不写默认0.0F
                 .barAlpha(0.3f)  //状态栏和导航栏透明度，不写默认0.0f
                 .statusBarDarkFont(true)   //状态栏字体是深色，不写默认为亮色
                 .flymeOSStatusBarFontColor(R.color.btn3)  //修改flyme OS状态栏字体颜色
                 .fullScreen(true)      //有导航栏的情况下，activity全屏显示，也就是activity最下面被导航栏覆盖，不写默认非全屏
                 .hideBar(BarHide.FLAG_HIDE_BAR)  //隐藏状态栏或导航栏或两者，不写默认不隐藏
                 .addViewSupportTransformColor(toolbar)  //设置支持view变色，可以添加多个view，不指定颜色，默认和状态栏同色，还有两个重载方法
                 .titleBar(view)    //解决状态栏和布局重叠问题，任选其一
                 .statusBarView(view)  //解决状态栏和布局重叠问题，任选其一
                 .fitsSystemWindows(true)    //解决状态栏和布局重叠问题，任选其一，默认为false，当为true时一定要指定statusBarColor()，不然状态栏为透明色
                 .supportActionBar(true) //支持ActionBar使用
                 .statusBarColorTransform(R.color.orange)  //状态栏变色后的颜色
                 .navigationBarColorTransform(R.color.orange) //导航栏变色后的颜色
                 .barColorTransform(R.color.orange)  //状态栏和导航栏变色后的颜色
                 .removeSupportView(toolbar)  //移除指定view支持
                 .removeSupportAllView() //移除全部view支持
                 .addTag("tag")  //给以上设置的参数打标记
                 .getTag("tag")  //根据tag获得沉浸式参数
                 .reset()  //重置所以沉浸式参数
                 .keyboardEnable(true)  //解决软键盘与底部输入框冲突问题，默认为false
                 .setOnKeyboardListener(new OnKeyboardListener() {    //软键盘监听回调
                   @Override
                   public void onKeyboardChange(boolean isPopup, int keyboardHeight) {
                       LogUtils.e(isPopup);  //isPopup为true，软键盘弹出，为false，软键盘关闭
                   }
              })
                 .keyboardMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_RESIZE)  //单独指定软键盘模式
                 .init();  //必须调用方可沉浸式

2）详细介绍

上面已经说了，沉浸式原理就是使整个布局延伸到状态栏和导航栏，既然这样必然导致一个问题，就是状态栏和布局顶部重叠，直接看图

状态栏和布局顶部重叠.png

眼神好的同学已经看到上图中给了五种解决方案啦，在这里说一下

```java
    ImmersionBar.with(this)
        .statusBarColor(R.color.colorPrimary)
        .fitsSystemWindows(true)  //使用该属性必须指定状态栏的颜色，不然状态栏透明，很难看
        .init();
```

        ImmersionBar.with(this)
                  .titleBar(view) //指定标题栏view
                  .init();

注意：2.2.6版本已将ImmersionFragment这个类标记为过时，请用户自行使用懒加载方式实现

结合fragment使用.gif
在DialogFragment使用
   ImmersionBar.with(this, dialog).init();
其他Dialog
 ImmersionBar.with(this, dialog, "flag")   //第三个参数是为当前Dialog加上标记，多个Dialog之间不可相同
                  .init();

注意：在dialog使用，当销毁dialog同时，别忘了调用ImmersionBar的destroy方法了


结合dialog使用.gif 图片状态栏+彩色导航栏.jpg 全屏图片.jpg 
       ImmersionBar.with(this)
                .statusBarColor(R.color.colorPrimary)
                .navigationBarColor(R.color.btn8)
                .init();
彩色状态栏+彩色导航栏.jpg 结合DrawerLayout使用.gif 侧滑返回.gif 
       ImmersionBar.with(this).statusBarDarkFont(true).init();
修改状态栏字体颜色为深色.jpg 
       ImmersionBar.with(this)
                .navigationBarColor(R.color.colorPrimary)
                .barAlpha(0.2f)
                .init();
设置状态栏和导航栏透明度.jpg 
 ImmersionBar.with(this).hideBar(BarHide.FLAG_HIDE_STATUS_BAR).init();

  ImmersionBar.with(this).hideBar(BarHide.FLAG_HIDE_NAVIGATION_BAR).init();

  ImmersionBar.with(this).hideBar(BarHide.FLAG_HIDE_BAR).init();

  ImmersionBar.with(this).hideBar(BarHide.FLAG_SHOW_BAR).init();

实现原理：监听界面容器的layout变化，当发生变化时，通过检查窗口可见区域高度，判断键盘是否弹起，如果弹起，则修改容器bottom padding，也就是手动实现adjustResize效果，给键盘留出显示空间。

   ImmersionBar.with(this)
               .keyboardEnable(true)  //解决软键盘与底部输入框冲突问题
               .init();
       或者
       // KeyboardPatch.patch(this).enable();
       或者,layout指的是当前布局的根节点
       // KeyboardPatch.patch(this, layout).enable();
解决EditText和软键盘的问题.gif 
        ImmersionBar.with(this)
                  .statusBarDarkFont(true, 0.2f)
                  .init();
白色背景状态栏.png

ImmersionBar除了这些特性之外，还有其他特性哦，这里就不一一指出了，大家参考高级用法的注释，可以去实现看看哦，下面就来分析源码吧

3、源码分析

   本库采用类似建造者模式来完成，只为了方便大家更灵活的去设置状态栏和导航栏风格。实现沉浸式是分为两块，一块是android5.0以上，一块是android4.4，这两块实现原理完全不一样，在讲解原理之前先看几个概念，下面需要用到

       if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
                int uiFlags =View.SYSTEM_UI_FLAG_LAYOUT_STABLE   //防止系统栏隐藏时内容区域大小发生变化 
                            | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN;  //Activity全屏显示，但状态栏不会被隐藏覆盖，状态栏依然可见，Activity顶端布局部分会被状态栏遮住。
                if (mBarParams.fullScreen) {
                    uiFlags |= View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION; //Activity全屏显示，但导航栏不会被隐藏覆盖，导航栏依然可见，Activity底部布局部分会被导航栏遮住。
                }
                mWindow.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS
                        | WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);  //取消设置透明状态栏和导航栏
                mWindow.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);  //需要设置这个才能设置状态栏颜色
                mWindow.setStatusBarColor(ColorUtils.blendARGB(mBarParams.statusBarColor,
                        mBarParams.statusBarColorTransform, mBarParams.statusBarAlpha));  //设置状态栏颜色
                mWindow.setNavigationBarColor(ColorUtils.blendARGB(mBarParams.navigationBarColor,
                        mBarParams.navigationBarColorTransform, mBarParams.navigationBarAlpha));  //设置导航栏颜色
                mWindow.getDecorView().setSystemUiVisibility(uiFlags); 把刚才设置的标记通过setSystemUiVisibility方法设置进去
            } 


       if (Build.VERSION.SDK_INT == Build.VERSION_CODES.KITKAT) {
            mWindow.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);//透明状态栏
                mWindow.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);//透明导航栏，设置这个，如果有导航栏，底部布局会被导航栏遮住
                setupStatusBarView(); //在根节点创建一个可以自定义颜色的状态栏创建一个假的状态栏
                if (mConfig.hasNavigtionBar())  //判断是否存在导航栏
                    setupNavBarView();   //在根节点创建一个可以自定义颜色的导航栏
                // 解决android4.4有导航栏的情况下，activity底部被导航栏遮挡的问题
                if (mConfig.hasNavigtionBar() && !mBarParams.fullScreenTemp && !mBarParams.fullScreen) {
                    if (mConfig.isNavigationAtBottom()) //判断导航栏是否在底部
                        mContentView.setPadding(0, 0, 0, mConfig.getNavigationBarHeight()); //有导航栏，获得当前布局的根节点，然后设置距离底部的padding值为导航栏的高度值
                    else
                        mContentView.setPadding(0, 0, mConfig.getNavigationBarWidth(), 0); //不在底部，设置距离右边的padding值为导航栏的宽度值
                } else {
                    mContentView.setPadding(0, 0, 0, 0); //没有导航栏，什么都不做
                }
        }
/**
     * 在根节点创建一个可以自定义颜色的状态栏
     */
    private void setupStatusBarView() {
        if (mBarParams.statusBarView == null) {
            mBarParams.statusBarView = new View(mActivity);//创建一个view
        }
        FrameLayout.LayoutParams params = new FrameLayout.LayoutParams(FrameLayout.LayoutParams.MATCH_PARENT, getStatusBarHeight(mActivity));
        params.gravity = Gravity.TOP; //把view设置在顶部
        if (!isNavigationAtBottom(mActivity)) {
            params.rightMargin = getNavigationBarWidth(mActivity); //横屏的时候，距离右边的距离
        }
        mBarParams.statusBarView.setLayoutParams(params);
        mBarParams.statusBarView.setBackgroundColor(ColorUtils.blendARGB(mBarParams.statusBarColor,
                mBarParams.statusBarColorTransform, mBarParams.statusBarAlpha));//设置view的颜色
        mBarParams.statusBarView.setVisibility(View.VISIBLE);
        ViewGroup viewGroup = (ViewGroup) mBarParams.statusBarView.getParent();
        if (viewGroup != null)
            viewGroup.removeView(mBarParams.statusBarView);
        mViewGroup.addView(mBarParams.statusBarView);
    }
/**
     * 在根节点创建一个可以自定义颜色的导航栏
     */
    private void setupNavBarView() {
        if (mBarParams.navigationBarView == null) {
            mBarParams.navigationBarView = new View(mActivity);  //创建一个view
        }
        FrameLayout.LayoutParams params;
        if (isNavigationAtBottom(mActivity)) { //判断导航栏是否在底部
            params = new FrameLayout.LayoutParams(FrameLayout.LayoutParams.MATCH_PARENT, getNavigationBarHeight(mActivity));
            params.gravity = Gravity.BOTTOM; //如果在底部把view设置在导航栏的位置
        } else {
            params = new FrameLayout.LayoutParams(getNavigationBarWidth(mActivity), FrameLayout.LayoutParams.MATCH_PARENT);
            params.gravity = Gravity.END;  //不在底部，把view设置到布局的结束位置
        }
        mBarParams.navigationBarView.setLayoutParams(params);
        if (!mBarParams.fullScreen && (mBarParams.navigationBarColorTransform == Color.TRANSPARENT)) {
            mBarParams.navigationBarView.setBackgroundColor(ColorUtils.blendARGB(mBarParams.navigationBarColor,
                    Color.BLACK, mBarParams.navigationBarAlpha));
        } else {
            mBarParams.navigationBarView.setBackgroundColor(ColorUtils.blendARGB(mBarParams.navigationBarColor,
                    mBarParams.navigationBarColorTransform, mBarParams.navigationBarAlpha));
        }
        mBarParams.navigationBarView.setVisibility(View.VISIBLE);
        ViewGroup viewGroup = (ViewGroup) mBarParams.navigationBarView.getParent();
        if (viewGroup != null)
            viewGroup.removeView(mBarParams.navigationBarView);
        mViewGroup.addView(mBarParams.navigationBarView);
    }

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
           activity.getWindow().getDecorView().setSystemUiVisibility( View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN|View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR);
  }

   但是对于一些第三方rom包来说，系统api就没办法实现了，还好小米和魅族公开了各自的实现方法，如下：

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;
}

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;
}

private int hideBar(int uiFlags) {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
            switch (mBarParams.barHide) {
                case FLAG_HIDE_BAR: //隐藏状态栏和导航栏
                    uiFlags |= View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
                            | View.SYSTEM_UI_FLAG_HIDE_NAVIGATION
                            | View.INVISIBLE;
                    break;
                case FLAG_HIDE_STATUS_BAR: //隐藏状态栏
                    uiFlags |= View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN | View.INVISIBLE;
                    break;
                case FLAG_HIDE_NAVIGATION_BAR://隐藏导航栏
                    uiFlags |= View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
                            | View.SYSTEM_UI_FLAG_HIDE_NAVIGATION;
                    break;
                case FLAG_SHOW_BAR://恢复显示
                    uiFlags |= View.SYSTEM_UI_FLAG_VISIBLE;
                    break;
            }
        }
        return uiFlags | View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY;
    }

4、总结

   至此，ImmersionBar库的用法与原理都讲完了。网上关于沉浸式的介绍铺天盖地，但是很少有人把它们封装起来，当开发者调用的时候还得自己去写大量代码，消耗大家时间。写这个库的目的就是方便大家的开发，解决大家在沉浸式方面出现的问题。如果还有不懂得地方可以去demo里看看，或者直接底下留言！

本文已独家授权发表于微信公众号：码个蛋（微信号：codeegg）

上一篇 下一篇

猜你喜欢

热点阅读