ConstraintLayout和RelativeLayout之间的差异

时间:2016-05-19 11:10:00

标签: android android-layout android-relativelayout android-constraintlayout

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

11 个答案:

答案 0 :(得分:120)

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

的印象

答案 1 :(得分:39)

报告 @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

快速方法跟踪比较:

1

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

答案 2 :(得分:36)

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

Relative Layout and Constraint Layout equivalent properties

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

答案 3 :(得分:22)

以下是差异/优势:

  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工具提供自动约束应用的强大功能,可以轻松设计页面。

  6. 所有这些功能都会导致视图层次结构扁平化,从而提高性能,并有助于制作响应式动态UI,以便更轻松地适应不同的屏幕尺寸和密度。

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

答案 4 :(得分:12)

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

答案 5 :(得分:11)

Android视图绘制过程包括3个阶段。扩展ViewGroup

时,您可以找到相应的方法
  1. 测量
  2. 布局
  3. 绘制
  4. 使用Systrace tool我们可以计算measure/layout

    使用RelativeLayout的布局变体的Systrace:

    enter image description here

    使用ConstraintLayout的布局变体的Systrace:

    enter image description here

    性能差异(使用OnFrameMetricsAvailableListener,可让您收集有关应用程序UI渲染的逐帧计时信息)

    ConstraintLayoutmeasure/layout阶段的效果比RelativeLayout高出约40%

    enter image description here

    最后但并非最不重要的是,ConstraintLayout是构建负责任用户界面的现代方式,它不断发展,每个版本都带来了酷炫的功能,让生活更轻松。最新的是Constraint Layout 1.1

    请阅读更多hereherehere

答案 6 :(得分:5)

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

对于那些坚持以新手程序员为目标的人,他们应该提供一些理由让他们不如任何其他布局。

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

他们在2016年中期有些棘手,那里的视觉布局编辑器还不够好,但他们认为如果你有一个布局,你可能会认真考虑使用一个约束布局,即使它与RelativeLayout或甚至简单的LinearLayout完全相同。 FrameLayouts显然仍有其目的。但是,在这一点上我看不到任何其他东西。如果他们从这开始,他们就不会添加任何其他内容。

答案 7 :(得分:5)

除了@ dhaval-jivani的回答。

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

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

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

相对布局

OnCreate:123ms

上一个preformDraw时间 - OnCreate时间:311.3ms

约束布局

OnCreate:120.3ms

最后一个preformDraw时间 - OnCreate时间:310ms

除此之外,我还检查了articlehere the code的效果测试 并且发现在循环计数小于100的约束布局变量在执行膨胀,测量和布局期间更快,然后使用相对布局变体。在旧的Android设备上,比如三星S3和Android 4.3,差异更大。

作为结论,我同意article的评论:

  

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

     

一如既往:取决于

     

除非您的当前布局层次结构存在性能问题,或者您希望对布局进行重大更改,否则我不会重构任何内容。虽然我最近没有测量过,但我在上一版本中没有发现任何性能问题。所以我认为你应该安全使用它。但是 - 正如我所说的 - 不要只是为了迁移而迁移。只有在需要并从中受益时才这样做。   但是对于新的布局,我几乎总是使用ConstraintLayout。与我们之前的情况相比,它要好得多。

答案 8 :(得分:3)

正式地,ConstraintLayoutmuch faster

  

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

答案 9 :(得分:3)

我可以做的结论是

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

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

3)除了相对布局之外,它还有额外的东西,例如圆形相对定位,其中我们可以在某个半径处定位相对于该视图的另一个视图,其中某个角度不能相对于相对布局布局

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

答案 10 :(得分:0)

我唯一的区别是,通过拖放设置在相对布局中的内容会自动调整其相对于其他元素的尺寸,因此当您运行应用时,您所看到的就是您所获得的内容。但是在约束布局中,即使您在设计视图中拖放元素,当您运行应用程序时,事物也可能会被移动。这可以通过手动设置约束轻松修复,或者更有风险的移动是右键单击组件树中的元素,选择约束布局子菜单,然后单击“推断约束”。希望这有帮助