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

Question

我正在尝试在回收者视图中制作仅带有图像和标题下方的项目。由于某种原因，拥有标题的文本视图在底部被切断。

见下文：

我尝试将文本视图的高度设置为wrap_content，但这会导致我的图像被推高，并且在所有项目上的大小都不一致。另外，我觉得奇怪的是，文本视图的大小和位置甚至与android studio中的预览布局都不匹配。

有什么建议吗？

我的视图持有人布局：

<?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

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

您可以删除线性布局，然后将ImageView和TextView直接放在约束布局内，并将TextView约束置于ImageView的顶部到底部

并且除了使用权重，还可以使用layout_constraintHeight_percent，如下所示：

app:layout_constraintHeight_percent="0.2"

但是我建议您不要使用height_percant或weight，也要避免静态调整视图的宽度/高度。可能在不同的屏幕上引起问题

我认为最好删除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>

Answer 2

我相信我已经找到了问题，这是您在LinearLayout中使用的权重。根据ImageView的高度（80），您确定了TextView的高度（20）。由于TextView无法换行，因此从底部开始剪切文本。

解决方案1：删除线性布局中的权重并将图像高度设置为固定高度，并将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中删除填充或将其设置为较小的填充，但是在较小的屏幕上可能会再次出现此问题。

Answer 3

将imageview的权重设置为60，将textview的权重设置为40。总之，请不断调整weight attr值以解决您的问题。仅在您的代码中确实需要权重属性时才使用thia解决方案。否则，只需减轻重量并将两者的高度都设置为wrap_content即可。