Android-沉浸式模式

作者: 落魄的安卓开发 | 来源:发表于2017-02-08 23:36 被阅读260次

关于沉浸式模式,网上已经有很多大牛写的文章了。在这里只是记录一下几种实现方式及其步骤方便以后查阅、复习,快速应用。

什么沉浸式模式:

在Android4.4之前,状态栏的颜色是黑色的,不能和我们的应用融为一体。在4.4之后,能够实现给状态栏设置颜色。并且从5.0开始系统更加完善了这一功能,可直接在主题中设置<item name="colorPrimaryDark">@color/colorPrimaryDark</item>或者getWindow().setStatusBarColor(color)来实现。

实现沉浸式模式步骤:
1、让状态栏透明(两种方式)

1.1)分别在values、values-19、values-21 自定义同名的Theme,在Manifest中设置Activity的Theme
1.2)通过java代码实现

2、给状态栏着色(两种情况)

2.1)android:fitsSystemWindows="true" 不允许布局延伸到状态栏
2.2)android:fitsSystemWindows="false" 允许布局延伸到状态栏(如果页面顶部是一张图片的话就不用处理,如果页面顶部是Toolbar或者自定义TitleBar的话就用paddingTop=20dp/25dp来处理)

3、具体实现

3.1)自定义Theme实现状态栏透明 + android:fitsSystemWindows="true" 让布局不延伸到状态栏

第一步 -- 状态栏透明:

values:
<style name="CustomSystemStatusTheme" parent="AppTheme">
    <item name="android:windowIsTranslucent">true</item>
</style>
values-v19:
<style name="CustomSystemStatusTheme" parent="AppTheme">
    <item name="android:windowIsTranslucent">true</item><!--窗体透明-->
    <item name="android:windowTranslucentNavigation">false</item><!--导航栏透明-->
    <item name="android:windowTranslucentStatus">true</item><!--状态栏透明-->
</style>
 values-v21
  <style name="CustomSystemStatusTheme" parent="AppTheme">
    <item name="android:windowIsTranslucent">true</item><!--窗体透明-->
    <item name="android:windowTranslucentNavigation">false</item><!--导航栏透明-->
    <item name="android:windowTranslucentStatus">true</item><!--状态栏透明-->
    <!--Android 5.x开始需要把颜色设置透明,否则导航栏会呈现系统默认的浅灰色-->
    <item name="android:statusBarColor">@android:color/transparent</item>
</style>

Manifest文件中给Activity设置Theme

<activity
  android:name=".ColorXmlActivity"
  android:theme="@style/CustomSystemStatusTheme"/>

第二步 -- 给状态栏着色(有两种方式)
方式1:将该Activity的最底层的layout的背景色设置为状态栏需要的颜色,来给状态栏着色,xml如下:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:id="@+id/activity_color_xml"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:background="@color/colorPrimary"
 android:fitsSystemWindows="true">

 <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/colorAccent"
    android:orientation="vertical">

    <include layout="@layout/include_titlebar" />
 </LinearLayout>
</LinearLayout>

这种方式某些情况下需要我们在最外层布局之外再专门套一层布局来给状态栏着色,从而会有过度绘制问题。

方式2:通过java代码,添加一个和状态栏高度一样的View,设置该view的背景色为需要的状态栏的颜色

 private void addStatusBarView() {
    View view = new View(this);
    view.setBackgroundColor(getResources().getColor(R.color.colorPrimary));
    //getStatusBarHeight();是获取状态栏的高度方法,可参考
    LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
            getStatusBarHeight());
    ViewGroup decorView = (ViewGroup) findViewById(android.R.id.content);
    decorView.addView(view, params);
}

3.2)java代码实现状态栏透明 + android:fitsSystemWindows="false" 让布局延伸到状态栏及paddingTop来实现
第一步 -- 状态栏透明(使用java代码实现):

 public void statusTranslucent() {
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {//5.0及以上
        View decorView = getWindow().getDecorView();
        int option = View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
                | View.SYSTEM_UI_FLAG_LAYOUT_STABLE;
        decorView.setSystemUiVisibility(option);
        getWindow().setStatusBarColor(Color.TRANSPARENT);
    } else if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {//4.4到5.0
        WindowManager.LayoutParams localLayoutParams = getWindow().getAttributes();
        localLayoutParams.flags = (WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS | localLayoutParams.flags);
    }
}

