定义布局答案

【问题标题】：Defining layout定义布局
【发布时间】：2012-07-13 17:00:08
【问题描述】：

下面是我创建带有标题“在此处输入电话号码”的文本框的 xml 代码。我有一个编辑框，它可以获取电话号码和一个按钮。问题是文本框和编辑框相互重叠。如何解决这个问题。

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <TextView android:id="@+id/textLabel"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:text="Enter number to dial"
        />
    <EditText android:id="@+id/phoneNumber"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        />
     <Button android:id="@+id/callButton"
     android:layout_width="fill_parent"
     android:layout_height="wrap_content"
     android:layout_alignParentBottom="true"
     android:text="Show Dialer"
     />


</RelativeLayout>

【问题讨论】：

如果您的应用面向 API 级别 8+，您还应该始终使用 match_parent 而不是 fill_parent。 Fill_parent 在 API 级别 8 中重命名为 match_parent。认为两者在功能上相同，match_parent 现在是标准。

标签： android layout text

【解决方案1】：

如果您使用 Eclispe 进行开发，只需切换到图形布局选项，您可以在其中拖动项目并定位它们[这会将上面答案中的代码添加到您的 XML]。查看this 视频以了解RelativeLayout 以及如何使用它。 [视频来源：Google I/O 2012]

【讨论】：

【解决方案2】：

当您有想要的项目相互交叉时，最好使用 TableLayout。我相信其他人有最喜欢的方式，但这是我的。

<?xml version="1.0" encoding="utf-8"?>
     <TableLayout 
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_height="match_parent" 
        android:layout_width="match_parent"
        android:background="#000044">
        <TableRow> 
            <TextView 
                android:text="Name:"
                android:width ="120px"
                />
            <EditText 
                android:id="@+id/someUserName" 
                android:width="200px" />
        </TableRow> 
        <TableRow>
            <TextView 
                android:text="Phone:"
                />
            <EditText 
                android:id="@+id/somePhone"  
                />
        </TableRow>
       <TableRow>
            <TextView 
                android:text="Address:"
                />
            <EditText 
                android:id="@+id/someAddress"  
                />
        </TableRow>
        <TableRow>
            <Button 
                android:id="@+id/buttonToClick" 
                android:text="Go Do Something Cool" />
        </TableRow>
    </TableLayout>

如果您希望将所有三个项目放在一行中，请执行此操作

<?xml version="1.0" encoding="utf-8"?>
 <TableLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="match_parent" 
    android:layout_width="match_parent"
    android:background="#000044">

   <TableRow>
        <TextView 
            android:text="Call Number"
            android:paddingRight="50px"
            />
        <EditText 
            android:id="@+id/someNumber" 
            android:width ="120px"
            android:paddingLeft="10px"
            />

        <Button
            android:id="@+id/buttonToClick"
            android:text="Call" />

    </TableRow>
</TableLayout>

【讨论】：

【解决方案3】：

使用 LinearLayout 而不是具有水平或垂直方向的 RelativeLayout。 LinearLayout 自动以线性方式排列内容。

【讨论】：

【解决方案4】：

您应该了解更多关于各种LayoutParams of RelativeLayout 的信息。下面的代码使用了其中的一些，也避免了重叠问题。

<TextView android:id="@+id/textLabel"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:text="Enter number to dial"
    />
<EditText android:id="@+id/phoneNumber"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_toRightOf="@id/textLabel"
    android:layout_alignParentRight="true"
    android:layout_marginLeft="8dp"
    />
<Button android:id="@+id/callButton"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:layout_below="@id/textLabel"
     android:layout_marginTop="8dp"
     android:text="Show Dialer"
     />

【讨论】：

【解决方案5】：

使用 android:layout_below="@+id/textLabel" 属性，在 EditText 中如下：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <TextView
        android:id="@+id/textLabel"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:text="Enter number to dial" />

    <EditText
        android:id="@+id/phoneNumber"
        android:layout_below="@+id/textLabel"  //  <--- MUST  Add  This
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:hint="Now phoneNumber Will Appear"  //  <---  See  This
        android:layout_alignParentRight="true" />

    <Button
        android:id="@+id/callButton"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:text="Show Dialer" />

</RelativeLayout>

【讨论】：