Android 沉浸式状态栏

一、引言

沉浸式状态栏是一种比较常见的UI风格,接下来就去看看怎么实现它。

二、实现

1.创建个状态栏透明的主题

在styles.xml里增加TranslucentTheme,我们这里minSdkVersion 是以21为准,低于安卓5.0以下的手机很少了,就不适配了。

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

    <style name="TranslucentTheme" parent="AppTheme">
        <!--注意:Android 21(android 5.0 Lollipop)这个系统开始这个属性设置为true,状态栏会呈现半透明加暗效果,并不能全透明-->
        <item name="android:windowTranslucentStatus">false</item>
        <!--注意:Android 21(5.0)这个系统开始状态栏透明的话需要把颜色设置为透明,并且上面那个属性需要设置为false-->
        <item name="android:statusBarColor">@android:color/transparent</item>
        <!--注意:导航栏设置透明是为了让activity内容延伸至状态栏,导航栏实际为半透明加暗效果-->
        <item name="android:windowTranslucentNavigation">true</item>
    </style>
</resources>

2.Activity设置主题

 <activity android:name=".ImmersiveStatusBarActivity"
            android:theme="@style/TranslucentTheme" />

3.Activity加个图片,运行,查看结果

image.png

对于这种没有标题栏,图片沉浸到状态栏的效果,我们已经实现了。如果是有标题栏呢?比如加个Toolbar会变成下面这样:

image.png

对于有标题的页面,我们希望状态栏颜色跟标题栏一样就行了,不希望标题栏上移跟状态栏重叠,我们可以在布局文件根视图设置如下属性,这个相当于设置了个padding让状态栏下移,当然,为了让状态栏颜色跟标题栏一样,你还需要给根视图设置一样的背景色(因为状态栏实际是透明的)。

android:fitsSystemWindows="true"

运行看看,已经实现了我们的要求。


image.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容