最近在项目中遇到了一个问题,就是我们的应用detail页面想要实现沉浸式状态栏,因为图片宽高比例和ImageView的宽高比例都是2.048:1,想要使图片宽高没有变形,使用
fitSystemWindow
属性后顶部图片的底部会出现一个矩形的黑框,下面我们来研究下这个问题。
问题
- 首先看一下布局文件,因为布局文件内容比较简单,这里就不多解释了
<?xml version="1.0" encoding="utf-8"?> <androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" tools:context=".DetailActivity"> <com.google.android.material.appbar.AppBarLayout android:id="@+id/appbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:fitsSystemWindows="true"> <com.google.android.material.appbar.CollapsingToolbarLayout android:id="@+id/collapsing_toolbar_layout" android:layout_width="match_parent" android:layout_height="wrap_content" android:fitsSystemWindows="true" app:collapsedTitleTextAppearance="@style/AppBarTitle" app:contentScrim="?attr/colorPrimary" app:expandedTitleTextAppearance="@style/TransparentTitle" app:ignoreInsetTopInHeight="true" app:layout_scrollFlags="scroll|exitUntilCollapsed"> <androidx.constraintlayout.widget.ConstraintLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:fitsSystemWindows="true" app:layout_collapseMode="parallax"> <androidx.recyclerview.widget.RecyclerView android:id="@+id/appList" android:layout_width="match_parent" android:layout_height="0dp" android:fitsSystemWindows="true" app:layout_collapseMode="parallax" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintDimensionRatio="H, 2.048:1" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" tools:listitem="@layout/item_detail" /> </androidx.constraintlayout.widget.ConstraintLayout> <androidx.appcompat.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" app:layout_collapseMode="pin" app:title="Detail" /> </com.google.android.material.appbar.CollapsingToolbarLayout> </com.google.android.material.appbar.AppBarLayout> <androidx.core.widget.NestedScrollView android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior"> <TextView android:id="@+id/tv_content" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_margin="16dp" android:lineSpacingMultiplier="2" android:text="@string/third_party_software_text" /> </androidx.core.widget.NestedScrollView> </androidx.coordinatorlayout.widget.CoordinatorLayout>
- 因为我们的图片的宽高比例是2.048:1,所以这里我们也将view的宽高比例也设置为2.048:1,目的是为了让图片没有变形,宽高比例一样,但是实际出来的效果如下图,底部有一个黑色矩形框:
解决方案
- 自定义一个
CollapsingToolbarLayout
,并且重写onMeasure方法,去掉黑色矩形框即可<declare-styleable name="MyCollapsingToolbarLayout"> <!-- Whether the InsetTop should be considered while measuring the height --> <attr name="ignoreInsetTopInHeight" format="boolean" /> </declare-styleable> class MyCollapsingToolbarLayout : CollapsingToolbarLayout { private var topInset = 0 private val ignoreInsetTopInHeight: Boolean constructor(context: Context) : this(context, null) constructor(context: Context, attrs: AttributeSet?) : this(context, attrs, 0) constructor(context: Context, attrs: AttributeSet?, defStyleAttr: Int) : super( context, attrs, defStyleAttr ) { val a = context.obtainStyledAttributes(attrs, R.styleable.MyCollapsingToolbarLayout, defStyleAttr, 0) ignoreInsetTopInHeight = a.getBoolean(R.styleable.MyCollapsingToolbarLayout_ignoreInsetTopInHeight, false) a.recycle() } override fun dispatchApplyWindowInsets(insets: WindowInsets?): WindowInsets { topInset = insets?.systemWindowInsetTop ?: 0 return super.dispatchApplyWindowInsets(insets) } override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) { val mode: Int = MeasureSpec.getMode(heightMeasureSpec) super.onMeasure(widthMeasureSpec, heightMeasureSpec) if (ignoreInsetTopInHeight && mode == MeasureSpec.UNSPECIFIED && topInset > 0) { super.onMeasure( widthMeasureSpec, MeasureSpec.makeMeasureSpec(measuredHeight - topInset, MeasureSpec.EXACTLY) ) } } }
- 效果图如下所示:
项目源码地址点击查看项目源码