Sự khác biệt giữa ConstraintLayout và RelativeLayout

Tôi bối rối về sự khác biệt giữa ConstraintLayoutvà RelativeLayout. Ai đó có thể vui lòng cho tôi biết sự khác biệt chính xác giữa họ?

Ý định ConstraintLayoutlà để tối ưu hóa và làm phẳng hệ thống phân cấp chế độ xem của bố cục của bạn bằng cách áp dụng một số quy tắc cho mỗi chế độ xem để tránh lồng nhau.

Các quy tắc nhắc nhở bạn RelativeLayout, ví dụ như đặt bên trái sang bên trái của một số chế độ xem khác.

app:layout_constraintBottom_toBottomOf="@+id/view1"

Không giống như RelativeLayout, ConstraintLayoutcung cấp biasgiá trị được sử dụng để định vị chế độ xem theo tỷ lệ 0% và bù ngang và dọc 100% so với tay cầm (được đánh dấu bằng vòng tròn). Các tỷ lệ phần trăm (và phân số) này cung cấp định vị liền mạch của chế độ xem trên các mật độ và kích thước màn hình khác nhau.

app:layout_constraintHorizontal_bias="0.33" <!-- from 0.0 to 1.0 -->
app:layout_constraintVertical_bias="0.53" <!-- from 0.0 to 1.0 -->

Tay cầm cơ sở (ống dài với các góc tròn, bên dưới tay cầm hình tròn) được sử dụng để căn chỉnh nội dung của chế độ xem với tham chiếu chế độ xem khác.

Tay cầm vuông (trên mỗi góc của khung nhìn) được sử dụng để thay đổi kích thước khung nhìn trong dps.

Đây hoàn toàn là ý kiến ​​dựa trên và ấn tượng của tôi về ConstraintLayout

Thuộc tính tương đối Bố cục và ràng buộc Bố cục tương đương

(1) Bố cục tương đối:

android:layout_centerInParent="true"    

(1) Bố cục ràng buộc tương đương:

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) Bố cục tương đối:

android:layout_centerHorizontal="true"

(2) Bố cục ràng buộc tương đương:

app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintEnd_toEndOf="parent"

(3) Bố cục tương đối:

android:layout_centerVertical="true"    

(3) Bố cục ràng buộc tương đương:

app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"

(4) Bố cục tương đối:

android:layout_alignParentLeft="true"   

(4) Bố cục ràng buộc tương đương:

app:layout_constraintLeft_toLeftOf="parent"

(5) Bố cục tương đối:

android:layout_alignParentStart="true"

(5) Bố cục ràng buộc tương đương:

app:layout_constraintStart_toStartOf="parent"

(6) Bố cục tương đối:

android:layout_alignParentRight="true"

(6) Bố cục ràng buộc tương đương:

app:layout_constraintRight_toRightOf="parent"

(7) Bố cục tương đối:

android:layout_alignParentEnd="true"    

(7) Bố cục ràng buộc tương đương:

app:layout_constraintEnd_toEndOf="parent"

(8) Bố cục tương đối:

android:layout_alignParentTop="true"

(8) Bố cục ràng buộc tương đương:

app:layout_constraintTop_toTopOf="parent"

(9) Bố cục tương đối:

android:layout_alignParentBottom="true" 

(9) Bố cục ràng buộc tương đương:

app:layout_constraintBottom_toBottomOf="parent"

(10) Bố cục tương đối:

android:layout_alignStart="@id/view"

(10) Bố cục ràng buộc tương đương:

app:layout_constraintStart_toStartOf="@id/view"

(11) Bố cục tương đối:

android:layout_alignLeft="@id/view" 

(11) Bố cục ràng buộc tương đương:

app:layout_constraintLeft_toLeftOf="@id/view"

(12) Bố cục tương đối:

android:layout_alignEnd="@id/view"  

(12) Bố cục ràng buộc tương đương:

app:layout_constraintEnd_toEndOf="@id/view"

(13) Bố cục tương đối:

