Question

我想为以下要求设计布局

   |-------------------------| 
   |Image |      Text View 1 |
   | view |                  |
   |-------   <  Edit Text 2>|
   |                         |
   | <Text view 2>           |
   |                         |
   | <Edit text View 2>      |
   |                         |
   |                         |
   |   |Button view|         |
   |                         |
    --------------------------

我的尝试：

<?xml version="1.0" encoding="utf-8"?>
<TableLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="fill_parent" 
    android:layout_width="fill_parent"
    android:stretchColumns="1"
    android:background="#000024">
    <TableRow android:baselineAligned="false"  android:id="@+id/tableRow1" > 

        <ImageView android:layout_width="wrap_content"
            android:layout_height="wrap_content" android:layout_gravity="left"
            android:padding="2dip" android:src="@drawable/icon" 
        />

        <TextView android:padding="2dip" android:layout_gravity="fill_horizontal"
                  android:layout_height="wrap_content" android:layout_width="wrap_content"
                android:text="Trip Name"
         />

         <EditText android:layout_gravity="fill_horizontal"
                  android:layout_gravity="centre"
                   android:id="@+id/txtUserName" 
                   android:width="200px"
          />
    </TableRow> 

    <TableRow android:baselineAligned="false">

     <TextView android:padding="2dip" android:layout_gravity="fill_horizontal"
                android:text="Description"
      />
    </TableRow> 

    <TableRow android:baselineAligned="false"> 
      <EditText 
            android:layout_width="150px" android:id="@+id/tripDesc" 
            android:password="true" 
       />
    </TableRow>

    <TableRow android:baselineAligned="false">>
        <Button 
            android:id="@+id/buttonSave" 
            android:text="Save" />
    </TableRow>
</TableLayout>

这里的问题是极右翼，第一个编辑文本消失了。我也是如何在第二个编辑文本和最后一个按钮之间添加一些空格

Answer 1

您需要使用Relative layout，这样您就可以在任何模式下使用任何分辨率设备自由运行您的应用。使用九个png补丁可以更自由地使用应用程序。

参考这些文档：

http://developer.android.com/resources/articles/layout-tricks-efficiency.html

http://developer.android.com/reference/android/widget/RelativeLayout.html

http://developer.android.com/guide/developing/tools/draw9patch.html

http://developer.android.com/guide/topics/graphics/2d-graphics.html#nine-patch

Answer 2

尝试使用RelativeLayout。它可以帮助您定义对象之间的关系。您可以为每个对象使用以下属性： layout_toRightOf layout_toLeftOf layout_above layout_below 等（有关所有属性，请参阅http://developer.android.com/reference/android/widget/RelativeLayout.LayoutParams.html）通过这种方式，您可以相互描述对象的位置。例如

        <RelativeLayout android:id="@+id/minutesLayout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <org.croncalc.uicomponents.MyPicker 
                    android:id="@+id/minutepicker"
            croncalc:maxnumber="60"
            croncalc:minnumber="1"
            croncalc:step="5"
            croncalc:cycle="true"
            android:layout_height="wrap_content">
        </org.croncalc.uicomponents.MyPicker>
        <TextView android:layout_height="wrap_content" 
            android:id="@+id/minuteslabel" 
            android:text="@string/minlabel"                 
            android:layout_width="wrap_content" 
            android:layout_toRightOf="@+id/minutepicker">
        </TextView>
    </RelativeLayout>

正如您所看到的，TextView具有属性layout_toRightOf，并且它指定TextView对象必须放在组件MyPicker的右侧。你也可以检查AbsoluteLayout。

在这个例子中我有2个组件，你可以看到textView有一个属性android：layout_toRightOf，我用它指定TextView左边的对象

Answer 3

检查这个

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

