使用ConstraintLayout根据屏幕高度调整两个等宽ImageView的高度

Question

我想实现一个非常简单的视图，我可以通过编程方式完成，但我想知道它是否可以通过专门使用 ConstraintLayout 来完成。

结构是这样的：

• 约束布局
  • ImageView1
  • ImageView2

一个 ImageView 位于另一个之上，如下图所示：

ImageView1 具有 x1 高度和 w 宽度的可绘制对象。 ImageView2 有一个 x2 高度和 w 宽度的可绘制对象。

我想平等地缩放两个可绘制对象，保持它们的比例，并让 Android 调整宽度以使两个视图占据容器的整个高度。

现在，我正在使用以下函数布局视图后以编程方式进行操作：

private int getWidthForHeight(int height) {
    Log.d(TAG, "getWidthForHeight: " + height);
    Drawable t = ContextCompat.getDrawable(this, R.drawable.ic_left_menu_mid_bg);
    int toh = t.getIntrinsicHeight();
    int tow = t.getIntrinsicWidth();
    Drawable b = ContextCompat.getDrawable(this, R.drawable.ic_left_menu_bottom_bg);
    int boh = b.getIntrinsicHeight();
    int bow = b.getIntrinsicWidth();

    // height = th + bh
    // (toh / tow) * w = th => w = (th * tow) / toh
    // (boh / bow) * w = bh => w = (bh * bow) / boh
    // (th * tow) / toh = (bh * bow) / boh => boh * th * tow = toh * bh * bow
    // boh * th * tow = toh * bh * bow => boh * th * tow = toh * (height - th) * bow
    // boh * th * tow = (toh * height - toh * th) * bow
    // boh * th * tow = bow * toh * height - bow * toh * th
    // th * (boh * tow + bow * toh) = bow * toh * height

    // th = (bow * toh * height) / (boh * tow + bow * toh)
    // bh = height - th

    float th = ((float) (bow * toh * height)) / ((float) (boh * tow + bow * toh));
    float bh = height - th;
    float width = (th * tow) / (float) toh;

    Log.d(TAG, "getWidthForHeight: th = " + th + ", bh = " + bh);
    Log.d(TAG, "getWidthForHeight: width = " + width);

    return Math.round(width);
}

不过，这对我来说似乎有点 hacky，而且我确信在 Android 中有更简单的方法可以做到这一点。但是，我一直没能找到它。

有人可以对此有所了解吗？

谢谢！

Answer 1

如果我理解您的问题，ImageView2 是 ImageView1 高度的两倍，无论屏幕方向或设备屏幕尺寸如何，您都希望保持 2-1 的比例。

尝试使用具有 ImageViews 和 0dp (match_constraints) 的 layout_height 的垂直权重。

<androidx.constraintlayout.widget.ConstraintLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="200dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toTopOf="@+id/imageView2"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_weight="2"
        android:background="@android:color/holo_blue_light"
        tools:srcCompat="@drawable/ic_launcher_foreground" />

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="200dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/imageView"
        app:layout_constraintVertical_weight="1"
        android:background="@android:color/holo_red_light"
        tools:srcCompat="@drawable/ic_launcher_foreground" />
</androidx.constraintlayout.widget.ConstraintLayout>

肖像

风景