Android 程式開發:(六)適應方向 —— 6.3 重新佈局

如果想根據屏幕的方向自定義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 plaincopy
<pre name="code" class="html"><?xml version="1.0" encoding="utf-8"?> 
[html] view plaincopy
<RelativeLayout 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent" 
    xmlns:android="http://schemas.android.com/apk/res/android"> 
    <Button 
        android:id="@+id/button1" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:text="Top Left" 
        android:layout_alignParentLeft="true" 
        android:layout_alignParentTop="true" /> 
    <Button 
        android:id="@+id/button2" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:text="Top Right" 
        android:layout_alignParentTop="true" 
        android:layout_alignParentRight="true" /> 
    <Button 
        android:id="@+id/button3" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:text="Bottom Left" 
        android:layout_alignParentLeft="true" 
        android:layout_alignParentBottom="true" /> 
    <Button 
        android:id="@+id/button4" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:text="Bottom Right" 
        android:layout_alignParentRight="true" 
        android:layout_alignParentBottom="true" /> 
    <Button 
        android:id="@+id/button5" 
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content" 
        android:text="Middle" 
        android:layout_centerVertical="true" 
        android:layout_centerHorizontal="true" /> 
</RelativeLayout> 
2、在layout-land文件夾下面的main.xml文件,註意,它比上面的代碼多瞭兩個Button視圖:
[html] view plaincopy
<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent" 
    xmlns:android="http://schemas.android.com/apk/res/android"> 
    <Button 
        android:id="@+id/button1" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:text="Top Left" 
        android:layout_alignParentLeft="true" 
        android:layout_alignParentTop="true" /> 
    <Button 
        android:id="@+id/button2" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:text="Top Right" 
        android:layout_alignParentTop="true" 
        android:layout_alignParentRight="true" /> 
    <Button 
        android:id="@+id/button3" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:text="Bottom Left" 
        android:layout_alignParentLeft="true" 
        android:layout_alignParentBottom="true" /> 
    <Button 
        android:id="@+id/button4" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:text="Bottom Right" 
        android:layout_alignParentRight="true" 
        android:layout_alignParentBottom="true" /> 
    <Button 
        android:id="@+id/button5" 
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content" 
        android:text="Middle" 
        android:layout_centerVertical="true" 
        android:layout_centerHorizontal="true" /> 
    <!– 新增加的兩個Button –> 
    <Button 
        android:id="@+id/button6" 
        android:layout_width="180px" 
        android:layout_height="wrap_content" 
        android:text="Top Middle" 
        android:layout_centerVertical="true" 
        android:layout_centerHorizontal="true" 
        android:layout_alignParentTop="true" /> 
    <Button 
        android:id="@+id/button7" 
        android:layout_width="180px" 
        android:layout_height="wrap_content" 
        android:text="Bottom Middle" 
        android:layout_centerVertical="true" 
        android:layout_centerHorizontal="true" 
        android:layout_alignParentBottom="true" /> 
</RelativeLayout>    www.aiwalls.com

3、當這個activity在豎屏模式下的時候,隻顯示5個按鈕。

4、當在橫屏模式下,將會顯示7個按鈕,這也就說明瞭,在不同的屏幕方向的模式下,將會加載不同的佈局文件。

5、使用這種方法,當設備的方向改變,Android會自動地加載合適的佈局文件,去適應屏幕的方向

摘自 manoel的專欄

發佈留言