ConstraintLayout элемент списка не имеют одинаковую длину, даже при сопоставлении с родителем? - PullRequest
Новая
       14

ConstraintLayout элемент списка не имеют одинаковую длину, даже при сопоставлении с родителем?

1 голос
/ 12 октября 2019

У меня есть просмотрщик утилит, использующий контрплет, который выглядит так, как я хочу в предварительном просмотре, но при его запуске ограничения действуют забавно. Кажется, что каждый элемент списка имеет свою ширину.

Я пытался добавить android: minWidth = 150dp и к тегу constraintlayout, и к тегу с идентификатором listItemSubject, ни один из них не помог.

Примечание: это приложение не работает с новыми телефонами, но работает на Nexus 5X.

Вот XML: 

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="center"
    android:layout_marginStart="5dp"
    android:layout_marginEnd="5dp"
    android:layout_marginTop="5dp"
    android:layout_marginBottom="5dp"
    >

    <TextView
        android:id="@+id/listItemSubject"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Subject: "
        android:textSize="15pt"
        app:fontFamily="sans-serif-medium"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

    <TextView
        android:id="@+id/listItemText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Content: "
        android:textSize="12pt"
        app:fontFamily="sans-serif-condensed-light"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/listItemSubject" />

    <TextView
        android:id="@+id/listItemLikes"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Yums: "
        android:textSize="12pt"
        app:fontFamily="sans-serif-light"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/likeImage" />

    <TextView
        android:id="@+id/listItemYucks"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Yucks: "
        android:textSize="12pt"
        app:fontFamily="sans-serif-light"
        app:layout_constraintEnd_toEndOf="@+id/YuckImage"
        app:layout_constraintTop_toBottomOf="@+id/YuckImage" />

    <ImageButton
        android:id="@+id/likeImage"
        android:layout_width="53dp"
        android:layout_height="55dp"
        android:layout_gravity="center"
        app:layout_constraintLeft_toLeftOf="@+id/listItemSubject"
        app:layout_constraintStart_toStartOf="parent"
        app:srcCompat="@drawable/yum_emoji" />

    <ImageButton
        android:id="@+id/YuckImage"
        android:layout_width="53dp"
        android:layout_height="55dp"
        android:layout_gravity="center"
        android:padding="0dp"
        android:scaleType="fitCenter"
        app:srcCompat="@drawable/puke_emoji"
        app:layout_constraintRight_toRightOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

Вот как это должно быть:

А вот и вывод:

Ответы [ 4 ]

0 голосов
/ 15 октября 2019

может быть, вы можете попробовать это: 

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginStart="5dp"
    android:layout_marginEnd="5dp"
    android:layout_marginTop="5dp"
    android:layout_marginBottom="5dp"
    >

    <TextView
        android:id="@+id/listItemSubject"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Subject: "
        android:textSize="15pt"
        app:fontFamily="sans-serif-medium"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

    <TextView
        android:id="@+id/listItemText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Content: "
        android:textSize="12pt"
        app:fontFamily="sans-serif-condensed-light"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/listItemSubject" />

    <TextView
        android:id="@+id/listItemLikes"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Yums: "
        android:textSize="12pt"
        app:fontFamily="sans-serif-light"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/likeImage" />

    <TextView
        android:id="@+id/listItemYucks"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Yucks: "
        android:textSize="12pt"
        app:fontFamily="sans-serif-light"
        app:layout_constraintEnd_toEndOf="@+id/YuckImage"
        app:layout_constraintTop_toBottomOf="@+id/YuckImage" />

    <ImageButton
        android:id="@+id/likeImage"
        android:layout_width="53dp"
        android:layout_height="55dp"
        android:layout_gravity="center"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:srcCompat="@drawable/yum_emoji" />

    <ImageButton
        android:id="@+id/YuckImage"
        android:layout_width="53dp"
        android:layout_height="55dp"
        android:layout_gravity="center"
        android:scaleType="fitCenter"
        app:srcCompat="@drawable/puke_emoji"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

enter image description here

0 голосов
/ 13 октября 2019

Вы используете размеры фиксированного размера в своих представлениях (android:layout_width="53dp"), и поскольку разные телефоны имеют разные размеры экрана, использование значений фиксированного размера в макете сделает его не реагирующим на все размеры экрана.

Как исправить:

Вы можете использовать эти атрибуты, чтобы сделать ваши представления отзывчивыми по размеру: 

app:layout_constraintHeight_percent="0.xx"
app:layout_constraintWidth_percent="0.yy"

Это сделает ваши представления отзывчивыми к размеру экрана (не имеет значения, какой экранразмер)

