Android軟件開發(fā)之盤點界面五大布局（十六）

有一個姑涼 · 發(fā)表于 2013-8-28 16:19

41006Android軟件開發(fā)之盤點界面五大布局

1.線性布局(LinearLayout)

      線性布局的形式可以分為兩種，第一種橫向線性布局第二種縱向線性布局，總而言之都是以線性的形式一個個排列出來的，純線性布局的缺點是很不方便修改控件的顯示位置，所以開發(fā)中經(jīng)常會以線性布局與相對布局嵌套的形式設(shè)置布局。

如圖所示使用了線性布局的水平方向與垂直方向，從圖中可以清晰的看出來所有控件都是按照線性的排列方式顯示出來的，這就是線性布局的特點。

設(shè)置線性布局為水平方向
android:orientation="horizontal"
設(shè)置線性布局為垂直方向
android:orientation="vertical"
設(shè)置正比例分配控件范圍
android:layout_weight="1"
設(shè)置控件顯示位置，這里為水平居中
android:gravity="center_horizontal"

在xml中我使用了LinearLayout 嵌套的方式配置了2個線性布局一個水平顯示一個垂直顯示。

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent"
      android:orientation="vertical"
      >
<LinearLayout
      android:layout_width="fill_parent"
      android:layout_height="fill_parent"
      android:orientation="horizontal"
      android:gravity="center_horizontal"
      android:layout_weight="2"
      >
      <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/jay"
      />

      <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="雨松MOMO"
            android:background="#FF0000"
            android:textColor="#000000"
      android:textSize="18dip"
      />
      <EditText
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="水平方向"
      />
</LinearLayout>

<LinearLayout
      android:layout_width="fill_parent"
      android:layout_height="fill_parent"
      android:orientation="vertical"
      android:layout_weight="1"
      >

      <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="雨松MOMO"
            android:background="#FF0000"
            android:textColor="#000000"
      android:textSize="18dip"
      />
      <EditText
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="垂直方向"
      />
      <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="雨松MOMO"
      />
      <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/image"
      />
</LinearLayout>
</LinearLayout>

復(fù)制代碼

2.相對布局(RelativeLayout)

相對布局是android布局中最為強大的，首先它可以設(shè)置的屬性是最多了，其次它可以做的事情也是最多的。android手機屏幕的分辨率五花八門所以為了考慮屏幕自適應(yīng)的情況所以在開發(fā)中建議大家都去使用相對布局它的坐標(biāo)取值范圍都是相對的所以使用它來做自適應(yīng)屏幕是正確的。

設(shè)置距父元素右對齊
android:layout_alignParentRight="true"
設(shè)置該控件在id為re_edit_0控件的下方
android:layout_below="@id/re_edit_0"
設(shè)置該控件在id為re_image_0控件的左邊
android:layout_toLeftOf="@id/re_iamge_0"
設(shè)置當(dāng)前控件與id為name控件的上方對齊
android:layout_alignTop="@id/name"
設(shè)置偏移的像素值
android:layout_marginRight="30dip"

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent"
      >
      <EditText
            android:id="@+id/re_edit_0"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="雨松MOMO"
            android:layout_alignParentRight="true"
      />
      <ImageView
            android:id="@+id/re_iamge_0"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/jay"
            android:layout_below="@id/re_edit_0"
            android:layout_alignParentRight="true"
      />
      <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#FF0000"
            android:text="努力學(xué)習(xí)"
            android:textColor="#000000"
      android:textSize="18dip"
            android:layout_toLeftOf="@id/re_iamge_0"
      />
      <EditText
            android:id="@+id/re_edit_1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="雨松MOMO"
            android:layout_alignParentBOTTom="true"
      />
      <ImageView
            android:id="@+id/re_iamge_1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/image"
            android:layout_above="@id/re_edit_1"
      />
      <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#FF0000"
            android:text="努力工作"
            android:textColor="#000000"
      android:textSize="18dip"
            android:layout_toRightOf="@id/re_iamge_1"
            android:layout_above="@id/re_edit_1"
      />
</RelativeLayout>

復(fù)制代碼

3.幀布局(FrameLayout)

原理是在控件中繪制任何一個控件都可以被后繪制的控件覆蓋，最后繪制的控件會蓋住之前的控件。如圖所示界面中先繪制的ImageView 然后在繪制的TextView和EditView 所以后者就覆蓋在了前者上面。

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
      xmlns:android="http://schemas.android.com/apk/res/android"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent">
      <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/g"
      />
      <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="雨松MOMO"
            android:background="#FF0000"
            android:textColor="#000000"
      android:textSize="18dip"
      />
      <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/image"
            android:layout_gravity="bottom"
      />
      <EditText
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="快樂生活每一天喔"
      android:layout_gravity="bottom"
      />
</FrameLayout>

復(fù)制代碼

4.絕對布局(AbsoluteLayout)

