Android中常用佈局簡介

安卓開發 · 發表 2019-02-24 17:41:56

摘要：今天覆習Android系統中為我們提供的五大布局：LinearLayout(線性佈局)、RelativeLayout(相對佈局)、FrameLayout(幀佈局)、AbsoluteLayout(絕對佈局)、TablelLayout(表格佈局）其中最常用的的是LinearLayout、Tab...

今天覆習Android系統中為我們提供的五大布局：LinearLayout(線性佈局)、RelativeLayout(相對佈局)、FrameLayout(幀佈局)、AbsoluteLayout(絕對佈局)、TablelLayout(表格佈局）其中最常用的的是LinearLayout、TablelLayout和RelativeLayout。這些佈局都可以巢狀使用。

一、佈局介紹

佈局	介紹/特點	應用場景
LinerLayout（線性佈局）	控制元件排列方式 = 線性的垂直/水平	佈局內控制元件按照線性垂直/水平排列
RelativeLayout （相對佈局）	根據參照物（某個控制元件id）來確定控制元件的位置	控制元件之間存在位置上的聯絡
FrameLayout（幀佈局）	放入的控制元件都被放在左上角且後加入的控制元件會重疊覆蓋在之前加入的控制元件上面	控制元件相互疊加
TableLayout（表格佈局）	通過表格形式佈局控制元件位置	控制元件之間存在固定的位置關係
AbsoluteLayout（絕對佈局）	採用座標的方式定位控制元件，左上角時（0，0）往右X軸遞增往下Y軸遞增	已過時

二、佈局屬性

1、公有屬性

即各個佈局都存在的屬性

屬性	介紹	使用
layout_width 、layout_height	設定佈局的寬/高	android:layout_width="wrap_content"//所需的最小尺寸 <p>android:layout_height="match_parent"//充滿父佈局 <p>android:layout_width="65dp"//固定寬高
layout_margin+方位	設定控制元件邊緣相對於父控制元件的邊距	layout_margin="10dp"//設定四面邊距<p>layout_marginTop="10dp"//設定上邊距<p>layout_marginBottom="10dp"//設定下邊距<p>layout_marginLeft="10dp"//設定左邊距<p>layout_marginRight="10dp"//設定右邊距<p>
padding +方位	設定控制元件內容的邊緣相對於控制元件的邊距	layout_padding="10dp"//設定四面邊距<p>layout_paddingTop="10dp"//設定上邊距<p>layout_paddingBottom="10dp"//設定下邊距<p>layout_paddingLeft="10dp"//設定左邊距<p>layout_paddingRight="10dp"//設定右邊距<p>
layout_gravity	控制元件相對父控制元件的位置	android:layout_gravity="center"//居中<p>android:layout_gravity="center_horizontal"//水平居中<p>android:layout_gravity="center_vertival"//垂直居中
gravity	控制元件內容相對控制元件的位置	android:layout_gravity="center"//居中<p>android:layout_gravity="center_horizontal"//水平居中<p>android:layout_gravity="center_vertival"//垂直居中

2、特有屬性

佈局	特有屬性	用法
LinerLayout（線性佈局）	orientation(設定控制元件的排列方式)<p>layout_weight(根據設定的權重，將佈局控制元件按比例分配，主要設定在佈局內的控制元件中)	android:orientation="horizontal"//水平<p>android:orientation="vertical"//垂直<p> android:layout_weight="1.0"//設定權重
RelativeLayout(相對佈局)	layout_alignParentXXX(當前控制元件對齊父控制元件的X方位)<p>	android:layout_alignParentTop="true"<p>//當前控制元件頂端對齊父控制元件頂端 android:layout_alignParentBottom="true"//當前控制元件底端對齊父控制元件底端<p>android:layout_alignParentLeft="true"//當前控制元件左端對齊父控制元件左端<p>android:layout_alignParentRight="true"//當前控制元件右端對齊父控制元件右端<p>android:layout_centerInParent="true"//當前控制元件位於父控制元件正居中的位置<p>android:layout_centerVertival="true"//當前控制元件位於父控制元件垂直居中的位置<p>android:layout_centerHorizontal="true"//當前控制元件位於父控制元件水平居中的位置
RelativeLayout(相對佈局)	layout_X（當前控制元件位於某個控制元件的X方位）	android:layout_above="@id/text"//當前控制元件位於text控制元件的上方<p>android:layout_below="@id/text"//當前控制元件位於text控制元件的下方<p>android:layout_toLeftOf="@id/text"//當前控制元件位於text控制元件的左方<p>android:layout_toRightOf="@id/text"//當前控制元件位於text控制元件的右方<p>android:layout_alignTop="@id/text"//當前控制元件的頂部對齊 text控制元件的頂部<p>android:layout_alignRight(End)="@id/text"//當前控制元件的右部對齊 text控制元件的右部<p>android:layout_alignBottom="@id/text"//當前控制元件的底部對齊 text控制元件的底部<p>android:layout_alignLeft(Start)="@id/text"//當前控制元件的左部對齊 text控制元件的左部<p>
AbsoluteLayout(絕對佈局)	layout_x(指定控制元件的x座標)<p>layout_y(指定控制元件的Y座標)	android:layout_x="50dp"<p>android:layout_y="50dp"
TableLayout(表格佈局)	TableLayout的行TableRow = 一個水平排列的線性佈局<p> 繼承自線性佈局故具備線性佈局的全部屬性
FrameLayout	只具備基礎屬性

5個佈局元素可相互巢狀使用，從而實現各種不同的效果

三、選擇器（selector)

1.作用

通過設定選擇器（selector）可使控制元件在不同操作下（預設、點選等）顯示不同樣式

通過 xml編寫 = selector.xml

2.屬性

XML屬性	說明
android:drawable	放一個drawable資源
android:state_pressed	按下狀態，如一個按鈕觸控或者點選。
android:state_focused	取得焦點狀態，比如使用者選擇了一個文字框。android:state_hovered	游標懸停狀態，通常與focused state相同，它是4.0的新特性
android:state_selected	選中狀態
android:state_enabled	能夠接受觸控或者點選事件
android:state_checked	被checked了，如：一個RadioButton可以被check了。
android:state_enabled	能夠接受觸控或者點選事件

注：上述所有屬性的取值： boolean屬性 = true、false

3.例項說明

在drawable新增 selector.xml 資原始檔

button_selector.xml:

<?xml version="1.0" encoding="UTF-8"?>
< selector xmlns:android="http://schemas.android.com/apk/res/android">

 < !-- 指定按鈕按下時的圖片 -->
 <item android:state_pressed="true"
android:drawable="@drawable/start_down"
 />

 < !-- 指定按鈕鬆開時的圖片 --> 
 <item android:state_pressed="false"
android:drawable="@drawable/start"
 />

< /selector>

在佈局檔案main.xml中控制元件的屬性設定:

<Button
android:id="@+id/startButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/button_selector" 
/>

四、佈局形狀（Shape）

作用：設定佈局的顏色、邊框線
使用：通過 xml編寫 = shape.xml
具體使用

<shape xmlns:android="http://schemas.android.com/apk/res/android">

//預設顏色
<solid android:color="#876543"/>
//哪個方向有邊框線
<padding
android:bottom="0dp"
android:left="1dp"
android:right="1dp"
android:top="1dp" />
//邊框線顏色、大小
<stroke
android:width="1dp"
android:color="#000000" />