如何约束相对布局以在屏幕上采用最大指定宽度

Posted

技术标签:

【中文标题】如何约束相对布局以在屏幕上采用最大指定宽度【英文标题】：How to constraint a relative layout to take maximum of specified width on screen 【发布时间】：2021-11-07 16:15:05 【问题描述】：

在我的布局文件中，我有一个相对布局，在那个布局中，我有一个 textView。 如果文本很大，我希望它只占屏幕的 60%，其余的文本会换行。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_
    android:layout_
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <RelativeLayout
        android:layout_
        android:layout_
        android:layout_alignParentRight="true"
        android:layout_marginTop="5dp"
        android:layout_marginEnd="5dp"
        android:layout_marginRight="5dp"
        android:background="@drawable/rounded_corner"
        android:layout_alignParentEnd="true">

        <TextView
            android:id="@+id/txtSentMsg"
            android:layout_
            android:layout_
            android:padding="10dp"
            android:text="This is sent message"
            android:textColor="@color/white"
            android:textSize="18sp"

            />
    </RelativeLayout>
</RelativeLayout>

这是我的布局文件，所附图片将澄清我的疑问。

如您所见，我发送的消息占据了整个屏幕。我希望布局向右对齐，并且最多占据屏幕的 60%。

更新：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:animateLayoutChanges="true"
    android:layout_marginTop="4dp"
    android:padding="4dp"
    android:layout_>


    <TextView
        android:layout_
        android:layout_
        android:background="@drawable/rounded_corner"
        android:paddingStart="12dp"
        android:paddingEnd="12dp"
        android:paddingTop="8dp"
        android:paddingBottom="8dp"
        app:layout_constraintWidth_max="wrap"
        android:textColor="@color/white"
        android:textSize="16sp"
        app:layout_constraintEnd_toEndOf="parent"
        android:id="@+id/txtSentMsg"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_percent="0.7"
        tools:text="Hello, this is a long message and will use other lines as i grows. The default width is 80% of any screen."
        />


</androidx.constraintlayout.widget.ConstraintLayout>

现在我已经使用了它并且它有效。我给了我最大 60% 的屏幕区域但是现在我有时可以看到，当内容较少时，文本视图占据了整个 60%。

正如你所看到的文本，你好吗占了整个 60%。当我关闭活动并重新启动它并随机出现在任何消息中时，这个空间就会消失。

【问题讨论】：

【参考方案1】：

我建议使用线性布局。它是最快的，在我看来，你可以实现你想要的，简单的方法：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_
    android:layout_
    android:gravity="end"
    android:weightSum="1">

    <LinearLayout
        android:layout_weight="0.6"
        android:layout_
        android:gravity="end"
        android:layout_>

        <TextView
            android:id="@+id/txtSentMsg"
            android:layout_
            android:layout_
            android:padding="10dp"
            android:text="This is a very long message that will go in two lines"
            android:background="@color/colorAccent"
            android:textSize="18sp" />
    </LinearLayout>
</LinearLayout>

【讨论】：

【参考方案2】：

如果您一定要使用相对布局，则将聊天矩形放在相对布局中，如下所示：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_
    android:layout_>

    <RelativeLayout
        android:id="@+id/chats"
        android:layout_
        android:layout_>
        <TextView
            android:id="@+id/textView3"
            android:layout_
            android:layout_
            android:layout_alignParentEnd="true"
            android:text="TextView"
            android:layout_marginLeft="16dp"
            android:background="@android:color/holo_green_dark"
            />
    </RelativeLayout>


    <RelativeLayout
        android:id="@+id/chatInp"
        android:layout_
        android:layout_
        android:layout_alignParentBottom="true">

        <EditText
            android:id="@+id/editTextTextPersonName"
            android:layout_
            android:layout_
            android:ems="10"
            android:inputType="textPersonName"
            android:text="Name" />
    </RelativeLayout>
</RelativeLayout>

但我会推荐你​​使用约束布局，如下所示：

<?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_
    android:layout_>

    <TextView
        android:id="@+id/textView4"
        android:layout_
        android:layout_
        android:layout_marginTop="32dp"
        android:background="@android:color/holo_green_dark"
        android:text="TextView"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="@+id/guideline2"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline2"
        android:layout_
        android:layout_
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.4" />

    <EditText
        android:id="@+id/editTextTextPersonName2"
        android:layout_
        android:layout_
        android:ems="10"
        android:inputType="textPersonName"
        android:text="Name"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />


</androidx.constraintlayout.widget.ConstraintLayout>

【讨论】：

【参考方案3】：

使用constraint layout，您可以在app:layout_constraintWidth_percent 和app:layout_constraintHeight_percent 的帮助下明确告诉任何视图应该覆盖多少百分比宽度或高度。

