如何重構佈局以使其更好？

在我的應用程序中，我有一個表單，用戶輸入他/她的姓名和地址詳細信息。我已經創建瞭如圖所示的佈局文件。它看起來相當不錯，但我希望它看起來更好，而且如果這些值足夠長，則在城市，州，郵政編碼和國家/地區的值相互重疊時。如何重構佈局以使其更好？

我一直在嘗試使佈局更好，但現在我需要一些幫助，因爲我沒有太多的Android編程/設計經驗。我附上圖片，以更好地瞭解

How it looks without values Explanation of Layouts involved The values being overlapped in city and state

這裏是佈局的XML文件：

<?xml version="1.0" encoding="utf-8"?>

<ImageView android:id="@id/top_bar_view" 
    android:layout_width="match_parent" android:layout_height="70dp" 
    android:background="@drawable/top_bar" android:contentDescription="@string/content" /> 

<TextView android:id="@+id/txt_recipient" 
    android:layout_width="wrap_content" android:layout_height="wrap_content" 
    android:layout_alignParentTop="true" android:layout_centerHorizontal="true" 
    android:layout_marginTop="18dp" android:padding="8dp" 
    android:text="@string/text_recipient" android:textColor="#FFFFFF" 
    android:textSize="16sp" /> 

<RelativeLayout android:id="@+id/Rlayout_recipient" 
    android:layout_width="match_parent" android:layout_height="match_parent" 
    android:layout_below="@id/top_bar_view" android:background="@drawable/bg"> 

    <EditText android:id="@+id/edt_rec_name" 
     android:layout_width="match_parent" android:layout_height="wrap_content" 
     android:layout_alignParentTop="true" android:layout_centerHorizontal="true" 
     android:layout_marginLeft="20dp" android:layout_marginRight="20dp" 
     android:layout_marginTop="22dp" android:background="@drawable/border_email" 
     android:ems="10" android:hint="@string/name_hint" android:inputType="text" 
     android:padding="6dp" android:textColor="#FFFFFF" 
     android:textColorHint="#FFFFFF" /> 

    <EditText android:id="@+id/edt_rec_addr1" 
     android:layout_width="match_parent" android:layout_height="wrap_content" 
     android:layout_alignLeft="@+id/edt_rec_name" 
     android:layout_alignRight="@+id/edt_rec_name" android:layout_below="@+id/edt_rec_name" 
     android:layout_marginTop="15dp" android:background="@drawable/border_email" 
     android:ems="10" android:hint="@string/addr1_hint" android:inputType="text" 
     android:padding="6dp" android:textColor="#FFFFFF" 
     android:textColorHint="#FFFFFF" /> 

    <EditText android:id="@+id/edt_rec_addr2" 
     android:layout_width="match_parent" android:layout_height="wrap_content" 
     android:layout_above="@+id/addr_layout" android:layout_alignLeft="@+id/edt_rec_addr1" 
     android:layout_alignRight="@+id/edt_rec_addr1" 
     android:layout_marginBottom="17dp" android:background="@drawable/border_email" 
     android:ems="10" android:hint="@string/addr2_hint" android:inputType="text" 
     android:padding="6dp" android:textColor="#FFFFFF" 
     android:textColorHint="#FFFFFF" /> 



    <RelativeLayout android:id="@+id/addr_layout" 
     android:layout_width="wrap_content" android:layout_height="wrap_content" 
     android:layout_alignLeft="@+id/edt_rec_addr2" 
     android:layout_alignParentBottom="true" android:layout_alignRight="@+id/edt_rec_addr2" 
     android:layout_marginBottom="16dp" android:background="@drawable/border_email"> 

     <EditText android:id="@+id/edt_rec_city" 
      android:layout_width="120dp" android:layout_height="wrap_content" 
      android:ems="10" android:hint="@string/city_hint" android:inputType="text" 
      android:padding="6dp" android:textColor="#FFFFFF" 
      android:layout_alignParentLeft="true" android:textColorHint="#FFFFFF" /> 

     <EditText android:id="@+id/edt_rec_state" 
      android:layout_width="125dp" android:layout_height="wrap_content" 
      android:layout_toRightOf="@+id/edt_rec_city" android:ems="10" 
      android:hint="@string/state_hint" android:inputType="text" 
      android:padding="6dp" android:textColor="#FFFFFF" 
      android:textColorHint="#FFFFFF" /> 

     <EditText android:id="@+id/edt_rec_postcode" 
      android:layout_width="125dp" android:layout_height="wrap_content" 
      android:layout_toRightOf="@+id/edt_rec_state" android:ems="10" 
      android:hint="@string/postcode_hint" android:inputType="number" 
      android:padding="6dp" android:textColor="#FFFFFF" 
      android:textColorHint="#FFFFFF" /> 


     <EditText android:id="@+id/edt_rec_ctry" 
      android:layout_width="125dp" android:layout_height="wrap_content" 
      android:layout_alignParentRight="true" 
      android:layout_alignParentTop="true" android:ems="10" 
      android:focusable="false" android:hint="@string/country_hint" 
      android:inputType="text" android:padding="6dp" android:textColor="#FFFFFF" 
      android:textColorHint="#FFFFFF" /> 


    </RelativeLayout> 


