在相對布局中創建布局

Question

我需要創建這樣的layout但不會變得完美。

得到這個

需要這種方式

我正在使用RelativeLayout創建它，並且只需要在此創建。 我可以使用Linearlayout創建子布局，但這可以不使用任何子布局

這是我的代碼

<RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:padding="15dp">
      <TextView android:text="Title" android:textColor="#ffffff" android:layout_width="wrap_content"
          android:layout_height="wrap_content" android:textSize="18dp" android:padding="5dp"
          android:background="@drawable/tab_cyan" android:id="@+id/title_add_txt"/>
      <EditText android:hint="Address Title" android:layout_width="match_parent" android:layout_height="wrap_content"
           android:id="@+id/address_title" android:layout_toRightOf="@id/title_add_txt"/>
       <TextView android:text="Address" android:textColor="#ffffffff" android:layout_width="wrap_content"
           android:layout_height="wrap_content" android:textSize="18dp" android:padding="5dp"
           android:background="@drawable/tab_cyan" android:layout_below="@id/title_add_txt"
           android:id="@+id/address_txt"/>
       <EditText android:hint="Address" android:layout_width="match_parent" android:layout_height="wrap_content"
           android:id="@+id/address" android:layout_below="@id/address_title" android:layout_toRightOf="@id/address_txt"/>
</RelativeLayout>

Answer 1

看來你的TextView和EditText的大小不一樣。 如果你可以使它們大小相同，它們可能會很好地對齊。

提供您的觀點大小，最好的賭注可能是堅持您的子LinearLayouts 。

Answer 2

我無法測試它，但看看這是否有幫助：

<RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:padding="15dp">
    <TextView android:text="Title" android:textColor="#ffffff" android:layout_width="wrap_content"
        android:layout_height="wrap_content" android:textSize="18dp" android:padding="5dp"
        android:background="@drawable/tab_cyan" android:id="@+id/title_add_txt"/>
    <EditText android:hint="Address Title" android:layout_width="match_parent" android:layout_height="wrap_content"
        android:id="@+id/address_title" android:layout_toRightOf="@id/title_add_txt"/>
    <TextView android:text="Address" android:textColor="#ffffffff" android:layout_width="wrap_content"
        android:layout_height="wrap_content" android:textSize="18dp" android:padding="5dp"
        android:background="@drawable/tab_cyan" android:layout_below="@id/address_title"
        android:id="@+id/address_txt"/>
    <EditText android:hint="Address" android:layout_width="match_parent" android:layout_height="wrap_content"
        android:id="@+id/address" android:layout_alignTop="@id/address_txt" android:layout_alignLeft="@id/address_title"/>
</RelativeLayout>

我所做的如下：在address_txt下面對齊address_title （而不是在title_add_txt下面）。 我也改變了排列address對齊到頂部address_txt和左address_title （這可能會以其他方式來解決太）。

廣告我說：我無法驗證它，但你至少可以嘗試一下。

Answer 3

layout_alignBaseline應解決您的問題 - 它在同一行上對齊視圖的文本基線：

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="15dp" >

    <TextView
        android:id="@+id/title_add_txt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#5500ff00"
        android:padding="5dp"
        android:text="Title"
        android:textColor="#ffffff"
        android:textSize="18dp" />

    <EditText
        android:id="@+id/address_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/title_add_txt"
        android:layout_alignBaseline="@id/title_add_txt"
        android:hint="Address Title" />

    <TextView
        android:id="@+id/address_txt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/title_add_txt"
        android:layout_marginTop="10dp"
        android:background="#5500ff00"
        android:padding="5dp"
        android:text="Address"
        android:textColor="#ffffffff"
        android:textSize="18dp" />

    <EditText
        android:id="@+id/address"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/address_title"
        android:layout_toRightOf="@id/address_txt"
        android:layout_alignBaseline="@id/address_txt"
        android:hint="Address" />
</RelativeLayout>

我還在TextViews之間添加了邊距。 它看起來像 - 我沒有你的背景圖像所以EditTexts沒有正確對齊 - 如果TextViews具有相同的寬度，這將不是一個問題：

您可以使用EditText和TextViews的邊距來添加它們之間的必要空間。

Answer 4

我會將兩個相關控件（標簽和相應的輸入）包裝在LinearLayout並在TextViews上使用android:layout_centerVertical="true"設置。

這樣的事......

<RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:padding="15dp">
   <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal" >

      <TextView android:text="Title" android:textColor="#ffffff" android:layout_width="wrap_content"
          android:layout_height="wrap_content" android:textSize="18dp" android:padding="5dp"
          android:background="@drawable/tab_cyan" android:id="@+id/title_add_txt"
          android:layout_centerVertical="true" />
      <EditText android:hint="Address Title" android:layout_width="match_parent" android:layout_height="wrap_content"
           android:id="@+id/address_title" android:layout_toRightOf="@id/title_add_txt"/>
   </LinearLayout>
   <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal" >
       <TextView android:text="Address" android:textColor="#ffffffff" android:layout_width="wrap_content"
           android:layout_height="wrap_content" android:textSize="18dp" android:padding="5dp"
           android:background="@drawable/tab_cyan" android:layout_below="@id/title_add_txt"
           android:id="@+id/address_txt"
           android:layout_centerVertical="true"/>
       <EditText android:hint="Address" android:layout_width="match_parent" android:layout_height="wrap_content"
           android:id="@+id/address" android:layout_below="@id/address_title" android:layout_toRightOf="@id/address_txt"/>
   </LinearLayout>
</RelativeLayout>