ConstraintLayout과 RelativeLayout의 차이점


219

나는 사이의 차이에 대해 혼란 스러워요 ConstraintLayoutRelativeLayout. 누군가가 그들 사이의 정확한 차이점을 말해 줄 수 있습니까?


9
ConstraintLayout은 주로 새로운 프로그래머를 위해 설계되었으므로 XML을 통해 직접 레이아웃을 작성하는 대신 Visual Editor를 사용하여 레이아웃을 쉽게 디자인 할 수 있습니다.
CopsOnRoad

1
@Jack은 또한 노련한 전문가들을위한 더 깊은 목적을 가지고 있습니다
Moses Aprico

@MosesAprico 당신이 맞습니다. 하지만 노련한 전문가의 devs 이미 다른 방법으로 많은 (아직처럼 알고 있다고 생각 RealtiveLayout, LinearLayout, GridLayout그들이 원하는 뷰 계층 구조를 얻을 수를 등).
CopsOnRoad

5
@CopsOnRoad 사실 당신은 틀 렸습니다. Apple은 5 년 이상 구속 조건 레이아웃을 해왔습니다. 어떤 크기로든 반응 형 디자인을 얻을 수 있으며 복잡한 레이아웃을 많이 작성할 필요가 없습니다. 다중 뷰 바인딩을 시작할 때 반응이 빠른 디자인을 만들려면 3 가지 기본 컨트롤 만 있으면됩니다.
Nick Turner

답변:


145

ConstraintLayout중첩을 피하기 위해 각보기에 몇 가지 규칙을 적용하여 레이아웃의보기 계층 구조를 최적화하고 평탄화하는 것이 목적입니다 .

규칙 RelativeLayout은 예를 들어 다른보기의 왼쪽에서 왼쪽으로 설정하는 것을 상기시킵니다 .

app:layout_constraintBottom_toBottomOf="@+id/view1"

와 달리 RelativeLayout, 핸들 (원으로 표시)을 기준으로 가로 및 세로 오프셋을 0 % 및 100 %로 표시하는 데 사용되는 값을 ConstraintLayout제공 bias합니다. 이 백분율 (및 분수)은 다양한 화면 밀도와 크기에서보기를 매끄럽게 배치합니다.

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이 할 수없는 곳을 돌보는 곳이 혼란 스럽습니까?

7
RelativeLayout은 이중 패스로 고통받는 2 패스 레이아웃입니다. 적어도 두 번 측정 / 레이아웃해야합니다. ConstraintLayout은 이러한 성능 저하를 겪지 않습니다.
크리스토퍼 페리

5
@ 아무것도 그래도 RelativeLayout을 사용하여 평평한 레이아웃을 만들 수 있습니다. 그러나 여기에 언급 된 모든 사람 외에도 ConstraintLayout을 사용하면 음수 여백크기 하위 뷰를 미리 정의 된 비율로 사용할 수 있습니다 . 마지막 하나는 16 유지하는 가장 강력한 방법입니다 따라 CardView에 이미지 뷰를위한 9 비율을 재 설계
유진 Brusov

4
LinearLayout 또는 다른 RelativeLayout을 중첩하지 않으면 RelativeLayout에서 불가능한 일부 레이아웃이 있습니다. 예를 들어 : 다른 뷰에 대해 수직으로 3 개의 뷰로 구성된 "스택"을
중앙에 배치

@ Gak2 중첩 레이아웃이 없으면 예제에서 불가능한 것을 볼 수 없습니다. 어쩌면 당신은 나보다 "스택"이있는 다른 것을 의미 할 것입니다. 난 그냥 "layout_alignEnd", "layout_below", "layout _..."을 사용하고 그것으로 어떤 종류의 스택을 만들 수 있습니다 ...
놀라운 Jan

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
이미지 대신 텍스트로 게시 할 수 있습니까? 앞으로 나와 다른 사람들에게도 매우 유용 할 것입니다.
새로운 개발자

3
구속 조건 레이아웃을 배우기 시작한 모든 사람은 이것을 볼 필요가 있습니다. 감사.
grantespo 2019 년

1
이것은 유용한 정보이지만 단순히 문서 덤프 일 뿐이며 그 차이점을 설명하기 위해 아무 것도하지 않습니다.
YetAnotherRandomUser

1
아니요, 문서를 볼 시간이 없습니다. 이것은 확실히 유용합니다. 그리고 간단한 언어로 작성되었습니다. 공감.
CodeToLife

