Android 实现沉浸式状态栏(包含顶部栏吸顶Layout CoordinatorLayout实现沉浸式状态栏)

这篇具有很好参考价值的文章主要介绍了Android 实现沉浸式状态栏(包含顶部栏吸顶Layout CoordinatorLayout实现沉浸式状态栏)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言

Android状态栏默认是固定的黑底白字,这肯定是不被伟大的设计师所喜爱的,更有甚者,某些时候设计希望内容能够延伸到状态栏上部(例如顶部是大图的情况)。所幸的是随着Android版本的迭代,开发者对状态栏等控件有了更多的控制。Android一直在尝试引入新的Api来满足开发者的需求,但Api却一直不够完美,函数添加了很多,却都不够简单或者说完美,算上第三方厂商的特色行为,怎一个“乱”字了得。

Android 完美的沉浸式需要多个函数配合使用才能完成,我们这里可以直接使用ImmersionBar 框架来实现沉浸式状态栏。

这里分为两部分:第一部分是普通的Layout实现沉浸式状态栏(如:FrameLayout、LinearLayout、RelativeLayout、ConstraintLayout),

第二部分是特殊的Layout实现沉浸式状态栏(如:CoordinatorLayout实现沉浸式状态栏)。

1.引入immersionbar依赖,在app的build.gradle中添加依赖

    //沉浸式状态栏框架导入
    // 基础依赖包,必须要依赖
    api "com.geyifeng.immersionbar:immersionbar:3.2.2"
    // kotlin扩展(可选)
    api "com.geyifeng.immersionbar:3.2.2"

在项目的build.gradle下的repositories添加(新版本Android Studio创建的项目是在settings.gradle下的repositories),并同步项目。

mavenCentral()

关于全面屏

在manifest的application节点下加入

<meta-data 
     android:name="android.max_aspect"
     android:value="2.4" />

关于刘海屏

在manifest的application节点下加入

   <!--适配华为(huawei)刘海屏-->
   <meta-data 
     android:name="android.notch_support" 
     android:value="true"/>
   <!--适配小米(xiaomi)刘海屏-->
   <meta-data
     android:name="notch.config"
     android:value="portrait|landscape" />

2.普通的Layout实现沉浸式状态栏。

1)在res文件夹下的values文件夹下的styles.xml文件内加入

    <!-- 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>
        <item name="android:windowContentOverlay">@null</item>
        <item name="android:windowBackground">@android:color/white</item>

    </style>

然后在manifest的application节点上加入android:theme="@style/AppTheme"(也可以在activity节点上加入,但是这样一来每个用到沉浸式状态栏的Activity都要加一下这个属性了),如下图一

android immersionbar,android

2)在xml写一个标题栏Layout,不要给外层Layout设置android:fitsSystemWindows="true"属性,然后配置了第3步这个标题栏Layout就能够延伸到状态栏底部。

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="@dimen/dp_73"
            android:background="@color/color_FF198CFF"
            android:minHeight="?attr/actionBarSize"
            android:orientation="vertical"
            app:contentInsetStart="0dp">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="@dimen/dp_73"
                android:orientation="vertical">

                <View
                    android:layout_width="match_parent"
                    android:layout_height="@dimen/dp_25" />

                <FrameLayout
                    android:layout_width="match_parent"
                    android:layout_height="@dimen/dp_48">

                    <FrameLayout
                        android:id="@+id/layout_back"
                        android:layout_width="@dimen/dp_36"
                        android:layout_height="match_parent"
                        android:gravity="start"
                        tools:ignore="UselessParent">

                        <ImageView
                            android:id="@+id/imv_back"
                            android:layout_width="@dimen/dp_6"
                            android:layout_height="@dimen/dp_11"
                            android:layout_gravity="center"
                            android:src="@mipmap/icon_arrowhead_left"
                            tools:ignore="ContentDescription" />

                    </FrameLayout>

                    <TextView
                        android:id="@+id/tev_title"
                        android:layout_width="match_parent"
                        android:layout_height="@dimen/dp_48"
                        android:gravity="center"
                        android:text="@string/android_and_js"
                        android:textColor="@color/white"
                        android:textSize="@dimen/sp_20" />

                </FrameLayout>

            </LinearLayout>

        </androidx.appcompat.widget.Toolbar>

