两个 TextView 始终在屏幕上答案

【问题标题】：Two TextViews always on Screen两个 TextView 始终在屏幕上
【发布时间】：2017-02-20 19:25:44
【问题描述】：

我正在尝试将两个 TextView 并排放置，以便它们始终在屏幕上。

它们应该始终彼此相邻，接触边界。但是文字是动态变化的，所以即使第一台电视里的文字变得太长，也不应该把第二台电视推离屏幕。

这是基本布局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="10dp"
    android:orientation="horizontal">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:background="@color/colorAccent"
        android:padding="10dp"
        android:text="Aa" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:background="@color/colorPrimary"
        android:padding="10dp"
        android:text="Bb" />

</LinearLayout>

这就是它的样子：

但是，如果文本变长，第二个 TextView 会被推离屏幕。

我什至使用 RelativeLayout 尝试过同样的事情。

<?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"
    android:layout_margin="10dp">

    <TextView
        android:id="@+id/a"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/colorAccent"
        android:padding="10dp"
        android:text="Aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/a"
        android:background="@color/colorPrimary"
        android:padding="10dp"
        android:text="Bb" />

</RelativeLayout>

还是同样的问题，第二个 TextView 只是不会停留在屏幕上。我希望第一个 textView 变成椭圆形，或者转换成两行而不将第二个 TextView 推离屏幕。但我也不希望第二个 TextView 卡在屏幕右侧（这可以通过给第一个 TextView 赋予 1 的权重来实现）

PS：对我来说，视图的背景并不重要，所以即使我可以通过将视图锁定在屏幕右侧来解决这个问题，也完全没问题。为此，我尝试在 LinearLayout 中的两个视图和 RelativeLayout 中的 layout_alignParentRight 上使用 weights - 但没有任何成功。

编辑：

如果我在两种布局上都使用权重 - 这就是它的样子：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="10dp"
    android:orientation="horizontal">

    <TextView
        android:id="@+id/a"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="@color/colorAccent"
        android:padding="10dp"
        android:layout_weight="1"
        android:text="Aaa" />

    <TextView
        android:id="@+id/b"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="@color/colorPrimary"
        android:padding="10dp"
        android:text="Bbfbd" />

</LinearLayout>

如果文本很长，这很好，但是对于短文本，它就达不到目的了。

对于长文本，它可以完美运行。

解决方案：

我能想到的唯一解决方案是为第一个 TextView 定义 maxWidth 属性。该属性在dimens.xml中定义，不同的屏幕尺寸有不同的值。

main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:padding="10dp">

    <TextView
        android:id="@+id/a"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/colorAccent"
        android:ellipsize="end"
        android:maxLines="1"
        android:maxWidth="@dimen/max_text_view_width"
        android:padding="10dp"
        android:text="Aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa" />

    <TextView
        android:id="@+id/b"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary"
        android:padding="10dp"
        android:maxLines="1"
        android:text="Bbbbbbb" />

</LinearLayout>

dimens.xml

<resources>
    <dimen name="max_text_view_width">300dp</dimen>
</resources>

这个的输出看起来像这样：

【问题讨论】：

您在使用权重时遇到了什么问题？
如果您的长文本包含空格怎么办？例如：aaaa aaaa aaaa aaaa
@JagjitSingh 如果我在第一个 TextView 上使用权重，第二个 TextView 会卡在屏幕的右边缘。我希望第一个 TextView 只占用文本所需的空间。但是，如果我对第二个 TextView 应用权重，如果第一个 TextView 中的文本太长，它仍然会被推离屏幕。
@Rachit 然后请尝试使用 maxWidth 和 toRightOf 属性。希望它会有所帮助
嘿 @Rachit 尝试使用 Google developer.android.com/reference/android/support/percent/… 的 PercentRelative 布局

标签： android android-layout

【解决方案1】：

TextView 的属性为 maxWidth 。你可以设置以编程方式

Display display = getWindowManager().getDefaultDisplay();
        Point size = new Point();
        display.getSize(size);
        int width = size.x;  //width of the screen
        int height = size.y; // height of the screen
        textView1.setMaxWidth(width/2);
        textView2.setMaxWidth(width/2); //disable this if you want to have the rest of the screen by second textView

