CoordinatorLayout là gì?


96

Vừa xem qua ứng dụng demo của thư viện thiết kế hỗ trợ Android mới. Nó được cung cấp bởi Chris Banes trên github . Đã tạo ra ứng dụng, CoordinatorLayoutđược sử dụng rất nhiều. Ngoài ra, rất nhiều các hỗ trợ thiết kế các lớp học thư viện như FloatingActionButton, SnackBar, AppBarLayout, vv cư xử khác nhau khi bên trong đã qua sử dụng CoordinatorLayout.

Ai đó có thể vui lòng làm sáng tỏ những gì là CoordinatorLayoutvà làm thế nào nó khác với các ViewGroups khác trong android, hoặc ít nhất là cung cấp con đường chính xác để học tập CoordinatorLayout.


5
android-developers.blogspot.com/2015/05/… Nó cũng có một mô tả mở rộng, mặc dù khó hiểu, trong JavaDocs (hiện không có sẵn ở dạng có thể liên kết trực tiếp, nhưng bạn có thể tải xuống tệp ZIP từ developer.android.com/preview /download.html ).
CommonsWare

1
Điều gì thực sự là lợi thế của việc sử dụng CordinatorLayout?. Nó có cạnh gì hơn những người khác?
eRaisedToX

Câu trả lời:


43

Đây là nó mà bạn đang tìm kiếm.

từ tài liệu

thư viện Thiết kế giới thiệu CoordinatorLayout, một bố cục cung cấp một cấp độ kiểm soát bổ sung đối với các sự kiện chạm giữa các chế độ xem con, một thứ mà nhiều thành phần trong thư viện Thiết kế tận dụng.

https://android-developers.googleblog.com/2015/05/android-design-support-library.html

trong liên kết này, bạn sẽ thấy các video demo của tất cả các chế độ xem được đề cập ở trên.

hi vọng điêu nay co ich :)


4
liên kết bị hỏng.
Yogesh Seralia

40

CoordinatorLayout là gì? Đừng để cái tên ưa thích đánh lừa bạn, nó chẳng khác gì một FrameLayout trên steroid

Để hiểu rõ nhất a CoordinatorLayoutlà / hiện gì, trước hết bạn phải hiểu / ghi nhớ ý nghĩa của nó đối với Tọa độ.

Nếu bạn Google từ

Danh từ: Tọa độ

Đây là những gì bạn nhận được:

nhập mô tả hình ảnh ở đây

Tôi nghĩ rằng các định nghĩa này giúp mô tả những gì một CoordinatorLayout tự làm và cách các quan điểm bên trong nó hoạt động.

Một CoordinatorLayout (một ViewGroup) mang các phần tử khác nhau (các Chế độ xem con) của một (̶a̶ ̶c̶o̶m̶p̶l̶e̶x̶ ̶a̶c̶t̶i̶v̶i̶t̶y̶ ̶o̶r̶ ̶a̶n̶ ̶o̶r̶g̶a̶n̶i̶z̶a̶tt một mối quan hệ hài hòa hoặc hiệu quả)

Với sự trợ giúp của CoordinatorLayout, các quan điểm trẻ em phối hợp với nhau một cách hài hòa để thực hiện các hành vi tuyệt vời như

kéo, vuốt, tung hoặc bất kỳ cử chỉ nào khác.

Lần bên trong một CoordinatorLayout đàm phán với những người khác để làm việc cùng nhau một cách hiệu quả bằng cách xác định những hành vi

A CoordinatorLayout là một tính năng tuyệt vời của Material Design giúp tạo ra các bố cục hài hòa và hấp dẫn.

Tất cả những gì bạn phải làm là đưa các quan điểm của con bạn vào bên trong CoordinatorLayout.

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout        
 xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:fitsSystemWindows="true"
 tools:context="com.byte64.coordinatorlayoutexample.ScollingActivity">

 <android.support.design.widget.AppBarLayout
    android:id="@+id/app_bar"
    android:layout_width="match_parent"
    android:layout_height="@dimen/app_bar_height"
    android:fitsSystemWindows="true"
    android:theme="@style/AppTheme.AppBarOverlay">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/toolbar_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        app:contentScrim="?attr/colorPrimary"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">



        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_collapseMode="pin"
            app:popupTheme="@style/AppTheme.PopupOverlay" />
        <TableLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

    </android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>

