用过android手机的人都知道android使用app的时候屏幕上方的状态栏都是黑色的,就算不是黑色的都与正在打开的app颜色不同。有一种灰常不搭调的感觉。~
今天无意中看了一下关于沉浸式状态栏的资料~~作为强迫症重度患者怎能错过?
下面就开始使用沉浸式状态栏之旅:
代码未上图先行:
沉浸式:
非沉浸式:
嗯~虽然第二张图比较模糊,但是也可以想象第一张比较好看(~ ̄▽ ̄)~。
那么接下来要说的就是如何实现第一张图的那样的效果:
首先要说明的是以下方法只适合android4.4或以上的系统
android4.4也就是api19~所以我们在res文件夹下新建一个values-v19,然后再新建一个style.xml文件。
在style上写以下代码:
指定style为noactionbar而且半透明
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="AppBaseTheme" parent="android:Theme.Holo.Light.NoActionBar.TranslucentDecor" >
</style>
</resources>
然后运行程序可以看到,状态栏与app顶部颜色是一致的,但是如果布局文件的顶部写有其它内容的话会发现布局文件上的内容会与状态栏上的内容重合~~这肯定是不允许的。
有没有方法解决呢?
在使用了沉浸式状态栏的布局文件上写上以下两句话:
android:clipToPadding="true"
android:fitsSystemWindows="true"
就可以解决这个问题了~
但是在某些情况下会发现写上这两句代码之后,状态栏颜色会是白色或者其它颜色~这是因为写上这两句代码的地方的颜色是与状态栏颜色是一样的。
也就是说如果有一个LinearLayout的背景色是红色,那么使用了沉浸式状态栏的情况下,在这个linearLayout写上以上两句代码之后状态栏也会变成红色。
可以看到实际上就三句代码~
<style name="AppBaseTheme" parent="android:Theme.Holo.Light.NoActionBar.TranslucentDecor" >
android:clipToPadding="true"
android:fitsSystemWindows="true"
最后说一下:
每个app都有那么多的activity如果每个activity都写一次上面两句代码未免有点烦人,所以在某些情况下是可以“偷懒”的。比如很多app都是用toolbar或actionbar之类的。
那么状态栏的颜色就要与app上的这个bar的颜色一致。那么我们只需自己定义一个actionbar然后在布局上面写上以上两句代码那么在使用到这个自定义actionbar的activity自然那两句代码自然会生效啦!
以下就是例子:
首先是自定义actionbar的布局文件:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/rellay_action_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/maincolor"
android:clipToPadding="true"
android:fitsSystemWindows="true"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="@dimen/top_navigation_height"
>
<ImageButton
android:id="@+id/btn_action_bar_left"
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_marginLeft="10dp"
android:background="@drawable/common_back_btn_bg_pressed"
android:contentDescription="@null"
android:padding="20dp"
android:visibility="gone" />
<TextView
android:id="@+id/tv_action_bar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerInParent="true"
android:layout_centerVertical="true"
android:gravity="center"
android:singleLine="true"
android:textColor="#ffffff"
android:textSize="20sp" />
<ImageButton
android:id="@+id/btn_action_bar_right"
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="10dp"
android:contentDescription="@null"
android:padding="20dp"
android:visibility="gone" />
</RelativeLayout>
</RelativeLayout>
然后是使用这个自定义actionbar的布局:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="wrap_content" >
<com.javy.test.view.CustomActionBar
android:id="@+id/action_bar_act_detail_intro"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
</com.javy.test.view.CustomActionBar>
</LinearLayout>
就这样~~ok了