为什么文本视图中的文本在回收器视图中被截断？

Question

我正在尝试在回收站视图中制作一个只有图像和标题的项目。出于某种原因，我的文本视图的标题在底部被截断了。

见下文：

我已经尝试将文本视图高度设置为 wrap_content，但这会导致我的图像被推高，并且所有项目的大小不一致。此外，我发现文本视图大小和位置甚至与 android 工作室中的预览布局不匹配。

有什么建议吗？

我的视图持有者布局：

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="4dp"
        android:background="@drawable/thumbnail_frame"
        android:paddingLeft="16dp"
        android:paddingTop="12dp"
        android:paddingRight="16dp"
        android:paddingBottom="12dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:orientation="vertical"
            android:weightSum="100"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintDimensionRatio="5:4"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent">

            <ImageView
                android:id="@+id/thumbnail_item"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="80"
                android:background="@color/dark_red"
                android:scaleType="centerCrop" />

            <TextView
                android:id="@+id/thumbnail_title"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="20"
                android:ellipsize="end"
                android:maxLines="2"
                android:padding="8dp"
                android:text="@string/title_place_holder"
                android:textColor="@color/white"
                android:textSize="12sp" />

        </LinearLayout>

    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

Answer 1

我相信我已经找到问题所在，这是您在 LinearLayout 中使用的权重。根据 ImageView 高度 (80)，您已确定 TextView 高度 (20)。由于 TextView 不能换行，所以文本从底部被剪切。

方案一：去除线性布局中的权重，将图片高度设置为固定高度，将TextView设置为wrap_content。如下所示：

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio="5:4"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <ImageView
            android:id="@+id/thumbnail_item"
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:background="@color/dark_red"
            android:scaleType="centerCrop" />

        <TextView
            android:id="@+id/thumbnail_title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:ellipsize="end"
            android:maxLines="2"
            android:padding="8dp"
            android:text="@string/title_place_holder"
            android:textColor="@color/white"
            android:textSize="12sp" />
    </LinearLayout>

解决方案2：您可以移除TextView 中的padding 或将其设置为更小的padding，但问题可能会在较小的屏幕上再次出现。

Answer 2

将imageview的weight设置为60，textview的weight设置为40，总之不断调整weight attr的值即可解决你的问题。仅当您确实需要代码中的权重属性时才使用 thia 解决方案。否则，只需删除重量并将它们的高度设置为 wrap_content。

Answer 3

为什么要在约束布局内创建线性布局？

您可以删除线性布局，将 ImageView 和 TextView 直接放在约束布局和约束 TextView 内，从上到下放置在 ImageView 中

您可以使用 layout_constraintHeight_percent 而不是重量，如下所示：

app:layout_constraintHeight_percent="0.2"

但我建议您不要使用 height_percant 或权重，并避免静态调整视图大小 width/height。它可能会在不同的屏幕上引起问题

我认为最好删除 LinearLayout 并删除权重并将此行添加到您的 ImageView：

app:layout_constraintDimensionRatio="H,5:4"

像下面这样写你的 TextView 和 ImageView：

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="4dp"
    android:background="@drawable/thumbnail_frame"
    android:paddingLeft="16dp"
    android:paddingTop="12dp"
    android:paddingRight="16dp"
    android:paddingBottom="12dp">

        <ImageView
            android:id="@+id/thumbnail_item"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:background="@color/dark_red"
            android:scaleType="centerCrop"
            app:layout_constraintDimensionRatio="H,5:4"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/thumbnail_title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:ellipsize="end"
            android:maxLines="2"
            android:padding="8dp"
            android:text="@string/title_place_holder"
            android:textColor="@color/white"
            android:textSize="12sp" 
            app:layout_constraintTop_toBottomOf="@id/thumbnail_item"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

为什么文本视图中的文本在回收器视图中被截断？

Why is the text in the text view cut off in the recycler view?

android

android-layout

kotlin

android-layout-weight

android-recyclerview