Как центрировать ImageView с TextView по вертикали, но при этом убедиться, что TextView имеет достаточно места для отображения?

Question

Фон

Это очень простой вопрос.

Я хочу, чтобы ImageView и TextView были в центре, чтобы TextView (и, возможно, больше видов с ним) находился ниже ImageView, но всегда должен отображаться (ImageView может уменьшаться, если необходимо, просто сохраняйте пропорции).

Проблема

По некоторым причинам, все способы, о которых я думал, не работают. Всегда существует сценарий (обычно его легко воспроизвести, изменив ориентацию, чтобы освободить место), когда TextView не отображается.

Что я пробовал

1. Изначально я сделал так:

ic_android_red.xml - образец изображения вместо исходного.

<vector xmlns:android="http://schemas.android.com/apk/res/android" android:height="400dp"
        android:tint="#FF0009" android:viewportHeight="24.0"
        android:viewportWidth="24.0" android:width="400dp">
    <path android:fillColor="#FF000000"
          android:pathData="M6,18c0,0.55 0.45,1 1,1h1v3.5c0,0.83 0.67,1.5 1.5,1.5s1.5,-0.67 1.5,-1.5L11,19h2v3.5c0,0.83 0.67,1.5 1.5,1.5s1.5,-0.67 1.5,-1.5L16,19h1c0.55,0 1,-0.45 1,-1L18,8L6,8v10zM3.5,8C2.67,8 2,8.67 2,9.5v7c0,0.83 0.67,1.5 1.5,1.5S5,17.33 5,16.5v-7C5,8.67 4.33,8 3.5,8zM20.5,8c-0.83,0 -1.5,0.67 -1.5,1.5v7c0,0.83 0.67,1.5 1.5,1.5s1.5,-0.67 1.5,-1.5v-7c0,-0.83 -0.67,-1.5 -1.5,-1.5zM15.53,2.16l1.3,-1.3c0.2,-0.2 0.2,-0.51 0,-0.71 -0.2,-0.2 -0.51,-0.2 -0.71,0l-1.48,1.48C13.85,1.23 12.95,1 12,1c-0.96,0 -1.86,0.23 -2.66,0.63L7.85,0.15c-0.2,-0.2 -0.51,-0.2 -0.71,0 -0.2,0.2 -0.2,0.51 0,0.71l1.31,1.31C6.97,3.26 6,5.01 6,7h12c0,-1.99 -0.97,-3.75 -2.47,-4.84zM10,5L9,5L9,4h1v1zM15,5h-1L14,4h1v1z"/>
</vector>

activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              xmlns:tools="http://schemas.android.com/tools"
              xmlns:app="http://schemas.android.com/apk/res-auto"
              android:orientation="vertical"
              android:layout_width="match_parent" android:gravity="center"
              android:layout_height="match_parent"
              tools:context=".MainActivity">

    <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content"
               app:srcCompat="@drawable/ic_android_red"/>

    <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Hello World!"/>

</LinearLayout>

На портрете все работало нормально:

но в альбомной ориентации он может полностью не отображать TextView:

2. Я пытался обернуть его с помощью NestedScrollView с помощью android:fillViewport="true", но, кроме, по крайней мере, прокрутки к нему, это больше не помогает.

3. Я попытался разделить LinearLayout на 2 половины (используя вес и высоту 0px), чтобы в верхней части был установлен ImageView к его нижней части (я использовал FrameLayout для его хранения), и нижняя часть будет иметь остальное с содержимым, выровненным по верху и центрированным по горизонтали. Но тогда это тоже выглядит странно, может быть потому, что они больше не вместе.

4. Я попытался использовать ConstraintLayout, чтобы представления были объединены в цепочку с использованием app:layout_constraintVertical_chainStyle="packed", а нижняя часть (TextView) имела бы app:layout_constraintHeight_min="wrap". Также не работал.

Вопрос

Есть ли простой способ преодолеть это? Чтобы показать оба представления в центре, но с приоритетом для TextView?

В настоящее время единственное решение, которое можно считать работающим, - это решение с двумя половинами.

Answer 1

Это можно сделать с помощью ConstraintLayout с использованием вертикальной упакованной цепи и ImageView с match_constraints (0dp) для его ширины и wrap_content для ее высоты. Представление изображения также будет иметь следующий набор для сохранения высоты в пределах ограничений, когда изображение выше, чем оно является широким. (См. «Ограничения размеров» )

app:layout_constrainedHeight="true"

Вертикально упакованная цепочка сгруппирует ImageView и TextView вместе и отцентрирует по вертикали внутри макета.

match_constraints на ImageView позволит изображению расширяться и сжиматься в соответствии с границами, в то же время оставляя место для TextView, расположенного непосредственно под изображением. Если вы не хотите, чтобы изображение меняло размер без необходимости, установите ширину ImageView на wrap_content вместо match_constraints и установите app:layout_constrainedWidth="true".

Предыдущий пост был основан на соотношении сторон изображения 1: 1. Это решение не накладывает ограничения на соотношение сторон. Вот несколько изображений рабочего макета:

Портретный режим с шириной изображения> высота

Пейзажный режим с шириной изображения> высота

Портретный режим с высотой изображения> ширина

Пейзажный режим с высотой изображения> ширина

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

<androidx.constraintlayout.widget.ConstraintLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent">

<!-- ImageView width could also be android:layout_height="wrap_content" 
with app:layout_constrainedWidth="true"-->

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        app:layout_constrainedHeight="true"
        app:layout_constraintBottom_toTopOf="@+id/textView"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_chainStyle="packed"
        app:srcCompat="@drawable/vertical_image" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="16dp"
        android:text="Hello World!"
        android:textSize="36sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/imageView" />

</androidx.constraintlayout.widget.ConstraintLayout>

Ключевым аспектом макета является использование app:layout_constrainedHeight=”true" which limits the height of the ImageView`. От документация для ConstraintLayout: :

WRAP_CONTENT: применение ограничений (добавлено в 1.1)

Если для измерения задано значение WRAP_CONTENT, в версиях до 1.1 они будут обрабатываться как буквальное измерение, то есть ограничения не будут ограничивать результирующее измерение. Хотя в целом этого достаточно (и быстрее), в некоторых ситуациях вы можете захотеть использовать WRAP_CONTENT, но продолжайте применять ограничения для ограничения результирующего измерения. В этом случае вы можете добавить один из соответствующих атрибутов:

   app:layout_constrainedWidth=”true|false”
   app:layout_constrainedHeight=”true|false”

Answer 2

Попробуйте это:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent" android:gravity="center"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <ImageView android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        app:srcCompat="@drawable/ic_android_red"
        />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        />

</LinearLayout>

Это результат («разрешение» 1920x1080 при 420dpi):

Я изменил рост и вес ImageView. Высота 0dp с весом 1 говорит Android, что ImageView должен занимать как можно больше места, в то же время позволяя другим элементам с wrap_content отображаться правильно. Я также изменил ширину ImageView на match_parent, хотя в этом нет необходимости.

Если вы хотите что-то более сложное, чем TextView, просто оберните его вместе с TextView внутри любого макета, сохраняя то же wrap_content измерение высоты.