随着越来越多的人注重Material Design,对于界面的设计也有了更高的要求,于是就出现了如下图那样的各种美丽界面
效果展示.png
对于上面的效果,在网上有着不同的称呼方式,有的称之为“沉浸式”,有的称之为"透明状态栏",至于到底叫什么我们就不追究了,有兴趣的可以看看这两篇文章。
Android状态栏微技巧,带你真正理解沉浸式模式
为什么在国内会有很多用户把「透明栏」(Translucent Bars)称作 「沉浸式顶栏」?
在此我们以最简单的方式来称呼它们,第一种效果称为全屏模式,因为界面的图片进入到了状态栏里面;第二种效果称为着色模式,因为状态栏的颜色被我们改变了。
着色模式的实现
通过上面几篇文章基本上可以实现着色模式。在此我就简单的总结一下:
方法一:
1.先在values文件夹下的styles.xml 文件中设置如下主题
@color/colorPrimary
@color/colorPrimaryDark
@color/colorAccent
2.在values-v19文件夹下的styles.xml 文件中设置如下主题
true
3.将相应的Activity主题设置成为AppTheme
android:theme="@style/AppTheme">
4.在Activity中对toolbar进行相关设置
Toolbar toolbar = (Toolbar) findViewById(R.id.id_toolbar);
// 必须的设置,不然会混淆状态栏
setSupportActionBar(toolbar);
最终的效果图如下(左边是4.4,右边是6.0):
左边是4.4,右边是6.0.png
可以看出在4.4上的效果和在6.0上是不一样的。在5.0以上的可以通过直接修改主题中的colorPrimaryDark,就可以直接修改到状态栏的颜色。而想要在4.4上修改状态栏的颜色就需要做更多的工作了。具体怎么做请继续往下看。
方法二(借助工具类):
因为该工具类比较完整,所以只用设置下面一句话就ok了
StatusBarUtil.setColor(ColorActivity2.this, getResources().getColor(R.color.colorPrimaryDark));
最终的效果图如下(左边是4.4,右边是6.0):
左边是4.4,右边是6.0.png
在此可以看出4.4和6.0上的效果是一样的了,而且可以直接用代码设置状态栏的颜色。
图片模式的实现
图片模式的实现其实也不难,如果只是用于效果展示,按照着色模式的方法一就可以实现,当然借助开源的工具类也是很容易实现的。但是,想要做一些动画效果,似乎就比较困难了
动画.gif
在5.0以上可以借助开源项目的工具类实现,但是在4.4上似乎还没有找到好用的库。所以我自己琢磨了一下:
1.在values-v19文件夹下的styles.xml 文件中设置如下主题
true
true
2.将相应的Activity主题设置成为AppTheme.NoActionBar
android:theme="@style/AppTheme.NoActionBar">
3.在Activity中添加如下代码:
@Override
protected void onCreate(Bundle savedInstanceState) {
if (Build.VERSION.SDK_INT == Build.VERSION_CODES.KITKAT) {
// 设置全屏,并且不会Activity的布局让出状态栏的空间
getWindow().addFlags(WindowManager.LayoutParams.FLAG_LAYOUT_IN_SCREEN);
getWindow().addFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS);
}
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_picture2);
// 使用工具类让在5.0以上的系统生效
StatusBarUtil.setTransparent(this);
// 这两句是在4.4系统上生效的关键
CollapsingToolbarLayout toolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.collapsingToolbarLayout);
materialCollapsingForKitkat(toolbarLayout);
}
private void materialCollapsingForKitkat(final CollapsingToolbarLayout toolbarLayout) {
if (Build.VERSION.SDK_INT == Build.VERSION_CODES.KITKAT) {
// 设置Toolbar对顶部的距离
final Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
final FrameLayout.LayoutParams layoutParams = (FrameLayout.LayoutParams) toolbar
.getLayoutParams();
layoutParams.topMargin = MeasureUtil.getStatusBarHeight(this);
}
}
通过这样的设置,在4.4以及4.4以上的系统上基本上就能够达到大多数效果了。
4.4效果图.gif
总结
不管是透明栏还是沉浸式,能够实现效果就是好的。但是由于本人能力有限,所以可能存在部分机型上会有不适配的效果,如果发生不适配的可以大家一起交流。如果有问题也可以大家一起交流。