Animating biểu tượng cùng với sụp đổ thanh công cụ trong CoordinatorLayout

Question

Tôi muốn thực hiện thanh công cụ đóng mở với một logo theo cách sau đây:

1. Space linh hoạt với chồng chéo nội dung, như shown here (có điều này đã được);
2. Parallaxed mô hình trong không gian này mà được scrimmed với màu sắc rắn (có quá này)
3. Một logo theo chiều ngang làm trung tâm, trong đó phải xuất hiện ngay phía trên nội dung nhưng nổi lên như thanh công cụ sụp đổ: Trong hành động cần cái gì đó như Pesto của lá ở đây (không nhất thiết phải thay đổi kích thước, nhưng điều đó sẽ là một lợi thế):

Dưới đây là cách bố trí của tôi:

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

    <android.support.design.widget.AppBarLayout 
      android:layout_width="match_parent" 
      android:layout_height="192dp" 
      android:fitsSystemWindows="true" 
      android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> 

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

      <ImageView 
        android:layout_width="match_parent" 
        android:layout_height="match_parent" 
        android:fitsSystemWindows="true" 
        android:src="@drawable/random_pattern" 
        android:scaleType="fitXY" 
        app:layout_collapseMode="parallax" 
        app:layout_collapseParallaxMultiplier="0.75"/> 

      <android.support.v7.widget.Toolbar 
        android:id="@+id/toolbar" 
        android:layout_width="match_parent" 
        android:layout_height="?attr/actionBarSize" 
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light" 
        app:layout_collapseMode="pin"> 

      </android.support.v7.widget.Toolbar> 

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

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

    <android.support.v4.widget.NestedScrollView 
      android:id="@+id/nested_scroll_view" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      app:layout_behavior="@string/appbar_scrolling_view_behavior" 
      app:behavior_overlapTop="64dp"> 

     <LinearLayout 
       android:layout_width="match_parent" 
       android:layout_height="match_parent" 
       tools:context=".MainActivityFragment" 
       android:orientation="vertical"> 

      <android.support.v7.widget.CardView 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" 
        android:layout_margin="8dp"> 

       <!-- card content --> 

      </android.support.v7.widget.CardView> 

     </LinearLayout> 

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

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

Vấn đề là, bất cứ nơi nào tôi cố gắng để đặt hình ảnh logo, hoặc nó không di chuyển như tôi cần nó quá, hoặc tất cả mọi thứ phá vỡ. Nó cảm thấy như một hành vi tùy chỉnh có thể được yêu cầu. Thật không may không của các hướng dẫn tôi tìm thấy trên thư viện thiết kế mới giải thích cách mở rộng nó - chỉ cách sử dụng các công cụ được cung cấp. Không có mã nguồn của nó được phát hành, mã giải mã không có bình luận và cực kỳ rối rắm, và thực tế là tôi chưa rất thoải mái với nội dung bố cục của Android khiến nó thậm chí còn tồi tệ hơn.

Vui lòng trợ giúp?

Answer 1

OK, tôi đã làm được!

Giải pháp của tôi là khủng khiếp, vì vậy tôi vẫn sẽ chờ đợi cho những người thân tốt hơn :)

tôi tiếp tục và tạo ra một giao diện tùy chỉnh CollapsingLogoToolbarLayout, mà là một lớp con của CollapsingToolbarLayout. Lớp thứ hai là nơi chuyển tiếp tiêu đề được đưa về chăm sóc - vì vậy trong phân lớp của tôi, tôi đặt logic đã thay đổi các thuộc tính của khung nhìn logo, cụ thể là translationY dựa trên phần "mở rộng-ness". Gist with code is here. Bây giờ sau khi tôi tìm thấy phù hợp bù đắp các thông số, bố trí của tôi trông như thế này:

... 
<com.actinarium.random.common.CollapsingLogoToolbarLayout 
     android:id="@+id/collapsing_toolbar" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:fitsSystemWindows="true" 
     app:layout_scrollFlags="scroll|exitUntilCollapsed" 
     app:contentScrim="?attr/colorPrimary" 

     app:logoViewId="@+id/collapsing_logo" 
     app:collapsedViewOffset="0dp" 
     app:expandedViewOffset="-56dp"> 

    <ImageView 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:fitsSystemWindows="true" 
      android:src="@drawable/random_pattern" 
      android:scaleType="fitXY" 
      app:layout_collapseMode="parallax" 
      app:layout_collapseParallaxMultiplier="0.75"/> 

    <android.support.v7.widget.Toolbar 
      android:id="@+id/toolbar" 
      android:layout_width="match_parent" 
      android:layout_height="?attr/actionBarSize" 
      app:popupTheme="@style/ThemeOverlay.AppCompat.Light" 
      app:layout_collapseMode="pin"> 

    </android.support.v7.widget.Toolbar> 

    <FrameLayout 
      android:id="@+id/collapsing_logo" 
      android:layout_width="match_parent" 
      android:layout_height="?attr/actionBarSize" 
      android:layout_gravity="bottom"> 

     <ImageView 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_gravity="center" 
       android:src="@drawable/random_logo"/> 

    </FrameLayout> 

</com.actinarium.random.common.CollapsingLogoToolbarLayout> 
...