2020.7.28
1.基礎(chǔ)知識(shí)
- View: 單個(gè)的艳狐、看得到的、可以和用戶交互的控件
-
ViewGroup:一個(gè)容器诵次，可以存放多個(gè)view/viewGroup(即容器間可以層層嵌套)，并且管理view的布局
圖解1.png
界面剖析.png - 根據(jù)每個(gè)容器的具體功能劃分：
FrameLayout：?? 幀布局
LinearLayout： ? 線性布局
RelativeLayout：? 相對(duì)布局->A和B之間有相對(duì)對(duì)齊關(guān)系
onstraintLayout：?約束布局 - xml中引用某個(gè)資源：使用@開(kāi)頭
xml中使用id來(lái)標(biāo)識(shí)每一個(gè)控件 -
控件常用單位是dp
dp圖解.png
2.所有布局共有屬性
- layout_width/height：
①給定尺寸,單位dp
②match_parent：匹配父容器的尺寸
③wrap_content：內(nèi)容多大空間就多大 -
layout_margin：
在FrameLayout中：設(shè)置和父容器左右上下的外間距，在沒(méi)有給固定尺寸下最明顯
在LinearLayout中：橫向布局則以左側(cè)最近的控件的右邊界為基準(zhǔn)
?????????縱向布局則以頂部最近控件的下邊界為基準(zhǔn)
以下屬性在RelativeLayout比較特殊
- layout_marginLeft/Start：設(shè)置和父容器(LinearLayout取決于布局方式)左側(cè)間距
- layout_marginTop：設(shè)置和父容器(LinearLayout取決于布局方式)頂部的距離
- layout_marginRight/End：在沒(méi)有給固定尺寸下良蒸，設(shè)置與父容器右側(cè)的間距
- start/end：有些文字是從右到左，有些是從左到右
-
padding：視圖本身的內(nèi)容和這個(gè)視圖之間的距離->內(nèi)間距
padding演示.gif
3.FrameLayout 幀布局
控件間相互覆蓋伍玖，類似于PS里面的圖層疊加(覆蓋)嫩痰，該布局方式是最簡(jiǎn)單的布局，當(dāng)然局限性也很大窍箍，不常用
-
layout_gravity：設(shè)置控件和父容器的的關(guān)系(外部)
start/left：父容器左側(cè)
top/bottom：父容器頂/底部
right/end：父容器右側(cè)
center：居中 - gravity：設(shè)置自己的子控件和我的關(guān)系(內(nèi)部)
4.LinearLayout 線性布局
- 只有橫向或者縱向的布局
- 必須確定擺放的方式：橫向串纺、縱向
orientation：默認(rèn)橫向擺放 -
layout_weight：權(quán)重
①給寬度或者高度設(shè)為0dp
②設(shè)置寬/高的比例 - 注意：容器的嵌套不要太多，效率低：計(jì)算容器的尺寸
小Demo實(shí)例
結(jié)構(gòu)分析.png
一共三層線性布局：
第一層：縱向
第二層：橫向
第三層：縱向
Tip：寬度設(shè)為match_parent椰棘，gravity設(shè)置為水平居中纺棺，搭配權(quán)重分配可以達(dá)到圖示的分配效果
5.RelativeLayout 相對(duì)布局
子控件和子控件之間、子控件和父控件之間可以添加對(duì)齊的關(guān)系
但主要還是子控件和子控件之間
- A和B之間有相對(duì)對(duì)齊關(guān)系
常用的幾種對(duì)齊屬性
| 屬性名 | 功能效果 |
|---|---|
| layout_alignParentRight/Left/Bottom/Top | 和父容器右/左/頂部/底部靠齊 |
| layout_centerInParent | 在父容器的中央 |
| layout_toLeft/Right/Of | 靠齊指定控件的左/右側(cè) |
| layout_below | 頂部靠齊指定控件的底部 |
| layout_above | 底部靠齊指定控件的頂部 |
| layout_alignBottom/Top | 底部(頂部)靠齊指定控件的底部(頂部) |
| layout_marginRight/Left/Bottom/Top | 需要看控件所處的相對(duì)位置 |
6.ConstraintLayout 約束布局
幾乎是通過(guò)手動(dòng)拖拽控件的方式來(lái)進(jìn)行界面布局邪狞，很方便祷蝌，最常用
拖拽演示.gif
設(shè)置屬性.png
-
引導(dǎo)線的使用：進(jìn)行分區(qū)域操作
引導(dǎo)線的使用.gif -
使用鏈條添加權(quán)重
添加權(quán)重.gif -
鏈條：
spread inside：兩邊靠邊不動(dòng)，中間的控件進(jìn)行均分
packed：兩邊的控件擠壓中間的控件帆卓，抱團(tuán)
鏈條操作.gif
控件間的間距同樣通過(guò)拖動(dòng)四周的點(diǎn)進(jìn)行控制
