在ImageView之后显示TextView

Question

我希望在TextView之后显示ImageView，但现在我的Android屏幕上会显示文字。

布局：

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="in.sitemakers.sitemakers.AboutFragment">

<ImageView
    android:id="@+id/about_image"
    android:src="@drawable/sitemakers_laptops"
    android:layout_width="match_parent"
    android:scaleType="fitXY"
    android:layout_height="420dp" />

<TextView
    android:layout_below="@+id/about_image"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Site Makers is the web development company engage in the.."
    />

</FrameLayout>

请参阅上面的屏幕截图，并以这种方式帮助我更新 XML ，以便 TextView 在 {{之后1}}

Answer 1

将FrameLayout替换为LinearLayout或RelativeLayout，因为FrameLayout将视图放在另一个上

LinearLayout：以水平或垂直方式一个接一个地以线性方式放置子视图。

注意：线性布局还允许您根据指定的weight属性值动态分配子视图中的可用宽度和高度。

RelativeLayout： 可以相对于彼此或与父母相关描述孩子的位置的布局

根据说明还有许多其他ViewGroups you can use

注意：请勿使用px而使用dp作为android:layout_height="420dp"，因为px代表限制保持不变的实际屏幕像素大屏幕上的观看大小（视图非常小），如Density independence

所述

Answer 2

您可以使用 LinearLayout 或 RelativeLayout

如果你使用 LinearLayout 那么你可以设置 orientation =“vertical”

如果您使用 RelativeLayout ，那么您可以在TextView中使用 android：layout_below =“@ id / about_image”。

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    orientation="vertical"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/about_image"
        android:src="@drawable/sitemakers_laptops"
        android:layout_width="match_parent"
        android:scaleType="fitXY"
        android:layout_height="420px" />

    <TextView
        android:layout_below="@+id/about_image"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Site Makers is the web development company engage in the.."/>

    </LinearLayout>