Android: центрированные сжатые растянутые по ширине изображения с использованием ConstraintLayout

Question

все.

Я хочу достичь следующих размеров пользовательского интерфейса и позиционирования на Android, используя ConstraintLayout:

Особенности / критерии использования :

1. Это та же самая страница, представленная в сценарии с двумя размерами экрана ios - левый - более высокий, а правый - более короткий.
2. Оранжевый и фиолетовый прямоугольники - это векторные изображения и числа обозначают разные размерные длины, отступы, поля. Если данное число встречается несколько раз, то все они имеют одинаковую размерную длину.
3. Верхнее изображение должно занимать максимум 70% доступной ширины, нижнее - 62%. Если для каждого из изображений доступна ширина больше, чем высота (альбомный режим), тогда изображения должны иметь одинаковое относительное соотношение масштабов одно к другому - 70/62.
4. Если вертикального пространства более чем достаточно - более чем в два раза больше высоты большего из обоих изображений + 4-кратное заполнение / поле, отмеченное как 1, тогда два изображения должны быть упакованы вместе в центре доступного пространства так, чтобы линия, которая фактически разделяет их друг от друга, должна быть в центре доступного вертикального пространства.
5. Если вертикальное пространство ограничено - меньше или равно сумме высот обоих изображений с четырехкратным отступом / полем, отмеченным как 1, тогда изображения будут просто займите доступное место. Воображаемая разделительная линия больше не должна совпадать с вертикальным центром доступного пространства. Вместо этого изображения будут уменьшены при необходимости одинаково, но все равно будут иметь такое же соотношение размеров друг к другу, что и раньше - 70/62.

Пытался удовлетворить все критерии с этим ConstraintLayout:

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView
        android:id="@+id/upper_bigger_image_view"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toTopOf="@id/lower_smaller_image_view"
        app:layout_constraintWidth_percent="0.7"
        android:scaleType="fitCenter"
        android:src="@drawable/vector_1" />
    <ImageView
        android:id="@+id/lower_smaller_image_view"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@id/upper_bigger_image_view"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintWidth_percent="0.62"
        android:scaleType="fitCenter"
        android:src="@drawable/vector_2" />
</androidx.constraintlayout.widget.ConstraintLayout>

, но, как и следовало ожидать, эта реализация не соответствует критерию № 5, упомянутому выше, когда изображения должны обертываться по высоте пропорционально - 70/62, и при необходимости уменьшаться одинаково (последнее достигается здесь как хорошо). Таким образом, каждое изображение всегда будет иметь половину доступной высоты. Один из способов исправить это и выполнить критерий №5 - явно указать занятость вертикального пространства обоими изображениями:

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView
        android:id="@+id/upper_bigger_image_view"
        ...
        app:layout_constraintVertical_weight="70"
        ... />
    <ImageView
        android:id="@+id/lower_smaller_image_view"
        ...
        app:layout_constraintVertical_weight="62"
        ... />
</androidx.constraintlayout.widget.ConstraintLayout>

, но на этот раз критерий №4 нарушается, и виртуальная разделительная линия между изображениями больше не будет совпадают с центром по вертикали доступного пространства, если его более чем достаточно.

Попытка использовать упакованную цепочку для одновременного удовлетворения критериев №4 и №5:

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView
        android:id="@+id/upper_bigger_image_view"
        ...
        android:layout_height="wrap_content"
        app:layout_constraintVertical_chainStyle="packed"
        ... />
    <ImageView
        android:id="@+id/lower_smaller_image_view"
        ...
        android:layout_height="wrap_content"
        ... />
</androidx.constraintlayout.widget.ConstraintLayout>

но это способ нарушил критерий № 3, так как векторные изображения были уменьшены по вертикали до явно заданного размера пикселя их холста:

<svg width="<width>" height="<height>" viewBox="0 0 <width> <height>" ...

, а не расширялись за счет сохранения соотношения сторон для заполнения 70% или 62% родительская ширина. Критерий №4 также был нарушен, поскольку при разной длине измерения, по которому упаковываются изображения, поскольку весь пакет центрируется в направлении цепочки, виртуальная линия, разделяющая их, больше не совпадает с вертикальным центром родительского элемента.

Было бы здорово, если бы вы могли поделиться некоторыми решениями для варианта использования. Если я продублировал уже существующий ответ - цитируйте его обязательно и извините, что не увидел.