</RelativeLayout> 

<ImageButton android:id="@id/btn_save" 
    android:layout_width="wrap_content" android:layout_height="wrap_content" 
    android:layout_alignParentRight="true" android:layout_alignParentTop="true" 
    android:layout_marginRight="14dp" android:contentDescription="@string/content" 
    android:src="@drawable/icon_save_iphone" /> 

<ImageButton android:id="@id/btn_cancel" 
    android:layout_width="wrap_content" android:layout_height="wrap_content" 
    android:layout_alignParentLeft="true" android:layout_alignParentTop="true" 
    android:layout_marginLeft="16dp" android:contentDescription="@string/content" 
    android:src="@drawable/icon_cancel_iphone" /> 

<Button android:id="@+id/btn_contacts" style="?android:attr/buttonStyleSmall" 
    android:layout_width="wrap_content" android:layout_height="wrap_content" 
    android:layout_alignBottom="@+id/txt_recipient" 
    android:layout_marginRight="23dp" android:layout_toLeftOf="@id/btn_save" 
    android:text="@string/addr_book" /> 
</RelativeLayout>

我只是做了一些變化，這不使每個Editext中的文本重疊，但是我必須爲addr_layout中的Editexts分配固定寬度。我不確定這樣做是否合適。另外我怎樣才能在相關佈局中平等地放置4個edittext？

來源

2014-02-11 user2688158

更換RelativeLayout的該id爲機器人：ID = 「@ + ID/addr_layout」與的LinearLayout和設定的取向的LinearLayout爲水平

android:orientation="horizontal"

更新：

替換下面的xml端口離子還原成原始的XML ...

<RelativeLayout 
    android:id="@+id/addr_layout" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_alignLeft="@+id/edt_rec_addr2" 
    android:layout_alignParentBottom="true" 
    android:layout_alignRight="@+id/edt_rec_addr2" 
    android:layout_marginBottom="16dp" 
    android:background="@drawable/border_email" > 

    <EditText 
     android:id="@+id/edt_rec_city" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:ems="10" 
     android:hint="@string/city_hint" 
     android:inputType="text" 
     android:padding="6dp" 
     android:textColor="#FFFFFF" 
     android:textColorHint="#FFFFFF" /> 

    <EditText 
     android:id="@+id/edt_rec_state" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_toRightOf="@+id/edt_rec_city" 
     android:layout_alignParentLeft="true" 
     android:layout_alignParentTop="true" 
     android:layout_marginLeft="86dp" 
     android:ems="10" 
     android:hint="@string/state_hint" 
     android:inputType="text" 
     android:padding="6dp" 
     android:textColor="#FFFFFF" 
     android:textColorHint="#FFFFFF" /> 

    <EditText 
     android:id="@+id/edt_rec_ctry" 
     android:layout_width="150dp" 
     android:layout_height="wrap_content" 
     android:layout_toRightOf="@+id/edt_rec_state" 
     android:layout_alignParentRight="true" 
     android:layout_alignParentTop="true" 
     android:ems="10" 
     android:focusable="false" 
     android:hint="@string/country_hint" 
     android:inputType="text" 
     android:padding="6dp" 
     android:textColor="#FFFFFF" 
     android:textColorHint="#FFFFFF" /> 

    <EditText 
     android:id="@+id/edt_rec_postcode" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_toRightOf="@+id/edt_rec_ctry" 
     android:layout_alignParentRight="true" 
     android:layout_alignParentTop="true" 
     android:layout_marginRight="92dp" 
     android:ems="10" 
     android:hint="@string/postcode_hint" 
     android:inputType="number" 
     android:padding="6dp" 
     android:textColor="#FFFFFF" 
     android:textColorHint="#FFFFFF" /> 
