如何根据宽度放置两个视图？

Question

在我们的项目中有这样一个案例：我们有两个文本视图（比方说，@id/text_view_1 和 @id/text_view_2）。我们应该水平放置它们（@id/text_view_1 然后 @id/text_view_2）如果它们的总宽度小于它们父元素的宽度或垂直放置（text_view_2 高于 text_view_1）如果它们太小宽的。现在我想到的最好的解决方案是这样的：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/parent"
    android:layout_width="match_parent" 
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/text_view_above_2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true" />

    <TextView
        android:id="@+id/text_view_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/text_view_2_right"
        android:layout_alignBottom="@+id/text_view_2_right"
        android:layout_alignParentStart="true" />

    <TextView
        android:id="@+id/text_view_right_2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/text_view_2_above"
        android:layout_toEndOf="@+id/text_view_1" />

</RelativeLayout>

这里是切换 text_views

可见性的逻辑

private void toggleVisibility() {
    TextView textView1 = (TextView) findViewById(R.id.text_view_1);
    TextView textViewAbove2 = (TextView) findViewById(R.id.text_view_above_2);
    TextView textViewRight2 = (TextView) findViewById(R.id.text_view_right_2);

    textView1.measure(0, 0);
    textViewAbove2.measure(0, 0);
    textViewRight2.measure(0, 0);

    View parent = findViewById(R.id.parent);
    parent.measure(0, 0);

    if (textView1.getMeasuredWidth() + textViewRight2.getMeasuredWidth() < parent.getMeasuredWidth()) {
        textViewAbove2.setVisibility(View.GONE);
        textViewRight2.setVisibility(View.VISIBLE);
    } else {
        textViewRight2.setVisibility(View.GONE);
        textViewAbove2.setVisibility(View.VISIBLE);
    }
}

是否有比我描述的更 "beautiful" 和更短的解决方案？我想有一种方法可以用 ConstraintLayout 而不是 RelativeLayout 但我不确定。

编辑 1: 可能我必须提供我想看到的结果。如果 both views are short:

，那么 activity 应该是这样的

如果 views are too long:

它应该是这样的

Answer 1

解决方案：如果你想根据他们的宽度要求设置 TextView 那么你只需使用 LinearLayout 作为宽度为 wrap_content 的父级，并且对于两个子 TextViews 也给宽度 'wrap_content'

Answer 2

尝试使用百分比布局。这可能会有所帮助。有关详细信息，请提供所需的输出。

Answer 3

尝试使用 wrap_content 并将这些子文本视图放在父 LinearLayout 中，将 wrap_content 作为两个子文本视图的宽度。它将根据那些文本视图中的内容放置。

如果您想水平放置视图 --

 <LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/parent"
    android:layout_width="wrap_content" 
    android:layout_height="match_parent"
    android:orientation="horizontal">

    <TextView
        android:id="@+id/text_view1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        />

     <TextView
        android:id="@+id/text_view2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        />

</LinearLayout>

如果您想垂直放置视图 --

<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/parent"
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <TextView
        android:id="@+id/text_view1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        />

     <TextView
        android:id="@+id/text_view2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        />

</LinearLayout>

Answer 4

看看FlexboxLayout。

这是一个使用 FlexboxLayout 的解决方案：

<com.google.android.flexbox.FlexboxLayout
    android:id="@+id/parent"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:flexWrap="wrap">

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:text="This is a short string." />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:text="This is another short string." />

</com.google.android.flexbox.FlexboxLayout>

对第一个文本视图使用相同的 XML 和更长的字符串会产生以下结果：

如何根据宽度放置两个视图？

How can I place two views depending on their width?

android

android-layout

android-view

android-constraintlayout