Пример: 

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  android:orientation="vertical"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:layout_gravity="center"
  android:layout_marginStart="5dp"
  android:layout_marginEnd="5dp"
  android:layout_marginTop="5dp"
  android:layout_marginBottom="5dp">

<TextView
    android:id="@+id/listItemSubject"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintHeight_percent="0.10"
    app:layout_constraintWidth_percent="0.25"
    android:gravity="center"
    android:text="Subject: "
    android:textSize="16sp"
    app:fontFamily="sans-serif-medium"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<TextView
    android:id="@+id/listItemText"
    android:layout_width="wrap_content"
    android:layout_height="0dp"
    android:layout_gravity="center"
    android:text="Content: "
    android:textSize="12pt"
    app:layout_constraintHeight_percent="0.1"
    app:fontFamily="sans-serif-condensed-light"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/listItemSubject" />

<TextView
    android:id="@+id/listItemLikes"
    android:layout_width="wrap_content"
    android:layout_height="0dp"
    android:layout_gravity="center"
    android:text="Yums: "
    android:textSize="12pt"
    app:layout_constraintHeight_percent="0.1"
    app:fontFamily="sans-serif-light"
    app:layout_constraintEnd_toEndOf="@+id/likeImage"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/likeImage" />

<TextView
    android:id="@+id/listItemYucks"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_gravity="center"
    app:layout_constraintHeight_percent="0.1"
    android:text="Yucks: "
    android:textSize="12pt"
    app:fontFamily="sans-serif-light"
    app:layout_constraintEnd_toEndOf="@+id/YuckImage"
    app:layout_constraintStart_toStartOf="@+id/YuckImage"
    app:layout_constraintTop_toBottomOf="@+id/YuckImage" />

<ImageButton
    android:id="@+id/likeImage"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_gravity="center"
    app:layout_constraintHeight_percent="0.10"
    app:layout_constraintLeft_toLeftOf="@+id/listItemSubject"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="@+id/listItemSubject"
    app:layout_constraintWidth_percent="0.25" />

<ImageButton
    android:id="@+id/YuckImage"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_gravity="center"
    android:padding="0dp"
    android:scaleType="fitCenter"
    app:layout_constraintHeight_percent="0.10"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="@+id/listItemSubject"
    app:layout_constraintWidth_percent="0.25" />

</androidx.constraintlayout.widget.ConstraintLayout>

Как это будет выглядеть:

enter image description here

Вот еще один вариант, который вы можете использовать:

Если вы не хотите использовать первое решение, вы всегда можете использовать sdp :

Эта единица измерения размера зависит от размера экрана. Это может помочь разработчикам Android с поддержкой нескольких экранов.

0 голосов
/ 14 октября 2019

Для предмета (что я хотел отцентрировать) я изменил android:layout_width="match_parent" на android:layout_width="415dp" Это не идеальное решение, но пока работает.

0 голосов
/ 12 октября 2019

Используйте этот код ниже, он выглядит как ожидаемый результат 

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" // Use wrap_content for single item
        android:layout_marginStart="5dp" // Remove gravity centre
        android:layout_marginEnd="5dp"
        android:layout_marginTop="5dp"
        android:layout_marginBottom="5dp">

<TextView
        android:id="@+id/listItemSubject"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Subject: "
        android:textSize="15pt"
        app:fontFamily="sans-serif-medium"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

<TextView
        android:id="@+id/listItemText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Content: "
        android:textSize="12pt"
        app:fontFamily="sans-serif-condensed-light"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/listItemSubject" />

<TextView
        android:id="@+id/listItemLikes"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Yums: "
        android:textSize="12pt"
        app:fontFamily="sans-serif-light"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/likeImage" />

<TextView
        android:id="@+id/listItemYucks"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Yucks: "
        android:textSize="12pt"
        app:fontFamily="sans-serif-light"
        app:layout_constraintEnd_toEndOf="@+id/YuckImage"
        app:layout_constraintTop_toBottomOf="@+id/YuckImage" />

<ImageButton
        android:id="@+id/likeImage"
        android:layout_width="53dp"
        android:layout_height="55dp"
        android:layout_gravity="center"
        app:layout_constraintLeft_toLeftOf="@+id/listItemSubject"
        app:layout_constraintStart_toStartOf="parent" // Constraint are missing
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/yum_emoji" />

<ImageButton
        android:id="@+id/YuckImage"
        android:layout_width="53dp"
        android:layout_height="55dp"
        android:layout_gravity="center"
        android:padding="0dp"
        android:scaleType="fitCenter"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" // Constraint are missing
        app:srcCompat="@drawable/puke_emoji" />

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