Question

背景

这是一个非常简单的问题。

我想使ImageView和TextView居中，以使TextView（以及可选的更多视图）位于ImageView的下方，但应始终显示（如果需要，ImageView可以缩小比例，只要保持宽高比即可。）< / p>

问题

由于某种原因，我考虑过的所有方法均无效。总是有一种情况（通常很容易通过更改方向来重现以减少可用空间），而不会显示TextView。

我尝试过的

最初，我所做的就是这样：

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：

我尝试用NestedScrollView和android:fillViewport="true"来包装它，但是除了至少滚动到它之外，它不再有用。
我试图将LinearLayout分为两半（使用权重和高度为0px），以便顶部将ImageView设置为底部（我使用FrameLayout包含它），并且底部将具有其余部分，其内容与顶部对齐并水平居中。但是然后看起来也很奇怪，也许是因为它们不再真正在一起了。
我尝试使用ConstraintLayout，以便使用app:layout_constraintVertical_chainStyle="packed"将视图链接在一起，并且底部（TextView）将具有app:layout_constraintHeight_min="wrap"。也不起作用。

问题

有一种简单的方法可以克服吗？要在中心显示两个视图，但要优先显示TextView？

当前，唯一被认为是可行的解决方案是两半解决方案。

Answer 1

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

app:layout_constrainedHeight="true"

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

match_constraints上的

ImageView将允许图像扩展和收缩以匹配边界，同时为放置在图像正下方的TextView留出空间。 如果您不希望图像改变大小，除非需要，请将ImageView的宽度设置为wrap_content而不是match_constraints并设置app:layout_constrainedWidth="true"。 / em>

较早的文章是基于图像的1：1长宽比。该解决方案对纵横比没有限制。这是布局工作的一些图片：

纵向模式，图像宽度>高度

图片模式为图片宽度>高度

纵向模式，图像高度>宽度

风景模式，图像高度>宽度

我还添加了一些边距，以更好地查看视图的真实范围，但是可以删除这些边距。 TextView中文本的大小也增加了，以使其更可见，但可以是任意大小。

<androidx.constraintlayout.widget.ConstraintLayout android:layout_width="match_parent" android:layout_height="match_parent">  <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`。来自 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>

结果如下（“分辨率”为420dpi时为1920x1080）：

我更改了ImageView的高度和重量。高度0dp和权重1告诉Android，ImageView应该占用尽可能多的空间，同时仍然允许带有wrap_content的其他元素正确显示。我也将ImageView的宽度更改为match_parent，尽管这不是必需的。

如果您想要比TextView更复杂的东西，只需将其与TextView一起包装在所需的任何布局中，并保持相同的wrap_content高度尺寸即可。

如何将ImageView与TextView垂直居中，同时确保TextView有足够的空间可以显示？

背景

问题

我尝试过的

问题

2 个答案: