如何将 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：

1. 我尝试用NestedScrollView 和android:fillViewport="true" 包装它，但除了至少滚动到它之外，它没有任何帮助。

2. 我尝试将 LinearLayout 分成两半（使用 0px 的权重和高度），以便顶部将 ImageView 设置为底部（我使用 FrameLayout 来包含它），并且底部将具有其余部分，其内容与顶部对齐并水平居中。但后来看起来也很奇怪，也许是因为他们不再真正在一起了。

3. 我尝试使用ConstraintLayout，以便使用app:layout_constraintVertical_chainStyle="packed" 将视图链接在一起，并且底部（TextView）将具有app:layout_constraintHeight_min="wrap"。也没用。

问题

有没有简单的方法来克服它？要在中心显示两个视图，但优先于 TextView ？

目前，唯一接近可行的解决方案是 2 半解决方案。

Answer 1

这可以通过使用垂直打包链的ConstraintLayout 和使用match_constraints (0dp) 的宽度和wrap_content 的高度的ImageView 来完成。图像视图还将具有以下设置，以在图像高于其宽度时将高度保持在约束范围内。 （见"Dimension Constraints"）

app:layout_constrainedHeight="true"

垂直打包链将ImageView 和TextView 组合在一起，并在布局中垂直居中。

ImageView 上的match_constraints 将允许图像扩展和收缩以匹配边界，同时为位于图像正下方的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 theImageView`。来自 documentation for 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 高度尺寸。