如何在LinearLayout中保持宽高比?

时间:2019-04-14 20:27:46

标签: android

我正在尝试实现这样的布局:

enter image description here

我添加了如下代码。但是问题在于最终渲染的布局中两个图像视图的高度为零。我不知道为什么高宽比1:1无效:app:layout_constraintDimensionRatio="1:1"。我错过了什么吗?     

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintTop_toTopOf="parent"
        android:orientation="horizontal"
        android:weightSum="10">

        <!-- want height to be constrained by 1:1 to width -->
        <ImageView
            android:id="@+id/croppedFaceImageView"

            android:layout_width="0dp"
            android:layout_weight="4"

            android:layout_height="0dp"
            app:layout_constraintDimensionRatio="1:1"

            android:background="@android:color/darker_gray"

            />




        <TextView
            android:id="@+id/confidenceLabel"

            android:layout_width="0dp"
            android:layout_weight="2"

            android:layout_height="wrap_content"

            android:text="90%"

            android:textAlignment="center"
            android:textColor="@android:color/black"

            android:textSize="8sp"

            android:background="@android:color/holo_green_dark"

            />

        <ImageView
            android:id="@+id/avartarImageView"
            android:layout_width="0dp"
            android:layout_weight="4"


            android:layout_height="0dp"
            app:layout_constraintDimensionRatio="1:1"

            android:background="@android:color/holo_orange_dark"
            />


    </LinearLayout>



</android.support.constraint.ConstraintLayout>

1 个答案:

答案 0 :(得分:0)

您只能在 ConstraintLayout 中使用 app:layout_constraintDimensionRatio。 但是,有一种方法可以实现您的目标。

将 LinearLayout 替换为 ConstraintLayout 并在您的 xml 设计中遵循以下代码模板 注意。请注意,正确排列子视图的技巧是对每个子视图使用约束规则。

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <TextView
                android:id="@+id/sun"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                app:layout_constraintDimensionRatio="1:1"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toStartOf="@id/mon"
                android:text="S"/>

            <TextView
                android:id="@+id/mon"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                app:layout_constraintDimensionRatio="1:1"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintStart_toEndOf="@id/sun"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toStartOf="@id/tue"
                android:text="M"/>
            <TextView
                android:id="@+id/tue"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                app:layout_constraintDimensionRatio="1:1"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintStart_toEndOf="@id/mon"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toStartOf="@id/wed"
                android:text="T"/>
            <TextView
                android:id="@+id/wed"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                app:layout_constraintDimensionRatio="1:1"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintStart_toEndOf="@id/tue"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toStartOf="@id/thur"
                android:text="W"/>
            <TextView
                android:id="@+id/thur"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                app:layout_constraintDimensionRatio="1:1"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintStart_toEndOf="@id/wed"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toStartOf="@id/fri"
                android:text="T"/>
            <TextView
                android:id="@+id/fri"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                app:layout_constraintDimensionRatio="1:1"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintStart_toEndOf="@id/thur"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toStartOf="@id/sat"
                android:text="F"/>
            <TextView
                android:id="@+id/sat"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                app:layout_constraintDimensionRatio="1:1"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintStart_toEndOf="@id/fri"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                android:text="S"/>
        </androidx.constraintlayout.widget.ConstraintLayout>

上面的代码将创建如下内容: enter image description here