Question

目标：我正在尝试制作一个其中带有图片以及图片下方一些文本的MaterialCard。当前的布局将用作应用程序的“菜单”，用户可以在其中选择导航到的位置。

问题：ImageView在MaterialCardView中垂直居中。我希望ImageView可以“粘贴”到MaterialCardView的顶部。在ImageView的上方和下方都有MaterialCardView的大部分内容。

我的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"使图像“粘贴”到MaterialCardView的顶部，但是现在ImageView下方的空间很大，需要滚动才能结束。

Answer 1

尝试 android：layout_gravity =“ start | top”

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

Answer 2

通过为图像视图设置scaleType可能会获得所需的结果。签出此链接：https://thoughtbot.com/blog/android-imageview-scaletype-a-visual-guide

它显示了每个scaleType的示例，它将帮助您选择合适的比例来实现所需的外观。

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中垂直居中

3 个答案: