Android状态栏适配和自定义toolbar胶囊按钮（可实现半透明状态栏）
16lz
2021-01-23
自己搞开发，简单状态栏适配和自定义toolbar胶囊按钮，先看两张效果图：
如果你也在寻找沉浸式状态栏，应该也看过好多资料了，以及各种Android版本适配，但是自己用的话就变卦了…，所以最好简单点，就能达到我们想要的结果，先说说思路：
- 通过主题设置，让布局填充状态栏，并且使状态栏为透明
- 在布局里不使用
android:fitsSystemWindows="true"属性（这个属性会使布局下移一个状态栏的距离，效果不好） - 对于toolbar的颜色是我们自己定义的（注意状态栏一直是透明的，且布局也一直是延伸到状态栏下面的）
- toolbar内部的padding值是我们自己预定义的，不是在代码里通过获取状态栏的高度所确定的
- 状态栏半透明效果是在布局根部添加一个半透明View实现的
先来实现第一张图片效果：
设置主题
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> - "colorPrimary"
>@color/colorPrimary - "colorPrimaryDark">@color/colorPrimaryDark
- "colorAccent">@color/colorAccent
- "android:windowTranslucentStatus">true
- "android:statusBarColor">@android:color/transparent
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"> <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"就可得到这样的效果了：
更多相关文章
- android 对话框之——带单选列表、带多选项列表、按钮等问题
- 【极客学院每日一课】Android系列之三：Android 布局动画
- Android 代码实现按钮 按下弹起事件
- android之模仿QQ登陆的布局实现
- android中获取一个xml布局中一个控件的宽高.
- Android 通过按钮弹出系统菜单（通过Button显示菜单）转
- Android EditText 自带清除按钮 的一种解决方案（ViewGroup实现）