这里我将使用app:layout_constraintWidth_percent = 0.8，其中 0.8 表示 80%。

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:animateLayoutChanges="true"
    android:layout_marginTop="8dp"
    android:padding="4dp"
    android:layout_>


    <TextView
        android:layout_
        android:layout_
        android:background="@color/design_default_color_primary"
        android:paddingStart="12dp"
        android:paddingEnd="12dp"
        android:paddingTop="8dp"
        android:paddingBottom="8dp"
        app:layout_constraintWidth_max="wrap"
        android:textColor="@color/white"
        android:textSize="16sp"
        app:layout_constraintEnd_toEndOf="parent"
        android:id="@+id/textMessage"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_percent="0.8"
        tools:text="Hello, this is a long message and will use other lines as i grows. The default width is 80% of any screen."
        />


</androidx.constraintlayout.widget.ConstraintLayout>

【讨论】：

我已经使用了你的方法并且它有效，但现在我遇到了一个新问题，请检查我更新的问题。 使用两种不同的布局，一种用于发送消息，另一种用于接收消息。上面的代码现在用于发送消息以接收消息，您必须到 app:layout_constraintStart_toStartOf = "parent" 并删除 app:layout_constraintEnd_toEndOf。之后在适配器中使用这两个视图。【参考方案4】：

您可以使用 ConstraintLayout 代替 RelativeLayout 并将 app:layout_constraintWidth_percent="0.6" 添加到子 TextView 中

<?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_
    android:background="@color/white"
    android:layout_>
    <TextView
        android:layout_
        android:layout_
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_max="wrap"
        app:layout_constraintWidth_percent="0.7"
        android:background="#637796"
        android:padding="10dp"
        android:textSize="25sp"
        tools:text="this is my chat message taking 70% of the screen with"/>

</androidx.constraintlayout.widget.ConstraintLayout>

【讨论】：

【参考方案5】：

没有必要只说LinearLayouts 或RelativeLayouts。您可以将两者结合起来并创建具有特定逻辑的扇区。在我的示例中，您的父级是 LinearLayout 结合 RelativeLayout 和 LinearLayout 作为子视图。如您所见，我模拟了与 2 TextViews 的对话，其中一个是多行的，可以精确地扩展到屏幕的 60%，而下面的一个仅与内容提供的长度一样长。表明两者都有效。我想这正是你想要的。为了更清楚，我将左侧空白设为灰色实心，以便以更好的方式查看百分比 40/60。 TextViews 也没有达到界限，因为我给了 10dp 边距以便更好看。我们使用的技术叫做layout_weight和weightSum，由LinearLayout提供。：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_
    android:layout_
    android:orientation="horizontal"
    android:weightSum="10">

    <LinearLayout
        android:layout_
        android:layout_
        android:background="#647678"
        android:layout_weight="4">
        <!-- 40% White Space of Screen to left of your RelativeLayout -->
    </LinearLayout>

    <RelativeLayout
        android:layout_
        android:layout_
        android:layout_weight="6"
        android:background="@color/white"
        android:orientation="vertical">
        <!-- 60% TextView of Screen to right of your LinearLayout -->

        <TextView
            android:id="@+id/tv1"
            android:layout_
            android:layout_
            android:layout_alignParentEnd="true"
            android:layout_margin="10dp"
            android:background="#304FFE"
            android:padding="5dp"
            android:text="How are you my love? Are you okey, did you have a great day?"
            android:textColor="#ffffff" />

        <TextView
            android:id="@+id/tv2"
            android:layout_
            android:layout_
            android:layout_below="@id/tv1"
            android:layout_alignParentEnd="true"
            android:layout_margin="10dp"
            android:background="#304FFE"
            android:padding="5dp"
            android:text="Why aren't you responding?"
            android:textColor="#ffffff" />

    </RelativeLayout>
</LinearLayout>

结果：

这是我想出的结果：

【讨论】：

【参考方案6】：

您可以只使用带有约束宽度的ConstraintLayout，并将宽度百分比约束为0.6：

app:layout_constrainedWidth="true" app:layout_constraintWidth_percent="0.6" app:layout_constraintWidth_max="wrap" 
<?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"
    android:layout_
    android:layout_>

    <TextView
        android:id="@+id/txtSentMsg"
        android:layout_
        android:layout_
        android:layout_marginTop="5dp"
        android:layout_marginEnd="5dp"
        android:layout_marginRight="5dp"
        android:background="@color/black"
        android:padding="10dp"
        android:text="This is sent message that can go to up to 60% of the screen width and continue to next lines"
        android:textColor="@color/white"
        android:textSize="18sp"
        app:layout_constrainedWidth="true"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_max="wrap"
        app:layout_constraintWidth_percent="0.6" />

</androidx.constraintlayout.widget.ConstraintLayout>

【讨论】：

以上是关于如何约束相对布局以在屏幕上采用最大指定宽度的主要内容，如果未能解决你的问题，请参考以下文章

是否可以定义相对于未知 UIViews 的自动布局约束？

自动布局：显示相对于容器的内容

具有百分比高度和宽度的相对布局

相对布局中的自定义视图问题

将relativelayout的宽度设置为屏幕宽度的1/3？

如何使用自动布局定义最大宽度约束？