</RelativeLayout>

來源

2014-02-11 03:29:50

如何適應城市，州，pocode和國家坐在彼此旁邊的EditTexts。當我使用linearlayout時，我必須爲它們分配固定寬度。但是仍然有國家在外面，並且在Eclipse的圖形佈局中不可見 – user2688158

忘記** LinearLayout **。由於您使用的是** RelativeLayout **，因此您可以使用** android：layout_toRightOf **屬性，以便字段不會相互重疊。 –

我做了更改，現在它們不會相互重疊。但是我必須爲它們中的每一個指定一個固定的寬度。我不確定它是否是好的，並且會在各種設備上保持一致。另外如何平均分配4個editexts？ – user2688158

// try this way 
<?xml version="1.0" encoding="utf-8"?> 
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:padding="10dp" 
    android:orientation="vertical" > 
    <LinearLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:orientation="vertical" > 

     <LinearLayout 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:gravity="center" 
      android:padding="5dp" 
      android:background="@drawable/top_bar"> 

      <ImageButton android:id="@id/btn_cancel" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:contentDescription="@string/content" 
       android:src="@drawable/icon_cancel_iphone" /> 

      <LinearLayout 
       android:layout_width="0dp" 
       android:layout_height="wrap_content" 
       android:gravity="right|center_vertical" 
       android:layout_marginLeft="5dp" 
       android:layout_weight="1"> 
       <TextView android:id="@+id/txt_recipient" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:text="@string/text_recipient" 
        android:textColor="#FFFFFF" 
        android:textSize="16sp" /> 

       <Button android:id="@+id/btn_contacts" 
        style="?android:attr/buttonStyleSmall" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_marginLeft="5dp" 
        android:text="@string/addr_book" /> 
      </LinearLayout> 
      <ImageButton android:id="@id/btn_save" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_marginLeft="5dp" 
       android:contentDescription="@string/content" 
       android:src="@drawable/icon_save_iphone" /> 

     </LinearLayout> 

     <EditText android:id="@+id/edt_rec_name" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:layout_marginTop="10dp" 
      android:background="@drawable/border_email" 
      android:ems="10" 
      android:hint="@string/name_hint" 
      android:inputType="text" 
      android:padding="6dp" 
      android:textColor="#FFFFFF" 
      android:textColorHint="#FFFFFF" /> 

     <EditText android:id="@+id/edt_rec_addr1" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:layout_marginTop="10dp" 
      android:background="@drawable/border_email" 
      android:ems="10" 
      android:hint="@string/addr1_hint" 
      android:inputType="text" 
      android:padding="6dp" 
      android:textColor="#FFFFFF" 
      android:textColorHint="#FFFFFF" /> 

     <EditText android:id="@+id/edt_rec_addr2" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:layout_marginTop="10dp" 
      android:background="@drawable/border_email" 
      android:ems="10" 
      android:hint="@string/addr2_hint" 
      android:inputType="text" 
      android:padding="6dp" 
      android:textColor="#FFFFFF" 
      android:textColorHint="#FFFFFF" /> 

     <LinearLayout 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:layout_marginTop="10dp"> 
      <EditText android:id="@+id/edt_rec_city" 
       android:layout_width="0dp" 
       android:layout_weight="1" 
       android:layout_height="wrap_content" 
       android:ems="10" 
       android:hint="@string/city_hint" android:inputType="text" 
       android:padding="6dp" 
       android:textColor="#FFFFFF" 
       android:textColorHint="#FFFFFF" /> 

      <EditText android:id="@+id/edt_rec_state" 
       android:layout_width="0dp" 
       android:layout_weight="1" 
       android:layout_height="wrap_content" 
       android:ems="10" 
       android:hint="@string/state_hint" 
       android:inputType="text" 
       android:layout_marginRight="5dp" 
       android:gravity="center" 
       android:padding="6dp" 
       android:textColor="#FFFFFF" 
       android:textColorHint="#FFFFFF" /> 


      <EditText android:id="@+id/edt_rec_ctry" 
       android:layout_width="0dp" 
       android:layout_weight="1" 
       android:layout_height="wrap_content" 
       android:ems="10" 
       android:focusable="false" 
       android:layout_marginRight="5dp" 
       android:gravity="center" 
       android:hint="@string/country_hint" 
       android:inputType="text" 
       android:padding="6dp" 
       android:textColor="#FFFFFF" 
       android:textColorHint="#FFFFFF" /> 

      <EditText android:id="@+id/edt_rec_postcode" 
       android:layout_width="0dp" 
       android:layout_weight="1" 
       android:layout_height="wrap_content" 
       android:ems="10" 
       android:hint="@string/postcode_hint" 
       android:inputType="number" 
       android:layout_marginRight="5dp" 
       android:gravity="center" 
       android:padding="6dp" 
       android:textColor="#FFFFFF" 
       android:textColorHint="#FFFFFF" /> 
     </LinearLayout> 
    </LinearLayout> 