<include layout="@layout/content_scolling" />

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="@dimen/fab_margin"
    app:layout_anchor="@id/app_bar"
    app:layout_anchorGravity="bottom|end"
    app:srcCompat="@android:drawable/ic_dialog_email" />

 </android.support.design.widget.CoordinatorLayout>

và content_scrolling:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView     
 xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 app:layout_behavior="@string/appbar_scrolling_view_behavior"
 tools:context="com.byte64.coordinatorlayoutexample.ScollingActivity"
 tools:showIn="@layout/activity_scolling">

 <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="@dimen/text_margin"
    android:text="@string/large_text" />

 </android.support.v4.widget.NestedScrollView>

Điều này mang lại cho chúng tôi là một bố cục có thể được cuộn để thu gọn Thanh công cụ và ẩn FloatingActionButton

Mở:

nhập mô tả hình ảnh ở đây

Đã đóng cửa:

nhập mô tả hình ảnh ở đây


2
Bố cục tương đối hoặc ràng buộc sẽ không có mối quan hệ giữa các chế độ xem sao? Nếu một cái di chuyển lên thì chế độ xem liên quan sẽ di chuyển lên. Tại sao điều phối viên tốt hơn?
Snake

1
@Snake 1. CoordinatorLayout giúp sắp xếp một chế độ xem trên một chế độ xem khác, điều mà ConstraintLayout hoặc RelativeLayout không thể làm được. 2. Nó cũng giúp làm sinh động quá trình chuyển đổi các chế độ xem. Một ví dụ điển hình là quá trình chuyển đổi hoạt động / phân đoạn "Xem liên hệ" trong ứng dụng Whatsapp.
Felix Favor Chinemerem,

13

Một điểm bổ sung cần lưu ý. Vì OP đã hỏi cụ thể

Ngoài ra, nhiều lớp libabry hỗ trợ thiết kế như FloatingActionButton, SnackBar, AppBarLayout, v.v. hoạt động khác khi được sử dụng bên trong CoordinatorLayout.

Và tôi đoán đó là vì điều này.

CoordinatorLayout là một FrameLayout siêu mạnh.

Nút FAB, SnackBar hoạt động dựa trên khái niệm về FrameLayout, và vì bản thân CoordinatorLayout có chức năng của FrameLayout, nó có thể làm cho các khung nhìn khác hoạt động khác !.


9

CoordinatorLayout về cơ bản là bố cục khung với nhiều khả năng rõ ràng ngay từ cái tên, nó tự động hóa sự phối hợp giữa các phần tử con của nó và giúp xây dựng các khung cảnh đẹp. Bạn có thể thấy cách triển khai của nó trong Ứng dụng Cửa hàng Google Play. Cách thanh công cụ thu gọn và thay đổi màu sắc.

Điều tốt nhất về CoordinatorLayout là hành vi mà chúng tôi cung cấp cho con cháu trực tiếp hoặc gián tiếp của nó. Bạn hẳn đã thấy khi cuộn, tất cả giao diện người dùng bắt đầu chuyển động. Rất có thể hành vi của nó đang phát huy tác dụng của nó.


7

Để chụp nhanh những gì hữu ích trong Tài liệu Android :

Sử dụng CoordinatorLayout để đơn giản kiểm soát hành vi quan hệ của các quan điểm của bạn,

Ví dụ: nếu bạn muốn Thanh công cụ của mình thu gọn hoặc ẩn. Google đã làm cho nó thực sự dễ dàng bằng cách giới thiệu AppBarLayout & CollapsingToolbarLayout, cả hai đều hoạt động tốt nhất dưới CoordinatorLayout.

