代码之家  ›  专栏  ›  技术社区  ›  TheLastBert

设置视图以在可用空间中扩展到最大大小

  •  0
  • TheLastBert  · 技术社区  · 4 年前

    我有一个应用程序,它有一个水平循环视图,显示一个方形图像,图像的下角有一个叠加的手柄和按钮(用约束布局控制)。

    由于显示的图像都是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或编程中设置它的方法,这样它在不同的屏幕上看起来都很好,而我不必担心。

    0 回复  |  直到 4 年前
        1
  •  2
  •   Ben P.    4 年前

    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 使其位于屏幕顶部的三分之一处)。

    在视图不受最大值限制的情况下,此偏差值将不起作用。