如何水平排列三个视图？答案

【问题标题】：How to arrange three views horizontally?如何水平排列三个视图？
【发布时间】：2020-05-09 19:17:42
【问题描述】：

我有三个水平的 3 textview。第一个和第三个textview 是静态的，表示其特定的width，但第二个是动态的。当第二个textview 获得更多数据然后隐藏其他views。为了解决这个问题，我使用了LinearLayout。首先赋予所有视图权重，但这会在view 之间产生间距问题。然后我尝试将weight 添加到单个视图然后最后一个视图没有显示。 LinearLayout 不是强制性的。我希望views 之间的间距相等，并且每个视图都应该像这样可见。

这是我的代码

          <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:weightSum="10"
            >
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="right"

                android:text="1"
                android:textColor="#9A9A9A"
                android:textSize="@dimen/text14sp"
                android:fontFamily="@font/montserrat"
                android:maxLines="1"
                android:layout_marginLeft="@dimen/_5sdp"
                />
            <TextView
                android:layout_width="wrap_content"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:text="Ronald Flores long text xxxxxxxxxxxxxxx"
                android:textColor="#9A9A9A"
                android:textSize="@dimen/text14sp"
                android:fontFamily="@font/montserrat"
                android:maxLines="1"
                android:maxLength="120"
                android:ellipsize="end"
                />
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="right"
                android:text="4"
                android:textColor="#9A9A9A"
                android:textSize="@dimen/text14sp"
                android:fontFamily="@font/montserrat"
                android:maxLines="1"
                android:layout_marginLeft="@dimen/_5sdp"
                />

        </LinearLayout>

输出：

提前致谢。我会感谢你的答案。

【问题讨论】：

你想要等间距的文本视图，对吧？
是的，等间距意味着距左侧 5dp 边距。
不使用权重时到底出了什么问题？
@IvoBeckers 当第二个textview 获得大数据时，它会隐藏第三个textview。

标签： android android-layout android-linearlayout android-constraintlayout android-relativelayout

【解决方案1】：

您必须使用 LinearLayout 吗？如果没有，您可以尝试使用 TableLayout 和权重系统，结果对我来说看起来相当不错。

这是使用 TableLayout 的 XML 代码：

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:gravity="center">

<TableRow
    android:id="@+id/table_row"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center">

    <TextView
        android:id="@+id/tv1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="5dp"
        android:background="@android:color/black"
        android:text="tv1"
        android:layout_weight="2"
        android:textAlignment="center"
        android:textColor="@android:color/white"
        android:textSize="20sp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/tv2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="2"
        android:background="@android:color/holo_green_dark"
        android:text="tv2"
        android:textAlignment="center"
        android:textColor="@android:color/holo_red_light"
        android:textSize="20sp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/tv3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="5dp"
        android:background="@android:color/black"
        android:layout_weight="2"
        android:text="tv3"
        android:textAlignment="center"
        android:textColor="@android:color/white"
        android:textSize="20sp"
        android:textStyle="bold" />
</TableRow>

然后，当您操作数据并需要拉伸第二个 textview 时，您可以通过编程方式进行，例如：

TableRow.LayoutParams layoutParams;
layoutParams = (TableRow.LayoutParams)tv2.getLayoutParams();
layoutParams.weight = 4;
tv2.setLayoutParams(layoutParams);

下面是第二个 textview 的 weight 为 2 before 和 4 after 时的区别：

如果你不希望第一个和第三个文本视图在第二个拉伸时收缩，你可以尝试使用每个视图的 layout_span 属性

我希望这会有所帮助，让我们知道它是否有效。

---- 更新 1 ----

显然，在第二个 textview 上使用与 maxLength 限制相结合的 RelativeLayout 可以实现这一点，你可以试试这个：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="5dp">

