直男审美进化历程 - 1.沉浸状态栏
经常被女朋友调侃我的设计是直男审美。
但毕竟我不是专业设计师,我做的东西也是东抄抄西凑凑的UI,真的很难想象又会做UI,代码又写的好是何等神人也。
今天,我们来聊聊让人头疼的“沉浸”状态栏。
当然这里对于沉浸这个词纠纷也很大,具体探究可以看一看郭霖老师的文章。那么今天我们实现的效果如下。
我的系统是MIUI10,Android版本是Android 9,可以看到,我们的图片背景是叠在状态栏后面,然后状态栏文字是黑色字体。
这里我们实现的第一种效果就是这样,我们暂且叫做他沉浸状态栏。
- Android 5.0 及以上
- 上图的效果
上面是我们的Demo实现要求,如果不是你想要的,可以看下面另一种效果,这篇文章我们一共讲两个效果。
1.第一种效果
新建工程之后,我们导入了一张图片,然后在布局中加入了ImageView,预览如途中右图。
可以看到预览图,自上至下依次是状态栏,ActionBar,ImageView
要实现如需求图效果,先隐藏ActionBar
修改style.xml文件
1 | <!-- Base application theme. --> |
Base application theme的parent改成noactionbar,这样我们就去掉了顶部栏。
这里其实可以用两种方式来配置,一种是xml方式,一种是java方式,但是某些国产系统这种方式无法实现,比如说我这个就没法实现,所以我们下面就用java方式实现。
我实现的透明方法状态栏如下
1 | /** |
我们在activity里调用。
1 | public class MainActivity extends AppCompatActivity { |
注意,尽量放到setContentView前面,避免出现系列问题。
我们可以看到头部已经出现达成了效果。
但是会有一个问题,布局就会潜到状态栏后面,正常方法都是为控件设置
1 | android:fitsSystemWindows="true" |
属性,但是MIUI系统上,哇!臣妾做不到呀!
这个属性没!有!用!
设置上之后就是大白状态栏。
只能优化你的布局了,为你要显示的内容搞宽一点,按钮标题什么的,加一个margin属性,就可以满足你的需求了。
那么我们来写一个状态栏文字颜色的方法。
1 | /** |
这里是Google原生系统的方法。
可以看到是极其简单的,设置setSystemUiVisibility方法的TAG就可以达到相应的效果。
我们调用一下。
1 | public class MainActivity extends AppCompatActivity { |
注意这里的顺序,必须先设置透明状态栏在设置文字颜色。
我们来看一下效果。
当然,如果每次都这么调用未免太过麻烦,你可以写一个封装。
1 | /** |
就可以一步实现我们想要的效果。
当然为了每个activity不同需求的不同效果,我们就不往基础Activity里写了。
2.第二种效果
这里我在酷安截的图(MIUI系统截图就这样,状态栏显示不好),这个效果实际上是半透明的状态栏。我们可以直接修改我们之前写过的方法来实现。
我们其实可以想到,这个状态栏其实就是透明色改成了半透明色,我这里把刚才的方法修改了一下
1 |
|
取了一个颜色。
1 | <color name="mycolor">#75898989</color> |
半透明的样子,
然后形成了一个半透明的遮罩。
当然我们可以传值啦。
新建一个方法吧。
1 | public static void setStatusBarColor(Activity activity,int color) { |
用来设置状态栏颜色,这里我们就可以直接调用设置状态栏颜色啦!
3.总结
Android系统碎片化太严重,国产系统又如此之多,所以适配起来比较麻烦,这里还是希望国产手机快点跟进google官方的方法吧,这里如果你的系统和版本有所不同,所以如果遇到不生效的情况下,还需要多多探索。