使用絕對布局可以設(shè)置任意控件的在屏幕中 X Y 坐標(biāo)點，和幀布局一樣后繪制的控件會覆蓋住之前繪制的控件，筆者不建議大家使用絕對布局還是那句話因為android的手機分辨率五花八門所以使用絕對布局的話在其它分辨率的手機上就無法正常的顯示了。

設(shè)置控件的顯示坐標(biāo)點

android:layout_x="50dip"
android:layout_y="30dip"

復(fù)制代碼

<?xml version="1.0" encoding="utf-8"?>

<AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent">
      <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/f"
            android:layout_x="100dip"
      android:layout_y="50dip"
      />
      <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="當(dāng)前坐標(biāo)點 x = 100dip y = 50 dip"
            android:background="#FFFFFF"
            android:textColor="#FF0000"
      android:textSize="18dip"
            android:layout_x="50dip"
      android:layout_y="30dip"
      />

      <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/h"
            android:layout_x="50dip"
      android:layout_y="300dip"
      />
      <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="當(dāng)前坐標(biāo)點 x = 50dip y = 300 dip"
            android:background="#FFFFFF"
            android:textColor="#FF0000"
      android:textSize="18dip"
         android:layout_x="30dip"
      android:layout_y="280dip"
      />
</AbsoluteLayout>

復(fù)制代碼

5.表格布局(TableLayout)

   在表格布局中可以設(shè)置TableRow 可以設(shè)置表格中每一行顯示的內(nèi)容以及位置，可以設(shè)置顯示的縮進，對齊的方式。

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
      <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/g"
            android:layout_gravity="center"
      />
<TableRow
      android:layout_width="wrap_content"
      android:layout_height="fill_parent"
      android:padding="10dip">
      <TextView
         android:text="姓名"
         android:gravity="left"
         />
      <TextView
         android:text="電話"
         android:gravity="right"/>
</TableRow>

<View
      android:layout_height="2dip"
      android:background="#FFFFFF" />

<TableRow
         android:layout_width="wrap_content"
      android:layout_height="fill_parent"
      android:padding="10dip">
      <TextView
         android:text="雨松"
         android:gravity="left"
         />
      <TextView
         android:text="15810463139"
         android:gravity="right"/>
</TableRow>

<TableRow
         android:layout_width="wrap_content"
      android:layout_height="fill_parent"
      android:padding="10dip">
      <TextView
         android:text="小可愛"
         android:gravity="left"
         />
      <TextView
         android:text="15810463139"
         android:gravity="right"/>
</TableRow>

<TableRow
         android:layout_width="wrap_content"
      android:layout_height="fill_parent"
      android:padding="10dip">
      <TextView
         android:text="好伙伴"
         android:gravity="left"
         />
      <TextView
         android:text="15810463139"
         android:gravity="right"/>
</TableRow>

<TableRow
      android:layout_width="wrap_content"
      android:layout_height="fill_parent"
      android:padding="10dip"
      >
      <TextView
         android:text="姓名"
         android:gravity="left"
         />
      <TextView
         android:text="性別"
         android:gravity="right"/>
</TableRow>

<View
      android:layout_height="2dip"
      android:background="#FFFFFF" />

<TableRow
         android:layout_width="wrap_content"
      android:layout_height="fill_parent"
      android:padding="10dip"
      >
      <TextView
         android:text="雨松MOMO"
         android:gravity="left"
         />
      <TextView
         android:text="男"
         android:gravity="right"/>
</TableRow>

<TableRow
         android:layout_width="wrap_content"
      android:layout_height="fill_parent"
      android:padding="10dip">
      <TextView
         android:text="小可愛"
         android:gravity="left"
         />
      <TextView
         android:text="女"
         android:gravity="right"/>
</TableRow>

<TableRow
         android:layout_width="wrap_content"
      android:layout_height="fill_parent"
      android:padding="10dip">
      <TextView
         android:text="好伙伴"
         android:gravity="left"
         />
      <TextView
         android:text="男"
         android:gravity="right"/>
</TableRow>

</TableLayout>

復(fù)制代碼

Android五大布局的基本使用方法已經(jīng)介紹完，最后筆者在這里強調(diào)一下在開發(fā)與學(xué)習(xí)中建議大家使用相對布局，首先它的方法屬性是最強大的其次它基本可以實現(xiàn)其它4大布局的效果，當(dāng)然這里說的不是全部有時候還是須要使用其他布局，所以筆者建議大家開發(fā)中以實際情況定奪，以上五種布局可以使用布局嵌套的方式可以做出更好看的更美觀的布局。

最后如果你還是覺得我寫的不夠詳細看的不夠爽不要緊我把源代碼的下載地址貼出來歡迎大家一起討論學(xué)習(xí)
第八講界面五大布局.rar(423.4 KB, 下載次數(shù): 491)[/I]2011-9-3 00:07 上傳點擊文件名下載積分: 下載豆 -2

› 智能家居 / NAS / 路由 / 開發(fā) / 音響 › TV應(yīng)用開發(fā)交流

Android軟件開發(fā)之盤點界面五大布局（十六） ...

Android軟件開發(fā)之盤點界面五大布局（十六）