android:layout_alignRight="@id/view"

(13) Bố cục ràng buộc tương đương:

app:layout_constraintRight_toRightOf="@id/view"

(14) Bố cục tương đối:

android:layout_alignTop="@id/view"  

(14) Bố cục ràng buộc tương đương:

app:layout_constraintTop_toTopOf="@id/view"

(15) Bố cục tương đối:

android:layout_alignBaseline="@id/view" 

(15) Bố cục ràng buộc tương đương:

app:layout_constraintBaseline_toBaselineOf="@id/view"

(16) Bố cục tương đối:

android:layout_alignBottom="@id/view"

(16) Bố cục ràng buộc tương đương:

app:layout_constraintBottom_toBottomOf="@id/view"

(17) Bố cục tương đối:

android:layout_toStartOf="@id/view"

(17) Bố cục ràng buộc tương đương:

app:layout_constraintEnd_toStartOf="@id/view"

(18) Bố cục tương đối:

android:layout_toLeftOf="@id/view"  

(18) Bố cục ràng buộc tương đương:

app:layout_constraintRight_toLeftOf="@id/view"

(19) Bố cục tương đối:

android:layout_toEndOf="@id/view"

(19) Bố cục ràng buộc tương đương:

app:layout_constraintStart_toEndOf="@id/view"

(20) Bố cục tương đối:

android:layout_toRightOf="@id/view"

(20) Bố cục ràng buộc tương đương:

app:layout_constraintLeft_toRightOf="@id/view"

(21) Bố cục tương đối:

android:layout_above="@id/view" 

(21) Bố cục ràng buộc tương đương:

app:layout_constraintBottom_toTopOf="@id/view"

(22) Bố cục tương đối:

android:layout_below="@id/view" 

(22) Bố cục ràng buộc tương đương:

app:layout_constraintTop_toBottomOf="@id/view"

Báo cáo bởi @davidpbr ConstraintLayout hiệu suất

Tôi đã thực hiện hai bố cục 7 đứa trẻ tương tự nhau, mỗi bố cục có một phụ huynh ConstraintLayoutvà RelativeLayout. Dựa trên công cụ theo dõi phương thức Android Studio, nó xuất hiện ConstraintLayoutdành nhiều thời gian hơn cho onMeasure và thực hiện công việc bổ sung trongonFinishInflate .

Thư viện được sử dụng ( support-v4, đào appcompat-v7):

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

Các phiên bản thiết bị / Android được sao chép trên: Samsung Galaxy S6 (SM-G920A. Xin lỗi, không có máy atm Nexus). Android 5.0.2

So sánh phương pháp nhanh:

Mẫu repo Github: https://github.com/OnlyInAmerica/ConstraintLayoutPerf

Sau đây là những khác biệt / lợi thế:

1. Bố cục ràng buộc có sức mạnh kép của cả Bố cục tương đối cũng như Bố cục tuyến tính: Đặt vị trí tương đối của chế độ xem (như Bố cục tương đối) và cũng đặt trọng số cho Giao diện người dùng động (chỉ có thể có trong Bố cục tuyến tính).

2. Một cách sử dụng rất mạnh mẽ là nhóm các yếu tố bằng cách tạo thành một chuỗi. Bằng cách này, chúng ta có thể tạo thành một nhóm các khung nhìn mà toàn bộ có thể được đặt theo một cách mong muốn mà không cần thêm một lớp phân cấp khác chỉ để tạo thành một nhóm các khung nhìn khác.

3. Ngoài các trọng số, chúng ta có thể áp dụng độ lệch ngang và dọc, không gì khác ngoài tỷ lệ phần trăm dịch chuyển từ tâm. (độ lệch 0,5 có nghĩa là căn chỉnh tập trung. Mọi giá trị nhỏ hơn hoặc nhiều hơn có nghĩa là chuyển động tương ứng theo hướng tương ứng).