3)封装immersionbar框架中的沉浸式状态栏方法

protected open fun setToolbar(isDarkFont: Boolean, color: Int) {
        if (isDarkFont) {
            ImmersionBar.with(this) //原理:如果当前设备支持状态栏字体变色,会设置状态栏字体为黑色,如果当前设备不支持状态栏字体变色,会使当前状态栏加上透明度,否则不执行透明度
                .statusBarDarkFont(isDarkFont)
                .statusBarColor(color) //状态栏颜色,不写默认透明色
                //                    .autoStatusBarDarkModeEnable(true, 0.2f) //自动状态栏字体变色,必须指定状态栏颜色才可以自动变色哦
                .init()
        } else {
            ImmersionBar.with(this)
                .statusBarDarkFont(isDarkFont)
                .statusBarColor(color) //状态栏颜色,不写默认透明色
                //                    .autoStatusBarDarkModeEnable(true, 0.2f) //自动状态栏字体变色,必须指定状态栏颜色才可以自动变色哦
                .init()
        }
    }
在Activity中调用这个方法(参数一:是否是深色字体的;参数二:沉浸状态栏的颜色)
setToolbar(false, R.color.color_FF198CFF)

3.第二步的方法中能实现绝大多数沉浸式状态栏,然而不能实现顶部栏吸顶Layout CoordinatorLayout的沉浸式状态栏。

下面我们来看一下CoordinatorLayout实现沉浸式状态栏

1)在res文件夹下的values文件夹下的styles.xml文件内加入


    <style name="NoActionBarTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>

        <!-- 启动白屏解决方案,这三行是重点 -->
        <!--   设置背景,解决白屏的关键   -->
        <!-- 将splash图片设置在这,这样这张图片取代白屏 -->
        <item name="android:windowBackground">@drawable/picture3</item>
        <!-- 设置状态栏为白色的,状态栏文字为黑的 -->
        <item name="android:statusBarColor" tools:targetApi="l">@color/white</item>
        <item name="android:windowLightStatusBar" tools:targetApi="m">true</item>

    </style>

然后在manifest的application节点下的activity节点上加入android:theme="@style/NoActionBarTheme",如下图一

android immersionbar,android

 2)在xml写一个Layout,不要给外层Layout设置android:fitsSystemWindows="true"属性,然后配置了第3步这个标题栏Layout就能够延伸到状态栏底部。

            <androidx.coordinatorlayout.widget.CoordinatorLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:clipToPadding="true">

                <com.google.android.material.appbar.AppBarLayout
                    android:id="@+id/app_bar_layout"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">

                    <com.google.android.material.appbar.CollapsingToolbarLayout
                        android:id="@+id/collapsing_toolbar_layout"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        app:layout_scrollFlags="scroll|exitUntilCollapsed">

                        <ImageView
                            android:id="@+id/imv_banner"
                            android:layout_width="match_parent"
                            android:layout_height="@dimen/dp_270"
                            android:scaleType="centerCrop"
                            android:src="@mipmap/picture_manami_enosawa2"
                            tools:ignore="ContentDescription" />

                        <androidx.appcompat.widget.Toolbar
                            android:layout_width="match_parent"
                            android:layout_height="@dimen/dp_73"
                            app:contentInsetStart="0dp"
                            app:layout_collapseMode="pin" />

                    </com.google.android.material.appbar.CollapsingToolbarLayout>

                    <FrameLayout
                        android:layout_width="match_parent"
                        android:layout_height="@dimen/dp_50"
                        android:orientation="vertical"
                        tools:ignore="UselessLeaf">

                        <net.lucode.hackware.magicindicator.MagicIndicator
                            android:id="@+id/magic_indicator"
                            android:layout_width="wrap_content"
                            android:layout_height="@dimen/dp_40"
                            android:layout_gravity="center" />

                    </FrameLayout>

                </com.google.android.material.appbar.AppBarLayout>

                <androidx.viewpager.widget.ViewPager
                    android:id="@+id/view_pager"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

            </androidx.coordinatorlayout.widget.CoordinatorLayout>

