ConstraintLayout 和 RelativeLayout 的区别
Differences between ConstraintLayout and RelativeLayout
我对 ConstraintLayout
和 RelativeLayout
之间的区别感到困惑。有人可以告诉我它们之间的确切区别吗?
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 调整视图大小。
这完全是基于意见和我对 ConstraintLayout
的印象
@davidpbr 报道 ConstraintLayout
表现
我制作了两个类似的 7 子布局,每个布局都有一个父 ConstraintLayout
和 RelativeLayout
。
基于 Android Studio 方法跟踪工具,ConstraintLayout
似乎在 onMeasure 中花费了更多时间并在 onFinishInflate
中执行了额外的工作。
使用的库(support-v4
、appcompat-v7
…):
com.android.support.constraint:constraint-layout:1.0.0-alpha1
Devices/Android 版本转载于:
三星 Galaxy S6(SM-G920A。抱歉,没有 Nexus atm)。 Android5.0.2
快速方法追踪对比:
示例 Github 回购:https://github.com/OnlyInAmerica/ConstraintLayoutPerf
一个很大的区别是,即使视图消失了,ConstraintLayout 也会尊重约束。所以如果你有一个链并且你想让一个视图在中间消失,它不会破坏布局。
真正要问的问题是,是否有任何理由使用约束布局以外的任何布局?我相信答案可能是否定的。
对于那些坚持他们是针对新手程序员等的人,他们应该提供一些理由来证明他们不如任何其他布局。
约束布局在各个方面都更好(它们的 APK 大小确实花费了 150k。)。它们更快,更容易,更灵活,对变化的反应更好,当项目消失时它们会解决问题,它们更好地适应完全不同的屏幕类型并且它们不会使用那么长的嵌套循环为所有内容绘制树结构。你可以把任何东西放在任何地方,关于任何东西,任何地方。
他们在 2016 年年中时有点古怪,那时可视化布局编辑器还不够好,但他们的观点是,如果您有布局,您可能需要认真考虑使用约束布局,即使它与 RelativeLayout
甚至简单的 LinearLayout
做同样的事情。 FrameLayouts
明明还是有目的的。但是,我现在看不到构建任何其他东西。如果他们从这个开始,他们就不会添加任何其他东西了。
我注意到的唯一区别是,通过拖放在相对布局中设置的内容会自动推断出它们相对于其他元素的尺寸,因此当您 运行 应用程序时,所见即所得得到。然而,在约束布局中,即使您在设计视图中拖放一个元素,当您 运行 应用程序时,东西也可能会移动。这可以很容易地通过手动设置约束来解决,或者,一个更冒险的举动是右键单击组件树中的元素,选择约束布局子菜单,然后单击 'infer constraints'。希望这有帮助
以下是differences/advantages:
Constraint Layout 具有 Relative Layout 和 Linear layout 的双重功能:设置视图的相对位置(如 Relative layout)并设置动态 UI 的权重(仅可能在线性布局中)。
一个非常强大的用途是通过形成链来对元素进行分组。这样我们就可以形成一组视图,作为一个整体可以按需要的方式放置,而不需要添加另一层层次结构来形成另一组视图。
除了权重之外,我们还可以应用水平和垂直偏差,它只是从中心位移的百分比。 (偏差 0.5 表示居中对齐。小于或大于任何值都表示相应方向上的相应移动)。
另一个非常重要的特性是它尊重并提供处理 GONE 视图的功能,这样即使通过 java 代码将某些视图设置为 GONE,布局也不会中断。可以在这里找到更多信息:
https://developer.android.com/reference/android/support/constraint/ConstraintLayout.html#VisibilityBehavior
通过使用蓝图和可视化编辑器工具提供自动应用约束的能力,这使得设计页面变得容易。
所有这些功能导致视图层次结构扁平化,从而提高性能,还有助于实现响应性和动态性 UI,从而更容易适应不同的屏幕尺寸和密度。
这里是快速学习的最佳地点:
https://codelabs.developers.google.com/codelabs/constraint-layout/#0
官方的 ConstraintLayout
是 much faster
In the N release of Android, the ConstraintLayout
class provides similar functionality to RelativeLayout
, but at a significantly lower cost.
除了@dhaval-jivani 的回答。
我已经将项目 github 项目更新到最新版本的约束布局 v.1.1.0-beta3
我已经测量并比较了 onCreate 方法的时间以及 onCreate 开始和最后一个 preformDraw 方法执行结束之间的时间,这在 CPU 监视器中可见。所有测试均在 Samsung S5 mini 上完成 android 6.0.1
结果如下:
全新开始(应用程序启动后第一个屏幕打开)
相对布局
创建时:123 毫秒
上次预成型绘制时间 - OnCreate 时间:311.3 毫秒
约束布局
创建时:120.3 毫秒
上次预成型绘制时间 - OnCreate 时间:310 毫秒
除此之外,我还检查了这个 article , here the code 的性能测试
并发现循环计数小于 100 的约束布局变体在执行膨胀、测量和布局期间比使用相对布局的变体更快。而在旧的 Android 设备上,例如带有 Android 4.3 的三星 S3,差异更大。
作为结论,我同意 article 的评论:
Does it worth to refactor old views switch on it from RelativeLayout or LinearLayout?
As always: It depends
I wouldn’t refactor anything unless you either have a performance problem with your current layout hierarchy or you want to make significant changes to the layout anyway. Though I haven’t measured it lately, I haven’t found any performance issues in the last releases. So I think you should be safe to use it. but – as I’v said – don’t just migrate for the sake of migrating. Only do so, if there’s a need for and benefit from it.
For new layouts, though, I nearly always use ConstraintLayout. It’s so much better compare to what we had before.
我能得出的结论是
1)我们可以做UI设计而不用触及xml部分代码,说实话我觉得google 复制了 UI 在 iOS apps 中的设计方式,如果您熟悉 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"
我对 ConstraintLayout
和 RelativeLayout
之间的区别感到困惑。有人可以告诉我它们之间的确切区别吗?
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 调整视图大小。
这完全是基于意见和我对 ConstraintLayout
@davidpbr 报道 ConstraintLayout
表现
我制作了两个类似的 7 子布局,每个布局都有一个父 ConstraintLayout
和 RelativeLayout
。
基于 Android Studio 方法跟踪工具,ConstraintLayout
似乎在 onMeasure 中花费了更多时间并在 onFinishInflate
中执行了额外的工作。
使用的库(support-v4
、appcompat-v7
…):
com.android.support.constraint:constraint-layout:1.0.0-alpha1
Devices/Android 版本转载于: 三星 Galaxy S6(SM-G920A。抱歉,没有 Nexus atm)。 Android5.0.2
快速方法追踪对比:
示例 Github 回购:https://github.com/OnlyInAmerica/ConstraintLayoutPerf
一个很大的区别是,即使视图消失了,ConstraintLayout 也会尊重约束。所以如果你有一个链并且你想让一个视图在中间消失,它不会破坏布局。
真正要问的问题是,是否有任何理由使用约束布局以外的任何布局?我相信答案可能是否定的。
对于那些坚持他们是针对新手程序员等的人,他们应该提供一些理由来证明他们不如任何其他布局。
约束布局在各个方面都更好(它们的 APK 大小确实花费了 150k。)。它们更快,更容易,更灵活,对变化的反应更好,当项目消失时它们会解决问题,它们更好地适应完全不同的屏幕类型并且它们不会使用那么长的嵌套循环为所有内容绘制树结构。你可以把任何东西放在任何地方,关于任何东西,任何地方。
他们在 2016 年年中时有点古怪,那时可视化布局编辑器还不够好,但他们的观点是,如果您有布局,您可能需要认真考虑使用约束布局,即使它与 RelativeLayout
甚至简单的 LinearLayout
做同样的事情。 FrameLayouts
明明还是有目的的。但是,我现在看不到构建任何其他东西。如果他们从这个开始,他们就不会添加任何其他东西了。
我注意到的唯一区别是,通过拖放在相对布局中设置的内容会自动推断出它们相对于其他元素的尺寸,因此当您 运行 应用程序时,所见即所得得到。然而,在约束布局中,即使您在设计视图中拖放一个元素,当您 运行 应用程序时,东西也可能会移动。这可以很容易地通过手动设置约束来解决,或者,一个更冒险的举动是右键单击组件树中的元素,选择约束布局子菜单,然后单击 'infer constraints'。希望这有帮助
以下是differences/advantages:
Constraint Layout 具有 Relative Layout 和 Linear layout 的双重功能:设置视图的相对位置(如 Relative layout)并设置动态 UI 的权重(仅可能在线性布局中)。
一个非常强大的用途是通过形成链来对元素进行分组。这样我们就可以形成一组视图,作为一个整体可以按需要的方式放置,而不需要添加另一层层次结构来形成另一组视图。
除了权重之外,我们还可以应用水平和垂直偏差,它只是从中心位移的百分比。 (偏差 0.5 表示居中对齐。小于或大于任何值都表示相应方向上的相应移动)。
另一个非常重要的特性是它尊重并提供处理 GONE 视图的功能,这样即使通过 java 代码将某些视图设置为 GONE,布局也不会中断。可以在这里找到更多信息: https://developer.android.com/reference/android/support/constraint/ConstraintLayout.html#VisibilityBehavior
通过使用蓝图和可视化编辑器工具提供自动应用约束的能力,这使得设计页面变得容易。
所有这些功能导致视图层次结构扁平化,从而提高性能,还有助于实现响应性和动态性 UI,从而更容易适应不同的屏幕尺寸和密度。
这里是快速学习的最佳地点: https://codelabs.developers.google.com/codelabs/constraint-layout/#0
官方的 ConstraintLayout
是 much faster
In the N release of Android, the
ConstraintLayout
class provides similar functionality toRelativeLayout
, but at a significantly lower cost.
除了@dhaval-jivani 的回答。
我已经将项目 github 项目更新到最新版本的约束布局 v.1.1.0-beta3
我已经测量并比较了 onCreate 方法的时间以及 onCreate 开始和最后一个 preformDraw 方法执行结束之间的时间,这在 CPU 监视器中可见。所有测试均在 Samsung S5 mini 上完成 android 6.0.1 结果如下:
全新开始(应用程序启动后第一个屏幕打开)
相对布局
创建时:123 毫秒
上次预成型绘制时间 - OnCreate 时间:311.3 毫秒
约束布局
创建时:120.3 毫秒
上次预成型绘制时间 - OnCreate 时间:310 毫秒
除此之外,我还检查了这个 article , here the code 的性能测试 并发现循环计数小于 100 的约束布局变体在执行膨胀、测量和布局期间比使用相对布局的变体更快。而在旧的 Android 设备上,例如带有 Android 4.3 的三星 S3,差异更大。
作为结论,我同意 article 的评论:
Does it worth to refactor old views switch on it from RelativeLayout or LinearLayout?
As always: It depends
I wouldn’t refactor anything unless you either have a performance problem with your current layout hierarchy or you want to make significant changes to the layout anyway. Though I haven’t measured it lately, I haven’t found any performance issues in the last releases. So I think you should be safe to use it. but – as I’v said – don’t just migrate for the sake of migrating. Only do so, if there’s a need for and benefit from it. For new layouts, though, I nearly always use ConstraintLayout. It’s so much better compare to what we had before.
我能得出的结论是
1)我们可以做UI设计而不用触及xml部分代码,说实话我觉得google 复制了 UI 在 iOS apps 中的设计方式,如果您熟悉 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"