2016-01-24 31 views
17

Tôi có một bố trí như sau:CoordinatorLayout với RecyclerView và thu gọn đầu

enter image description here

(Toolbar, Tiêu đề Xem, Text View, RecyclerView)

tôi cần những tiêu đề được sụp đổ khi Tôi cuộn các mục của recyclerview. Vì vậy, chế độ xem "Chọn mục" và recyclerview để lại trên màn hình.

Tôi đã xem các ví dụ khi thanh công cụ đang được thu gọn, nhưng tôi cần thanh công cụ luôn hiện diện.

Tôi nên sử dụng bố cục/hành vi nào để thực hiện công việc này?

Trả lời

34

Bạn có thể đạt được điều đó bằng cách bố trí này:

<android.support.design.widget.CoordinatorLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    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.design.widget.CollapsingToolbarLayout 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      app:layout_scrollFlags="scroll|exitUntilCollapsed"> 

      <!-- HEADER --> 
      <RelativeLayout 
       ... 
       app:layout_collapseMode="parallax"> 
       ..... 
      </RelativeLayout> 

      <android.support.v7.widget.Toolbar 
       android:layout_width="match_parent" 
       android:layout_height="?attr/actionBarSize" 
       app:layout_collapseMode="pin" /> 

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

     <!-- IF YOU WANT TO KEEP "Choose Item" always on top of the RecyclerView, put this TextView here 
     <TextView 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:layout_gravity="bottom" 
      android:text="choose item" /> 
     --> 
    </android.support.design.widget.AppBarLayout> 

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

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

Bạn pin trên thanh công cụ của bạn bằng cách thiết lập app:layout_collapseMode="pin" tài sản. Bạn thực hiện RecyclerView đúng cách có thể cuộn bằng cách đặt app:layout_behavior="@string/appbar_scrolling_view_behavior" và đó là khá nhiều.

NB! Vị trí của "Chọn mục" TextView phụ thuộc vào hành vi cụ thể bạn muốn đạt được:

  • bạn có thể đưa nó như là một yếu tố đầu tiên của RecyclerView 's Adapter của bạn để di chuyển nó đi, khi người dùng bắt đầu di chuyển qua các RecyclerView ;
  • bạn có thể thêm nó vào AppBarLayout để nó sẽ luôn luôn dính trên đầu trang của RecyclerView, bất cứ khi nào bạn cuộn nó hay không;

Bạn có thể đọc thêm ở đây Android Design Support Library và đây Design Support Library (III): Coordinator Layout

Tôi hy vọng, nó sẽ giúp!

+0

Cảm ơn rất nhiều! Nó hoạt động !!! – Oleg

+0

Làm việc như một sự quyến rũ! Cảm ơn – Tooroop

0
The below code is working but not smooth scroll compare reqular recyclerview I thought. 

<?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:id="@+id/activity_main" 
    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.design.widget.CollapsingToolbarLayout 
      android:id="@+id/collapsing_toolbar" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:fitsSystemWindows="true" 
      app:contentScrim="?attr/colorPrimary" 
      app:expandedTitleMarginEnd="64dp" 
      app:expandedTitleMarginStart="48dp" 
      app:layout_scrollFlags="scroll|exitUntilCollapsed"> 

      <com.sliderbanner.views.BannerSlider 
       android:id="@+id/banner_slider1" 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       app:animateIndicators="true" 
       app:defaultIndicators="dash" 
       app:interval="5000" 
       app:loopSlides="true" 

       /> 

      <android.support.v7.widget.Toolbar 

       android:id="@+id/toolbar" 
       android:layout_width="match_parent" 
       android:layout_height="?actionBarSize"> 

       <ImageView 
        android:id="@+id/image_github" 
        android:layout_width="36dp" 
        android:layout_height="36dp" 
        android:layout_gravity="right" 
        android:layout_marginRight="8dp" /> 

       <TextView 
        android:layout_width="match_parent" 
        android:layout_height="match_parent" 
        android:fontFamily="sans-serif-bold" 
        android:gravity="center_vertical|left" 
        android:text="Banner Slider" 
        android:textColor="@android:color/black" 
        android:textSize="18sp" /> 
      </android.support.v7.widget.Toolbar> 
     </android.support.design.widget.CollapsingToolbarLayout> 


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


</android.support.design.widget.CoordinatorLayout> 
Các vấn đề liên quan