TextView 宽度超过 LinearLayout 宽度

Question

我的布局有一个奇怪的问题：

<?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:layout_marginTop="15dp">
    <View
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:background="#ff3333"
        android:layout_weight="0.2"
        />
    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_weight="0.8">
        <View
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:background="#ff134415"
            android:layout_weight="1"
            />
        <View
            android:layout_width="2dp"
            android:layout_height="match_parent"
            android:background="#ff8833"
            android:layout_marginRight="2dp"
            />
        <View
            android:layout_width="3dp"
            android:layout_height="match_parent"
            android:background="#ff8833"
            android:layout_marginRight="2dp"
            />
        <View
            android:layout_width="5dp"
            android:layout_height="match_parent"
            android:background="#ff8833"
            android:layout_marginRight="2dp"
            />
        <View
            android:layout_width="10dp"
            android:layout_height="match_parent"
            android:background="#ff8833"
            android:layout_marginRight="2dp"
            />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#ff8833"
            android:paddingRight="10dp"
            android:paddingLeft="15dp"
            android:paddingTop="5dp"
            android:paddingBottom="5dp"
            android:text="this is a longgggggggggggggggggggggggg text"
            />
    </LinearLayout>
</LinearLayout>

当textview的文本很长时，其中一部分超过了linearlayout的宽度。我哪里做错了？

Answer 1

为文本视图赋予权重，使文本视图的宽度相同。

同时给出以下两个属性：

    android:singleLine="true"
    android:ellipsize="end"


   <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="#ff8833"
        android:layout_weight="1"
        android:paddingRight="10dp"
        android:paddingLeft="15dp"
        android:singleLine="true"
        android:ellipsize="end"
        android:paddingTop="5dp"
        android:paddingBottom="5dp"
        android:text="this is a longgggggggggggggggggggggggg text"
        />

Answer 2

您必须从线性布局和视图中删除宽度 0dp。使用权重参数，像这样：

    <?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:layout_marginTop="15dp">
    <View
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#ff3333"
        android:layout_weight="1"
        />
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_weight="1">
        <View
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:background="#ff134415"
            android:layout_weight="1"
            />
        <View
            android:layout_width="2dp"
            android:layout_height="match_parent"
            android:background="#ff8833"
            android:layout_marginRight="2dp"
            />
        <View
            android:layout_width="3dp"
            android:layout_height="match_parent"
            android:background="#ff8833"
            android:layout_marginRight="2dp"
            />
        <View
            android:layout_width="5dp"
            android:layout_height="match_parent"
            android:background="#ff8833"
            android:layout_marginRight="2dp"
            />
        <View
            android:layout_width="10dp"
            android:layout_height="match_parent"
            android:background="#ff8833"
            android:layout_marginRight="2dp"
            />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#ff8833"
            android:paddingRight="40dp"
            android:paddingLeft="15dp"
            android:paddingTop="5dp"
            android:paddingBottom="5dp"
            android:text="this is a longgggggggggggggggggggggggg text"
            />
    </LinearLayout>
</LinearLayout>

您可以在 textview 广告示例 (30-40dp) 中添加更多的内边距，以免漏出文字。

Answer 3

问题是由于在您的 80% 布局中并非所有 children 都指定了权重 AND 一些不这样做的- 他们有一个首选尺寸，使所有 children 的总和大于 parent 所能提供的尺寸。

layout_weight在这种情况下的运作方式是：让每个人拿走他们需要的space，剩下的我来拿，直到我parent允许的最大值。问题是在这种情况下没有休息（或者如果我可以这样说的话是消极的:-)）。我不了解布局算法的详细信息，但我认为权重为 != 0 的布局会将所有布局都推到它之后 - 因此样本中较大的 TextView 将离开屏幕。

为了验证我的假设，我构建了一个更简单的布局，只有 2 个 TextView：第一个 width=0 weight=1 和短文本；第二个 width=wrap 和更长的文本 - 基本上是样本 80% 布局中的第一个和最后一个视图。看看是否发生了同样的事情。一旦你在第二个上放置权重它就会停止，因为现在布局算法基于所有 children:

的权重运行

<?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:layout_marginTop="15dp">
    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="#008833"
        android:paddingRight="10dp"
        android:paddingLeft="15dp"
        android:paddingTop="5dp"
        android:paddingBottom="5dp"
        android:text="short text"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#ff8833"
        android:paddingRight="10dp"
        android:paddingLeft="15dp"
        android:paddingTop="5dp"
        android:paddingBottom="5dp"
        android:text="this is an even longgggggggggggggggggggggggggggggeeerrrr text" />
</LinearLayout>

我想在这种情况下吸取的教训是：不要只在某些 child 视图上使用权重，除非绝对保证布局它们所需的 space 更小parent.

的大小

一开始这似乎是一个简单的布局问题，但是男孩，我从中学到了什么......我只能希望我做对了:-)

Answer 4

添加另一个 LinearLayout 负责文本视图的剩余填充，然后原来的 LinearLayout 负责绿色视图的剩余填充。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:layout_marginTop="15dp">
    <View
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:background="#ff3333"
        android:layout_weight="0.2"
        />
    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_weight="0.8">
        <View
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:background="#ff134415"
            android:layout_weight="1"
            />
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal">
            <View
                android:layout_width="2dp"
                android:layout_height="match_parent"
                android:background="#ff8833"
                android:layout_marginRight="2dp"
                />
            <View
                android:layout_width="3dp"
                android:layout_height="match_parent"
                android:background="#ff8833"
                android:layout_marginRight="2dp"
                />
            <View
                android:layout_width="5dp"
                android:layout_height="match_parent"
                android:background="#ff8833"
                android:layout_marginRight="2dp"
                />
            <View
                android:layout_width="10dp"
                android:layout_height="match_parent"
                android:background="#ff8833"
                android:layout_marginRight="2dp"
                />
            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="#ff8833"
                android:paddingRight="10dp"
                android:paddingLeft="15dp"
                android:paddingTop="5dp"
                android:paddingBottom="5dp"
                android:text="this is a longgggggggggggggggggggggggg text"
                />
        </LinearLayout>
    </LinearLayout>
</LinearLayout>

TextView 宽度超过 LinearLayout 宽度

TextView Width Exceeds LinearLayout Width

android

android-layout

android-linearlayout