46

@davidpbr ConstraintLayout 성능에 의해보고

두 개의 유사한 7- 자식 레이아웃을 만들었습니다 . 각각 하나는 부모 ConstraintLayoutRelativeLayout. Android Studio 메소드 추적 도구를 기반으로 ConstraintLayoutonMeasure에 더 많은 시간을 소비하고에서 추가 작업을 수행합니다 onFinishInflate.

사용 된 라이브러리 ( support-v4, appcompat-v7…) :

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

기기 / Android 버전 : Samsung Galaxy S6 (SM-G920A. 죄송합니다. Nexus atm은 아님) 안드로이드 5.0.2

빠른 방법 추적 비교 :

1

샘플 Github 저장소 : https://github.com/OnlyInAmerica/ConstraintLayoutPerf


같은 문제에서 : 지금은 이것을 닫을 것입니다-alpha 4/5는 약간의 성능 향상을 가져 왔습니다. 아마 더 향상시킬 수 있을지 모르지만 1.0 이후로 기다릴 수도 있습니다.
Oleksandr

이 훌륭한 비교를 위해 어떤 도구를 사용했는지 설명해 주시겠습니까?
Nativ

2
@Nativ Monotirs-> CPU-> 시간 추적기 아이콘
Andrey T

18
Android 6.0.1이 설치된 Nexus 5에서 constraint-layout : 1.0.1을 사용하여 동일한 코드를 실행하고 프로파일 링 한 결과 : 상대 레이아웃-측정 30ms + 16ms = 62ms에서 Laityt 7ms = 총 54ms 9ms에서 54ms 제한 레이아웃-init 7ms 구속 조건 레이아웃은 레이아웃 매개 변수 생성 + 뷰 추가 ~ 7 * 2ms = 14ms On 측정 60ms + 52ms ~ 112ms On 레이아웃 8ms 총계 ~ 141ms 제약 조건보다 거의 3 배 빠른 상대 레이아웃의 초기 초기화.
Andrey T

2
중첩 된 뷰 계층 구조를 줄일 수 있도록 구속 조건 레이아웃이 도입되었습니다. 따라서 계층이 적다는 것은 뷰 트리에서 위에서 아래로 순회하는 시간이 줄어든다는 것을 의미합니다. 따라서 구속 조건 레이아웃에 필요하지 않을 수도있는 중첩 된 뷰 계층 구조를 만들고이를 중첩 된 구조로 끝낼 수있는 상대적 레이아웃과 비교하는 요점은 무엇입니까?
codepeaker September

27

차이점 / 장점은 다음과 같습니다.

  1. 구속 조건 레이아웃은 선형 레이아웃뿐만 아니라 상대적 레이아웃의 이중 성능을 갖습니다. 상대적 레이아웃과 같은 뷰의 상대적 위치를 설정하고 동적 레이아웃 (선형 레이아웃에서만 가능)의 가중치를 설정합니다.

  2. 매우 강력한 용도는 체인을 형성하여 요소를 그룹화하는 것입니다. 이런 식으로 뷰 그룹을 구성 할 수 있습니다. 뷰 그룹을 구성하기 위해 다른 계층의 계층을 추가하지 않고도 전체적으로 원하는 방식으로 배치 할 수 있습니다.

  3. 가중치 외에도 수평 및 수직 바이어스를 적용 할 수 있으며 이는 중심으로부터의 변위 백분율에 지나지 않습니다. (바이어스 0.5는 중앙 정렬됨을 의미합니다. 모든 값은 각 방향에서의 해당 이동을 의미합니다.)

  4. 또 다른 매우 중요한 기능은 일부 뷰가 Java 코드를 통해 GONE으로 설정된 경우 레이아웃이 중단되지 않도록 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로 유지하려는 경우에 유용합니다.
Eugene Brusov

15

큰 차이점은 ConstraintLayout은 뷰가 없어도 제약 조건을 준수한다는 것입니다. 따라서 체인이 있고 중간에보기를 사라지게하려는 경우 레이아웃이 중단되지 않습니다.


예를 들어 주시겠습니까? 3 개의 버튼이 있다고 가정하자. 두 번째 버튼을 숨기고 세 번째 버튼은 ID가 btn2 인 두 번째 버튼에 연결됩니다. 두 번째 버튼을 숨기고 어떻게 세 번째 버튼이 두 번째 버튼의 ID를 찾을 수 있습니까?

