Установить максимальную ширину для макета ограничения корневого представления

Question

Я пытаюсь использовать макет Constraint Layout в приложении, и я просто застрял в одной точке при создании макета с использованием макета ограничений.

Я хочу установить max-width 70% вRoot ViewGroup Ограничение макета.

Пожалуйста, проверьте Суть моего интерфейса размещения ограничения

Answer 1

Вы можете использовать вертикальную направляющую в основном макете с процентом 0,7, как это

<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="wrap_content"
    android:background="#43B2FD"
    android:padding="6dp"
    app:layout_constraintWidth_max="wrap"
    app:layout_constraintWidth_percent=".7">


    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.7" />
                       .
                       .
                       .

, а затем ограничить конец ваших внутренних макетов этим ориентиром, как это

<androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/csReply"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="#20606060"
        app:layout_constraintBottom_toTopOf="@+id/tvMsg"
        app:layout_constraintEnd_toStartOf="@+id/guideline"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

Answer 2

Вы должны поместить весь макет в другой макет и использовать направляющую с процентом 0,7 и ограничить внутреннюю компоновку (то есть синюю компоновку) этой директивой, как это

<?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">

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.7"/>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintHorizontal_weight="1.0"
        android:background="#43B2FD"
        android:padding="6dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="@+id/guideline"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintWidth_max="wrap">


        <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/csReply"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:background="#20606060"
            app:layout_constraintBottom_toTopOf="@+id/tvMsg"
            app:layout_constraintEnd_toStartOf="@+id/barrier"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintWidth_percent="0.7">

            <TextView

                android:id="@+id/tvVerticalLine"
                android:layout_width="5dp"
                android:layout_height="0dp"
                android:background="#4476FC"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

            <TextView
                android:id="@+id/tvText"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginStart="4dp"
                android:paddingStart="2dp"
                android:paddingEnd="2dp"
                android:text="sssssssssssss\nsssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss"
                app:layout_constrainedWidth="false"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toStartOf="@+id/ivReplyThumbnail"
                app:layout_constraintStart_toEndOf="@+id/tvVerticalLine"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintVertical_bias="0.5" />

            <ImageView
                android:id="@+id/ivReplyThumbnail"
                android:layout_width="36dp"
                android:layout_height="36dp"
                android:adjustViewBounds="true"
                android:background="#F44336"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

        </androidx.constraintlayout.widget.ConstraintLayout>

        <TextView
            android:id="@+id/tvMsg"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="Heressssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss "
            android:textColor="#fff"
            app:layout_constrainedWidth="false"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/csReply"
            app:layout_constraintWidth_percent="0.7"
            tools:layout_editor_absoluteX="5dp"
            tools:layout_editor_absoluteY="75dp" />

        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="07:43 PM"
            android:textColor="#fff"
            app:layout_constraintEnd_toStartOf="@id/barrier"
            app:layout_constraintTop_toBottomOf="@+id/tvMsg"
            tools:layout_editor_absoluteX="133dp"
            tools:layout_editor_absoluteY="161dp" />

        <androidx.constraintlayout.widget.Barrier
            android:id="@+id/barrier"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:barrierDirection="end"
            app:constraint_referenced_ids="tvMsg,csReply,textView" />


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

обратите внимание, что я простодобавили первый макет ограничения и указатель к вашему коду, а также я изменил ширину вашего макета ограничения с синим фоном

Answer 3

вот мой рабочий xml для чата, который отображает полученные сообщения. Я пытался использовать то же самое, что и ваш gist, но это не сработало. Итак, я создал это

    <RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:minWidth="200dp"
    android:paddingTop="5dp"
    android:paddingBottom="5dp">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/cl_received"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="@dimen/height_100dp"
        android:background="@drawable/bg_chat_item_received"
        android:padding="5dp"
        android:visibility="visible"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <!-- your ui goes here -->
    </androidx.constraintlayout.widget.ConstraintLayout>
</RelativeLayout>