沉浸式状态栏底部的黑色矩形框问题

最近在项目中遇到了一个问题，就是我们的应用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)
              )
          }
      }
  }
  

• 效果图如下所示：
  
  项目源码地址点击查看项目源码