Android: какой макет использовать для набора видов с различной ориентацией

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>

Проблема здесь в том, что она идет справа налево, и 1-й текст редактирования исчезает.Также, как я добавляю пробелы между 2-м текстом редактирования и последней кнопкой

Answer 1

Попробуйте использовать 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 2

отметьте это

<?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 3

вам нужно использовать Relative layout, и это даст вам свободу запускать ваше приложение в любом режиме с любым устройством разрешения. Используйте патч nine 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 4

Я добился этого с помощью tableLayout. TableLayout дает вам свободу в разработке макета без ссылки на какое-либо другое представление, которое может измениться, поэтому я предпочитаю его над Relative Layout. Это я добавил, если кто-то хочет макет через 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>