ImageView 在 MaterialCardView 中垂直居中

Question

Objective：我正在尝试制作一个 MaterialCard，里面有一个图像，以及图像下方的一些文本。此当前布局将用作应用程序的 "menu"，用户可以在其中 select 导航到何处。

问题：ImageView 在 MaterialCardView 中垂直居中显示。我希望 ImageView 到 "stick" 到 MaterialCardView 的顶部。 MaterialCardView 的上方和下方有大段的ImageView。

我的XML代码：

<ScrollView
    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:layout_width="fill_parent"
    android:layout_height="fill_parent">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        tools:context=".MainActivity"
        android:orientation="vertical">

        <com.google.android.material.appbar.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:liftOnScroll="true"
            android:id="@+id/appBar">

            <Toolbar
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:backgroundTint="@color/design_default_color_primary_dark"
                app:layout_scrollFlags="enterAlways">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/application_title"
                    android:textColor="@color/colorWhite"
                    android:textSize="24sp"/>

            </Toolbar>

        </com.google.android.material.appbar.AppBarLayout>

        <com.google.android.material.card.MaterialCardView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:id="@+id/mealPlannerCardView"
            android:contextClickable="true"
            android:focusable="true"
            app:cardBackgroundColor="@color/colorWhite">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="top"
                android:src="@drawable/wedding_dinner"
                android:contentDescription="@string/wedding_background_cont_desc"/>

            <com.google.android.material.textview.MaterialTextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom"
                android:text="@string/mealPlannerTextView"
                android:textColor="@color/design_default_color_primary_dark"/>

        </com.google.android.material.card.MaterialCardView>
    </LinearLayout>
</ScrollView>

output

我尝试使用 layout_gravity="Top" 但没有任何区别。

编辑

android:scaleType="fitStart" 使图像 "stick" 位于 MaterialCardView 的顶部，但现在图像视图下方 space 非常大，需要滚动才能结束。

Answer 1

在您的 xml

中添加以下行

android:layout_gravity="start|top"

看看这是否为您重新定位了图像。如果这可行，请担心稍后居中。

Answer 2

您可能会通过为图像视图设置scaleType 来获得您想要的结果。检查此 link：https://thoughtbot.com/blog/android-imageview-scaletype-a-visual-guide

它显示了每种比例类型的示例，它将帮助您选择合适的比例类型来实现您需要的外观。

Answer 3

发生这种情况是因为 Android 框架试图在面对您的高度和宽度限制以及默认比例类型时保持纵横比。

您的问题有不止一种解决方案，您可以根据自己接受的结果来选择。所有这些解决方案都围绕着帮助框架处理 ImageView 的纵横比。我试着把我能想到的可能的解决方案写下来。

第一个解决方案可以很简单，只需更改 ImageView 上的比例类型，如下所示：

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:scaleType="centerCrop"
        android:src="@drawable/wedding_dinner"/>

这会去除空白，但会裁剪图像。

上面的细微变化，您可以在其中定义图像的固定高度。这是一个令人惊讶的广泛使用的解决方案，因为它提供了一定的

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="240dp"
        android:scaleType="centerCrop"
        android:src="@drawable/wedding_dinner"/>

最后，一个更优雅和更好的解决方案是使用 ConstrainLayout 为您的图像提供固定的纵横比。

ImageView 在 MaterialCardView 中垂直居中

ImageView vertically centred in MaterialCardView

android

android-layout

material-components-android