1
그건 사실이 아니야. 버튼의 가시성을 "GONE"대신 "INVISIBLE"로 설정하면 제약 조건이 깨지지 않습니다. @Nikola가 말한 것처럼 가장 큰 차이점은 더 "응답적인"보기를 만드는 데 도움이되는 편견입니다.
zapotec

@Nothing 버튼이 서로 아래에 있다고 가정합시다. tButton 2를 숨겨도 xml 또는 코드의 "계약보기"에 여전히 있습니다. ConstraintLayout이이를 존중하고 버튼 3이 버튼 1 아래에있게됩니다. RelativeLayout 버튼 2가 사라지면 제약 조건도 사라지게되므로 버튼 3이 기본 위치에 있으므로 화면 왼쪽 상단에있게됩니다.
허버트 74

@zapotec 나는 다른 것들이 당신에게 더 중요하다는 것을 존중하지만, 나에게는 이것이 정말 멋진 차이입니다. RelativeLayout에서 내가 싫어했던 유일한 문제를 해결합니다. 보이지 않는 것을 사용하는 것은 공간을 요구하기 때문에 옵션이 아닙니다.
허버트 74

7

@ dhaval-jivani 답변 외에도.

프로젝트 github 프로젝트를 최신 버전의 제약 조건 레이아웃 v.1.1.0-beta3으로 업데이트했습니다.

onCreate 메소드의 시간과 onCreate 시작과 CPU 모니터에 보이는 마지막 preformDraw 메소드의 실행 종료 사이의 시간을 측정하고 비교했습니다. 모든 테스트는 Android 6.0.1이 설치된 Samsung S5 mini에서 수행되었습니다. 결과 :

새로 시작 (응용 프로그램 시작 후 첫 화면 열기)

상대 레이아웃

OnCreate : 123ms

마지막 프리폼 그리기 시간-켜짐 만들기 시간 : 311.3ms

구속 조건 레이아웃

OnCreate : 120.3ms

마지막 프리폼 그리기 시간-켜짐 만들기 시간 : 310ms

그 외에도이 기사 에서 성능 테스트를 확인했습니다 . 여기 코드 에서는 루프에서 카운트가 100 미만인 구속 레이아웃 변형이 팽창, 측정 및 레이아웃 실행 중 상대적 레이아웃을 사용하는 변형보다 빠릅니다. 그리고 Android 4.3이 설치된 Samsung S3와 같은 오래된 Android 기기에서는 그 차이가 더 큽니다.

결론적으로 나는 기사의 의견에 동의합니다 .

이전 뷰를 리팩터링하는 것이 RelativeLayout 또는 LinearLayout에서 전환합니까?

항상 그렇듯이 : 그것은 달려있다 🙂

현재 레이아웃 계층에 성능 문제가 있거나 어쨌든 레이아웃을 크게 변경하지 않는 한 아무것도 리팩터링하지 않습니다. 최근에 측정하지는 않았지만 마지막 릴리스에서 성능 문제를 찾지 못했습니다. 그래서 나는 당신이 그것을 안전하게 사용해야한다고 생각합니다. 그러나 내가 말했듯이 마이그레이션을 위해 마이그레이션하지 마십시오. 필요한 경우에만 혜택을 받으십시오. 그러나 새로운 레이아웃의 경우 거의 항상 ConstraintLayout을 사용합니다. 우리가 이전에했던 것보다 훨씬 낫습니다.


6

공식적 ConstraintLayout으로 훨씬 빠릅니다

Android의 N 릴리스에서이 ConstraintLayout클래스는와 유사한 기능을 제공 RelativeLayout하지만 비용은 훨씬 저렴합니다.


6

실제 질문은 제약 조건 레이아웃 이외의 레이아웃을 사용해야 할 이유가 있습니까? 나는 대답이 '아니오'라고 믿는다.

그들은 초보자 프로그래머 등을 겨냥한 사람들에게 다른 레이아웃보다 열등한 이유를 제공해야합니다.

제약 사항 레이아웃은 모든면에서 더 좋습니다 (APK 크기는 150k와 같습니다). 그것들은 더 빠르고, 더 쉬우 며, 더 유연하고, 변화에 더 잘 반응하고, 아이템이 사라질 때 문제를 해결하고, 근본적으로 다른 화면 유형에 더 잘 부합하며 그 긴 중첩 루프를 사용하지 않습니다. 모든 것을위한 트리 구조를 도출했습니다. 당신은 어디에나, 무엇이든, 어디에나 넣을 수 있습니다.

2016 년 중반에 시각적 레이아웃 편집기가 충분하지 않은 약간 까다 롭습니다. 그러나 레이아웃이 전혀 없다면 제약 조건 레이아웃 사용을 진지하게 고려하고 싶을 수도 있습니다. 그것과 같은 일을 RelativeLayout하거나 심지어 간단한 일을 할 때 LinearLayout. FrameLayouts분명히 여전히 목적이 있습니다. 그러나 지금은 다른 것을 만드는 것을 볼 수 없습니다. 그들이 이것으로 시작했다면 그들은 다른 것을 추가하지 않았을 것입니다.


1
더 빠른 증거가 있습니까?
Rajesh Nasit

1
예. 더 빠릅니다. 레이아웃은 트리를 반복하지 않고 단일 솔버에서 다운됩니다. 대부분의 경우 레이아웃 호출에서 수행되므로 중요하지 않습니다. 그러나보기 트리는 쉽지만 뷰를 호출 해야하는 호출이 필요한 뷰 내부에 많은 뷰를 만듭니다. 이론적으로는 좋지만 실제로는 전체 뷰 트리를 반복하는 것보다 1 비트의 코드로 레이아웃을 수행하는 것이 훨씬 쉽습니다. 더 많은 뷰로 더 인상적이지만 5 월의 벤치 마크는 다음과 같습니다. medium.com/@krpiotrek/constraintlayout-performance-c1455c7984d7
Tatarize

다른 질문에 직면하고 있습니다. 작업중인 앱에서 기존의 모든 Relativelayout을 교체해야합니까? 성능이 크게 향상됩니까?
Sreekanth Karumanaghat 5

@SreekanthKarumanaghat 그것은 당신이 시간을 절약 할 때 다시 교체하는 데 걸리는 시간을 결코 되돌릴 수없는 것처럼 보입니다. 우리는 대부분 3.5ms주기가 3.25ms로 떨어지고 있다고 말합니다. 그것이 당신에게 추가 기능이나 필요한 것을 제공한다면, 그러나 순전히 속도에 관한 것입니다. 우리가 변환 버튼을 치는 것을 이야기하고 있지만.
Tatarize

5

내가 할 수있는 결론은

1) 우리는 코드 의 XML 부분건드리지 않고 UI 디자인을 할 수 있습니다. 솔직히 말해서 Google이 iOS 앱에서 UI가 어떻게 디자인되었는지 복사했다고 생각 합니다 .iOS의 UI 개발에 익숙하지만 상대적 레이아웃에서는 XML 디자인을 건드리지 않고 제약 조건을 설정하기가 어렵습니다 .

2) 둘째로 다른 레이아웃과 달리 평면보기 계층 구조를 가지므로 다른 답변에서 볼 수있는 상대 레이아웃보다 성능뛰어 납니다.

3) 또한 상대 레이아웃 에서 할 수없는 특정 각도로 특정 반경에서 다른 뷰를 배치 할 수있는 원형 상대 위치 지정 과 같이 상대 레이아웃과 다른 추가 요소 가 있습니다.

다시 말하지만 제약 레이아웃을 사용하여 UI를 디자인하는 것은 iOS에서 UI를 디자인하는 것과 같습니다. 따라서 iOS에서 작업하는 경우 제약 레이아웃을 사용하면 더 쉽게 찾을 수 있습니다


1

내가 주목 한 유일한 차이점은 드래그 앤 드롭을 통해 상대 레이아웃에서 설정된 것들이 자동으로 다른 요소와 관련된 크기를 가지므로 앱을 실행할 때 얻는 것이 무엇인지입니다. 그러나 구속 조건 레이아웃에서는 디자인보기에서 요소를 끌어서 놓더라도 앱을 실행할 때 상황이 바뀔 수 있습니다. 이는 구속 조건을 수동으로 설정하거나 컴포넌트 트리에서 요소를 마우스 오른쪽 버튼으로 클릭하고 구속 조건 레이아웃 하위 메뉴를 선택한 다음 '구속 조건 추론'을 클릭하여보다 위험한 이동으로 쉽게 해결할 수 있습니다. 도움이 되었기를 바랍니다

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.