thư viện thiết kế Android CoordinatorLayout, AppBarLayout và DrawerLayout

Question

Tôi đang sử dụng thư viện thiết kế Android trên API 22. Tôi muốn:

1. có một thanh công cụ và một DrawerLayout bên trong đó có một RecyclerView
2. có DrawerLayout ở dưới Thanh công cụ; ví dụ: khi thanh công cụ hiển thị, nội dung chính của ngăn kéo phải ở dưới nó và ngăn kéo (bên trái) cũng phải ở dưới nó để khi được mở rộng, thanh công cụ vẫn hiển thị
3. có Thanh công cụ được cuộn ra khỏi màn hình khi chế độ xem của người tái chế được cuộn xuống

Điều này thậm chí còn có thể? Tôi gặp vấn đề khi kết hôn # 2 và # 3. Cách thức hiện tại là thanh công cụ luôn nằm phía trên bố trí ngăn kéo, bao gồm mục nhập đầu tiên trong bộ tái chế và phía trên cùng của ngăn kéo bên trái. Dưới đây là tập tin của tôi bố trí (chưa đầy đủ, nhưng cho thấy cấu trúc của tôi):

<android.support.design.widget.CoordinatorLayout 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"> 

    <android.support.v4.widget.DrawerLayout 
     android:layout_width="match_parent" 
     android:layout_height="match_parent"> 

     <RecyclerView 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:scrollbars="vertical" 
      app:layout_behavior="@string/appbar_scrolling_view_behavior"/> 

     <TextView 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:gravity="center"/> 

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

    <android.support.design.widget.AppBarLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content"> 

     <Toolbar 
      android:layout_width="match_parent" 
      android:layout_height="?android:attr/actionBarSize" 
      app:layout_scrollFlags="scroll|enterAlways"/> 

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

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

Dường như dù ứng dụng của RecyclerView: layout_behavior = "@ string/appbar_scrolling_view_behavior" thiết lập đã không có tác dụng, bởi vì khi xóa, hành vi này là tương tự.

Tôi đã thử thêm RelativeLayout làm con của CoordinatorLayout để xác định rằng ngăn kéo nằm dưới thanh công cụ vv nhưng không có gì có vẻ hoạt động.

Là những gì tôi đang cố gắng đạt được với thư viện?

Answer 1

Từ developers' page:

DrawerLayout đóng vai trò như một cấp cao nhất chứa cho nội dung cửa sổ cho phép tương tác quan điểm "ngăn kéo" được lôi ra từ mép của cửa sổ.

Lúc đầu, hãy thử đặt DrawerLayout làm vùng chứa cấp cao nhất (ví dụ: bố cục mẹ). Sau đó, đặt CoordinatorLayout bên dưới và xem điều gì xảy ra.

Ngoài ra, bạn chưa thêm NavigationView. Vui lòng kiểm tra hướng dẫn cơ bản here.

Answer 2

Có! Điều đó là có thể.

<android.support.v4.widget.DrawerLayout  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:id="@+id/drawerLayout" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:fitsSystemWindows="true"> 

    <android.support.design.widget.CoordinatorLayout 
     android:id="@+id/coordinatorLayout" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     tools:context=".StartupActivity"> 

     <android.support.design.widget.AppBarLayout 
      android:id="@+id/appBarLayout" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content"> 

      <android.support.v7.widget.Toolbar 
       android:id="@+id/app_bar" 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       app:layout_scrollFlags="scroll|enterAlways" 
       app:theme="@style/Theme.AppCompat.NoActionBar"/> 

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

     <android.support.v7.widget.RecyclerView 
      android:id="@+id/scrollRecyclerView" 
      android:layout_width="match_parent" 
      android:layout_height="fill_parent" 
      app:layout_behavior="@string/appbar_scrolling_view_behavior" 
      /> 

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

    <android.support.v7.widget.RecyclerView 
     android:id="@+id/drawer_recycler_view" 
     android:layout_width="320dp" 
     android:layout_height="match_parent" 
     android:layout_gravity="left|start" 
     android:background="@color/WhiteColor" 
     android:fitsSystemWindows="true" 
     android:scrollbars="vertical"/> 

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

