Android軟件開(kāi)發(fā)之盤(pán)點(diǎn)界面五大布局（十六）

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

41006Android軟件開(kāi)發(fā)之盤(pán)點(diǎn)界面五大布局

1.線性布局(LinearLayout)

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

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

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

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

<?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.相對(duì)布局(RelativeLayout)

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

設(shè)置距父元素右對(duì)齊
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控件的上方對(duì)齊
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)

原理是在控件中繪制任何一個(gè)控件都可以被后繪制的控件覆蓋，最后繪制的控件會(huì)蓋住之前的控件。如圖所示界面中先繪制的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="快樂(lè)生活每一天喔"
      android:layout_gravity="bottom"
      />
</FrameLayout>

復(fù)制代碼

4.絕對(duì)布局(AbsoluteLayout)

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

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

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)點(diǎn) 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)點(diǎn) 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è)置顯示的縮進(jìn)，對(duì)齊的方式。

<?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="小可愛(ài)"
         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="小可愛(ài)"
         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)介紹完，最后筆者在這里強(qiáng)調(diào)一下在開(kāi)發(fā)與學(xué)習(xí)中建議大家使用相對(duì)布局，首先它的方法屬性是最強(qiáng)大的其次它基本可以實(shí)現(xiàn)其它4大布局的效果，當(dāng)然這里說(shuō)的不是全部有時(shí)候還是須要使用其他布局，所以筆者建議大家開(kāi)發(fā)中以實(shí)際情況定奪，以上五種布局可以使用布局嵌套的方式可以做出更好看的更美觀的布局。

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

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

Android軟件開(kāi)發(fā)之盤(pán)點(diǎn)界面五大布局（十六） ...

Android軟件開(kāi)發(fā)之盤(pán)點(diǎn)界面五大布局（十六）