如何重构布局以使其更好？

问题描述：

在我的应用程序中，我有一个表单，用户输入他/她的姓名和地址详细信息。我已经创建了如图所示的布局文件。它看起来相当不错，但我希望它看起来更好，而且如果这些值足够长，则在城市，州，邮政编码和国家/地区的值相互重叠时。如何重构布局以使其更好？

我一直在尝试使布局更好，但现在我需要一些帮助，因为我没有太多的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？

答

更换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>

如何适应城市，州，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>

是不是使用比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>

如何重构布局以使其更好？

相关推荐