4. Một tính năng rất quan trọng khác là nó tôn trọng và cung cấp chức năng xử lý các chế độ xem Gone để bố cục không bị phá vỡ nếu một số chế độ xem được đặt thành Gone thông qua mã java. Có thể tìm thấy nhiều hơn ở đây: https://developer.android.com/reference/android/support/constraint/ConstraintLayout.html#VisibilityBehavior

5. Cung cấp sức mạnh của ràng buộc tự động khi áp dụng bằng cách sử dụng công cụ In màu xanh và Visual Editor giúp dễ dàng thiết kế trang.

Tất cả các tính năng này dẫn đến việc làm phẳng hệ thống phân cấp chế độ xem giúp cải thiện hiệu suất và cũng giúp tạo giao diện người dùng linh hoạt và nhạy bén, có thể dễ dàng thích ứng với kích thước và mật độ màn hình khác nhau.

Đây là nơi tốt nhất để tìm hiểu nhanh: https://codelabs.developers.google.com/codelabs/constraint-layout/#0

Một sự khác biệt lớn là ConstraintLayout tôn trọng các ràng buộc ngay cả khi chế độ xem không còn nữa. Vì vậy, nó sẽ không phá vỡ bố cục nếu bạn có một chuỗi và bạn muốn làm cho một khung nhìn biến mất ở giữa.

Ngoài câu trả lời @ dhaval-jivani.

Tôi đã cập nhật dự án github của dự án lên phiên bản mới nhất của bố cục ràng buộc v.1.1.0-beta3

Tôi đã đo và so sánh thời gian của phương thức onCreate và thời gian giữa lúc bắt đầu onCreate và kết thúc thực hiện phương thức preformDraw cuối cùng có thể nhìn thấy trong màn hình CPU. Tất cả các thử nghiệm đã được thực hiện trên Samsung S5 mini với Android 6.0.1 Tại đây, kết quả:

Khởi đầu mới (mở màn hình đầu tiên sau khi khởi chạy ứng dụng)

Giao diện tương đối

OnCreate: 123ms

Lần preformDraw thời gian cuối - Thời gian OnCreate: 311.3ms

Bố cục hạn chế

OnCreate: 120,3ms

Thời gian preformDraw cuối cùng - Thời gian OnCreate: 310ms

Ngoài ra, tôi đã kiểm tra kiểm tra hiệu năng từ bài viết này , ở đây mã và thấy rằng trên vòng lặp đếm ít hơn 100 biến thể bố cục ràng buộc nhanh hơn trong khi thực hiện lạm phát, đo lường và bố cục sau đó biến thể với Bố cục tương đối. Và trên các thiết bị Android cũ, như Samsung S3 với Android 4.3, sự khác biệt lớn hơn.

Để kết luận, tôi đồng ý với ý kiến ​​từ bài viết :

Có đáng để cấu trúc lại các khung nhìn cũ chuyển sang nó từ RelativeLayout hoặc linearLayout không?

Như mọi khi: Nó phụ thuộc

Tôi sẽ không cấu trúc lại bất cứ thứ gì trừ khi bạn gặp vấn đề về hiệu năng với hệ thống phân cấp bố cục hiện tại hoặc bạn muốn thực hiện các thay đổi quan trọng đối với bố cục. Mặc dù tôi đã không đo nó gần đây, tôi không tìm thấy bất kỳ vấn đề hiệu suất nào trong các phiên bản trước. Vì vậy, tôi nghĩ rằng bạn nên an toàn để sử dụng nó. nhưng - như tôi đã nói - đừng chỉ di cư vì mục đích di chuyển. Chỉ làm như vậy, nếu có nhu cầu và hưởng lợi từ nó. Tuy nhiên, đối với các bố cục mới, tôi hầu như luôn sử dụng ConstraintLayout. Nó tốt hơn nhiều so với những gì chúng ta có trước đây.

Chính thức, ConstraintLayoutlà nhanh hơn nhiều

Trong bản phát hành N của Android, ConstraintLayoutlớp cung cấp chức năng tương tự RelativeLayout, nhưng với chi phí thấp hơn đáng kể.

