如何限制相对布局以在屏幕上最大指定宽度
How to constraint a relative layout to take maximum of specified width on screen
在我的布局文件中，我有一个相对布局，在那个布局中，我有一个 textView。
如果文本非常大，我希望它只占据屏幕的 60%，其余文本将换行。
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
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_width="wrap_content"
android:layout_height="wrap_content"
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_width="match_parent"
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_height="wrap_content">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
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%。当我关闭 activity 并再次启动它时，这个 space 熄灭并随机出现在任何消息中。
如果您一定要使用相对布局，请将聊天框放在相对布局中，如下所示：
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:id="@+id/chats"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="@+id/textView3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
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_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true">
<EditText
android:id="@+id/editTextTextPersonName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
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_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/textView4"
android:layout_width="0dp"
android:layout_height="wrap_content"
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_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.4" />
<EditText
android:id="@+id/editTextTextPersonName2"
android:layout_width="0dp"
android:layout_height="wrap_content"
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>
我建议使用线性布局。这是最快的，在我看来，您可以通过简单的方法实现您想要的：
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="end"
android:weightSum="1">
<LinearLayout
android:layout_weight="0.6"
android:layout_width="0dp"
android:gravity="end"
android:layout_height="wrap_content">
<TextView
android:id="@+id/txtSentMsg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
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>
使用 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_width="match_parent"
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_height="wrap_content">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
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>
您可以使用 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_width="match_parent"
android:background="@color/white"
android:layout_height="match_parent">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
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>
您可以只使用带有约束宽度的 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_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="@+id/txtSentMsg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
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>
没有必要只说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_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="10">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:background="#647678"
android:layout_weight="4">
<!-- 40% White Space of Screen to left of your RelativeLayout -->
</LinearLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
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_width="wrap_content"
android:layout_height="wrap_content"
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_width="wrap_content"
android:layout_height="wrap_content"
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>
结果：
这是我得出的结果：
在我的布局文件中，我有一个相对布局，在那个布局中，我有一个 textView。 如果文本非常大，我希望它只占据屏幕的 60%，其余文本将换行。
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
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_width="wrap_content"
android:layout_height="wrap_content"
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_width="match_parent"
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_height="wrap_content">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
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%。当我关闭 activity 并再次启动它时，这个 space 熄灭并随机出现在任何消息中。
如果您一定要使用相对布局，请将聊天框放在相对布局中，如下所示：
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:id="@+id/chats"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="@+id/textView3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
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_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true">
<EditText
android:id="@+id/editTextTextPersonName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
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_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/textView4"
android:layout_width="0dp"
android:layout_height="wrap_content"
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_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.4" />
<EditText
android:id="@+id/editTextTextPersonName2"
android:layout_width="0dp"
android:layout_height="wrap_content"
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>
我建议使用线性布局。这是最快的，在我看来，您可以通过简单的方法实现您想要的：
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="end"
android:weightSum="1">
<LinearLayout
android:layout_weight="0.6"
android:layout_width="0dp"
android:gravity="end"
android:layout_height="wrap_content">
<TextView
android:id="@+id/txtSentMsg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
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>
使用 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_width="match_parent"
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_height="wrap_content">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
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>
您可以使用 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_width="match_parent"
android:background="@color/white"
android:layout_height="match_parent">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
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>
您可以只使用带有约束宽度的 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_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="@+id/txtSentMsg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
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>
没有必要只说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_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="10">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:background="#647678"
android:layout_weight="4">
<!-- 40% White Space of Screen to left of your RelativeLayout -->
</LinearLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
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_width="wrap_content"
android:layout_height="wrap_content"
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_width="wrap_content"
android:layout_height="wrap_content"
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>
结果：
这是我得出的结果：