【Android 开发教程】重新布局

本章节翻译自《Beginning-Android-4-Application-Development》，如有翻译不当的地方，敬请指出。

原书购买地址http://www.amazon.com/Beginning-Android-4-Application-Development/dp/1118199545/

如果想根据屏幕的方向自定义UI，除了把views锚定在屏幕的四周（上一节讲过"锚定"视图），更简单的办法就是创建一个独立的res/layout文件夹，它包含了不同屏幕方向下的UI布局。如果想要支持landscape横屏模式，那么就可以在res文件夹下面创建一个layout-land文件夹（land代表landscape）。

基本上，在layout文件夹下面的main.xml定义了在portrait竖屏模式下activity的布局。但在layyout-land文件夹下面的main.xml定义了横屏模式下的UI布局。

1. 在layout文件夹下面的main.xml文件：

[html] view plain copy

1. <pre name="code" class="html"><?xml version="1.0" encoding="utf-8"?>  

[html] view plain copy

1. <RelativeLayout  
2.     android:layout_width="fill_parent"  
3.     android:layout_height="fill_parent"  
4.     xmlns:android="http://schemas.android.com/apk/res/android">  
5.     <Button  
6.         android:id="@+id/button1"  
7.         android:layout_width="wrap_content"  
8.         android:layout_height="wrap_content"  
9.         android:text="Top Left"  
10.         android:layout_alignParentLeft="true"  
11.         android:layout_alignParentTop="true" />  
12.     <Button  
13.         android:id="@+id/button2"  
14.         android:layout_width="wrap_content"  
15.         android:layout_height="wrap_content"  
16.         android:text="Top Right"  
17.         android:layout_alignParentTop="true"  
18.         android:layout_alignParentRight="true" />  
19.     <Button  
20.         android:id="@+id/button3"  
21.         android:layout_width="wrap_content"  
22.         android:layout_height="wrap_content"  
23.         android:text="Bottom Left"  
24.         android:layout_alignParentLeft="true"  
25.         android:layout_alignParentBottom="true" />  
26.     <Button  
27.         android:id="@+id/button4"  
28.         android:layout_width="wrap_content"  
29.         android:layout_height="wrap_content"  
30.         android:text="Bottom Right"  
31.         android:layout_alignParentRight="true"  
32.         android:layout_alignParentBottom="true" />  
33.     <Button  
34.         android:id="@+id/button5"  
35.         android:layout_width="fill_parent"  
36.         android:layout_height="wrap_content"  
37.         android:text="Middle"  
38.         android:layout_centerVertical="true"  
39.         android:layout_centerHorizontal="true" />  
40. </RelativeLayout>  

2、在layout-land文件夹下面的main.xml文件，注意，它比上面的代码多了两个Button视图：

[html] view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <RelativeLayout  
3.     android:layout_width="fill_parent"  
4.     android:layout_height="fill_parent"  
5.     xmlns:android="http://schemas.android.com/apk/res/android">  
6.     <Button  
7.         android:id="@+id/button1"  
8.         android:layout_width="wrap_content"  
9.         android:layout_height="wrap_content"  
10.         android:text="Top Left"  
11.         android:layout_alignParentLeft="true"  
12.         android:layout_alignParentTop="true" />  
13.     <Button  
14.         android:id="@+id/button2"  
15.         android:layout_width="wrap_content"  
16.         android:layout_height="wrap_content"  
17.         android:text="Top Right"  
18.         android:layout_alignParentTop="true"  
19.         android:layout_alignParentRight="true" />  
20.     <Button  
21.         android:id="@+id/button3"  
22.         android:layout_width="wrap_content"  
23.         android:layout_height="wrap_content"  
24.         android:text="Bottom Left"  
25.         android:layout_alignParentLeft="true"  
26.         android:layout_alignParentBottom="true" />  
27.     <Button  
28.         android:id="@+id/button4"  
29.         android:layout_width="wrap_content"  
30.         android:layout_height="wrap_content"  
31.         android:text="Bottom Right"  
32.         android:layout_alignParentRight="true"  
33.         android:layout_alignParentBottom="true" />  
34.     <Button  
35.         android:id="@+id/button5"  
36.         android:layout_width="fill_parent"  
37.         android:layout_height="wrap_content"  
38.         android:text="Middle"  
39.         android:layout_centerVertical="true"  
40.         android:layout_centerHorizontal="true" />  
41.     <!-- 新增加的两个Button -->  
42.     <Button  
43.         android:id="@+id/button6"  
44.         android:layout_width="180px"  
45.         android:layout_height="wrap_content"  
46.         android:text="Top Middle"  
47.         android:layout_centerVertical="true"  
48.         android:layout_centerHorizontal="true"  
49.         android:layout_alignParentTop="true" />  
50.     <Button  
51.         android:id="@+id/button7"  
52.         android:layout_width="180px"  
53.         android:layout_height="wrap_content"  
54.         android:text="Bottom Middle"  
55.         android:layout_centerVertical="true"  
56.         android:layout_centerHorizontal="true"  
57.         android:layout_alignParentBottom="true" />  
58. </RelativeLayout>  

3. 当这个activity在竖屏模式下的时候，只显示5个按钮。

4. 当在横屏模式下，将会显示7个按钮，这也就说明了，在不同的屏幕方向的模式下，将会加载不同的布局文件。

5. 使用这种方法，当设备的方向改变，Android会自动地加载合适的布局文件，去适应屏幕的方向。