3)封装immersionbar框架中的沉浸式状态栏方法


    /**
     * 顶部栏吸顶专用
     */
    protected open fun setToolbar2(
        isDarkFont: Boolean,
        statusBarColor: Int
    ) {
        if (isDarkFont) {
            val window = window
            window.clearFlags(
                WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS
                        or WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION
            )
            window.decorView.systemUiVisibility = (View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
                    or View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
                    or View.SYSTEM_UI_FLAG_LAYOUT_STABLE)
            window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS)
            window.statusBarColor = Color.TRANSPARENT
            //        window.setNavigationBarColor(Color.TRANSPARENT);
            ImmersionBar.with(this) //原理:如果当前设备支持状态栏字体变色,会设置状态栏字体为黑色,如果当前设备不支持状态栏字体变色,会使当前状态栏加上透明度,否则不执行透明度
                .statusBarDarkFont(isDarkFont)
                .statusBarColor(statusBarColor) //状态栏颜色,不写默认透明色
                //                    .autoStatusBarDarkModeEnable(true, 0.2f) //自动状态栏字体变色,必须指定状态栏颜色才可以自动变色哦
                .keyboardEnable(true)
                .init()
        } else {
            ImmersionBar.with(this) //原理:如果当前设备支持状态栏字体变色,会设置状态栏字体为黑色,如果当前设备不支持状态栏字体变色,会使当前状态栏加上透明度,否则不执行透明度
                .statusBarDarkFont(isDarkFont)
                .statusBarColor(statusBarColor) //状态栏颜色,不写默认透明色
                //                    .autoStatusBarDarkModeEnable(true, 0.2f) //自动状态栏字体变色,必须指定状态栏颜色才可以自动变色哦
                .keyboardEnable(true)
                .init()
            val window = window
            window.clearFlags(
                WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS
                        or WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION
            )
            window.decorView.systemUiVisibility = (View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
                    or View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
                    or View.SYSTEM_UI_FLAG_LAYOUT_STABLE)
            window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS)
            window.statusBarColor = Color.TRANSPARENT
            //        window.setNavigationBarColor(Color.TRANSPARENT);
        }
    }

在Activity中调用这个方法(参数一:是否是深色字体的;参数二:沉浸状态栏的颜色),这样就实现了CoordinatorLayout的沉浸式状态栏,如以下视频(这里的沉浸状态栏的颜色设置的完全透明,上滑的时候会渐变至纯白色)。

setToolbar2(false, R.color.color_transparent):

Android顶部栏吸顶效果


 

如对此有疑问,请联系qq1164688204。

推荐Android开源项目

项目功能介绍:原本是RxJava2和Retrofit2项目,现已更新使用Kotlin+RxJava2+Retrofit2+MVP架构+组件化和 Kotlin+Retrofit2+协程+MVVM架构+组件化,添加自动管理token 功能,添加RxJava2 生命周期管理,集成极光推送、阿里云Oss对象存储和高德地图定位功能。

项目地址:https://gitee.com/urasaki/RxJava2AndRetrofit2文章来源地址https://www.toymoban.com/news/detail-629926.html

