Question

如何将小圆角图像放在边缘上，如下图所示（这实际上是我需要复制的设计）：

enter image description here

更新：到目前为止完成如下操作：

enter image description here

现在如何修复重叠问题（表格布局重叠圆形图片）？

更新：完成！

enter image description here

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/back" >

<!-- Put everything contained in the white area in this layout -->

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="40dp"
      android:background="@android:color/transparent"
    >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp"
        android:background="@color/White"
        android:orientation="vertical"
        >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="60dp" >

            <TextView
                android:id="@+id/textView1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Name:" />

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

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content" >

            <TextView
                android:id="@+id/textView2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Email:" />

            <EditText
                android:id="@+id/email_editText2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:ems="10"
                android:hint="Email"
                android:inputType="textEmailAddress" >

                <requestFocus />
            </EditText>
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content" >

            <TextView
                android:id="@+id/textView3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Email:" />

            <EditText
                android:id="@+id/phone_editText3"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:ems="10"
                android:hint="Phone"
                android:inputType="phone" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content" >

            <TextView
                android:id="@+id/textView4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Birthday:" />

            <EditText
                android:id="@+id/birth_editText4"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:editable="false"
                android:ems="10"
                android:hint="Birthday"
                android:inputType="date" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content" >

            <TextView
                android:id="@+id/textView5"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Password:" />

            <EditText
                android:id="@+id/pass_editText6"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:ems="10"
                android:hint="Password"
                android:inputType="textPassword" />
        </LinearLayout>

        <Button
            android:id="@+id/register_button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Register" />
    </LinearLayout>

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:scaleType="fitXY"
        android:src="@drawable/signup" />

</RelativeLayout>

Answer 1

我建议使用RelativeLayout。我将举一个粗略的例子：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">   

    // The Image you want to put on the top edge
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:src="@drawable/image" />

    // Put everything contained in the white area in this layout
    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        // Since there is now way to align the ImageView with top edge, just move 
        // this layout down for half of the height of the image.
        android:layout_marginTop="@dimen/half_image_height">
        ...
    </RelativeLayout>

</RelativeLayout>

Answer 2

以下示例与您要求的一样.... 可能有助于设计您的布局......

        <RelativeLayout
            android:layout_width="250dp"
            android:layout_height="350dp"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="30dp"
            android:background="@color/White"
            android:orientation="vertical" >

            <Button
                android:id="@+id/register_button1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:layout_centerHorizontal="true"
                android:text="Register" />

            <RelativeLayout
                android:layout_width="220dp"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:orientation="horizontal" >

                <LinearLayout
                    android:id="@+id/linearLayout1"
                    android:layout_width="100dp"
                    android:layout_height="104dp"
                    android:layout_marginTop="60dp"
                    android:layout_weight="1"
                    android:orientation="vertical" >

                    <TextView
                        android:id="@+id/textView1"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:textSize="18sp"
                        android:text="Name:" />

                    <TextView
                        android:id="@+id/textView2"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="Email:" />

                    <TextView
                        android:id="@+id/textView3"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:textSize="18sp"
                        android:text="Phone:" />

                    <TextView
                        android:id="@+id/textView4"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:textSize="18sp"
                        android:text="Birthday:" />

                    <TextView
                        android:id="@+id/textView5"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:textSize="18sp"
                        android:text="Password:" />

                </LinearLayout>

                <LinearLayout
                    android:id="@+id/linearLayout2"
                    android:layout_width="120dp"
                    android:layout_height="wrap_content"
                    android:layout_alignParentRight="true"
                    android:layout_alignTop="@+id/linearLayout1"
                    android:layout_weight="1"
                    android:orientation="vertical" >

                    <EditText
                        android:id="@+id/name_editText1"
                        android:layout_width="150dp"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:background="@drawable/edit_text_shap"
                        android:ems="10"
                        android:hint="Name"
                        android:inputType="textPersonName" >

                        <requestFocus />
                    </EditText>

                    <EditText
                        android:id="@+id/email_editText2"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:background="@drawable/edit_text_shap"
                        android:ems="10"
                        android:hint="Email"
                        android:inputType="textEmailAddress" />

                    <EditText
                        android:id="@+id/phone_editText3"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:background="@drawable/edit_text_shap"
                        android:ems="10"
                        android:hint="Phone"
                        android:inputType="phone" />

                    <EditText
                        android:id="@+id/birth_editText4"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:background="@drawable/edit_text_shap"
                        android:editable="false"
                        android:ems="10"
                        android:hint="Birthday"
                        android:inputType="date" />

                    <EditText
                        android:id="@+id/pass_editText6"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:background="@drawable/edit_text_shap"
                        android:ems="10"
                        android:hint="Password"
                        android:inputType="textPassword" />
                </LinearLayout>

            </RelativeLayout>

        </RelativeLayout>

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true"
            android:scaleType="fitXY"
            android:src="@drawable/ic_launcher" />

    </RelativeLayout>

文件名edit_text_shap.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <solid android:color="@android:color/darker_gray" />
    <stroke
        android:width="1dp"
        android:color="#CCCCCC" />
    <corners android:radius="8dip"/>
</shape>

Answer 3

