ConstraintLayout和RelativeLayout之间的差异

b2m*_*mob 200 android android-layout android-relativelayout android-constraintlayout

我对ConstraintLayout和RelativeLayout之间的区别感到困惑.有人可以告诉我他们之间的确切差异吗?

Nik*_*ski 133

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

规则提醒您RelativeLayout,例如将左侧设置为其他视图的左侧.

app:layout_constraintBottom_toBottomOf="@+id/view1"
Run Code Online (Sandbox Code Playgroud)

与之不同的是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 -->
Run Code Online (Sandbox Code Playgroud)

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

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

在此输入图像描述

这完全是基于意见和我的印象 ConstraintLayout

  • 我们仍然可以使用RelativeLayout创建展平布局,这就是为什么我很困惑ConstraintLayout在哪里注意RelativeLayout不能? (8认同)
  • @Nothing是的,我们仍然可以使用RelativeLayout创建展平布局.但除了这里提到的每个人之外,ConstraintLayout还允许您使用[负边距](https://medium.com/google-developers/building-interfaces-with-constraintlayout-3958fa38a9f7#f438)和[预定比例的尺寸子视图]( https://medium.com/google-developers/building-interfaces-with-constraintlayout-3958fa38a9f7#7318).最后一个是根据[Material design](https://material.io/guidelines/components/cards.html#cards-content-blocks)在CardView中保持ImageView的16:9比例最强大的方法 (5认同)
  • RelativeLayout是一种双向布局,遭受双重征税.它必须至少测量/布局两次.ConstraintLayout不会遭受此性能损失. (4认同)
  • 除非嵌套LinearLayout或其他RelativeLayout,否则RelativeLayout中有一些布局是不可能的.例如:相对于另一个视图垂直居中3个视图的"堆栈" (4认同)

Nai*_*lah 57

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

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

(1)相对布局:

android:layout_centerInParent="true"    
Run Code Online (Sandbox Code Playgroud)

(1)Constraint Layout等效:

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"
Run Code Online (Sandbox Code Playgroud)

(2)相对布局:

android:layout_centerHorizontal="true"
Run Code Online (Sandbox Code Playgroud)

(2)Constraint Layout等效:

app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintEnd_toEndOf="parent"
Run Code Online (Sandbox Code Playgroud)

(3)相对布局:

android:layout_centerVertical="true"    
Run Code Online (Sandbox Code Playgroud)

(3)Constraint Layout等效:

app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"
Run Code Online (Sandbox Code Playgroud)

(4)相对布局:

android:layout_alignParentLeft="true"   
Run Code Online (Sandbox Code Playgroud)

(4)Constraint Layout等效:

app:layout_constraintLeft_toLeftOf="parent"
Run Code Online (Sandbox Code Playgroud)

(5)相对布局:

android:layout_alignParentStart="true"
Run Code Online (Sandbox Code Playgroud)

(5)Constraint Layout等效:

app:layout_constraintStart_toStartOf="parent"
Run Code Online (Sandbox Code Playgroud)

(6)相对布局:

android:layout_alignParentRight="true"
Run Code Online (Sandbox Code Playgroud)

(6)Constraint Layout等效:

app:layout_constraintRight_toRightOf="parent"
Run Code Online (Sandbox Code Playgroud)

(7)相对布局:

android:layout_alignParentEnd="true"    
Run Code Online (Sandbox Code Playgroud)

(7)Constraint Layout等效:

app:layout_constraintEnd_toEndOf="parent"
Run Code Online (Sandbox Code Playgroud)

(8)相对布局:

android:layout_alignParentTop="true"
Run Code Online (Sandbox Code Playgroud)

(8)Constraint Layout等效:

app:layout_constraintTop_toTopOf="parent"
Run Code Online (Sandbox Code Playgroud)

(9)相对布局:

android:layout_alignParentBottom="true" 
Run Code Online (Sandbox Code Playgroud)

(9)Constraint Layout等效:

app:layout_constraintBottom_toBottomOf="parent"
Run Code Online (Sandbox Code Playgroud)

(10)相对布局:

android:layout_alignStart="@id/view"
Run Code Online (Sandbox Code Playgroud)

(10)Constraint Layout等效:

app:layout_constraintStart_toStartOf="@id/view"
Run Code Online (Sandbox Code Playgroud)

(11)相对布局:

android:layout_alignLeft="@id/view" 
Run Code Online (Sandbox Code Playgroud)

(11)Constraint Layout等效:

app:layout_constraintLeft_toLeftOf="@id/view"
Run Code Online (Sandbox Code Playgroud)

(12)相对布局:

android:layout_alignEnd="@id/view"  
Run Code Online (Sandbox Code Playgroud)

(12)Constraint Layout等效:

app:layout_constraintEnd_toEndOf="@id/view"
Run Code Online (Sandbox Code Playgroud)

(13)相对布局:

android:layout_alignRight="@id/view"
Run Code Online (Sandbox Code Playgroud)

(13)Constraint Layout等效:

app:layout_constraintRight_toRightOf="@id/view"
Run Code Online (Sandbox Code Playgroud)

(14)相对布局:

android:layout_alignTop="@id/view"  
Run Code Online (Sandbox Code Playgroud)

(14)Constraint Layout等效:

app:layout_constraintTop_toTopOf="@id/view"
Run Code Online (Sandbox Code Playgroud)

(15)相对布局:

android:layout_alignBaseline="@id/view" 
Run Code Online (Sandbox Code Playgroud)

(15)Constraint Layout等效:

app:layout_constraintBaseline_toBaselineOf="@id/view"
Run Code Online (Sandbox Code Playgroud)

(16)相对布局:

android:layout_alignBottom="@id/view"
Run Code Online (Sandbox Code Playgroud)

(16)Constraint Layout等效:

app:layout_constraintBottom_toBottomOf="@id/view"
Run Code Online (Sandbox Code Playgroud)

(17)相对布局:

android:layout_toStartOf="@id/view"
Run Code Online (Sandbox Code Playgroud)

(17)Constraint Layout等效:

app:layout_constraintEnd_toStartOf="@id/view"
Run Code Online (Sandbox Code Playgroud)

(18)相对布局:

android:layout_toLeftOf="@id/view"  
Run Code Online (Sandbox Code Playgroud)

(18)Constraint Layout等效:

app:layout_constraintRight_toLeftOf="@id/view"
Run Code Online (Sandbox Code Playgroud)

(19)相对布局:

android:layout_toEndOf="@id/view"
Run Code Online (Sandbox Code Playgroud)

(19)Constraint Layout等效:

app:layout_constraintStart_toEndOf="@id/view"
Run Code Online (Sandbox Code Playgroud)

(20)相对布局:

android:layout_toRightOf="@id/view"
Run Code Online (Sandbox Code Playgroud)

(20)Constraint Layout等效:

app:layout_constraintLeft_toRightOf="@id/view"
Run Code Online (Sandbox Code Playgroud)

(21)相对布局:

android:layout_above="@id/view" 
Run Code Online (Sandbox Code Playgroud)

(21)Constraint Layout等效:

app:layout_constraintBottom_toTopOf="@id/view"
Run Code Online (Sandbox Code Playgroud)

(22)相对布局:

android:layout_below="@id/view" 
Run Code Online (Sandbox Code Playgroud)

(22)Constraint Layout等效:

app:layout_constraintTop_toBottomOf="@id/view"
Run Code Online (Sandbox Code Playgroud)

  • 每个开始学习约束布局的人都需要看到这一点。谢谢。 (7认同)
  • 可以用文字代替图片吗?这样它对我和其他人将来都会非常有用。 (3认同)
  • 不,我没有时间查看文档,这当然很有用。并且用简单的语言写成。点赞。 (3认同)
  • 是的,我已经更新了答案. (2认同)
  • 这是有用的信息,但只是一个文档转储,并没有做任何事情来解释它们之间的区别。 (2认同)

Dha*_*ani 43

报道@davidpbr ConstraintLayout表现

我制作了两个相似的7个孩子的布局,每个布局都有父母ConstraintLayoutRelativeLayout.基于Android Studio方法跟踪工具,它似乎ConstraintLayout花费更多时间在onMeasure上并执行其他工作onFinishInflate.

使用的库(support-v4,appcompat-v7...):

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

设备/ Android版本转载于:三星Galaxy S6(SM-G920A.抱歉,没有Nexus atm).Android 5.0.2

快速方法跟踪比较:

1

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

  • 在具有android 6.0.1的Nexus 5上使用约束布局运行和分析相同的代码:1.0.1,结果:相对布局 - 测量30ms时的init 2ms + 16ms = Layouyt上的62ms 7ms = 9ms总计54 ms约束布局 - init 7ms约束布局生成布局参数+添加视图~7*2ms = 14ms开测量60ms + 52ms~112ms开布局8ms总计~141ms相对布局的第一次初始化几乎比约束快三倍. (17认同)
  • @Nativ Monotirs-> CPU->时间跟踪器图标 (2认同)
  • 引入了约束布局,以便可以减少嵌套视图层次结构.因此,Less hierarchy意味着在视图树中从顶部到底部遍历的时间更短.那么,制作嵌套视图层次结构的要点是什么?在Constraint布局中可能不需要它,并将它与相对布局进行比较,在相对布局中你有更多的机会最终得到嵌套结构? (2认同)

小智 25

以下是差异/优势:

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


Her*_*t74 14

一个很大的区别是,即使视图消失,ConstraintLayout也会尊重约束.因此,如果您有一个链并且您想让视图在中间消失,它将不会破坏布局.

  • 这不是真的。如果将 Button 的可见性设置为“INVISIBLE”而不是“GONE”,则不会破坏约束。至于我,@Nikola 所说的最大不同是偏见,它可以帮助您创建更多“响应式”视图。 (2认同)

ser*_*inc 8

据官方统计,ConstraintLayout要快得多

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


mur*_*ish 7

我可以得出的结论是

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

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

3)除了相对布局之外,它还具有额外的东西,例如圆形相对定位,我们可以在相对布局中无法做到的特定半径和特定角度相对于该视图定位另一个视图

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


Tat*_*ize 6

要问的真正问题是,有没有理由使用除约束布局之外的任何布局?我相信答案可能不是.

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

约束布局在各方面都更好(它们在APK大小上的成本大约为150k).它们更快,更容易,更灵活,对更改做出更好的反应,在项目消失时解决问题,更好地符合完全不同的屏幕类型,并且不使用一堆嵌套循环为一切画出树状结构.你可以随处随地放置任何东西.

它们在2016年中期有点棘手,在那里视觉布局编辑器还不够好,但是他们认为如果你有一个布局,你可能要认真考虑使用约束布局,甚至当它做同样的事情RelativeLayout,甚至是简单的事情LinearLayout.FrameLayouts显然仍然有他们的目的.但是,在这一点上我看不到任何其他东西.如果他们从这开始,他们将不会添加任何其他东西.

  • 有证据证明速度更快吗? (2认同)

And*_*y T 6

除了@ 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。与我们以前相比,它要好得多。