Create a Landscape Layout
In the emulator, with LunchList running and showing the detail form, press <Ctrl>-<F12>. This simulates opening and closing the keyboard, causing the screen to rotate to landscape and portrait, respectively. Our current layout is not very good in landscape orientation:The LunchList in landscape orientation
So, let us come up with an alternative layout that will work better.
First, create a LunchList/res/layout-land/ directory in your project. This will hold layout files that we wish to use when the device (or emulator) is in the landscape orientation.
Then, copy LunchList/res/layout/main.xml into LunchList/res/layout-land/, so we can start with the same layout we were using for portrait mode.
Then, change the layout to look like this:
<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TabWidget android:id="@android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
<FrameLayout android:id="@android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<ListView android:id="@+id/restaurants"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
<TableLayout android:id="@+id/details"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:stretchColumns="1,3"
android:paddingTop="4dip"
>
<TableRow>
<TextView
android:text="Name:"
android:paddingRight="2dip"
/>
<EditText
android:id="@+id/name"
android:maxWidth="140sp"
/>
<TextView
android:text="Address:"
android:paddingLeft="2dip"
android:paddingRight="2dip"
/>
<EditText
android:id="@+id/addr"
android:maxWidth="140sp"
/>
</TableRow>
<TableRow>
<TextView android:text="Type:" />
<RadioGroup android:id="@+id/types">
<RadioButton android:id="@+id/take_out"
android:text="Take-Out"
/>
<RadioButton android:id="@+id/sit_down"
android:text="Sit-Down"
/>
<RadioButton android:id="@+id/delivery"
android:text="Delivery"
/>
</RadioGroup>
<TextView
android:text="Notes:"
android:paddingLeft="2dip"
/>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
>
<EditText android:id="@+id/notes"
android:singleLine="false"
android:gravity="top"
android:lines="3"
android:scrollHorizontally="false"
android:maxLines="3"
android:maxWidth="140sp"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
<Button android:id="@+id/save"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Save"
/>
</LinearLayout>
</TableRow>
</TableLayout>
</FrameLayout>
</LinearLayout>
</TabHost>
In this revised layout, we:
=> Switched to four columns in our table, with columns #1 and #3 as stretchable
=> Put the name and address labels and fields on the same row
=> Put the type, notes, and Save button on the same row, with the notes and Save button stacked via a LinearLayout
=> Made the notes three lines instead of two, since we have the room
=> Fixed the maximum width of the EditText widgets to 140 scaled pixels (sp), so they do not automatically grow outlandishly large if we type a lot
=> Added a bit of padding in places to make the placement of the labels and fields look a bit better
If you rebuild and reinstall the application, then run it in landscape mode, you will see a form that looks like this:
The LunchList in landscape orientation, revised
Note that we did not create a LunchList/res/layout-land/ edition of our row layout (row.xml). Android, upon not finding one in LunchList/res/layoutland/, will fall back to the one in LunchList/res/layout/. Since we do not really need our row to change, we can leave it as-is.
Note that when you change the screen orientation, your existing restaurants will vanish. That is because we are not persisting them anywhere, and rotating the screen by default destroys and recreates the activity.


No comments:
Post a Comment