Như bạn có thể thấy, vấn đề cơ bản là bạn đặt app:layout_scrollFlags="scroll|enterAlways" để thanh công cụ ẩn khi bạn cuộn. Các RecyclerView ở dưới cùng của mã là một bên trong DrawerLayout, một ở trên là một trong bố trí hoạt động chính của bạn.

Answer 3

Hãy thử cách sau nếu bạn muốn xem hoạt ảnh của biểu tượng bánh hamburger và mũi tên. Nếu bạn bao gồm các lề trên (layout_marginTop) cho NavigationView nó sẽ di chuyển nó xuống.

<?xml version="1.0" encoding="utf-8"?> 

<android.support.v4.widget.DrawerLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    android:id="@+id/navigation_drawer" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"> 

    <android.support.design.widget.CoordinatorLayout 
     xmlns:android="http://schemas.android.com/apk/res/android" 
     xmlns:app="http://schemas.android.com/apk/res-auto" 
     android:id="@+id/main_content" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent"> 

     <android.support.design.widget.AppBarLayout 
      xmlns:android="http://schemas.android.com/apk/res/android" 
      xmlns:app="http://schemas.android.com/apk/res-auto" 
      android:id="@+id/appbar" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content"> 

      <android.support.v7.widget.Toolbar 
       android:id="@+id/toolbar" 
       android:layout_width="match_parent" 
       android:layout_height="?attr/actionBarSize" 
       app:layout_scrollFlags="scroll|enterAlways" /> 

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

     <!-- main content view --> 
     <FrameLayout 
      android:id="@+id/content_frame" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:background="@android:color/background_light" 
      app:layout_behavior="@string/appbar_scrolling_view_behavior" /> 

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

    <!-- The navigation drawer --> 
    <android.support.design.widget.NavigationView 
     android:id="@+id/navigation_view" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:layout_marginTop="?attr/actionBarSize" 
     android:layout_gravity="start" 
     android:fitsSystemWindows="true" 
     app:menu="@menu/drawer_menu"/> 

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

Answer 4

Hãy thử tính năng này sẽ hoạt động, phù hợp với tôi.

<android.support.design.widget.CoordinatorLayout 
     xmlns:app="http://schemas.android.com/apk/res-auto" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent"> 

     <android.support.design.widget.AppBarLayout 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      > 

      <android.support.v7.widget.Toolbar 
       android:id="@+id/toolbar" 
       android:layout_width="match_parent" 
       android:layout_height="?attr/actionBarSize" 
       android:background="?attr/colorPrimary" 
       app:layout_scrollFlags="scroll|enterAlways" 
       /> 

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

     <android.support.v4.widget.DrawerLayout 
      android:id="@+id/drawer_layout" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      app:layout_behavior="@string/appbar_scrolling_view_behavior" 
      > 
      <android.support.v7.widget.RecyclerView 
       android:id="@+id/scrollingRecyclerView" 
       android:layout_width="match_parent" 
       android:layout_height="fill_parent" 
     /> 

      <!-- The navigation drawer --> 
      <FrameLayout 
       android:id="@+id/right_frame" 
       android:layout_height="match_parent" 
       android:layout_gravity="start"/> (whatever) 

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

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

cuộn hành vi phải được thiết lập để trẻ trực tiếp của CoordinatorLayout (để DrawerLayout).Điều này sẽ khắc phục sự cố # 2, # 3 của bạn. Và trong trường hợp nội dung ngăn chứa của bạn chứa recyclerView Thanh công cụ sẽ lại được cuộn ra khỏi màn hình.

Answer 5

Đã lâu rồi nhưng tôi tin rằng nó vẫn giúp người khác. Bố cục ngăn kéo phải có bố cục con. Theo tài liệu android, nó phải là FrameLayout vì thứ tự XML ngụ ý đặt hàng z và ngăn kéo phải ở trên cùng của nội dung. Truy cập vào liên kết bên dưới.

Creating a Navigation Drawer

Thêm AppBarLayout của bạn, Toolbar, RecyclerView và tất cả các quan điểm khác trong FrameLayout và làm cho nó một đứa trẻ của Drawer Layout. Hy vọng nó sẽ chạy.