在 LinearLayout 中的 ImageView 上粘贴文本字段和按钮

Question

这是我想在我的应用程序中实现的登录 activity（图 2）。但我不知道该怎么做，因为我无法粘贴 editText、password 和 button在图像的白色部分（整个图像有黑色边框）。该应用程序有白色背景，我想使图像看起来像曲线并将其他字段放在它下面。现在它看起来像 image1.

看看这个

我还希望我的图片与底部对齐，宽度为match_parent，高度需要调整，以便在不同设备上保存原始图片的比例。这是我的 XML 代码：

 <?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    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:id="@+id/banner"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:weightSum="5"
    tools:context="com.example.android.start.MainActivity">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:srcCompat="@drawable/logo"
        android:id="@+id/logo"
        android:layout_weight="2"
    />
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="3"
        android:id="@+id/back"
        app:srcCompat="@drawable/image2"

    />

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="textPassword"
        android:ems="10"
        android:id="@+id/editText3" />

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="textPersonName"
        android:text="Name"
        android:ems="10"
        android:id="@+id/editText2" />

    <Button
        android:text="Button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/button"
        android:layout_centerInParent="true"/>


</LinearLayout>

Answer 1

你可以这样做

<LinearLayout
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:id="@+id/banner"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="5"
tools:context="com.example.android.start.MainActivity">

<ImageView
    android:id="@+id/logo"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="2"
    app:srcCompat="@drawable/logo"
    />

<LinearLayout
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="3"
    android:gravity="center"
    app:srcCompat="@drawable/image2">


    <EditText
        android:id="@+id/editText3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:ems="10"
        android:inputType="textPassword"/>

    <EditText
        android:id="@+id/editText2"

        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ems="10"
        android:inputType="textPersonName"
        android:text="Name"/>

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="Button"/>

</LinearLayout>

Answer 2

使用 RelativeLayout 而不是 LinearLayout 它有望解决您的问题。

Answer 3

这是我用来实现 Image2 外观的代码：

<LinearLayout 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:id="@+id/banner"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:weightSum="5"
    tools:context="com.example.android.start.MainActivity">

    <ImageView
        android:id="@+id/logo"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="2"
        app:srcCompat="@drawable/logo" />

    <FrameLayout
        android:id="@+id/frame"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="3"
        android:background="@drawable/back"
        android:weightSum="2">
         <RelativeLayout
             android:layout_width="match_parent"
             android:layout_height="match_parent">

             <EditText
                 android:id="@+id/name"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:layout_gravity="center"
                 android:background="#C8E6C9"
                 android:ems="10"
                 android:hint="Username"
                 android:inputType="textPersonName"
                 android:layout_marginBottom="117dp"
                 android:layout_alignParentBottom="true"
                 android:layout_centerHorizontal="true" />

             <Button
                android:id="@+id/button"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal|center_vertical"
                android:text="Sign In"
                 android:background="#8BC34A"
                 android:layout_alignParentBottom="true"
                 android:layout_centerHorizontal="true"
                 android:layout_marginBottom="11dp" />

             <EditText
                 android:id="@+id/password"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:layout_gravity="bottom"
                 android:background="#C8E6C9"
                 android:ems="10"
                 android:hint="Password"
                 android:inputType="textPassword"
                 android:layout_above="@+id/button"
                 android:layout_alignLeft="@+id/name"
                 android:layout_alignStart="@+id/name"
                 android:layout_marginBottom="19dp" />
             />

         </RelativeLayout>

    </FrameLayout>
</LinearLayout>

在 LinearLayout 中的 ImageView 上粘贴文本字段和按钮

Paste Text Field and Button over an ImageView in LinearLayout

android

android-layout

android-imageview