具有循环依赖性的图像布局

Question

应该有两个图像r和l，另一个视图M像这样对齐。
llMMMMMMrr
llMMMMMMrr

（上面的解释。l和r分别是宽度和高度两个单位，M是两个单位高度并填充剩余空间）

编辑：添加了一张图片，看起来应该是这样

M具有定义的高度。
l和r应共享M的高度，并且应为正方形，这意味着它们的大小取决于M的高度。这已经是一个问题，如何将图像的x尺寸设置为来自外部某处的y尺寸？

那如何完成定位和尺寸呢？
我尝试了图像的不同布局（线性，相对）和位置，但最终总是至少遇到了循环依赖，AndroidStudio的设计人员可以解析但构建过程无法解决。

例如，在RelativeLayout中，如果l和r首先出现在布局xml中，则M知道要在哪里（在r和l之间）。但是r和l不能与M上下对齐，因为M未知。
如果首先出现M，则l和r知道有多高，但是M不知道在哪里，因为l和r不知道。

我认为我在这里犯了一个基本错误，或者我错过了一种非常不同的解决方法。
按照所述放置元素的最佳方法是什么？

Answer 1

如果我遇到您的问题，ConstraintLayout可以解决您的问题。使用ConstraintLayout。它具有许多功能来设计复杂的布局及其平面视图层次结构。

根据您的要求，必须使用layout_constraintDimensionRatio作为ImageView的尺寸比例。它将控制ImageView的高度和重量比例。并且还需要使用ImageView的layout_constraintTop_toTopOf和layout_constraintBottom_toBottomOf属性设置顶部和底部约束。

最后使用layout_constraintEnd_toStartOf和layout_constraintStart_toEndOf约束来占据ImageView之间的剩余空间

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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">

<EditText
    android:id="@+id/editText"
    android:layout_width="0dp"
    android:layout_height="70dp"
    android:layout_marginEnd="8dp"
    android:layout_marginLeft="8dp"
    android:layout_marginRight="8dp"
    android:layout_marginStart="8dp"
    android:layout_marginTop="92dp"
    android:ems="10"
    android:inputType="textPersonName"
    android:minWidth="5dp"
    android:text="Name"
    app:layout_constraintEnd_toStartOf="@+id/imageView3"
    app:layout_constraintStart_toEndOf="@+id/imageView"
    app:layout_constraintTop_toTopOf="parent" />

<ImageView
    android:id="@+id/imageView"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginLeft="8dp"
    android:layout_marginStart="8dp"
    android:scaleType="fitXY"
    app:layout_constraintBottom_toBottomOf="@+id/editText"
    app:layout_constraintDimensionRatio="1:1"
    app:layout_constraintHorizontal_chainStyle="packed"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="@+id/editText"
    app:srcCompat="@mipmap/ic_launcher_round" />

<ImageView
    android:id="@+id/imageView3"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginEnd="8dp"
    android:layout_marginRight="8dp"
    app:layout_constraintBottom_toBottomOf="@+id/editText"
    app:layout_constraintDimensionRatio="1:1"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="@+id/editText"
    app:srcCompat="@mipmap/ic_launcher_round" />

</android.support.constraint.ConstraintLayout>

这是屏幕截图

• app:layout_constraintDimensionRatio="1:1"将始终保持ImageView宽高比为1：1。

• app:layout_constraintTop_toTopOf="@+id/editText"和app:layout_constraintBottom_toBottomOf="@+id/editText"，这两个约束将使ImageView的高度与EditText相同。和ImageView尺寸比例约束将使宽度与高度相同。

• app:layout_constraintEnd_toStartOf="@+id/imageView3"和app:layout_constraintStart_toEndOf="@+id/imageView"的约束将使EditText占据ImageView之间的剩余空间。

确保将EditText layout_width属性设置为0dp，否则它将不使用开始和结束约束，并且不会动态调整大小。 0dp的意思是match_constraint。

要了解ConstraintLayout，请检查official tutorial