ConstraintLayout和RelativeLayout之间的区别


219

我感到困惑的区别ConstraintLayoutRelativeLayout。有人可以告诉我他们之间的确切区别吗?


9
ConstraintLayout 主要是为新程序员设计的,因此他们可以使用Visual Editor轻松设计布局,而不是通过XML手动构建布局。
CopsOnRoad'1

1
@Jack肯定对经验丰富的开发人员也有更深的目的
Moses Aprico

@MosesAprico你说的对,它确实有。但我认为,经验丰富的专家开发者已经有很多其他的方式(他们已经知道就好RealtiveLayoutLinearLayoutGridLayout等),以获得他们想要的视图层次。
CopsOnRoad

5
@CopsOnRoad其实你错了。苹果已经进行约束布局超过5年了。您可以获得任何大小的响应式设计,而不必编写大量复杂的布局。开始绑定多个视图时,只需要3个基本控件即可创建完全响应的设计。
尼克·特纳

Answers:


145

目的ConstraintLayout是通过对每个视图应用一些规则以避免嵌套来优化和展平布局的视图层次结构。

规则使您想起RelativeLayout,例如将其他视图的左侧设置为左侧。

app:layout_constraintBottom_toBottomOf="@+id/view1"

与不同RelativeLayoutConstraintLayout提供的bias值用于相对于手柄(以圆圈标记)以0%和100%的水平和垂直偏移定位视图。这些百分比(和分数)可在不同的屏幕密度和尺寸下无缝地定位视图。

app:layout_constraintHorizontal_bias="0.33" <!-- from 0.0 to 1.0 -->
app:layout_constraintVertical_bias="0.53" <!-- from 0.0 to 1.0 -->

基准手柄(圆角的长管,在圆手柄下方)用于将视图的内容与另一个视图参考对齐。

方形手柄(在视图的每个角上)用于按dps调整视图的大小。

在此处输入图片说明

这完全基于观点,我对 ConstraintLayout


9
我们仍然可以使用RelativeLayout创建扁平化的布局,这就是为什么我对ConstraintLayout照顾RelativeLayout不能照顾的地方感到困惑的原因?

6
RelativeLayout是两次通过的布局,遭受双重征税。它必须至少测量/布局两次。ConstraintLayout不会遭受这种性能损失。
Christopher Perry

5
@没什么,我们仍然可以使用RelativeLayout创建展平布局。但是除了这里提到的每个人之外,ConstraintLayout允许您以预定义比例使用负边距大小子视图。最后一种方法是根据材料设计
Eugene Brusov

4
除非您嵌套LinearLayout或其他RelativeLayout,否则某些布局在RelativeLayout中是不可能的。例如:将3个视图的“堆栈”相对于另一个视图垂直居中
Gak2'9

@ Gak2如果没有嵌套布局,在您的示例中我看不到任何不可能的事情。也许您说的是“堆栈”以外的其他含义。我只使用“ layout_alignEnd”,“ layout_below”,“ layout _...”,就可以用它构建任何类型的堆栈……
令人难以置信的

81

相对布局和约束布局等效属性

相对布局和约束布局等效属性

(1)相对布局:

android:layout_centerInParent="true"    

(1)约束布局等效项:

app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"

(2)相对布局:

android:layout_centerHorizontal="true"

(2)约束布局等效项:

app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintEnd_toEndOf="parent"

(3)相对布局:

android:layout_centerVertical="true"    

(3)约束布局等效项:

app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"

(4)相对布局:

android:layout_alignParentLeft="true"   

(4)约束布局等效项:

app:layout_constraintLeft_toLeftOf="parent"

(5)相对布局:

android:layout_alignParentStart="true"

(5)约束布局等效项:

app:layout_constraintStart_toStartOf="parent"

(6)相对布局:

android:layout_alignParentRight="true"

(6)约束布局等效项:

app:layout_constraintRight_toRightOf="parent"

(7)相对布局:

android:layout_alignParentEnd="true"    

(7)约束布局等效项:

app:layout_constraintEnd_toEndOf="parent"

(8)相对布局:

android:layout_alignParentTop="true"

