Я пытаюсь сделать элементы с изображением и заголовком под ним в виде переработчика. По некоторым причинам мои текстовые представления, которые содержат заголовок, обрезаются снизу.

Увидеть ниже:

enter image description here

Я пробовал установить высоту текстового представления на 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>
1
antWilder 29 Ноя 2019 в 16:43

3 ответа

Я считаю, что нашел проблему, и это вес, который вы используете в своей 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 или установить его на меньший, но проблема может повториться на меньших экранах.

1
FuriousSpider 29 Ноя 2019 в 14:11

Почему вы создали линейный макет внутри макета ограничения?

Вы можете удалить линейный макет и поместить ваши ImageView и TextView непосредственно в макет ограничения и ограничение TextView сверху вниз в ImageView.

И вместо использования веса вы можете использовать layout_constraintHeight_percent, как показано ниже:

app:layout_constraintHeight_percent="0.2"

Но я рекомендую вам не использовать height_percant или weight, а также избегать статического изменения размеров view / 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>
1
Ali Mohammad Movahedian 29 Ноя 2019 в 19:41

Сделайте вес imageview равным 60, а textview - 40. Короче, продолжайте регулировать значение attr веса, чтобы решить вашу проблему. Используйте решение thia только тогда, когда вам действительно нужен весовой коэффициент в вашем коде. Или просто удалите вес и установите для wrap_content высоту для них обоих.

0
Prajwal W 29 Ноя 2019 в 16:50