android - 指定视图的最大约束百分比

Question

问题

为任何视图指定最大约束百分比。

例如 -

在下面的案例中，我有 2 个左视图和 2 个右视图。

• 我想限制右边最多可以获取整个宽度的 50%。
• 左边的项目拥有优先权，这意味着它们可以获取尽可能多的空间。因此，如果任何左侧项目足够大，它可以移动右侧项目并缩小它们。

我尝试了以下方法，但这似乎不起作用，即当right1或right2文本变得足够长时，它需要偏好并获得超过 50% 的宽度。

目前，约束布局可能不支持这一点，但有没有办法实现这一点？

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:id="@+id/section_item_container"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/left_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constrainedWidth="true"
        app:layout_constraintBottom_toTopOf="@id/left_2"
        app:layout_constraintEnd_toStartOf="@id/l_container"
        app:layout_constraintHorizontal_bias="0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_chainStyle="spread"
        tools:text="Leftsadasdasdadsdasdasdhsjakjdhaskkjdhdjakskjhkjdashkjddasdasdsaadsdasd1" />

    <TextView
        android:id="@+id/left_2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@id/l_container"
        app:layout_constraintHorizontal_bias="0"
        app:layout_constraintStart_toStartOf="@id/left_1"
        app:layout_constraintTop_toBottomOf="@id/left_1"
        tools:text="Left2" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guide"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.5" />

    <androidx.constraintlayout.widget.Barrier
        android:id="@+id/right_barrier"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="start"
        app:constraint_referenced_ids="l_container" />

    <LinearLayout
        android:id="@+id/l_container"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_min="wrap"
        app:layout_constraintWidth_max="wrap"
        app:layout_constraintWidth_percent="0.5">

        <TextView
            android:id="@+id/right_1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:ellipsize="end"
            android:maxLines="1"
            app:layout_constrainedWidth="true"
            app:layout_constraintBottom_toTopOf="@+id/right_2"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="1"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_chainStyle="packed"
            tools:text="Right1"
            tools:visibility="visible" />

        <TextView
            android:id="@+id/right_2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="end"
            app:layout_constrainedWidth="true"
            app:layout_constraintBottom_toBottomOf="@id/left_2"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="1"
            app:layout_constraintTop_toBottomOf="@+id/right_1"
            tools:text="Right2"
            tools:visibility="visible" />

    </LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

标签： androidandroid-constraintlayout

Answer 1

我冒昧地简化了此插图的布局，但您应该能够从以下内容重构您的布局。

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

    <TextView
        android:id="@+id/left_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constrainedWidth="false"
        app:layout_constraintEnd_toStartOf="@id/right_barrier"
        app:layout_constraintHorizontal_bias="0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="Not so long" />

    <androidx.constraintlayout.widget.Barrier
        android:id="@+id/right_barrier"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="start"
        app:constraint_referenced_ids="right_1" />

    <TextView
        android:id="@+id/right_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constrainedWidth="true"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="1"
        app:layout_constraintStart_toEndOf="@id/right_barrier"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_max="wrap"
        app:layout_constraintWidth_percent="0.5"
        android:text="very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very " />

</androidx.constraintlayout.widget.ConstraintLayout>

产生这个：

增加文本长度left_1会导致左视图侵占屏幕的右半部分。

layout_constrainedWidth并且layout_constraintWidth_max是布局中感兴趣的内容。