[置頂] Android系統五大布局詳解Layout
咱們知道Android系統應用程序通常是由多個Activity組成，而這些Activity以視圖的形式展示在咱們面前，視圖都是由一個一個的組件構成的。組件就是咱們常見的Button、TextEdit等等。那麼咱們平時看到的Android手機中那些漂亮的界面是怎麼顯示出來的呢？這就要用到Android的佈局管理器了，網上有人比喻的很好：佈局比如是建築裏的框架，組件按照佈局的要求依次排列，就組成了用於看見的漂亮界面了。html
在分析佈局以前，咱們首先看看控件：Android中任何可視化的控件都是從android.veiw.View繼承而來的，系統提供了兩種方法來設置視圖：第一種也是咱們最經常使用的的使用XML文件來配置View的相關屬性，而後在程序啓動時系統根據配置文件來建立相應的View視圖。第二種是咱們在代碼中直接使用相應的類來建立視圖。java
如何使用XML文件定義視圖：android
每一個Android項目的源碼目錄下都有個res/layout目錄，這個目錄就是用來存放佈局文件的。佈局文件通常以對應activity的名字命名，以 .xml 爲後綴。在xml中爲建立組件時，須要爲組件指定id,如：android:id="@+id/名字"系統會自動在gen目錄下建立相應的R資源類變量。 框架
如何在代碼中使用視圖： 佈局
在代碼中建立每一個Activity時，通常是在onCreate()方法中，調用setContentView()來加載指定的xml佈局文件，而後就能夠經過findViewById()來得到在佈局文件中建立的相應id的控件了，如Button等。this
如：spa
private Button btnSndMag;
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main); // 加載main.xml佈局文件
btnSndMag = (Button)this.findViewById(R.id.btnSndMag); // 經過id找到對於的Button組件
....
}
下面咱們來介紹Android系統中爲咱們提供的五大布局：LinearLayout(線性佈局)、FrameLayout(單幀佈局)、AbsoluteLayout(絕對佈局)、TablelLayout(表格佈局)、RelativeLayout(相對佈局)。其中最經常使用的的是LinearLayout、TablelLayout和RelativeLayout。這些佈局均可以嵌套使用。設計
（1）LinearLayout 線性佈局code
線性佈局是按照水平或垂直的順序將子元素(能夠是控件或佈局)依次按照順序排列，每個元素都位於前面一個元素以後。線性佈局分爲兩種：水平方向和垂直方向的佈局。分別經過屬性android:orientation="vertical" 和 android:orientation="horizontal"來設置。xml
android:layout_weight 表示子元素佔據的空間大小的比例，有人說這個值大小和佔據空間成正比，有人說反比。我在實際應用中設置和網上資料顯示的恰好相反，這個問題後面會專門寫一篇文章來分析。如今咱們只須要按照正比例來設置就能夠。
例以下面咱們實現一個如圖所示的簡易計算器界面：
代碼：
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFFFFF"
tools:context=".MainActivity" >
// 這裏第一行顯示標籤爲一個水平佈局
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<EditText
android:id="@+id/msg"
android:inputType="number"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="">
</EditText>
</LinearLayout>
// 第二行爲 mc m+ m- mr 四個Button構成一個水平佈局
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="mc" android:layout_weight="1">
</Button>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="m+" android:layout_weight="1">
</Button>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="m-" android:layout_weight="1">
</Button>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="mr" android:layout_weight="1">
</Button>
</LinearLayout>
// 同上 C +/- / * 四個Button構成一個水平佈局
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="C" >
</Button>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="+/-" >
</Button>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="/" >
</Button>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="*" >
</Button>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="7" android:layout_weight="1">
</Button>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="8" android:layout_weight="1">
</Button>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="9" android:layout_weight="1">
</Button>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="-" android:layout_weight="1">
</Button>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="4" >
</Button>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="5" >
</Button>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="6" >
</Button>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="+" >
</Button>
</LinearLayout>
// 最外層是一個水平佈局，由左邊上面一行1 2 3三個Button,下面一行的0 . 兩個Button 和 右邊的=構成
<LinearLayout android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
// 這裏 1 2 3 和 下面的 0 . 構成一個垂直佈局
<LinearLayout android:orientation="vertical"
android:layout_weight="3"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
// 這裏的 1 2 3 構成一個水平佈局
<LinearLayout android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="1"></Button>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="2"></Button>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="3"></Button>
</LinearLayout>
// 這裏的 0 和 . 構成一個水平佈局，注意這裏的android_weight參數設置
<LinearLayout android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:layout_width="0px"
android:layout_height="wrap_content"
android:layout_weight="2"
android:text="0"></Button>
<Button
android:layout_width="0px"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="."></Button>
</LinearLayout>
</LinearLayout>
// 這裏一個單獨Button構成的垂直佈局
<LinearLayout android:orientation="vertical"
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="match_parent">
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="="></Button>
</LinearLayout>
</LinearLayout>
</LinearLayout>
（2）TableLayout 表格佈局
表格佈局，適用於多行多列的佈局格式，每一個TableLayout是由多個TableRow組成，一個TableRow就表示TableLayout中的每一行，這一行能夠由多個子元素組成。實際上TableLayout和TableRow都是LineLayout線性佈局的子類。可是TableRow的參數android:orientation屬性值固定爲horizontal，且android:layout_width=MATCH_PARENT，android:layout_height=WRAP_CONTENT。因此TableRow實際是一個橫向的線性佈局，且因此子元素寬度和高度一致。
注意：在TableLayout中，單元格能夠爲空，可是不能跨列，意思是隻能不能有相鄰的單元格爲空。
在TableLayout佈局中，一列的寬度由該列中最寬的那個單元格指定，而該表格的寬度由父容器指定。能夠爲每一列設置如下屬性：
Shrinkable 表示該列的寬度能夠進行收縮，以使表格可以適應父容器的大小
Stretchable 表示該列的寬度能夠進行拉伸，以使可以填滿表格中的空閒空間
Collapsed 表示該列會被隱藏
TableLayout中的特有屬性：
android:collapseColumns
android:shrinkColumns
android:stretchColumns = "0,1,2,3"// 表示產生4個可拉伸的列
Demo：咱們想設計一個以下因此的一個三行三列的表格，可是第二行咱們只想顯示2個表格：
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:shrinkColumns="0,1,2" // 設置三列均可以收縮
android:stretchColumns="0,1,2" // 設置三列均可以拉伸 若是不設置這個，那個顯示的表格將不能填慢整個屏幕
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TableRow android:layout_width="fill_parent"
android:layout_height="wrap_content">
<Button android:gravity="center"
android:padding="10dp"
android:text="Button1">
</Button>
<Button android:gravity="center"
android:padding="10dp"
android:text="Button2">
</Button>
<Button android:gravity="center"
android:padding="10dp"
android:text="Button3">
</Button>
</TableRow>
<TableRow android:layout_width="fill_parent"
android:layout_height="wrap_content">
<Button android:gravity="center"
android:padding="10dp"
android:text="Button4">
</Button>
<Button android:gravity="center"
android:padding="10dp"
android:text="Button5">
</Button>
</TableRow>
<TableRow android:layout_width="fill_parent"
android:layout_height="wrap_content">
<Button android:gravity="center"
android:padding="10dp"
android:text="Button6">
</Button>
<Button android:gravity="center"
android:padding="10dp"
android:text="Button7">
</Button>
<Button android:gravity="center"
android:padding="10dp"
android:text="Button8">
</Button>
</TableRow>
</TableLayout>
（3）RelativeLayout 相對佈局
RelativeLayout繼承於android.widget.ViewGroup，其按照子元素之間的位置關係完成佈局的，做爲Android系統五大布局中最靈活也是最經常使用的一種佈局方式，很是適合於一些比較複雜的界面設計。
注意：在引用其餘子元素以前，引用的ID必須已經存在，不然將出現異常。
經常使用的位置屬性：
android:layout_toLeftOf 該組件位於引用組件的左方 android:layout_toRightOf 該組件位於引用組件的右方 android:layout_above 該組件位於引用組件的上方 android:layout_below 該組件位於引用組件的下方 android:layout_alignParentLeft 該組件是否對齊父組件的左端 android:layout_alignParentRight 該組件是否齊其父組件的右端 android:layout_alignParentTop 該組件是否對齊父組件的頂部 android:layout_alignParentBottom 該組件是否對齊父組件的底部 android:layout_centerInParent 該組件是否相對於父組件居中 android:layout_centerHorizontal 該組件是否橫向居中 android:layout_centerVertical 該組件是否垂直居中
Demo:利用相對佈局設計一個以下圖所示的界面：
源碼：
<?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" >
<Button android:id="@+id/btn1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_centerHorizontal="true"
android:text="Button1"
></Button>
<Button android:id="@+id/btn2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="@id/btn1"
android:layout_above="@id/btn1"
android:text="Button2"
></Button>
<Button android:id="@+id/btn3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="@id/btn1"
android:layout_above="@id/btn1"
android:text="Button3"
></Button>
<Button android:id="@+id/btn4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="@id/btn2"
android:layout_toLeftOf="@id/btn3"
android:layout_above="@id/btn2"
android:text="Button4"
></Button>
</RelativeLayout>
（4）FrameLayout 框架佈局
將全部的子元素放在整個界面的左上角，後面的子元素直接覆蓋前面的子元素，因此用的比較少。
（5） AbsoluteLayou 絕對佈局
絕對佈局中將全部的子元素經過設置android:layout_x 和 android:layout_y屬性，將子元素的座標位置固定下來，即座標(android:layout_x, android:layout_y) ，layout_x用來表示橫座標，layout_y用來表示縱座標。屏幕左上角爲座標(0,0)，橫向往右爲正方，縱向往下爲正方。實際應用中，這種佈局用的比較少，由於Android終端通常機型比較多，各自的屏幕大小。分辨率等可能都不同，若是用絕對佈局，可能致使在有的終端上顯示不全等。
除上面講過以外經常使用的幾個佈局的屬性：
(1)layout_margin
用於設置控件邊緣相對於父控件的邊距
android:layout_marginLeft
android:layout_marginRight
android:layout_marginTop
android:layout_marginBottom
(2) layout_padding
用於設置控件內容相對於控件邊緣的邊距
android:layout_paddingLeft
android:layout_paddingRight
android:layout_paddingTop
android:layout_paddingBottom
(3) layout_width/height
用於設置控件的高度和寬度
wrap_content 內容包裹，表示這個控件的裏面文字大小填充
fill_parent跟隨父窗口
match_parent
(4) gravity
用於設置View組件裏面內容的對齊方式
topbottom left right center等
(5) android:layout_gravity 用於設置Container組件的對齊方式 android:layout_alignTop 本元素的上邊緣和某元素的的上邊緣對齊 android:layout_alignLeft 本元素的左邊緣和某元素的的左邊緣對齊 android:layout_alignBottom 本元素的下邊緣和某元素的的下邊緣對齊 android:layout_alignRight 本元素的右邊緣和某元素的的右邊緣對齊
- 1. Android系統五大布局詳解Layout
- 2. android 五大布局詳解
- 3. Extjs4 佈局 layout 詳解
- 4. Android五大布局
- 5. Android 五大布局
- 6. Android系統佈局——android.R.layout詳解
- 7. 佈局系統詳解
- 8. android layout 佈局屬性
- 9. Android佈局圖片置頂
- 10. android的五大布局
- 更多相關文章...
- • Spring體系結構詳解 - Spring教程
- • MyBatis配置文件詳解 - MyBatis教程
- • JDK13 GA發佈：5大特性解讀
- • Docker容器實戰(七) - 容器眼光下的文件系統
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. Android系統五大布局詳解Layout
- 2. android 五大布局詳解
- 3. Extjs4 佈局 layout 詳解
- 4. Android五大布局
- 5. Android 五大布局
- 6. Android系統佈局——android.R.layout詳解
- 7. 佈局系統詳解
- 8. android layout 佈局屬性
- 9. Android佈局圖片置頂
- 10. android的五大布局