现在，textView 最初将具有最小尺寸，并将增长到屏幕一半大小的最大值。你可以自定义这个有条件满足您的需求。

【讨论】：

我想这是这里唯一的解决方案。不过，我将使用 xml 来执行此操作。我将使用 dimens 资源为视图设置 maxWidth 属性，并为不同的设备尺寸指定不同的宽度。
是的，您可以通过 xml 执行此操作，但这可能会在较低分辨率或较高分辨率下引入问题，因为您永远不知道用户屏幕的大小。最好使用动态设置。

【解决方案2】：

如果文本视图可以是静态的，您可以将它们保留在 LinearLayout 中，并为每个视图分配 weight=1。这样，它们将始终保持不变。

要获得更好、更灵活的解决方案，请使用 Google 的flexbox layout。这是一个很棒的库，您可以在其中做各种事情。

【讨论】：

【解决方案3】：

输入以下代码即可解决问题：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:weightSum="2"
    android:orientation="horizontal"
    android:layout_margin="10dp">

    <TextView
        android:id="@+id/a"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="wrap_content"
        android:background="@color/colorAccent"
        android:padding="10dp"
        android:scrollbars="vertical"
        android:maxLines="2000"
        android:text="Aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa" />

    <TextView
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/a"
        android:background="@color/colorPrimary"
        android:padding="10dp"
        android:scrollbars="vertical"
        android:layout_alignParentRight="true"
        android:text="Aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa" />

</LinearLayout>

【讨论】：

请看我上面的编辑。这仅适用于长文本，如果我将文本变小则不起作用。

【解决方案4】：

这肯定有效：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="10dp"
    android:orientation="horizontal">

    <TextView
        android:layout_weight="1"
        android:id="@+id/a"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/colorAccent"
        android:padding="10dp"
        android:text="Asssda" />

    <TextView
        android:layout_weight="1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/a"
        android:background="@color/colorPrimary"
        android:padding="10dp"
        android:text="Bxdadsdc" />

</LinearLayout>

【讨论】：

这样，如果两个视图上的文本都很小，它们在屏幕上被平均分割。我不希望这样。我希望视图看起来像问题中的第一张图片。
你到底想要什么？可以分享一下输出设计吗？
使用 LinearLayout 而不是 RelativeLayout，就像我在上面的答案中所做的那样。
@ZaptechDevKumar 我不想要两个 TextView 之间的空间。第一个 TextView 应该只占用它需要的空间。

【解决方案5】：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:layout_margin="10dp">

    <TextView
        android:id="@+id/a"
        android:layout_width="0dp"
        android:layout_weight=".5"
        android:layout_height="wrap_content"
        android:background="@color/colorAccent"
        android:padding="10dp"
        android:text="wqkdnoqwndowqndowqowndowqndodnwqodnqow" />

    <TextView
        android:layout_width="0dp"
        android:layout_weight=".5"
        android:layout_height="match_parent"
        android:background="@color/colorPrimary"
        android:padding="10dp"
        android:text="Aaaaaaaaainqwdiwdiwdniwqndiwqiwndiwqndiwqdniqwnnwiqdwoqndqowqndolnqwdlnaa\nkpaaaa" />

</LinearLayout>

这不是解决方案，但您应该使用这种在线性布局中使用权重的方法。

【讨论】：

请看我上面的编辑。这不适用于小文本。仅当文本较长时。

【解决方案6】：

可行的是为第一个视图设置 maxWidth。您可以使用 xml 资源为多种屏幕尺寸设置 maxWidth。

android:maxWidth="@dimen/max_width"

然后你可以在dimens.xml中设置max_width

【讨论】：

【解决方案7】：

赋予每个视图相同的权重会使它们占据屏幕的一半。我猜这不是你要找的东西。

我认为这里最好的选择是以编程方式计算设备的屏幕宽度，并将第一个 textView 的最大宽度设置为屏幕宽度的百分比。

【讨论】：

【解决方案8】：

最后对我有用的是为第一个视图设置 maxWidth。

我在尺寸 xml 中设置了 maxWidth 并覆盖了多个屏幕尺寸的值。在多个屏幕上测试它很困难，但这最终对我有用。

android:maxWidth="@dimen/max_width"

【讨论】：