第二步 -- 给状态栏着色
android:fitsSystemWindows="false"允许布局延伸到状态栏,但是我们通过设置paddingTop来空出状态栏的高度就可以,activity的xml代码如下:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:id="@+id/activity_color_xml"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="vertical"
 android:fitsSystemWindows="false">

 <include layout="@layout/include_titlebar2" />
</LinearLayout>

include_titlebar2.xml的布局如下:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="@dimen/titlebar_height"
 android:background="@color/colorPrimary"
 android:paddingTop="@dimen/titlebar_padding_top">

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:text="标题"
    android:textColor="@android:color/white"
    android:textSize="20sp" />
</RelativeLayout>

其中include_titlebar2.xml中的titlebar_height和titlebar_padding_top分别在values/dimens、values-19/dimens、values-21/dimens进行定义,如下:

values/dimens
<dimen name="titlebar_height">50dp</dimen>
<dimen name="titlebar_padding_top">0dp</dimen>

values-v19/dimens
<dimen name="titlebar_height">70dp</dimen>
<dimen name="titlebar_padding_top">20dp</dimen>

values-v21/dimens
<dimen name="titlebar_height">70dp</dimen>
<dimen name="titlebar_padding_top">20dp</dimen>

还有一种情况就是顶部是一张图片的时候,第一步同上,xml直接如下:

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:id="@+id/activity_color_xml"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="vertical"
 android:fitsSystemWindows="false">

 <ImageView
    android:src="@mipmap/test"
    android:scaleType="fitXY"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />
 </LinearLayout>

上面两个第一步可以任意选择一个使用。如果是使用java代码的话,最好在Base中进行调用。

参考如下:
http://blog.csdn.net/guolin_blog/article/details/51763825
http://www.jianshu.com/p/0acc12c29c1b#
http://www.jianshu.com/p/bae25b5eb867

相关文章

  • Android-沉浸式模式

    关于沉浸式模式,网上已经有很多大牛写的文章了。在这里只是记录一下几种实现方式及其步骤方便以后查阅、复习,快速应用。...

  • Android 沉浸式模式与常见状态栏和导航栏效果

    Android沉浸式模式 官方称沉浸式状态栏为沉浸式模式。 什么是沉浸式?沉浸式就是让人专注当前的(由设计者营造)...

  • 沉浸式模式

    何谓刻意练习? 简单粗暴地重复?还是有针对性地深度学习,开启沉浸式模式。 耳到、眼到、手到、心到! 听书,精彩绝伦...

  • 沉浸式模式和透明状态栏

    沉浸式模式(Immersive Mode)这是Android官方给出的说法,坊间把这种模式称为沉浸式状态栏。 什么...

  • Android 沉浸式状态栏

    1. 什么是沉浸式状态栏 所谓的沉浸式状态栏(Immersive Mode),是一种沉浸模式,在这种模式下,状态栏...

  • 沉浸式模式(沉浸式状态栏)

    参考文章:Activity 全屏,沉浸式模式这一篇就够了 误区甄别:我们常说的“沉浸式状态栏”正确的叫法应该是“沉...

  • Android沉浸式模式

    前言 这次刚好有时间让自己提升一下自己的技能,一直以来我对导航栏沉浸式模式一直停留在比较基础的阶段,趁这段时间查漏...

  • Android-沉浸式状态栏

    不过这样做的一个情况下,其实就是布局的内容向上移动了?attr/actionBarSize的距离1.设置fitsS...

  • 笔记54 | 管理系统UI(二)

    全屏沉浸式应用 这节课将教您 选择一种沉浸方式 使用非粘性沉浸模式 使用粘性沉浸模式 Adnroid 4.4(AP...

  • Android 沉浸式状态栏

    沉浸式含义 首先先明确一点沉浸式状态栏的说法并不准确,沉浸式是Android4.4推出的一种模式,可以使显示系统消...

网友评论

  • 封号斗罗:DrawerLayout的情况下,有systembar,有drawerlayout怎么解决,难道要单独写一个activity处理这种情况?
    落魄的安卓开发:不用的。可以通过设置DrawerLayout中android:fitsSystemWindows="false",再设置菜单布局的paddingTop来实现

本文标题:Android-沉浸式模式

本文链接:https://www.haomeiwen.com/subject/iyzluttx.html