如何在android中完成这个布局

Question

在我的Android应用程序中，我有一个登录屏幕。平面设计师给了我这个模板

我能得到的最接近的是

我使用了9.png（暂时与我用于我的按钮相同）

如何使用布局和9.png文件的组合来解决这个问题？我不想使用静态背景图像，因为我们希望支持所有屏幕尺寸......

编辑：我最终使用了两个不同的九个补丁文件，因为登录部分也需要是可扩展的（按钮中的字符串根据手机区域设置的长度可能不同）。把它们放在一起我用了一个relativelayout。我非常接近我想做的事情：

对于那些感兴趣的人，这里使用的布局（我想我可以简化）：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent" android:layout_height="fill_parent"
    android:paddingLeft="15dp" android:paddingRight="15dp"
    android:background="#ffffffff" android:gravity="center"
    android:orientation="vertical">
    <LinearLayout android:id="@+id/login_field_container_top"
        android:orientation="vertical" android:layout_width="fill_parent"
        android:layout_height="wrap_content" android:padding="5dp"
        android:layout_centerInParent="true" android:layout_marginTop="0dp"
        android:layout_marginBottom="-5dp" android:background="@drawable/login_field_container_top">
        <TextView android:layout_height="wrap_content"
            android:layout_width="fill_parent" android:text="@string/email" />
        <EditText android:id="@+id/email" android:layout_width="fill_parent"
            android:layout_height="wrap_content" android:scrollbars="none"
            android:inputType="textEmailAddress" android:singleLine="true"
            android:maxLength="255" />
        <TextView android:layout_height="wrap_content"
            android:layout_width="fill_parent" android:text="@string/password"
            android:layout_margin="5dp" />
        <EditText android:id="@+id/password" android:layout_width="fill_parent"
            android:layout_height="wrap_content" android:scrollbars="none"
            android:password="true" android:singleLine="true" />
    </LinearLayout>
    <RelativeLayout android:layout_width="wrap_content"
        android:layout_height="wrap_content" android:layout_gravity="right">
        <LinearLayout android:id="@+id/login_field_container_bottom"
            android:layout_alignParentRight="true" android:orientation="vertical"
            android:layout_width="wrap_content" android:layout_height="wrap_content"
            android:gravity="center" android:background="@drawable/login_field_container_bottom">
            <LinearLayout android:layout_width="wrap_content"
                android:layout_height="wrap_content" android:padding="1dp"
                android:layout_margin="1dp" android:layout_gravity="center"
                android:gravity="center" android:background="@drawable/small_button_holder">
                <Button android:id="@+id/login_button" android:text="@string/login"
                    android:layout_margin="0dp" android:layout_width="wrap_content"
                    android:layout_height="wrap_content" />
            </LinearLayout>
        </LinearLayout>
        <LinearLayout android:orientation="horizontal"
            android:layout_width="wrap_content" android:layout_height="wrap_content"
            android:paddingBottom="10dp" android:layout_toLeftOf="@id/login_field_container_bottom"
            android:layout_alignBottom="@id/login_field_container_bottom">
            <TextView android:layout_width="wrap_content"
                android:layout_height="wrap_content" android:text="@string/notamember"
                style="@style/Subtitle" />
            <Button android:id="@+id/register" android:text="@string/register"
                android:layout_width="wrap_content" android:layout_height="wrap_content" />
        </LinearLayout>
    </RelativeLayout>
</LinearLayout>

我不满意的唯一部分是我必须添加填充以对齐左右按钮

Answer 1

让您的设计师使用登录标签剪切九个补丁作为非拉伸区域的一部分，但仍然是内容区域的一部分。在整个屏幕上拉伸，然后将按钮相对于父母放置。

9的贴剂

     *********************
     _____________________
    /                     \
*   |                     |  X
*   |                     |  X
*   \_______________      |  
*                   |     |  
*                   |_____|
      XXXXXXXXXXXX

* = content area
X = stretchable area