我发布了正确的答案，仍然没有投票。无论如何，这是你问题的复制品。你可以自己编辑

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/abc"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="50dp"
        android:layout_marginTop="100dp"
        android:text="FirstName"
        android:textSize="10sp" />

    <EditText
        android:id="@+id/editText1"
        android:layout_width="150dp"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@id/textView1"
        android:layout_marginLeft="20dp"
        android:layout_toRightOf="@id/textView1"
        android:ems="10" >

        <requestFocus />
    </EditText>

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/textView1"
        android:layout_below="@+id/textView1"
        android:layout_marginTop="30dp"
        android:text="LastName"
        android:textSize="10sp" />

    <EditText
        android:id="@+id/editText2"
        android:layout_width="150dp"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@id/textView2"
        android:layout_below="@id/editText1"
        android:layout_marginLeft="20dp"
        android:layout_toRightOf="@id/textView2"
        android:ems="10" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/textView2"
        android:layout_below="@+id/textView2"
        android:layout_marginTop="30dp"
        android:text="UserName"
        android:textSize="10sp" />

    <EditText
        android:id="@+id/editText3"
        android:layout_width="150dp"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@id/textView3"
        android:layout_alignLeft="@+id/editText2"
        android:layout_alignTop="@+id/textView3"
        android:ems="10" />

    <TextView
        android:id="@+id/textView4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/textView3"
        android:layout_centerVertical="true"
        android:layout_marginTop="30dp"
        android:text="Password"
        android:textSize="10sp" />

    <EditText
        android:id="@+id/editText4"
        android:layout_width="150dp"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@id/textView4"
        android:layout_alignLeft="@+id/editText1"
        android:layout_centerVertical="true"
        android:ems="10"
        android:inputType="textPassword" />

    <TextView
        android:id="@+id/textView6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignRight="@+id/editText4"
        android:layout_below="@+id/textView5"
        android:text="Agreed and consent to our Terms of Service"
        android:textSize="10sp" />

    <TextView
        android:id="@+id/textView5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/textView6"
        android:layout_below="@+id/editText4"
        android:layout_marginTop="44dp"
        android:text="Terms &amp; Conditions"
        android:textStyle="bold" />

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/textView6"
        android:layout_below="@+id/textView6"
        android:layout_marginTop="27dp"
        android:text="Create New Account" />

</RelativeLayout>

enter image description here

Answer 4

您可以尝试此布局。

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" >

    <LinearLayout
        android:id="@+id/yourLinearLayout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="20dp">
        <!-- YOUR CONTENT -->
    </LinearLayout>

    <ImageView
        android:id="@+id/yourRoundedImage"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_alignTop="@id/yourLinearLayout"
        android:layout_marginTop="@dimen/halfHeightOfYourImage"/>

</RelativeLayout>

希望这有帮助

Answer 5

我同意@Rahul Gupta的答案，但我不想使用背景图片，而是想使用RelativeLayout。

最初，使用带有'铅笔'图像的ImageView并将其与屏幕的顶部中心对齐。
使用LinearLayout和不要提及android：layout_below 属性。这将导致LinearLayout再次从屏幕的开头开始。现在使用android:margin_top属性并将其设置为某个值，使布局向下移动到图像的一半。
继续相应地添加TextView和EditText。

祝你好运！

Answer 6

// try this
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@color/back"
    android:layout_gravity="center">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/transparent">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="25dp"
            android:gravity="center"
            android:background="@color/White"
            android:orientation="vertical">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="60dp" >

                <TextView
                    android:id="@+id/textView1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Name:" />

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

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content" >

                <TextView
                    android:id="@+id/textView2"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Email:" />

                <EditText
                    android:id="@+id/email_editText2"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:ems="10"
                    android:hint="Email"
                    android:inputType="textEmailAddress" >

                    <requestFocus />
                </EditText>
            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content" >

                <TextView
                    android:id="@+id/textView3"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Email:" />

                <EditText
                    android:id="@+id/phone_editText3"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:ems="10"
                    android:hint="Phone"
                    android:inputType="phone" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content" >

                <TextView
                    android:id="@+id/textView4"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Birthday:" />

                <EditText
                    android:id="@+id/birth_editText4"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:editable="false"
                    android:ems="10"
                    android:hint="Birthday"
                    android:inputType="date" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content" >

                <TextView
                    android:id="@+id/textView5"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Password:" />

                <EditText
                    android:id="@+id/pass_editText6"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:ems="10"
                    android:hint="Password"
                    android:inputType="textPassword" />
            </LinearLayout>

            <Button
                android:id="@+id/register_button1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Register" />
        </LinearLayout>
    </RelativeLayout>
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:layout_gravity="top|center_horizontal"
        android:scaleType="fitXY"
        android:src="@drawable/signup" />
</FrameLayout>

Answer 7

我知道我迟到了，但我想发布我的代码也很适合我！

<RelativeLayout
        style="@style/personal_info_page_layout"
        android:layout_weight="1">

        <View
            android:id="@+id/vLogoImg"
            android:layout_width="match_parent"
            android:layout_height="@dimen/dimen100"
            android:background="@color/colorPrimary"
            />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="@+id/vLogoImg"
            android:background="@mipmap/logo"
            android:layout_centerHorizontal="true"
            />

    </RelativeLayout>

只需设置图片＆amp;颜色根据您的要求。

内部布局顶部边缘的图像

7 个答案: