ConstraintLayout和RelativeLayout的区别

我对ConstraintLayoutRelativeLayout之间的区别感到困惑。有人能告诉我它们之间的确切区别吗?

199754 次浏览

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

规则类似于RelativeLayout,例如将底边设置为其他视图的底部。

app:layout_constraintBottom_toBottomOf="@+id/view1"

RelativeLayout不同,ConstraintLayout提供了一个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中调整视图的大小。

enter image description here

这完全是基于个人观点和我对ConstraintLayout的印象

@davidpbr ConstraintLayout性能报告

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

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

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

设备/Android版本: 三星Galaxy S6 (SM-G920A;对不起,没有Nexus atm)。Android 5.0.2 < / p >

快速方法跟踪比较:

1

示例Github repo: https://github.com/OnlyInAmerica/ConstraintLayoutPerf

一个很大的区别是,即使视图消失了,ConstraintLayout仍然尊重约束。所以它不会破坏布局如果你有一个链你想让一个视图消失在中间。

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

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

约束布局在各个方面都更好(它们的APK大小确实花费了150k)。它们更快、更简单、更灵活,能够更好地应对变化,能够在项目消失时修复问题,能够更好地适应完全不同的屏幕类型,并且不会使用一堆嵌套的循环和长长的树形结构。你可以把任何东西放在任何地方,相对于任何地方。

它们在2016年年中有点古怪,当时可视化布局编辑器不够好,但它们已经到了这样的地步:如果你有一个布局,你可能会认真考虑使用约束布局,即使它做的事情与RelativeLayout相同,甚至是简单的LinearLayoutFrameLayouts显然还有他们的目的。但是,在这一点上,我看不到任何其他东西。如果从这个开始,就不会再加其他东西了。

我注意到的唯一区别是,通过拖放在相对布局中设置的东西会自动推断出它们相对于其他元素的尺寸,所以当你运行应用程序时,你看到的就是你得到的。然而,在约束布局中,即使你在设计视图中拖放一个元素,当你运行应用程序时,东西可能会移动。这可以通过手动设置约束来轻松解决,或者更冒险的做法是右键单击组件树中的元素,选择约束布局子菜单,然后单击“推断约束”。希望这能有所帮助

以下是它们的区别/优点:

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

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

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

  4. 另一个非常重要的特性是,它尊重并提供了处理GONE视图的功能,这样,如果通过java代码将某些视图设置为GONE,布局就不会中断。更多信息可以在这里找到: 李https://developer.android.com/reference/android/support/constraint/ConstraintLayout.html#VisibilityBehavior < / p > < / >
  5. 提供了强大的自动约束应用的使用蓝图和可视化编辑器工具,使它很容易设计一个页面。

所有这些特性都使视图层次结构变得平坦,从而提高了性能,还有助于制作响应性和动态的UI,从而更容易适应不同的屏幕尺寸和密度。

这里是快速学习的最佳场所: https://codelabs.developers.google.com/codelabs/constraint-layout/#0 < / p >

正式来说,ConstraintLayout就是快得多

在Android N版本中,ConstraintLayout类提供了与RelativeLayout类似的功能,但成本要低得多。

除了@dhaval-jivani回答。

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

我已经测量并比较了onCreate方法的时间和onCreate开始和最后一个preformDraw方法执行结束之间的时间,这在CPU监视器中可见。所有测试均在三星S5 mini上进行,操作系统为android 6.0.1 结果:< / p >

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

相对布局

OnCreate: 123毫秒

最后的preformDraw时间- OnCreate时间:311.3ms

约束布局

OnCreate: 120.3女士

最后的preformDraw时间- OnCreate时间:310毫秒

除此之外,我已经从这个文章检查了性能测试,这里的代码 并发现在循环计数小于100的约束布局变量在执行膨胀、测量和布局时比相对布局变量更快。而在老式Android设备上,如搭载Android 4.3的三星S3,这一差别就更大了

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

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

一如既往:这取决于🙂

我不会重构任何东西,除非你当前的布局层次结构有性能问题,或者你想对布局做出重大改变。虽然我最近没有测量它,但我没有发现上一个版本的任何性能问题。所以我认为你使用它是安全的。但是——就像我说过的——不要只是为了迁移而迁移。只有在有需要并从中受益时才这样做。 不过,对于新的布局,我几乎总是使用ConstraintLayout。这比我们以前的好多了。

我能得出的结论是

1)我们可以UI设计不涉及xml部分的代码,老实说,我觉得谷歌复制了iOS应用中的UI设计,如果你熟悉iOS中的UI开发,这将是有意义的,但在相对布局中,很难在不涉及XML设计的情况下设置约束

2)其次,它有平面视图层次结构,不像其他布局,所以性能优于相对布局,你可能已经从其他答案看到

3)除了相对布局,它还有一些额外的东西,比如圆形相对定位,我们可以将另一个视图相对于这个视图定位在某个半径和某个角度,这在相对布局中是做不到的

我再说一遍,使用约束布局设计UI和在iOS中设计UI是一样的,所以以后如果你在iOS上工作,你会发现使用约束布局会更容易

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

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

(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"