Android的五種佈局模式
在Android當中共有5種佈局模式,他們分別是:
LinearLayout (線性佈局)
FrameLayout (框架佈局)
AbsoluteLayout (絕對佈局)
RelativeLayout (相對佈局)
TableLayout (表格佈局)
頁面佈局是Android應用介面開發過程中很重要的一環。下面是我對他們的學習總結:
1、LinearLayout
線性佈局,顧名思義,他是一個“一維”的排列方式,其中的元素會按固定的方向(水平或者垂直)一個一個的出現在螢幕上。其中android:orientation屬性決定了線性方向。
android:orientation="
android:orientation="vertical"代表垂直佈局
線性佈局中,android:layout_weight 在垂直佈局時為豎直方向;在水平佈局時為水平方向。
TextView佔一定的空間,這一點一定要注意。
XML屬性:
android:baselineAligned
-是否允許使用者調整它內容的基線。
android:baselineAlignedChildIndex
-當一個線性佈局與另一個佈局是按基線對齊的一部分,它可以指定其內容的基線對齊方式。
android:gravity
-指定如何在該物件中放置此物件的內容(x/y座標值)。
android:orientation
-設定它內容的對其方向(橫向/豎向)。
例:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context="com.example.a13722.apptext_20171121.MainActivity"> <LinearLayout android:background="#eebed0" android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="200dp"> <TextView android:layout_width="80dp" android:layout_height="80dp" android:background="#70f3ff"/> <TextView android:layout_width="80dp" android:layout_height="80dp" android:background="#44cef6"/> <TextView android:layout_width="80dp" android:layout_height="80dp" android:background="#1685a9"/> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <TextView android:layout_width="80dp" android:layout_height="80dp" android:background="#70f3ff"/> <TextView android:layout_width="80dp" android:layout_height="80dp" android:background="#44cef6"/> <TextView android:layout_width="80dp" android:layout_height="80dp" android:background="#1685a9"/> </LinearLayout> </LinearLayout>
2、FrameLayout
FrameLayout是最簡單的佈局了。所有放在佈局裡的控制元件,都按照層次堆疊在螢幕的左上角。後加進來的控制元件覆蓋前面的控制元件。在FrameLayout佈局裡,定義任何空間的位置相關的屬性都毫無意義。控制元件自動的堆放在左上角。
我們先介紹一個東西:
前景影象:永遠處於最上面,就是不會被覆蓋的圖片
FrameLayout的屬性很少就兩個:
android:foreground:
-設定改幀佈局容器的前景影象
android:foregroundGravity:
-設定前景影象顯示的位置
例:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.a13722.apptext_20171121.MainActivity">
<TextView
android:layout_width="200dp"
android:layout_height="200dp"
android:background="#000000"/>
<TextView
android:layout_width="150dp"
android:layout_height="150dp"
android:background="#faff72" />
<TextView
android:layout_width="300dp"
android:layout_height="60dp"
android:background="@mipmap/play"/>
</FrameLayout>
3、AbsoluteLayout
絕對佈局AbsoluteLayout,又可以叫做座標佈局,可以直接指定子元素的絕對位置,這種佈局簡單直接,直觀性強,但是由於手機螢幕尺寸差別比較大,使用絕對佈局的適應性會比較差。一般不推薦使用。
XML屬性:
android:Layout_width
-元件寬度
android:Layout_height
-元件高度
android:layout_x
-元件的X座標
android:layout_y
-元件的Y座標
<?xml version="1.0" encoding="utf-8"?>
<AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.a13722.apptext_20171121.MainActivity">
<TextView
android:id="@+id/textView4"
android:layout_width="134dp"
android:layout_height="147dp"
android:layout_x="14dp"
android:layout_y="31dp"
android:background="#000000" />
<TextView
android:id="@+id/textView3"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_x="209dp"
android:layout_y="17dp"
android:background="#faff72" />
</AbsoluteLayout>
但是在不同的裝置上(比如我的小米手機上),實現效果就不一樣。
(注意右邊黃色方塊與右邊界的距離)
4、RelativeLayout
RelativeLayout是一種相對佈局,控制元件的位置是按照相對位置來計算的,後一個控制元件在什麼位置依賴於前一個控制元件的基本位置,是佈局最常用,也是最靈活的一種佈局。其相關屬性如下:
android:layout_alignParentLeft
-子類控制元件相對當前父類容器靠左
android:layout_alignParentTop
-子類控制元件相對當前父類容器靠上
android:layout_marginLeft
-子類控制元件距離父類容器左邊的距離
android:layout_marginTop
-子類控制元件距離父類容器上邊的距離
android:layout_centerInParent
-子類控制元件相對於父類容器居中
android:layout_centerHorizontal
-子類控制元件相對於父類容器水平居中
android:layout_centerVertical
-子類控制元件相對於父類容器垂直居中
android:layout_above
-該控制元件位於給定id控制元件的上側
android:layout_below
-該控制元件位於給定id控制元件的下側
android:layout_toLeftOf
-該控制元件位於給定id控制元件的左側
android:layout_roRightOf
-該控制元件位於給定id控制元件的右側
android:layout_alignBaseline
-該控制元件內容與給定id控制元件的內容在一條線上
android:layout_alignBottom
-該控制元件的底部邊緣與給定id控制元件的底部邊緣對齊
android:layout_alignRight
-該控制元件的底部邊緣與給定id控制元件的右側邊緣對齊
android:layout_alignLeft
-該控制元件的底部邊緣與給定id控制元件的左側邊緣對齊
android:layout_alignTop
-該控制元件的底部邊緣與給定id控制元件的頂部邊緣對齊
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.a13722.apptext_20171121.MainActivity">
<TextView
android:id="@+id/textView4"
android:layout_width="80dp"
android:layout_height="80dp"
android:background="#000000"
android:layout_alignBaseline="@+id/textView3"
android:layout_alignBottom="@+id/textView3"
android:layout_toStartOf="@+id/textView3" />
<TextView
android:id="@+id/textView3"
android:layout_width="80dp"
android:layout_height="80dp"
android:background="#faff72"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true" />
<TextView
android:layout_width="80dp"
android:layout_height="80dp"
android:background="@mipmap/play"
android:layout_above="@+id/textView4"
android:layout_toEndOf="@+id/textView4"
android:layout_marginBottom="50dp" />
</RelativeLayout>
5、TableLayout
Tablelayout以行和列的形式對控制元件進行管理,每一行為一個TableRow物件,或一個View控制元件。
當為TableRow物件時,可在TableRow下新增子控制元件,預設情況下,每個子控制元件佔據一列。
有多少個子控制元件就有多少列;當為View時,該View將獨佔一行
相關XML屬性如下:
android:layout_colum
-指定該單元格在第幾列顯示
android:layout_span
-指定該單元格佔據的列數(未指定時,為1)
android:stretchColumns
-設定可伸展的列。該列可向行方向伸展,最多可佔據一整行
android:shrinkColumns
-設定可收縮的列。當該列子控制元件的內容太多,已經擠滿所在行,那麼該子控制元件的內容將往列方向顯示
android:layout_colum
-指定該單元格在第幾列顯示
android:layout_span
-指定該單元格佔據的列數(未指定時,為1)
android:stretchColumns
-設定可伸展的列。該列可向行方向伸展,最多可佔據一整行
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.a13722.apptext_20171121.MainActivity">
<TextView
android:layout_height="80dp"
android:background="#faff72" />
<TextView
android:layout_height="80dp"
android:background="#000000" />
<TextView
android:layout_height="80dp"
android:background="@mipmap/play" />
</TableLayout>