<RelativeLayout android:layout_height="wrap_content"
    android:layout_width="fill_parent" android:id="@+id/relative1">
    <ImageView android:layout_width="wrap_content"
        android:layout_height="wrap_content" android:padding="2dip"
        android:src="@drawable/icon" android:id="@+id/imgview" />

    <TextView android:padding="2dip" android:layout_height="wrap_content"
        android:layout_width="wrap_content" android:text="Trip Name"
        android:layout_toRightOf="@id/imgview" android:id="@+id/trip_name_txt"
        android:layout_alignRight="@id/relative1" />

    <EditText android:id="@+id/txtUserName" android:layout_width="200dp"
        android:layout_height="wrap_content" android:layout_toRightOf="@id/imgview"
        android:layout_below="@id/trip_name_txt" />
</RelativeLayout>

<RelativeLayout android:layout_height="wrap_content"
    android:layout_width="fill_parent" android:id="@+id/relative2"
    android:layout_below="@id/relative1" android:layout_marginTop="10dp">
    <TextView android:layout_marginLeft="20dp"
        android:layout_marginTop="5dp" android:layout_width="fill_parent"
        android:layout_height="wrap_content" android:text="Description"
        android:textSize="15dp" />
</RelativeLayout>
<RelativeLayout android:layout_height="wrap_content"
    android:layout_width="fill_parent" android:id="@+id/relative3"
    android:layout_below="@id/relative2" android:layout_marginTop="10dp">
    <EditText android:layout_width="150dp" android:layout_height="wrap_content"
        android:id="@+id/tripDesc" android:layout_marginLeft="20dp"
        android:password="true" />
</RelativeLayout>
<LinearLayout android:layout_height="wrap_content"
    android:layout_width="fill_parent" android:layout_below="@id/relative3"
    android:gravity="center_horizontal" android:layout_marginTop="20dp">
    <Button android:id="@+id/buttonSave" android:layout_width="wrap_content"
        android:layout_height="wrap_content" android:text="Save" />
</LinearLayout>
 </RelativeLayout>

Answer 4

我使用tableLayout实现了这一点。 TableLayout让您自由地设计布局而不参考任何可能改变的视图，因此我比相对布局更喜欢它。如果有人想通过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:stretchColumns="1" android:background="#000024">

    <TableRow android:baselineAligned="false" android:id="@+id/tableRow1">
      <ImageView android:layout_width="wrap_content" android:layout_weight="1"
        android:layout_height="wrap_content" android:padding="10dip"
        android:src="@drawable/camera_outline" android:id="@+id/imgview" />

       <LinearLayout android:orientation="vertical"
            android:layout_width="match_parent" 
            android:layout_height="match_parent">

            <TextView android:padding="10dip" android:layout_marginLeft="5dp"
                 android:layout_height="wrap_content"
                 android:layout_width="wrap_content" android:text="Trip Name"
                 android:textStyle="bold" android:id="@+id/tripEdit1"
            />

            <EditText android:id="@+id/txtUserName"
                android:layout_width="180dp" android:layout_height="wrap_content"
                android:layout_marginRight="10dp"
            />

       </LinearLayout>

    </TableRow>

    <TableRow android:baselineAligned="false" android:id="@+id/tableRow2">
        <TextView android:layout_marginLeft="20dp"
             android:layout_marginTop="5dp" android:layout_width="fill_parent"
             android:layout_height="wrap_content" android:text="Description"
             android:textStyle="bold" android:textSize="15dp" />    
    </TableRow>

    <TableRow android:baselineAligned="false" android:id="@+id/tableRow3">
        <EditText android:layout_marginLeft="20dp" android:layout_marginTop="10dp" 
        android:layout_width="290dp" android:id="@+id/tripDesc"
        />  
    </TableRow>

      <TableRow android:baselineAligned="false">

      <LinearLayout android:layout_height="wrap_content"
            android:layout_width="match_parent" 
            android:layout_marginLeft="20dp" 
            android:gravity="center_horizontal" android:layout_marginTop="20dp">

        <Button android:text="Save"
            android:id="@+id/save" 
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="0.5"
            android:layout_span="1"
            android:onClick="saveTrip"
            >
        </Button>

        <Button android:text="Cancel"
            android:id="@+id/cancel" 
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_span="1"
            android:layout_weight="0.5"
            android:onClick="cancelTrip"
            >
        </Button>

    </TableRow>

</TableLayout>

Android：用于具有不同方向的视图集的布局

4 个答案: