ConstraintLayout - 最小宽度但基于同级最大化

ConstraintLayout - minimum width but maximised based on sibling

我正在尝试创建一个 ConstraintLayout 来执行以下操作;

  1. 左边,一个棋盘
  2. 右边,控件
  3. 棋盘应该是正方形,在 parent 允许的范围内
  4. 然而,至少 parent 的 1/3 应该留给控件
  5. 重要的是,如果棋盘的squareness/size表示有超过1/3的空间可以用于控件,那就把控件调大一些。

这可以在 XML 中完成吗? 注意:显然我可以有两种布局,一种用于纵向,一种用于横向。很高兴这样做。

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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"
    tools:context=".TestFragment">

    <!-- view_square should be;  -->
    <!-- be a square (nb: can *contain* a square eg a chessboard. The view itself can be rectangular -->
    <!-- as big as possible, eg in portrait mode width will determine height -->
    <!-- in landscape mode h will determine w -->
    <View
        android:id="@+id/view_square"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@id/view_other"
        app:layout_constraintTop_toTopOf="parent" />

    <!-- this should be; -->
    <!-- width at a MINIMUM should be 1/3 of parent  -->
    <!-- width can be more than 1/3, if room is available after view_square's width is allocated -->
    <View
        android:id="@+id/view_other"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintLeft_toRightOf="@id/view_square"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

首先创建一个准则来约束棋盘的右端。

然后应用尺寸比 1 使您的板成为方形和水平偏差 0 以使其与 parent 的左边缘对齐。

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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">

    <View
        android:id="@+id/view_square"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintHorizontal_bias="0"
        app:layout_constraintDimensionRatio="1"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/guide_view_square"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guide_view_square"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.67"/>

    <View
        android:id="@+id/view_other"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintLeft_toRightOf="@id/view_square"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

现在只有两种情况:

  • 正方形适合在 parent 剩余时间和准则之间留出 33% 用于控制
  • 正方形大小由 parent 的顶部和底部决定,在这种情况下,0 的水平偏差会迫使它向左移动,控件将占据所有剩余的 space