如何在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