Câu hỏi thực sự cần đặt ra là, có lý do nào để sử dụng bất kỳ bố cục nào ngoài bố cục ràng buộc không? Tôi tin rằng câu trả lời có thể là không.

Đối với những người khăng khăng họ nhắm vào các lập trình viên mới làm quen hoặc tương tự, họ nên cung cấp một số lý do để họ thua kém bất kỳ bố cục nào khác.

Bố cục ràng buộc tốt hơn về mọi mặt (Chúng có giá như 150k trong kích thước APK.). Chúng nhanh hơn, dễ dàng hơn, linh hoạt hơn, chúng phản ứng tốt hơn với các thay đổi, chúng khắc phục các sự cố khi vật phẩm biến mất, chúng phù hợp hơn với các loại màn hình khác nhau và chúng không sử dụng một vòng lặp lồng nhau với thời gian dài như vậy vẽ ra cấu trúc cây cho mọi thứ. Bạn có thể đặt mọi thứ ở mọi nơi, đối với mọi thứ, mọi nơi.

Chúng đã hơi trở lại vào giữa năm 2016, trong đó trình soạn thảo bố cục hình ảnh không đủ tốt, nhưng chúng đến mức nếu bạn đang có một bố cục, bạn có thể muốn xem xét nghiêm túc việc sử dụng bố cục ràng buộc, thậm chí khi nó làm điều tương tự như một RelativeLayout , hoặc thậm chí là đơn giản LinearLayout. FrameLayoutsrõ ràng vẫn có mục đích của họ. Nhưng, tôi không thể thấy việc xây dựng bất cứ thứ gì khác vào thời điểm này. Nếu họ bắt đầu với điều này, họ sẽ không thêm bất cứ điều gì khác.

Kết luận tôi có thể đưa ra là

1) Chúng tôi có thể thiết kế giao diện người dùng mà không cần chạm vào phần mã xml , thành thật mà nói tôi cảm thấy google đã sao chép cách thiết kế giao diện người dùng trong ứng dụng iOS , sẽ rất hợp lý nếu bạn quen với việc phát triển giao diện người dùng trong iOS, nhưng theo cách bố trí tương đối khó để đặt các ràng buộc mà không chạm vào thiết kế xml .

2) Thứ hai, nó có hệ thống phân cấp chế độ xem phẳng không giống như các bố cục khác, do đó hiệu suất tốt hơn so với bố cục tương đối mà bạn có thể thấy từ các câu trả lời khác

3) Nó cũng có những thứ bổ sung ngoài bố cục tương đối có, chẳng hạn như định vị tương đối tròn trong đó chúng ta có thể định vị một chế độ xem khác so với quan điểm này ở bán kính nhất định với góc nhất định không thể thực hiện trong bố cục tương đối

Tôi đang nói lại, thiết kế UI sử dụng bố cục ràng buộc cũng giống như thiết kế UI trong iOS, vì vậy trong tương lai nếu bạn làm việc trên iOS, bạn sẽ thấy dễ dàng hơn nếu bạn đã sử dụng bố cục ràng buộc

Sự khác biệt duy nhất tôi đã lưu ý là những thứ được đặt trong bố cục tương đối thông qua kéo và thả tự động có kích thước của chúng so với các yếu tố khác được suy ra, vì vậy khi bạn chạy ứng dụng, những gì bạn thấy là những gì bạn nhận được. Tuy nhiên, trong bố cục ràng buộc ngay cả khi bạn kéo và thả một phần tử trong chế độ xem thiết kế, khi bạn chạy ứng dụng, mọi thứ có thể bị thay đổi. Điều này có thể dễ dàng được khắc phục bằng cách cài đặt thủ công các ràng buộc hoặc, di chuyển rủi ro hơn là nhấp chuột phải vào phần tử trong cây thành phần, chọn menu phụ bố cục ràng buộc, sau đó nhấp vào 'suy ra các ràng buộc'. Hi vọng điêu nay co ich