</ScrollView>

來源

2014-02-11 04:15:58

是不是使用比RelativeLayout更貴的很多線性佈局？另外爲什麼需要ScrollView？ – user2688158

Nop !!!LinearLayout很容易處理您的需求，我把它當作父母使用ScrollView，如果任何小型設備的佈局工作正常...... –

代替lower Relative Layout u可以使用Linear Layout(Horizontal)與android:weight屬性爲每個EditText，要是你給相同的權重爲每個孩子的孩子會從父母的佈局佔據相同的空間

代碼示例

<LinearLayout 
     android:id="@+id/addr_layout" 
     android:layout_width="fill_parent" 
     android:layout_height="wrap_content" 
     android:layout_alignLeft="@+id/edt_rec_addr2" 
     android:layout_alignParentBottom="true"     
     android:orientation="horizontal" 
     android:layout_alignRight="@+id/edt_rec_addr2" 
     android:layout_marginBottom="16dp" 
     android:background="@drawable/border_email"> 

     <EditText android:id="@+id/edt_rec_city" 
      android:layout_width="fill_parent" 
      android:layout_height="wrap_content" 
      android:weight="1" 
      android:ems="10" 
      android:hint="@string/city_hint" 
      android:inputType="text" 
      android:padding="6dp" 
      android:textColor="#FFFFFF" 
      android:layout_marginLeft="10dp" 
      android:textColorHint="#FFFFFF" /> 

     <EditText android:id="@+id/edt_rec_state" 
      android:layout_width="fill_parent" 
      android:layout_height="wrap_content" 
      android:ems="10" 
      android:weight="1" 
      android:hint="@string/state_hint" 
      android:inputType="text" 
      android:padding="6dp" 
      android:textColor="#FFFFFF" 
      android:textColorHint="#FFFFFF" 
      android:layout_marginLeft="10dp" /> 

     <EditText android:id="@+id/edt_rec_postcode" 
      android:layout_width="fill_parent" 
      android:layout_height="wrap_content" 
      android:weight="1" 
      android:ems="10" 
      android:hint="@string/postcode_hint" 
      android:inputType="number" 
      android:padding="6dp" 
      android:textColor="#FFFFFF" 
      android:textColorHint="#FFFFFF" 
      android:layout_marginLeft="10dp" /> 


     <EditText android:id="@+id/edt_rec_ctry" 
      android:layout_width="fill_parent" 
      android:layout_height="wrap_content" 
      android:layout_marginLeft="10dp" 
      android:layout_marginRight="10dp" 
      android:weight="1" 
      android:ems="10" 
      android:focusable="false" 
      android:hint="@string/country_hint" 
      android:inputType="text" 
      android:padding="6dp" 
      android:textColor="#FFFFFF" 
      android:textColorHint="#FFFFFF" /> 


</LinearLayout>

來源

2014-02-11 04:47:48 kId

如何重構佈局以使其更好？

回答

相關問題