Một tình huống được sử dụng nhiều nhất khác là khi bạn muốn FloatingActionButton dính vào dưới cùng của CollapsingToolbar và di chuyển xung quanh nó, đặt chúng dưới một bộ điều phốiLayout và sử dụng app:layout_anchor="@id/YourAppBarId"cho keo (!) Và app:layout_anchorGravity="bottom|end"vị trí sẽ đủ để bạn nhìn thấy công việc kỳ diệu!

Bằng cách sử dụng bố cục này làm ngữ cảnh, các chế độ xem con sẽ có sự cộng tác tốt hơn và hành xử theo cách thông minh vì chúng sẽ nhận thức được nhau thông qua ngữ cảnh CoordinatorLayout, điều này có nghĩa là các Nút FloatingAction của bạn sẽ không còn bị chồng lên bởi một snackBar, v.v.

đây chỉ là một bản tóm tắt nhanh về hầu hết các phần hữu ích, vì vậy nếu bạn muốn tiết kiệm nhiều thời gian hơn trong việc tạo hoạt ảnh cho ứng dụng của mình, bạn nên tìm hiểu sâu hơn một chút về chủ đề này.

xem mẫu hoạt động Chế độ xem cuộn của Google


1

Một điều quan trọng cần lưu ý là CoordinatorLayout không có bất kỳ hiểu biết bẩm sinh nào về công việc FloatingActionButton hoặc AppBarLayout - nó chỉ cung cấp một API bổ sung ở dạng Coordinator. cũng như khai báo các phụ thuộc lẫn nhau và nhận các lệnh gọi lại thông qua onDependentViewChanged ().

Chế độ xem có thể khai báo Hành vi mặc định bằng cách sử dụng chú thích CoordinatorLayout.DefaultBehavior (YourView.Behavior.class) hoặc đặt nó trong các tệp bố cục của bạn bằng ứng dụng: layout_behavior = "com.example.app.YourView $ Behavior". Khung này giúp mọi chế độ xem có thể tích hợp với CoordinatorLayout.

Sẵn ngay bây giờ! Thư viện Thiết kế hiện có sẵn, vì vậy hãy đảm bảo cập nhật Kho lưu trữ hỗ trợ Android trong Trình quản lý SDK. Sau đó, bạn có thể bắt đầu sử dụng thư viện Thiết kế với một phần phụ thuộc mới:

biên dịch 'com.android.support:design:22.2.0' Lưu ý rằng vì thư viện Thiết kế phụ thuộc vào Thư viện hỗ trợ Support v4 và AppCompat, chúng sẽ tự động được đưa vào khi bạn thêm phần phụ thuộc vào thư viện Thiết kế. Chúng tôi cũng lưu ý rằng các tiện ích mới này có thể sử dụng được trong chế độ xem Thiết kế của Trình chỉnh sửa bố cục Android Studio (tìm chúng trong Chế độ xem tùy chỉnh), giúp bạn có cách dễ dàng hơn để xem trước một số thành phần mới này.

Thư viện thiết kế, AppCompat và tất cả Thư viện hỗ trợ Android là những công cụ quan trọng trong việc cung cấp các khối xây dựng cần thiết để xây dựng một ứng dụng Android hiện đại, tuyệt vời mà không cần xây dựng mọi thứ từ đầu.


0

Đây CoordinatorLayoutlà một siêu năng FrameLayout.

Theo mặc định, nếu bạn thêm nhiều trẻ em vào một FrameLayout , chúng sẽ chồng chéo lên nhau. A FrameLayoutnên được sử dụng thường xuyên nhất để giữ một chế độ xem con. Điểm hấp dẫn chính của CoordinatorLayoutnó là khả năng phối hợp các hoạt ảnhchuyển tiếp của các khung nhìn bên trong nó. Chỉ sử dụng XML, bạn có thể mô tả một bố cục trong đó FAB di chuyển ra khỏi vị trí của Snackbar đến, chẳng hạn hoặc có FAB (hoặc bất kỳ Chế độ xem nào khác thực sự) được gắn với một tiện ích con khác và di chuyển trên màn hình với phụ tùng.

Đây là nguồn chính hướng dẫn .

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.