(8)约束布局等效项:

app:layout_constraintTop_toTopOf="parent"

(9)相对布局:

android:layout_alignParentBottom="true" 

(9)约束布局等效项:

app:layout_constraintBottom_toBottomOf="parent"

(10)相对布局:

android:layout_alignStart="@id/view"

(10)约束布局等效项:

app:layout_constraintStart_toStartOf="@id/view"

(11)相对布局:

android:layout_alignLeft="@id/view" 

(11)约束布局等效项:

app:layout_constraintLeft_toLeftOf="@id/view"

(12)相对布局:

android:layout_alignEnd="@id/view"  

(12)约束布局等效项:

app:layout_constraintEnd_toEndOf="@id/view"

(13)相对布局:

android:layout_alignRight="@id/view"

(13)约束布局等效项:

app:layout_constraintRight_toRightOf="@id/view"

(14)相对布局:

android:layout_alignTop="@id/view"  

(14)约束布局等效项:

app:layout_constraintTop_toTopOf="@id/view"

(15)相对布局:

android:layout_alignBaseline="@id/view" 

(15)约束布局等效项:

app:layout_constraintBaseline_toBaselineOf="@id/view"

(16)相对布局:

android:layout_alignBottom="@id/view"

(16)约束布局等效项:

app:layout_constraintBottom_toBottomOf="@id/view"

(17)相对布局:

android:layout_toStartOf="@id/view"

(17)约束布局等效项:

app:layout_constraintEnd_toStartOf="@id/view"

(18)相对布局:

android:layout_toLeftOf="@id/view"  

(18)约束布局等效项:

app:layout_constraintRight_toLeftOf="@id/view"

(19)相对布局:

android:layout_toEndOf="@id/view"

(19)约束布局等效项:

app:layout_constraintStart_toEndOf="@id/view"

(20)相对布局:

android:layout_toRightOf="@id/view"

(20)约束布局等效项:

app:layout_constraintLeft_toRightOf="@id/view"

(21)相对布局:

android:layout_above="@id/view" 

(21)约束布局等效项:

app:layout_constraintBottom_toTopOf="@id/view"

(22)相对布局:

android:layout_below="@id/view" 

(22)约束布局等效项:

app:layout_constraintTop_toBottomOf="@id/view"


2
您可以发布文字而不是图片吗?这样对我和其他人将非常有用。
新开发者

2
每个开始学习约束布局的人都需要看到这一点。谢谢。
Grantespo

1
这是有用的信息,但仅仅是文档转储,不会做任何解释它们之间区别的操作。
YetAnotherRandomUser19年

1
不,我没有时间看文档,这当然很有用。并用简单的语言编写。正在投票。
CodeToLife

46

@davidpbr报告 ConstraintLayout性能

我做了两个类似的7子布局,每个布局都有一个父布局ConstraintLayoutRelativeLayout。基于Android Studio方法跟踪工具,它似乎ConstraintLayout在onMeasure上花费了更多时间,并在onFinishInflate

使用的库(support-v4appcompat-v7…):

com.android.support.constraint:constraint-layout:1.0.0-alpha1

在以下设备/ Android版本上复制:Samsung Galaxy S6(SM-G920A。很抱歉,没有Nexus atm)。Android 5.0.2

快速方法跟踪比较:

1个

Github回购示例:https : //github.com/OnlyInAmerica/ConstraintLayoutPerf


出于同一问题:我现在暂时关闭它-alpha 4/5带来了相当大的性能改进。我们可能可以对其进行更多改进,但这可能要等到1.0之后。
Oleksandr,2016年

您能否解释一下您使用哪种工具进行比较?
Nativ

2
@Nativ Monotirs-> CPU->时间跟踪器图标
Andrey T

18
在带有Android 6.0.1的Nexus 5上以约束布局:1.0.1运行并分析相同的代码,结果如下:相对布局-初始化2毫秒(测量30毫秒+ 16毫秒)= 62毫秒(在Layouyt上)7毫秒= 9毫秒(共54毫秒)约束布局-初始7ms约束布局生成布局参数+添加视图〜7 * 2ms = 14ms实测60ms + 52ms〜112ms布局8ms总计〜141ms相对布局的首次初始化几乎比约束快三倍。
Andrey T

2
引入了约束布局,以便可以减少嵌套视图层次结构。因此,更少的层次结构意味着更少的时间在视图树中从上到下遍历。因此,创建约束布局中可能不需要的嵌套视图层次并将其与相对布局进行比较的意义何在?在相对布局中,您更有机会最终使用嵌套结构?
codepeaker

27

以下是区别/优点:

  1. 约束布局具有相对布局和线性布局的双重功能:设置视图的相对位置(如“相对布局”)并设置动态UI的权重(仅在线性布局中可用)。

  2. 一个非常强大的用途是通过形成链来对元素进行分组。这样,我们可以形成一组视图,这些视图作为一个整体可以以所需的方式放置,而无需添加另一层层次结构即可形成另一组视图。

  3. 除了权重之外,我们还可以应用水平和垂直偏差,这不过是相对于中心的位移百分比。(偏差为0.5表示居中对齐。任何一个值小于或大于此值表示在相应方向上的相应移动)。

  4. 另一个非常重要的功能是它尊重并提供了处理GONE视图的功能,因此,如果通过Java代码将某些视图设置为GONE,则布局不会中断。可以在这里找到更多信息:https : //developer.android.com/reference/android/support/constraint/ConstraintLayout.html#VisibilityBehavior

  5. 通过使用Blue Print和Visual Editor工具提供自动约束应用的功能,这使设计页面变得容易。

所有这些功能导致视图层次结构变平,从而改善了性能,还有助于使响应式和动态UI可以更轻松地适应不同的屏幕尺寸和密度。

这是快速学习的最佳地方:https : //codelabs.developers.google.com/codelabs/constraint-layout/#0


6)ConstraintLayout可以按预定义的比例medium.com/google-developers/…调整子视图的大小。例如,当您要将ImageView保持在16:9时,这很有用。
尤金·布鲁索夫

15

一个很大的不同是,即使视图消失了,ConstraintLayout也会遵守约束。因此,如果您有链条并且想要使视图在中间消失,它不会破坏布局。


你能举个例子吗?假设那里有3个按钮。我将隐藏第二个按钮,并将第三个按钮附加到ID为btn2的第二个按钮上。假设我隐藏了第二个按钮,那么第三个按钮如何找到第二个按钮的ID?

1
这不是真的。如果将按钮的可见性设置为“不可见”而不是“消失”,则不会违反约束。对我而言,@ Nikola所说的最大不同是偏见,可以帮助您创建更多的“响应式”视图。
zapotec

@Nothing让我们假设两个按钮都在下面。即使您隐藏了tButton 2,它也仍然位于“查看协定”中,无论是在您的xml还是代码中。ConstraintLayout将尊重它,并且Button 3将在Button 1下。在一个RelativeLayout中,Button 2消失了,约束也随之消失了,因此Button 3将处于默认位置,因此位于屏幕的左上方。
Herrbert74年

@zapotec我尊重其他东西对您更重要,但是对我来说,这确实是很酷的区别。修复了我讨厌RelativeLayout中的唯一内容。不能选择使用invisible,因为它将占用空间。
Herrbert74年

7

除了@ dhaval-jivani答案。

我已经更新了项目github项目为约束布局v.1.1.0-beta3的最新版本

我已经测量并比较了onCreate方法的时间和onCreate开始与最后一个preformDraw方法执行结束之间的时间,该时间在CPU监视器中可见。所有测试均在装有Android 6.0.1的Samsung S5 mini上完成,结果如下:

重新开始(应用程序启动后第一次打开屏幕)

相对布局

OnCreate:123ms

上一次瓶坯绘制时间-开创建时间:311.3ms

约束布局

OnCreate:120.3ms

上一次瓶坯绘制时间-开创建时间:310ms

除此之外,我还检查了本文的性能测试,这里的代码 ,发现在循环计数小于100约束布局变种速度更快膨胀,措施的执行过程中,再布局相对布局变种。在旧的Android设备上,例如带有Android 4.3的Samsung S3,两者之间的差异更大。

作为结论,我同意文章的评论:

重构旧视图是否值得从RelativeLayout或LinearLayout启用它?

一如既往:取决于

我不会重构任何东西,除非您当前的布局层次结构存在性能问题,或者无论如何您都希望对布局进行重大更改。尽管我最近没有对其进行度量,但是在最新发行版中没有发现任何性能问题。因此,我认为您应该安全使用它。但是-正如我所说-不仅仅是为了迁移而迁移。只有在需要并从中受益时,才这样做。但是,对于新布局,我几乎总是使用ConstraintLayout。与我们以前相比,它要好得多。


6

据官方统计,ConstraintLayout要快得多

在Android的N版本中,ConstraintLayout该类提供了与相似的功能RelativeLayout,但成本大大降低。


6

真正要问的是,除了约束布局以外,是否有任何其他理由使用任何布局?我相信答案可能不是。

对于那些坚持认为它们是针对新手程序员等的人,他们应该提供一些理由使其不如任何其他布局。

约束布局在各个方面都更好(APK大小的确花费约15万。)。它们更快,更容易,更灵活,对更改做出更好的反应,在项目消失时解决问题,更好地适应截然不同的屏幕类型,并且不使用那么长的嵌套循环绘制出一切的树状结构。您可以将任何东西放在任何地方,任何地方都可以。

他们在2016年中期有点棘手,当时视觉布局编辑器还不够好,但是要点是,如果您根本没有布局,那么您甚至可能要认真考虑使用约束布局,甚至当它和一个RelativeLayout甚至简单的东西做同样的事情时LinearLayoutFrameLayouts显然仍然有他们的目的。但是,我目前看不到其他任何东西。如果他们以此开始,他们将不会添加任何其他内容。


1
有没有更快的证明?
Rajesh Nasit

1
是。它更快。布局位于单个求解器中,而不是遍历树。对于大多数事情来说,这并不重要,因为它是在调用布局时完成的。但是,视图树虽然很容易,但会在视图内部创建一堆视图,这需要调用才能调用。从理论上讲虽然更好,但实际上,用一小段代码执行布局比遍历整个视图树要容易得多。有了更多的观看次数,它会变得更加令人印象深刻,但这是5月的基准:medium.com/@krpiotrek/constraintlayout-performance-c1455c7984d7
塔塔雷兹化时间为

我面临另一个问题,是否应该替换正在使用的应用中的所有现有Relativelayouts?会大大提高性能吗?
Sreekanth Karumanaghat

@SreekanthKarumanaghat似乎您永远都不会回过头来替换那些花在更换时间上的时间,这样可以节省您的时间。在大多数情况下,我们所说的3.5ms周期下降到3.25ms。如果它为您提供了额外的功能或您需要的东西,那么可以肯定,但是纯粹出于速度考虑。尽管我们正在谈论按下转换按钮。
tar

5

我可以得出的结论是

1)我们可以在不触摸代码的xml部分情况下进行UI设计,说实话,我觉得google已经复制了iOS应用中UI的设计方式,如果您熟悉iOS中的UI开发会很有意义,但是在相对布局上不接触xml设计很难设置约束

2)其次,它具有不同于其他布局的平面视图层次结构,因此其性能要比您从其他答案中可能看到的相对布局更好

3)除了相对布局外,它还具有其他功能,例如圆形相对定位,我们可以相对于该视图以一定的半径和一定的角度相对于该视图定位另一视图,这在相对布局中是无法做到的

我再说一遍,使用约束布局设计UI与在iOS中设计UI相同,因此,将来如果在iOS上工作,使用约束布局会更容易


1

我注意到的唯一区别是,通过拖放在相对布局中设置的事物会自动推断出其相对于其他元素的尺寸,因此,当您运行应用程序时,所见即所得。但是,在约束布局中,即使您在设计视图中拖放元素,运行应用程序时也可能会发生变化。可以通过手动设置约束轻松地解决此问题,或者更危险的举动是右键单击组件树中的元素,选择约束布局子菜单,然后单击“推断约束”。希望这可以帮助

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.