避免 2 textview 重叠

Question

我在一个卡片中有两个 Textview，用于设置标题和时间。到目前为止，一切都很完美，因为标题太短了，但现在，我的标题很长。

为了避免卡片随标题展开，我设置了 ellipse 属性。

但是问题是两个textview重叠了，不知道怎么解决

代码：

        <com.gc.materialdesign.views.Card
            android:id="@+id/jir_card_headerissue"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <TextView
                android:id="@+id/jir_issue_name_tv"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_marginLeft="@dimen/inner_components_spacing"
                android:layout_marginTop="@dimen/activity_vertical_margin"
                android:ellipsize="end"
                android:singleLine="true"
                android:text="Crear nueva vista"
                android:textAppearance="?android:attr/textAppearanceLarge"/>

            <TextView
                android:id="@+id/jir_acc_time"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentEnd="true"
                android:layout_alignParentRight="true"
                android:layout_centerVertical="true"
                android:layout_marginRight="@dimen/inner_components_spacing"
                android:layout_marginTop="@dimen/activity_vertical_margin"
                android:text="20h"
                android:textAppearance="?android:attr/textAppearanceSmall"/>

        </com.gc.materialdesign.views.Card>

用于 Card 的库：https://github.com/navasmdc/MaterialDesignLibrary

Answer 1

您可以将 2 TextView 放在一个 GroupLayout 中以组织布局（例如水平 LinearLayout）

<com.gc.materialdesign.views.Card 
...>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">

<TextView
    android:id="@+id/jir_issue_name_tv"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerVertical="true"
    android:layout_marginLeft="@dimen/inner_components_spacing"
    android:layout_marginTop="@dimen/activity_vertical_margin"
    android:ellipsize="end"
    android:singleLine="true"
    android:text="Crear nueva vista"
    android:textAppearance="?android:attr/textAppearanceLarge" />

<TextView
    android:id="@+id/jir_acc_time"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentEnd="true"
    android:layout_alignParentRight="true"
    android:layout_centerVertical="true"
    android:layout_marginRight="@dimen/inner_components_spacing"
    android:layout_marginTop="@dimen/activity_vertical_margin"
    android:text="20h"
    android:textAppearance="?android:attr/textAppearanceSmall" />

</LinearLayout>
</com.gc.materialdesign.views.Card>

Answer 2

如果您使用的是 LinearLayout，则使用方向 Horizontal 否则可能您使用的是 Relative Layout，然后将 alignLeft 设置为其他文本视图

Answer 3

使用这些属性将 TextViews 包装在 LinearLayout 中：

<com.gc.materialdesign.views.Card>
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

        <TextView
            android:id="@+id/jir_issue_name_tv"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:layout_marginLeft="@dimen/inner_components_spacing"
            android:layout_marginTop="@dimen/activity_vertical_margin"
            android:ellipsize="end"
            android:singleLine="true"
            android:text="Crear nueva vista"
            android:textAppearance="?android:attr/textAppearanceLarge"/>

        <TextView
            android:id="@+id/jir_acc_time"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="0"
            android:layout_marginRight="@dimen/inner_components_spacing"
            android:layout_marginTop="@dimen/activity_vertical_margin"
            android:text="20h"
            android:textAppearance="?android:attr/textAppearanceSmall"/>

</LinearLayout>
</com.gc.materialdesign.views.Card>

第二个文本视图将需要 space 来显示其文本，而第一个文本视图将填充剩余的 space。

Answer 4

看起来您的 Card 扩展了 RelativeLayout - 您实际上是在利用 android:layout_centerVertical 或 android:layout_alignParentRight 等属性，因为它们在任何其他布局）。

您可以进一步使用它并添加一个约束，使长文本视图位于短文本视图的左侧。首先，您需要将短的移动到布局中的第一个，然后将这些属性添加到长的：android:layout_toLeftOf="@id/jir_acc_time"、android:layout_toStartOf="@id/jir_acc_time"、android:layout_alignParentLeft="true"、android:layout_alignParentStart="true"。完整示例：

    <com.gc.materialdesign.views.Card
        android:id="@+id/jir_card_headerissue"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextView
            android:id="@+id/jir_acc_time"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentEnd="true"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:layout_marginRight="@dimen/inner_components_spacing"
            android:layout_marginTop="@dimen/activity_vertical_margin"
            android:text="20h"
            android:textAppearance="?android:attr/textAppearanceSmall"/>

       <TextView
            android:id="@+id/jir_issue_name_tv"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_centerVertical="true"
            android:layout_marginLeft="@dimen/inner_components_spacing"
            android:layout_marginTop="@dimen/activity_vertical_margin"
            android:layout_toLeftOf="@id/jir_acc_time"
            android:layout_toStartOf="@id/jir_acc_time"
            android:ellipsize="end"
            android:singleLine="true"
            android:text="Crear nueva vista"
            android:textAppearance="?android:attr/textAppearanceLarge"/>

    </com.gc.materialdesign.views.Card>

避免 2 textview 重叠

Avoid 2 textview to overlap

android

android-layout

textview

overlap