自己搞开发,简单状态栏适配和自定义toolbar胶囊按钮,先看两张效果图:
如果你也在寻找沉浸式状态栏,应该也看过好多资料了,以及各种Android版本适配,但是自己用的话就变卦了…,所以最好简单点,就能达到我们想要的结果,先说说思路:
- 通过主题设置,让布局填充状态栏,并且使状态栏为透明
- 在布局里不使用
android:fitsSystemWindows="true"
属性(这个属性会使布局下移一个状态栏的距离,效果不好) - 对于toolbar的颜色是我们自己定义的(注意状态栏一直是透明的,且布局也一直是延伸到状态栏下面的)
- toolbar内部的padding值是我们自己预定义的,不是在代码里通过获取状态栏的高度所确定的
- 状态栏半透明效果是在布局根部添加一个半透明View实现的
先来实现第一张图片效果:
设置主题
<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>
<!--布局延伸到状态内4.4+-->
<item name="android:windowTranslucentStatus">true</item>
<!--设置状态的颜色5.0+-->
<item name="android:statusBarColor">@android:color/transparent</item>
</style>
自定义Toolbar
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:paddingTop="32dp"
android:paddingBottom="12dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="@+id/toolbarTextViewTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:text="TextView"
android:textColor="@color/titles_light_bg"
android:textSize="@dimen/title"
tools:layout_editor_absoluteX="16dp"
tools:layout_editor_absoluteY="36dp" />
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:layout_marginEnd="16dp"
android:background="@drawable/toolbar_icon_layout_shape">
<ImageView
android:id="@+id/toolbarImageViewMenu"
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_marginStart="12dp"
android:layout_marginTop="4dp"
android:layout_marginBottom="4dp"
android:src="@drawable/ic_three_point_white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<View
android:id="@+id/divider"
android:layout_width="1dp"
android:layout_height="16dp"
android:background="#80FFFFFF"
app:layout_constraintBottom_toBottomOf="@+id/toolbarImageViewAbout"
app:layout_constraintEnd_toStartOf="@+id/toolbarImageViewAbout"
app:layout_constraintStart_toEndOf="@+id/toolbarImageViewMenu"
app:layout_constraintTop_toTopOf="@+id/toolbarImageViewAbout" />
<ImageView
android:id="@+id/toolbarImageViewAbout"
android:layout_width="22dp"
android:layout_height="22dp"
android:layout_marginStart="20dp"
android:layout_marginEnd="12dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@+id/toolbarImageViewMenu"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="@drawable/ic_about_2_white" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.appcompat.widget.Toolbar>
</androidx.constraintlayout.widget.ConstraintLayout>
toolbar_icon_layout_shape.xml 这个是toolbar右上角胶囊按钮的形状
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<!-- 设置背景颜色 -->
<solid android:color="#11000000" />
<!-- 定义圆角弧度 -->
<corners
android:radius="16dp" />
</shape>
在需要使状态栏半透明的根布局添加一个View
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".fragment.MainFragment">
<!-- 布局页面可以滚动 -->
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!-- 引用toolbar -->
<include
android:id="@+id/includeToolbar"
layout="@layout/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<!-- 其他布局组件... -->
</ScrollView>
<!-- 遮住状态栏的半透明遮罩 -->
<View
android:id="@+id/toolbarDividerStatusBar"
android:layout_width="match_parent"
android:layout_height="25dp"
android:background="#11000000"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
注:toolbar的背景默认是透明的
在第二张效果图里,是没有遮罩View的,之后在代码文件中设置toolbar的颜色,和监听事件
toolbar.toolbarTextViewTitle.text = "搜索"
toolbar.background = ColorDrawable(Color.parseColor("#019587"))
toolbar.toolbarImageViewMenu.setOnClickListener {
// 设置监听事件
}
toolbar.toolbarImageViewAbout.setOnClickListener {
// 设置监听事件
}
说明:为什么要预定义padding值,是因为在代码中toolbar的四个padding值都是0,加上状态栏的高度后,只把toolbar的内容下移了,但是view的边界没有下移,就很尴尬
// 获取状态栏的高度
fun getStatusBar(): Int {
var height = 0
val resourceId = resources.getIdentifier("status_bar_height", "dimen", "android")
if (resourceId > 0) height = resources.getDimensionPixelSize(resourceId)
return height
}
// 在 onActivityCreated 中调用
fun setToolbarPadding() {
// 获取toolbar的padding值
Log.v("LOG-toolbarTopOld", toolbar.paddingTop.toString())
Log.v("LOG-toolbarLeftOld", toolbar.paddingLeft.toString())
Log.v("LOG-toolbarBottomOld", toolbar.paddingBottom.toString())
Log.v("LOG-toolbarRightOld", toolbar.paddingRight.toString())
Log.v("LOG-height", getStatusBar().toString())
toolbar.setPadding(toolbar.paddingLeft, toolbar.paddingTop + getStatusBar(), toolbar.paddingRight, toolbar.paddingBottom)
Log.v("LOG-toolbarTopOld", toolbar.paddingTop.toString())
}
日志内容及效果:
所以还是设一个值吧,状态栏的高度是25dp,为了美观可以设置:android:paddingTop="32dp"
, android:paddingBottom="12dp"
就可得到这样的效果了: