Android的七大布局總結

七大布局分別是:線性布局(LinearLayout)唠摹、相對布局(RelativeLayout)爆捞、幀布局(FrameLayout)、表格布局(TableLayout)勾拉、絕對布局(absoluteLayout)煮甥、網(wǎng)格布局(GridLayout)、約束布局(ConstraintLayout)

線性布局(LinearLayout)

主要屬性:
1.orientation設置布局管理器內組件的排列方式望艺,可以設置horizontal(橫向)苛秕、vertical(縱向)兩者之一
2.gravity設置布局管理器內組件的對齊方式,layout_gravity控制在父元素的位置找默。


image.png

3.layout_weight設置權重艇劫,推薦layout_width="0dp"或layout_height="0dp"

相對布局(RelativeLayout)

image.png

幀布局(FrameLayout)

繼承自ViewGroup組件,可以使布局疊加惩激。

表格布局(TableLayout)

TableLayout包裹TableRow(行數(shù))店煞,TableRow包裹View(列數(shù))
shrinkColumns屬性:當TableRow里的空間布滿布局的時候,指定列自動延伸填充可用部分风钻。當TableRow里控件還沒布滿不覺顷蟀,不起作用÷饧迹可收縮列鸣个。
stretchColumns屬性:設置可伸展的列羞反,該列可以向行方向伸展,最多可占據(jù)一整行囤萤。
collapseColumns屬性:設置要隱藏的列昼窗。

以上三個屬性的列號都是從0開始計算,比如shrinkColumns=“2”表示第三列涛舍,可以設置多個澄惊,用逗號隔開,比如“0富雅,2”掸驱,如果所有列都生效用“*”。
android:layout_column = "2",表示跳過第二個没佑,直接顯示到第三個格子處毕贼,從1開始算。
android:layout_span = "4" 表示合并4個單元格

絕對布局(absoluteLayout)

基本不使用

網(wǎng)格布局(GridLayout)

Android4.0新引入的網(wǎng)格矩陣形式布局控件图筹。
使用的時候需要注意兼容帅刀,引入依賴:
compile 'com.android.support:gridlayout-v7:22.+'
GridLayout屬性:

  • android:columnCount 最大列數(shù)
  • android:rowCount 最大行數(shù)
  • android:orientation 子元素中的布局方向
  • android:alignmentMode alignBounds:對齊子視圖邊界/alignMargins:對齊子視距內容
  • android:columnOrderPreserved 使列邊界顯示的順序和列索引的順序相同,默認true
  • android:rowOrderPreserved 使行邊界顯示的順序和行索引的順序相同远剩,默認是true
  • android:useDefaultMargins 沒有指定視圖的布局參數(shù)時使用默認的邊距,默認值是false

item屬性:
android:layout_column 指定該單元格在第幾列顯示
android:layout_row 指定該單元格在第幾行顯示
android:layout_columnSpan 指定該單元格占據(jù)的列數(shù)
android:layout_rowSpan 指定該單元格占據(jù)的行數(shù)
android:layout_gravity 指定該單元格在容器中的位置
android:layout_columnWeight (API21新增)列權重
android:layout_rowWeight (API21新增)行權重
注意:layout_columnSpan骇窍、layout_rowSpan所使用時需要加上layout_gravity屬性瓜晤,否則沒有效果。另外item在邊緣時寬高會計算錯誤腹纳,需要手動設置寬高痢掠。

動態(tài)代碼設置布局會使用到方法GridLayout.spec();
public static Spec spec(int start, int size)
public static Spec spec(int start, float weight)
需要注意這兩個方法第二個參數(shù),一個是int一個float嘲恍。調用第二個方法需要加上f足画。

約束布局(ConstraintLayout)

Android Studio2.2推出的新布局,并從2.3版本開始成為默認布局佃牛。
為了解決復雜的布局淹辞,嵌套過多布局問題。
ConstraintLayout使用起來比RelativeLayout更靈活俘侠,性能更出色象缀,可以按照比例約束控件位置和尺寸,更好適配屏幕大小的不同機型爷速。

添加依賴

implementation 'androidx.constraintlayout:constraintlayout:1.1.3'

相對定位:

image.png

layout_constraintLeft_toLeftOf
layout_constraintLeft_toRightOf
layout_constraintRight_toLeftOf
layout_constraintRight_toRightOf
layout_constraintTop_toTopOf
layout_constraintTop_toBottomOf
layout_constraintBottom_toTopOf
layout_constraintBottom_toBottomOf
layout_constraintBaseline_toBaselineOf
layout_constraintStart_toEndOf
layout_constraintStart_toStartOf
layout_constraintEnd_toStartOf
layout_constraintEnd_toEndOf

1.png

舉例:在TextView2里用到了app:layout_constraintLeft_toRightOf="@+id/TextView1"這個屬性央星,他的意思是把TextView2的左邊約束到TextView1的右邊。
layout_constraintBaseline_toBaselineOf 文本基線對齊

角度定位

舉例:


2.png

app:layout_constraintCircle="@+id/TextView1"
app:layout_constraintCircleAngle=“120”(角度)
app:layout_constraintCircleRadius=“150dp”(距離)
指的是TextView2的中心在TextView1的中心的120度惫东,距離為150dp莉给,

邊距

android:layout_marginStart
android:layout_marginEnd
android:layout_marginLeft
android:layout_marginTop
android:layout_marginRight
android:layout_marginBottom
要想實現(xiàn)margin,必須先約束該控件在ConstraintLayout的位置,而且margin只能大于等于0.


3.png

android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"

goneMargin

主要用于約束的控件可見性被設置為gone的時候使用的margin值颓遏。
layout_goneMarginStart
layout_goneMarginEnd
layout_goneMarginLeft
layout_goneMarginTop
layout_goneMarginRight
layout_goneMarginBottom


4.png

居中和偏移

app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
5.png

把控件的上下左右約束在布局的上下左右胁黑,就能使得控件在布局中間。
RelativeLayout中的水平居中l(wèi)ayout_centerHorizontal相當于在ConstraintLayout約束控件的左右為parent的左右州泊;RelativeLayout中的垂直居中l(wèi)ayout_centerVertical相當于在ConstraintLayout約束控件的上下為parent的上下丧蘸。

layout_constraintHorizontal_bias 水平偏移
layout_constraintVertical_bias 垂直偏移

app:layout_constraintHorizontal_bias="0.3"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"

6.png

假如現(xiàn)在要實現(xiàn)水平偏移,給TextView1的layout_constraintHorizontal_bias賦一個范圍為 0-1 的值遥皂,假如賦值為0力喷,則TextView1在布局的最左側,假如賦值為1演训,則TextView1在布局的最右側弟孟,假如假如賦值為0.5,則水平居中样悟,假如假如賦值為0.3拂募,則更傾向于左側。

尺寸約束

1窟她、使用指定的尺寸
2陈症、使用wrap_content讓控件自己計算大小
android:minWidth 最小的寬度
android:minHeight 最小的高度
android:maxWidth 最大的寬度
android:maxHeight 最大的高度


7.png

注意:當ConstraintLayout為1.1版本以下時,使用這些屬性需要加上強制約束震糖,
app:constrainedWidth=”true”
app:constrainedHeight=”true”
3录肯、使用0dp(MATCH_CONSTRAINT)
不推薦使用match_parent,可以設置0dp吊说、配合約束代替论咏。


8.png

寬高比

當寬或者高至少有一個尺寸被設置為0dp時,可以通過屬性layout_constraintDimensionRatio設置寬高比


9.png
<TextView
        android:id="@+id/TextView1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />

這個時候TextView是一個正方形

除此之外颁井,在設置寬高比的值的時候厅贪,還可以在前面加W或H,分別指定寬度或高度限制雅宾。 例如:
app:layout_constraintDimensionRatio="H,2:3"指的是 高:寬=2:3
app:layout_constraintDimensionRatio="W,2:3"指的是 寬:高=2:3


10.png

如果兩個或以上的控件通過互相約束的方式約束在一起养涮,就是一條鏈。

    <TextView
        android:id="@+id/TextView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/TextView2" />

    <TextView
        android:id="@+id/TextView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toRightOf="@+id/TextView1"
        app:layout_constraintRight_toLeftOf="@+id/TextView3"
        app:layout_constraintRight_toRightOf="parent" />

    <TextView
        android:id="@+id/TextView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toRightOf="@+id/TextView2"
        app:layout_constraintRight_toRightOf="parent" />

11.png

一條鏈的第一個控件是這條鏈的鏈頭秀又,可以設置
layout_constraintHorizontal_chainStyle來改變整條鏈的樣式单寂。有三種樣式:
1、CHAIN_SPREAD ----展開元素(默認)
2吐辙、CHAIN_SPREAD_INSIDE ---- 展開元素宣决,但鏈的兩端貼近parent
3、CHAIN_PACKED ----鏈元素將被打包在一起昏苏。


image.png

12.png

橫向權重layout_constraintHorizontal_weight(constraintVertical為縱向)來創(chuàng)建一個權重鏈


13.png

輔助工具

1尊沸、Optimizer
當我們使用 MATCH_CONSTRAINT 時威沫,ConstraintLayout 將對控件進行 2 次測量,ConstraintLayout在1.1中可以通過設置 layout_optimizationLevel 進行優(yōu)化洼专,可設置的值有:
none:無優(yōu)化
standard:僅優(yōu)化直接約束和屏障約束(默認)
direct:優(yōu)化直接約束
barrier:優(yōu)化屏障約束
chains:優(yōu)化鏈約束
dimensions:優(yōu)化尺寸測量


14.png

2棒掠、Barrier


15.png

app:barrierDirection為屏障所在的位置,可設置的值有:bottom屁商、end烟很、left、right蜡镶、start雾袱、top
app:constraint_referenced_ids為屏障引用的控件,可設置多個(用“,”隔開)

3官还、Group
Group可以把多個控件歸為一組芹橡,方便隱藏或顯示一組控件


16.png

4、PlaceHolder
Placeholder指的是占位符望伦。在Placeholder中可使用setContent()設置另一個控件的id林说,使這個控件移動到占位符的位置。


17.png

新建一個Placeholder約束在屏幕的左上角屯伞,新建一個TextView約束在屏幕的右上角腿箩,在Placeholder中設置 app:content="@+id/textview",這時TextView會跑到屏幕的左上角愕掏。

5度秘、Guideline
Guildline像輔助線一樣,在預覽的時候幫助你完成布局(不會顯示在界面上)饵撑。
Guildline的主要屬性:
android:orientation 垂直vertical,水平horizontal
layout_constraintGuide_begin 開始位置
layout_constraintGuide_end 結束位置
layout_constraintGuide_percent 距離頂部的百分比(orientation = horizontal時則為距離左邊)


18.png

除此之外唆貌,ConstraintLayout有一個獨立的編輯器滑潘,只需要拖拽就可以完成整個布局。https://blog.csdn.net/guolin_blog/article/details/53122387

此外ConstraintLayout還有一個比較重要的子類MotionLayout 運動布局

MotionLayout 運動布局

它是一個能夠幫助我們在APP中管理手勢和控件動畫的布局組件锨咙。
導入依賴
implementation 'androidx.constraintlayout:constraintlayout:2.0.0-beta2'

implementation 'com.android.support.constraint:constraint-layout:2.0.0-beta2'

在res資源文件夾下新建xml資源文件夾语卤,然后再xml文件夾內新建一個根節(jié)點是MotionScene的xml文件。

在布局中通過app:layoutDescription="@xml/my_motionscene"引入動畫
app:motionDebug="SHOW_PATH".在調試屬性可以預覽動畫的運動軌跡酪刀。

xml布局文件中主要有Transition, ConstraintSet和StateSet等粹舵。
KeyFrameSet,可以畫曲線動畫骂倘。

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末眼滤,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子历涝,更是在濱河造成了極大的恐慌诅需,老刑警劉巖漾唉,帶你破解...
    沈念sama閱讀 212,816評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異堰塌,居然都是意外死亡赵刑,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,729評論 3 385
  • 文/潘曉璐 我一進店門场刑,熙熙樓的掌柜王于貴愁眉苦臉地迎上來般此,“玉大人,你說我怎么就攤上這事牵现☆戆茫” “怎么了?”我有些...
    開封第一講書人閱讀 158,300評論 0 348
  • 文/不壞的土叔 我叫張陵施籍,是天一觀的道長居扒。 經(jīng)常有香客問我,道長丑慎,這世上最難降的妖魔是什么喜喂? 我笑而不...
    開封第一講書人閱讀 56,780評論 1 285
  • 正文 為了忘掉前任,我火速辦了婚禮竿裂,結果婚禮上玉吁,老公的妹妹穿的比我還像新娘。我一直安慰自己腻异,他們只是感情好进副,可當我...
    茶點故事閱讀 65,890評論 6 385
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著悔常,像睡著了一般影斑。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上机打,一...
    開封第一講書人閱讀 50,084評論 1 291
  • 那天矫户,我揣著相機與錄音,去河邊找鬼残邀。 笑死皆辽,一個胖子當著我的面吹牛,可吹牛的內容都是我干的芥挣。 我是一名探鬼主播驱闷,決...
    沈念sama閱讀 39,151評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼空免!你這毒婦竟也來了空另?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 37,912評論 0 268
  • 序言:老撾萬榮一對情侶失蹤鼓蜒,失蹤者是張志新(化名)和其女友劉穎痹换,沒想到半個月后征字,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,355評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡娇豫,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,666評論 2 327
  • 正文 我和宋清朗相戀三年匙姜,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片冯痢。...
    茶點故事閱讀 38,809評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡氮昧,死狀恐怖,靈堂內的尸體忽然破棺而出浦楣,到底是詐尸還是另有隱情袖肥,我是刑警寧澤,帶...
    沈念sama閱讀 34,504評論 4 334
  • 正文 年R本政府宣布振劳,位于F島的核電站椎组,受9級特大地震影響,放射性物質發(fā)生泄漏历恐。R本人自食惡果不足惜寸癌,卻給世界環(huán)境...
    茶點故事閱讀 40,150評論 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望弱贼。 院中可真熱鬧蒸苇,春花似錦、人聲如沸吮旅。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,882評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽庇勃。三九已至檬嘀,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間责嚷,已是汗流浹背枪眉。 一陣腳步聲響...
    開封第一講書人閱讀 32,121評論 1 267
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留再层,地道東北人。 一個月前我還...
    沈念sama閱讀 46,628評論 2 362
  • 正文 我出身青樓堡纬,卻偏偏與公主長得像聂受,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子烤镐,可洞房花燭夜當晚...
    茶點故事閱讀 43,724評論 2 351