<TextView
    android:id="@+id/tv1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="5dp"
    android:background="@android:color/black"
    android:maxLines="1"
    android:text="tv1"
    android:textColor="@android:color/white"
    android:textSize="14sp"
    android:textStyle="bold" />

<TextView
    android:id="@+id/tv2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="5dp"
    android:layout_marginEnd="5dp"
    android:layout_toEndOf="@id/tv1"
    android:background="@android:color/holo_green_dark"
    android:ellipsize="end"
    android:maxLength="@dimen/max_char_40"
    android:maxLines="1"
    android:text="Ronald Flores dfdfdfdfdbnbnbnnbnbnbffdddfdfddffdf"
    android:textAlignment="center"
    android:textColor="@android:color/holo_red_light"
    android:textSize="14sp"
    android:textStyle="bold" />

<TextView
    android:id="@+id/tv3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginEnd="5dp"
    android:layout_toEndOf="@id/tv2"
    android:background="@android:color/black"
    android:maxLines="1"
    android:text="tv3"
    android:textColor="@android:color/white"
    android:textSize="14sp"
    android:textStyle="bold" />
    </RelativeLayout>

这是我们在 tv2 上用短文本和长文本获得的：

【讨论】：

抱歉回复晚了。我试过这个它不起作用。检查我添加了输出的问题。 Programmatically改变体重不是好办法。
好的，你说你的 tv1 和 tv3 是静态尺寸的。因此，解决方案可能是为您支持的每种分辨率的 tv2 中的最大字符数添加一个新条目到您的 dimen.xml 文件。然后在你的第二个 Textview 中，添加这一行：android:maxLength="@dimen/maxChar20"。您首先必须找到每个分辨率的最佳限制，但是您的 tv2 将永远不会隐藏其他视图！试试看，让我们知道。
是的。目前我只是使用这种技术来解决问题，但这不是正确的解决方案。

【解决方案2】：

试试这个：

<LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            >
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="right"
                android:layout_weight="1"
                android:text="1"
                android:textColor="#9A9A9A"
                android:textSize="@dimen/text14sp"
                android:fontFamily="@font/montserrat"
                android:maxLines="1"
                android:layout_marginLeft="@dimen/_5sdp"
                />
        <TextView
            android:layout_width="wrap_content"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:text="Ronald Flores"
            android:textColor="#9A9A9A"
            android:textSize="@dimen/text14sp"
            android:fontFamily="@font/montserrat"
            android:maxLines="1"
            />
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="right"
                android:text="4"
                android:textColor="#9A9A9A"
                android:textSize="@dimen/text14sp"
                android:fontFamily="@font/montserrat"
                android:maxLines="1"
                android:layout_marginLeft="@dimen/_5sdp"
                />

        </LinearLayout>

【讨论】：

这种技术有效，然后有more data ，但是当数据较少时，它会增加第二和第三之间的间距textview
它适用于任何数据，我亲自尝试过，然后发送给您
您也可以将 weightsum 赋予线性布局
我也在尝试。当我给weightsum 然后它工作一定的限制然后它隐藏最后一个视图。
是的，请先格式化您的代码，按 ctrl+alt+l

【解决方案3】：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:weightSum="3"
    android:gravity="center" android:layout_width="match_parent"
    android:layout_height="match_parent">
<TextView
    android:gravity="center"
    android:id="@+id/textView2"
    android:layout_width="0dp"
    android:layout_weight="1"
    android:layout_height="wrap_content"
    android:text="TextView" />

<TextView
    android:gravity="center"
    android:id="@+id/textView"
    android:layout_width="0dp"
    android:layout_weight="1"
    android:layout_height="wrap_content"
    android:text="TextView  " />

<TextView
    android:gravity="center"
    android:id="@+id/textView3"
    android:layout_width="0dp"
    android:layout_weight="1"
    android:layout_height="wrap_content"
    android:text="TextView" />
</LinearLayout>

【讨论】：

这在view 之间平均分配空间，这不是我想要的。