前言
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都要加一下这个属性了),如下图一
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",如下图一
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://www.toymoban.com/news/detail-629926.html
项目地址:https://gitee.com/urasaki/RxJava2AndRetrofit2文章来源地址https://www.toymoban.com/news/detail-629926.html
到了这里,关于Android 实现沉浸式状态栏(包含顶部栏吸顶Layout CoordinatorLayout实现沉浸式状态栏)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!