Android的七大布局总结

七大布局分别是:线性布局(LinearLayout)、相对布局(RelativeLayout)、帧布局(FrameLayout)、表格布局(TableLayout)、绝对布局(absoluteLayout)、网格布局(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(行数),TableRow包裹View(列数)
shrinkColumns属性:当TableRow里的空间布满布局的时候,指定列自动延伸填充可用部分。当TableRow里控件还没布满不觉,不起作用。可收缩列。
stretchColumns属性:设置可伸展的列,该列可以向行方向伸展,最多可占据一整行。
collapseColumns属性:设置要隐藏的列。

以上三个属性的列号都是从0开始计算,比如shrinkColumns=“2”表示第三列,可以设置多个,用逗号隔开,比如“0,2”,如果所有列都生效用“*”。
android:layout_column = "2",表示跳过第二个,直接显示到第三个格子处,从1开始算。
android:layout_span = "4" 表示合并4个单元格

绝对布局(absoluteLayout)

基本不使用

网格布局(GridLayout)

Android4.0新引入的网格矩阵形式布局控件。
使用的时候需要注意兼容,引入依赖:
compile 'com.android.support:gridlayout-v7:22.+'
GridLayout属性:

  • android:columnCount 最大列数
  • android:rowCount 最大行数
  • android:orientation 子元素中的布局方向
  • android:alignmentMode alignBounds:对齐子视图边界/alignMargins:对齐子视距内容
  • android:columnOrderPreserved 使列边界显示的顺序和列索引的顺序相同,默认true
  • android:rowOrderPreserved 使行边界显示的顺序和行索引的顺序相同,默认是true
  • android:useDefaultMargins 没有指定视图的布局参数时使用默认的边距,默认值是false

item属性:
android:layout_column 指定该单元格在第几列显示
android:layout_row 指定该单元格在第几行显示
android:layout_columnSpan 指定该单元格占据的列数
android:layout_rowSpan 指定该单元格占据的行数
android:layout_gravity 指定该单元格在容器中的位置
android:layout_columnWeight (API21新增)列权重
android:layout_rowWeight (API21新增)行权重
注意:layout_columnSpan、layout_rowSpan所使用时需要加上layout_gravity属性,否则没有效果。另外item在边缘时宽高会计算错误,需要手动设置宽高。

动态代码设置布局会使用到方法GridLayout.spec();
public static Spec spec(int start, int size)
public static Spec spec(int start, float weight)
需要注意这两个方法第二个参数,一个是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
要想实现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中的水平居中layout_centerHorizontal相当于在ConstraintLayout约束控件的左右为parent的左右;RelativeLayout中的垂直居中layout_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

假如现在要实现水平偏移,给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为纵向)来创建一个权重链


13.png

辅助工具

1、Optimizer
当我们使用 MATCH_CONSTRAINT 时,ConstraintLayout 将对控件进行 2 次测量,ConstraintLayout在1.1中可以通过设置 layout_optimizationLevel 进行优化,可设置的值有:
none:无优化
standard:仅优化直接约束和屏障约束(默认)
direct:优化直接约束
barrier:优化屏障约束
chains:优化链约束
dimensions:优化尺寸测量


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文件夹内新建一个根节点是MotionScene的xml文件。

在布局中通过app:layoutDescription="@xml/my_motionscene"引入动画
app:motionDebug="SHOW_PATH".在调试属性可以预览动画的运动轨迹。

xml布局文件中主要有Transition, ConstraintSet和StateSet等。
KeyFrameSet,可以画曲线动画。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,445评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,889评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,047评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,760评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,745评论 5 367
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,638评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,011评论 3 398
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,669评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,923评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,655评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,740评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,406评论 4 320
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,995评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,961评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,197评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,023评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,483评论 2 342