2015-05-29 21 views
67

Chỉ cần xem ứ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. Hạn chế ứng dụng, CoordinatorLayout được sử dụng nhiều. Ngoài ra, nhiều lớp thư viện thiết kế hỗ trợ như FloatingActionButton, SnackBar, AppBarLayout vv hoạt động khác khi được sử dụng bên trong CoordinatorLayout.CoordinatorLayout là gì?

Ai đó có thể làm sáng tỏ một số đèn trên CoordinatorLayout và cách khác so với các số khác ViewGroup s trong android hoặc ít nhất cung cấp đường dẫn chính xác hướng tới việc học CoordinatorLayout.

+5

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

+0

Lợi ích của việc sử dụng 'CordinatorLayout' là gì? Những gì cạnh nó có hơn những người khác? – eRaisedToX

Trả lời

29

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

từ docs

thư viện thiết kế giới thiệu CoordinatorLayout, một bố cục mà cung cấp một mức độ kiểm soát bổ sung qua các sự kiện liên lạc giữa các quan điểm đứa trẻ, một cái gì đó mà rất nhiều các 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 đoạn video demo của tất cả các quan điểm nêu trên.

hy vọng điều này giúp :)

+2

Bạn sử dụng nó như thế nào? Có mẫu hay hướng dẫn nào không? –

+0

liên kết đó không hoạt động – dhaval

+0

@dhaval link được cập nhật. cảm ơn vì đã cập nhật –

4

CoordinatorLayout thực chất là cách bố trí khung với rất nhiều khả năng đó là hiển nhiên từ tên gọi, nó tự động hóa phối hợp giữa các con của nó và giúp xây dựng những khung cảnh đẹp. Triển khai của nó có thể được nhìn thấy trong Google Play Store App.How thanh công cụ sụp đổ và thay đổi màu sắc.

10

Một điểm bổ sung cần lưu ý. Kể từ khi OP đặc biệt yêu cầu

Ngoài ra, rất nhiều các hỗ trợ các lớp học thiết kế libabry như FloatingActionButton, SnackBar, AppBarLayout, vv thường chạy khác khi sử dụng bên trong CoordinatorLayout.

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

Điều phối viênLayout là một FrameLayout siêu cấp.

Nút FAB, SnackBar hoạt động trên khái niệm FrameLayout và do CoordinatorLayout có chức năng FrameLayout, nó có thể làm cho các chế độ xem khác hoạt động khác!.

3

Để cung cấp một cách nhanh chóng snap-shot của những gì là hữu ích trong việc Android Documentation:

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

Ví dụ nếu bạn muốn ToolBar của bạn sụp đổ 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 theo CoordinatorLayout.Tình huống được sử dụng nhiều nhất là khi bạn muốn một FloatingActionButton dính vào đáy của CollapsingToolbar của bạn và di chuyển xung quanh với nó, đặt chúng dưới một coordinatorLayout và sử dụng app:layout_anchor="@id/YourAppBarId" cho keo (!) Và app:layout_anchorGravity="bottom|end" vì vị trí sẽ là đủ để bạn nhìn thấy công việc ma thuật!

Bằng cách sử dụng bố cục này làm bối cảnh, chế độ xem con sẽ có sự cộng tác tốt hơn và hành xử một cách thông minh bởi 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 sẽ không bị chồng chéo bởi snackBar vv

đâ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 bạn, bạn sẽ phải tìm hiểu sâu hơn về chủ đề này.

xem Google Scrolling view activity template

11

Điều phối viên là gì? Đừng để cái tên lạ mắt đánh lừa bạn, nó không có gì khác ngoài FrameLayout trên steroid

Để hiểu rõ nhất một số CoordinatorLayout là gì, trước tiên bạn phải hiểu/ghi nhớ ý nghĩa của Điều phối.

Nếu bạn Google từ

Phối hợp

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

enter image description here

Tôi nghĩ rằng những định nghĩa này giúp để mô tả những gì một CoordinatorLayout hiện trên nó của riêng mình và cách chế độ xem trong đó hoạt động.

Một CoordinatorLayout (một ViewGroup) mang các yếu tố khác nhau (con Views) của một (một phức hợp hoạt động hoặc tổ chức) ̶ bố trí vào một mối quan hệ hài hòa và hiệu quả:

Với sự giúp đỡ của một CoordinatorLayout, quan điểm con làm việc cùng 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, swipes, flings hoặc bất kỳ cử chỉ nào khác.

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

Một CoordinatorLayout là một tính năng siêu mát mẻ của thiết kế Vật liệu giúp tạo bố trí hấp dẫn và hài hòa.

Tất cả những gì bạn phải làm là bao gồm các chế độ xem con của bạn 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 cho chúng ta là một bố cục có thể được cuộn sụp đổ Toolbar và ẩn FloatingActionButton

mở:

enter image description here

đậy kín:

enter image description here

Các vấn đề liên quan