Android學習——五大布局，android五大布局

Android學習——五大布局，android五大布局

 歡迎任何形式的轉載，但請務必註明出處。

Android的五大布局：

• LinearLayout(線性布局)
• RelativeLayout（相對布局）
• AbsoluteLayout（絕對布局）
• TableLayout（表格版面配置）
• FrameLayout（單幀布局）

（註：文中所有xml原始碼都被摺疊，點開即可查看）

 

一、LinearLayout(線性布局)

線性布局是個單行或單列的形式排列檢視。子試圖可以水平或垂直地排列。

XML屬性	對應設定方法	描述
android:orientation	setOrientation(int)	設定布局管理器內組件的相片順序，可以設定為"horizontal" 水平 "vertical"  垂直兩個之中的其中之一
android:gravity	setGravity（int）	設定布局管理器內組件的對齊，該屬性支援top、bottom、left、right、center_vertical、fill_horizontal、center、fill、clip_vertical、clip_vertical幾個屬性值。也可以同時指定多種對齊的組合。 例如：left|center_vertical代表出現在螢幕左邊，而且垂直置中。

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:orientation="vertical"     android:layout_width="match_parent"    android:layout_height="match_parent">        <TextView        android:id="@+id/tx1"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:background="@color/color1"        android:layout_weight="1"/>    <TextView        android:id="@+id/tx2"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:background="@color/color2"        android:layout_weight="1"/>    <TextView        android:id="@+id/tx3"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:background="@color/color3"        android:layout_weight="1"/>    </LinearLayout>

vertical

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:orientation="horizontal"    android:layout_width="match_parent"    android:layout_height="match_parent">    <TextView        android:id="@+id/tx1"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:background="@color/color1"        android:layout_weight="1"/>    <TextView        android:id="@+id/tx2"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:background="@color/color2"        android:layout_weight="1"/>    <TextView        android:id="@+id/tx3"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:background="@color/color3"        android:layout_weight="1"/></LinearLayout>

horizontal圖示                   

 

二、RelativeLayout（相對布局）

相對布局是指一個ViewGroup以相對位置顯示它的子視圖（View）元素，一個視圖可以指定相對於它的兄弟視圖的位置（例如，在給定視圖的左邊或下面）或相對於RelaitiveLayout的特定地區的位置（例如，底部對齊，或中間偏左）。

相對布局是設計使用者介面的有力工具，因為它消除了嵌套視圖組。如果使用者發現使用了多個嵌套的LinearLayout視圖組，就可以考慮使用一個RelativeLayout視圖組。

重要屬性：

1.屬性必須為ID的引用名，如“@+id/button1”

android:layout_below	設定該元素在某元素的下方
android:layout_above	設定該元素在某元素的上方
android:layout_toLeftOf	設定該元素在某元素的左邊
android:layout_toRightOf	設定該元素在某元素的右邊
android:layout_alignTop	設定該元素的上邊緣和某元素的上邊緣對齊
android:layout_alignLeft	設定該元素的左邊緣和某元素的左邊緣對齊
android:layout_alignBottom	設定該元素的下邊緣和某元素的下邊緣對齊
android:layout_alignRight	設定該元素的右邊緣和某元素的右邊緣對齊

 2.屬性值為true或false

android:layout_centerHorizontal	設定是否相對於父元素水平置中
android:layout_centerVertical	設定是否相對於父元素垂直置中
android:layout_centerInParent	設定是否相對於父元素完全置中
android:layout_alignParentBottom	設定是否緊靠父元素的下邊緣
android:layout_alignParentLeft	設定是否緊靠父元素的左邊緣
android:layout_alignParentRight	設定是否緊靠父元素的右邊緣
android:layout_alignParentTop	設定是否緊靠父元素的上邊緣
android:layout_alignWithParentIfMissing	設定如果layout_toLeftOf,layout_toRightOf對應的元素找不到則以父元素作為參照

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent">    <TextView        android:id="@+id/label"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:text="Type here"        android:textSize="28dp"        android:textStyle="bold"        android:layout_marginBottom="10dp"/>    <EditText        android:id="@+id/entry"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:background="@drawable/p1"        android:layout_below="@id/label"        android:layout_marginBottom="10dp"/>        <Button        android:id="@+id/ok"        android:layout_width="wrap_content"        android:layout_height="wrap_content"         android:layout_below="@id/entry"        android:layout_alignParentRight="true"        android:layout_marginLeft="30dp"        android:text="確定"        android:textSize="28dp"        />        <Button        android:id="@+id/cancel"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_toLeftOf="@id/ok"         android:layout_alignTop="@id/ok"          android:text="取消"        android:textSize="28dp"        /></RelativeLayout>

