設置視圖以在可用空間中擴展至最大尺寸

Question

我有一個帶有水平 recyclerview 的應用程序，它顯示一個方形圖像，在圖像的底角有一個覆蓋的手柄和按鈕（通過約束布局控制）。

由於顯示的圖像都是 svg 圖形，我希望這些圖像中的每一個都可以擴展以填充可用的垂直空間。 但是在一些大屏幕上，我發現有足夠的空間讓圖像被放大到過大的尺寸，因此屏幕上只顯示一兩個。

我想要的是對回收器視圖中的每個圖像進行縮放以將空間填充到最大尺寸，例如 120dp。 我試圖通過覆蓋 onMeasure 的自定義圖像視圖來實現這一點：

class ComponentImageView : AppCompatImageView {
    constructor(context: Context?) : super(context) {}
    constructor(context: Context?, attrs: AttributeSet?) : super(context, attrs) {}

    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec)

        var size = 0
        val width = measuredWidth
        val height = measuredHeight
        val heightWithoutPadding = height - paddingTop - paddingBottom

        // set the dimensions
        size = heightWithoutPadding

        var dp = (size / resources.displayMetrics.density + 0.5f)
        if(dp > 120) {dp = 120f}
        val px : Int = (dp * resources.displayMetrics.density + 0.5f).toInt()

        setMeasuredDimension(px + paddingLeft + paddingRight, px + paddingTop + paddingBottom)
    }
}

並在 xml 中使用它，如下所示：

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="wrap_content" android:layout_height="match_parent">

    <bw.graph.ComponentImageView
        android:id="@+id/component_block_image"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

    <bw.smith.TouchableImageView
        android:id="@+id/component_block_handle"
        style="@style/ComponentListIcon"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="@id/component_block_image"
        app:srcCompat="@drawable/ic_drag_handle_gray_24dp" />

    <androidx.appcompat.widget.AppCompatTextView
        android:id="@+id/component_block_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

    <androidx.appcompat.widget.AppCompatImageButton
        android:id="@+id/component_block_edit"
        style="@style/ComponentListIcon"
        app:layout_constraintStart_toStartOf="@id/component_block_image"
        app:layout_constraintBottom_toBottomOf="@id/component_block_image"
        app:srcCompat="@drawable/ic_edit_gray_24dp" />

</androidx.constraintlayout.widget.ConstraintLayout>

雖然圖像最終是正確的寬度，但視圖本身仍會填充所有垂直高度。 所以結果是圖像以可用的垂直高度為中心，並且打算被覆蓋的手柄和按鈕似乎漂浮在遠離圖像的位置。

有沒有辦法實現我想要的？ 如果我只是手動將 android:layout_height 屬性設置為所需的 dp（例如在 48dp 和 120dp 之間）它看起來不錯，我只想找到一種方法在 xml 中設置它或以編程方式使其在不同屏幕上看起來不錯而無需我不得不擔心。

Answer 1

ConstraintLayout通過app:layout_constraintHeight_max屬性開箱即用地支持這一點。 將這些添加到您想要拉伸的視圖中：

android:layout_height="0dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHeight_max="[your value here]"

請注意，當父級高於給定的最大值時，視圖將在父級內（垂直）居中，除非您添加偏差：

app:layout_constraintVertical_bias="[0 - 1]"

偏置值0會將視圖固定在屏幕頂部，而1會將其固定在底部。 如果您想調整位置，您可以使用任何小數值（例如， 0.33使其位於屏幕頂部的三分之一處）。

在視圖不受最大值限制的情況下，此偏差值將不起作用。