到了这里,关于Android 实现沉浸式状态栏(包含顶部栏吸顶Layout CoordinatorLayout实现沉浸式状态栏)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【UI篇】Android 沉浸式状态栏的那些事

    此篇文章介绍的内容都是考虑到5.0 版本以上。5.0以下的不做介绍。演示的代码皆为kotlin实现 首先一般设置是包括两方面的,第一是设置 window.decorView.systemUiVisibility ,第二是设置 window.addFlags() 这些方法都有一些常量的设置。但是在API 30 版本之后又新出了一个 WindowInsetsContro

    2024年01月25日
    浏览(78)
  • 史上最完美的Android沉浸式状态导航栏攻略

    最近我在小破站开发一款新App,叫 高能链 。我是一个完美主义者,所以不管对架构还是UI,我都是比较抠细节的,在状态栏和导航栏沉浸式这一块,我还是踩了挺多坑,费了挺多精力的。这次我将我踩坑,适配各机型总结出来的史上最完美的Android沉浸式状态导航栏攻略分享

    2023年04月26日
    浏览(37)
  • 微信小程序 顶部搜索 吸顶 不随页面滚动而滚动

    主要用于商城类小程序: 微信小程序 搜索框 顶部吸顶 顶部购物车栏固定 不随页面滚动而滚动 示例: 可以看到分为三部分--头部搜索框--中间商品区域(可滚动)----底部购物车(固定底部) 头部搜索框 最大的盒子宽高100% 头部盒子需要有固定高度 flex布局 flex-flow: column; (为了中间

    2024年02月12日
    浏览(55)
  • Android 设置系统SystemUI 顶部StatusBar状态栏透明一体化

    当你开启其他应用的时候,执行的是onPause()方法,当返回Launcher的时候执行的是onRestart()方法, /frameworks/base/package/SystemUI/…. PhoneStatusBar.java //sendBroadcast change systemUI statusbar color start Intent intent=new Intent(“change_statusbar_black”); sendBroadcast(intent); status_bar.xml 的默认背景色是透明的 Pow

    2024年04月17日
    浏览(59)
  • Android沉浸式实现(记录)

    沉浸式先看效果 直接上代码 Android manifest文件 布局文件 Java MainActivity.class文件 注意点

    2024年02月11日
    浏览(90)
  • iphone的safari浏览器实现全屏的pwa模式,并修改顶部状态栏背景颜色

    要想修改顶部背景颜色,需要用到这个属性:content就是你要设置的颜色 然后再加上下面的设置: 总的设置:  如果没有设置状态栏背景颜色,可能看到的效果:背景是黑色或者白色   配置好状态栏颜色后:

    2024年02月07日
    浏览(127)
  • Android 顶部标签栏及内容列表的设计与实现

    案例演示 1、主页面添加ViewPager控件 activity_main.xml 2、创建适配器继承FragmentPagerAdapter 在适配器类中创建构造方法,传入FragmentManager对象及放入ViewPager的Fragment对象集合 MyAdapter.java 3、为ViewPager对象设置适配器 准备Fragment集合 创建MyAdapter适配器 MainActivity.java 4、设置ViewPager监听

    2023年04月19日
    浏览(44)
  • 【Flutter】如何完成一个透明沉浸式状态栏

    之前遇到的一个需求需要做一个透明的沉浸式状态栏,中间遇到一些问题,记录下来,给有需要的小伙伴指指路。 默认的状态栏,大多有系统自带UI,很多时候看起来跟我们的app不协调。 修改main.dart

    2024年02月01日
    浏览(52)
  • uniapp 自定义手机顶部状态栏(适配状态栏高度)

    uniapp 在 pages.json 页面设置了全局的  globalStyle 的  \\\"navigationStyle\\\": \\\"custom\\\" 或单页面的  style 的  \\\"navigationStyle\\\": \\\"custom\\\" 之后页面顶部就没有自带的导航栏了,这时用户可自定义该页面的顶部导航栏。 HTML js(示例为:vue 3 的 js) 以上就是关于 uniapp 自定义页面状态栏的核心代码了

    2024年02月12日
    浏览(39)
  • 微信小程序自定义顶部状态栏滑动显示标题居中

    开启了自定义顶部的配置,轮播图覆盖了顶部,所以需要做一个上滑到胶囊后重新把标题重新展示出来的操作,自定义标题出现不居中情况,以下为解决后的方案,复制粘贴即可: . wxml: . . wxss: . . 滑动事件:滑动到胶囊后把标题展示出来 . . 计算胶囊按钮高度、状态栏高

    2024年02月17日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包