View Code圖示

 

 

三、AbsoluteLayout（絕對布局）

絕對布局是一個ViewGroup以絕對方式顯示它的子視圖（View元素），即以座標的方式來定位在螢幕上的位置。這種布局方式很好理解，在布局檔案或變成重理工設定View的座標，從而絕對地定位。AbsoluteLayout可以讓子項目指定準確的x/y座標值，並顯示在螢幕上。

（0,0）為左上方，當向下或向右移動時，座標值將變大。

AbsoluteLayout沒有布邊框，允許元素之間互相重疊。

<?xml version="1.0" encoding="utf-8"?><AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent">    <TextView        android:layout_width="160dp"        android:layout_height="160dp"        android:background="@color/color1"        android:text="One"        android:gravity="center"        android:textSize="28dp"        android:layout_x="100dp"        android:layout_y="50dp"/>    <TextView        android:layout_width="160dp"        android:layout_height="160dp"        android:background="@color/color3"        android:text="Two"        android:gravity="center"        android:textSize="28dp"        android:layout_x="0dp"        android:layout_y="150dp"/>    <TextView        android:layout_width="160dp"        android:layout_height="160dp"        android:background="@color/color5"        android:text="Three"        android:gravity="center"        android:textSize="28dp"        android:layout_x="200dp"        android:layout_y="200dp"/></AbsoluteLayout>

View Code 圖示

 

 

四、TableLayout（表格版面配置）

表格版面配置就是我們常見的表格，將子項目的位置分配到行或列中。表格版面配置由許多的TableRow(行)組成，沒有列的配置，列是由行的元素數量決定的。表格版面配置也是實際應用中常見的布局方式。

屬性

android:collapseColumns	將TableLayout裡面指定的列隱藏，若有多列需要隱藏，請用逗號將需要隱藏的列序號隔開。
android:stretchColumns	設定指定的列為可伸展的列，以填滿剩下的多餘空白空間，若有多列需要設定為可伸展，請用逗號將需要伸展的列序號隔開。
android:shrinkColumns	設定指定的列為可收縮的列。當可收縮的列太寬(內容過多)不會被擠出螢幕。當需要設定多列為可收縮時，將列序號用逗號隔開。

<?xml version="1.0" encoding="utf-8"?><AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent">    <TextView        android:layout_width="160dp"        android:layout_height="160dp"        android:background="@color/color1"        android:text="One 100dp"        android:gravity="center"        android:textSize="28dp"        android:layout_x="100dp"        android:layout_y="50dp"/>    <TextView        android:layout_width="160dp"        android:layout_height="160dp"        android:background="@color/color3"        android:text="Two"        android:gravity="center"        android:textSize="28dp"        android:layout_x="0dp"        android:layout_y="150dp"/>    <TextView        android:layout_width="160dp"        android:layout_height="160dp"        android:background="@color/color5"        android:text="Three"        android:gravity="center"        android:textSize="28dp"        android:layout_x="200dp"        android:layout_y="200dp"/></AbsoluteLayout>

View Code圖示

 

 

五、FrameLayout（單幀布局/架構布局）

幀布局由FrameLayout類進行布局，FrameLyoout直接繼承了ViewGroup組件。

幀版面配置容器為每個加入其中的組件建立一個空白的地區（稱為一幀），每個子組件佔據一幀，這些幀都會根據gravity屬性執行自動對齊。也就是說，所有添加到這個布局中的視圖都以層疊的方式顯示。第一個添加的控制項被放在最底層，最後一個添加到架構布局中的視圖顯示在最頂層，上一層的控制項會覆蓋下一層的控制項。這種顯示方式有些類似於堆棧。把組件一個一個疊加在一起。

<?xml version="1.0" encoding="utf-8"?><FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:background="@color/color1">    <TextView         android:id="@+id/textview1"        android:layout_width="300dp"        android:layout_height="300dp"        android:layout_gravity="center"        android:background="#FF33ffff" />    <TextView         android:id="@+id/textview2"        android:layout_width="240dp"        android:layout_height="240dp"        android:layout_gravity="center"        android:background="#FF33ccff" />    <TextView         android:id="@+id/textview3"        android:layout_width="180dp"        android:layout_height="180dp"        android:layout_gravity="center"        android:background="#FF3399ff" />    <TextView         android:id="@+id/textview4"        android:layout_width="120dp"        android:layout_height="120dp"        android:layout_gravity="center"        android:background="#FF3366ff" />    <TextView         android:id="@+id/textview5"        android:layout_width="60dp"        android:layout_height="60dp"        android:layout_gravity="center"        android:background="#FF3300ff" /></FrameLayout>

View Code圖示