Cách đồng bộ cuộn của hai CoordinatorLayout + AppBarLayout

Question

Tôi có một hoạt động với XML.

Cái gì như:

<?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" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:id="@+id/drawer_layout" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    tools:context=".MainActivity"> 

    <android.support.design.widget.CoordinatorLayout 
     android:id="@+id/coordinator" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent"> 

     <android.support.design.widget.AppBarLayout 
      android:id="@+id/appbar" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> 

      <android.support.v7.widget.Toolbar 
       android:id="@+id/toolbar" 
       android:layout_width="match_parent" 
       android:layout_height="?attr/actionBarSize" 
       android:background="@color/primary" 
       android:theme="@style/ToolbarStyle" 
       android:gravity="center_vertical" 
       app:popupTheme="@style/ThemeOverlay.AppCompat.Light" 
       app:layout_scrollFlags="scroll|enterAlways|snap" 
       style="@style/bold" /> 

      <android.support.design.widget.TabLayout 
       android:id="@+id/tabs" 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:theme="@style/TabLayoutStyle" 
       android:animateLayoutChanges="true" 
       app:tabGravity="fill" 
       app:tabMode="fixed" 
       app:tabTextAppearance="@style/TabStyle"/> 

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

     <com.wedmegood.planner.view.XViewPager 
      android:id="@+id/main_container" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:layout_gravity="fill_vertical" 
      app:layout_behavior="@string/appbar_scrolling_view_behavior" /> 

     ... 

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

Một Fragment của ViewPager có CoordinatorLayout và AppBarLayout + CollapsingToolbarLayout.

Fragment 's XML:

<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/root" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:background="@color/primaryDark" 
    app:layout_behavior="@string/appbar_scrolling_view_behavior"> 

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

     <android.support.design.widget.CollapsingToolbarLayout 
      android:id="@+id/collapse_toolbar" 
      android:layout_width="match_parent" 
      android:layout_height="@dimen/my_wedding_banner_height" 
      android:minHeight="48dp" 
      android:fitsSystemWindows="true" 
      app:contentScrim="?attr/colorPrimary" 
      app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"> 

      <RelativeLayout 
       android:id="@+id/banner" 
       android:layout_width="match_parent" 
       android:layout_marginTop="0dp" 
       android:layout_height="match_parent" 
       app:layout_collapseMode="none"> 


      </RelativeLayout> 

      <android.support.design.widget.TabLayout 
       android:id="@+id/tabs" 
       android:layout_width="match_parent" 
       android:layout_height="48dp" 
       android:layout_gravity="bottom" 
       android:animateLayoutChanges="true" 
       app:tabMode="fixed" 
       app:tabGravity="fill" 
       app:tabTextColor="@color/primary" 
       app:tabSelectedTextColor="@color/primary" 
       app:tabIndicatorColor="@color/accent" 
       app:tabIndicatorHeight="4dp" 
       app:tabTextAppearance="@style/TabStyle"/> 

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

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

     <com.wedmegood.planner.view.XViewPager 
      android:id="@+id/viewpager" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      app:layout_behavior="@string/appbar_scrolling_view_behavior" /> 

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

Đoạn có một biểu ngữ, các RelativeLayout. Tôi muốn đồng bộ di chuyển của hai AppBarLayouts này để AppBar bên ngoài sụp đổ trước/sau (không quan trọng nếu nó xảy ra trước hoặc sau) bên trong AppBar sụp đổ? Tôi đã cố gắng thiết lập và xóa cờ cuộn của 2 AppBars tùy thuộc vào người nghe thay đổi Offset của họ, nó kinda hoạt động nhưng không cung cấp cho một hiệu ứng cuộn trơn tru. Tôi có thể thay đổi XML của mảnh hoàn toàn miễn là biểu ngữ hoạt động tốt.

Ngoài ra, có cách nào để thay đổi kiểu/gọi setTabTextColors của TabLayout khi CollapsingToolbarLayout thu gọn/mở rộng không?

Answer 1

Làm thế nào tôi có thể đồng bộ cuộn của những 2 AppBarLayouts để bên ngoài AppBar sụp đổ hoặc trước/sau (không quan trọng nếu nó xảy ra trước hoặc sau) sụp đổ AppBar bên trong?

Xóa rằng Fragment 's CoordinatorLayout và chỉ sử dụng RelativeLayout như một thẻ gốc (đối với Fragment) và sau đó làm chất liệu của bạn với điều đó ViewPager trong MainActivity.

Ví dụ, sử dụng nó bên CoordinatorLayout đó như thế này:

<CoordinatorLayout> 
<android.support.v4.view.ViewPager/> 
    <AppbarLayout/> 
    <scrollableView/> 
    <FloatingActionButton/> 
</CoordinatorLayout> 

Github dụ:

https://github.com/TheLittleNaruto/SupportDesignExample

Hoặc có lẽ bạn muốn di chuyển mà ViewPager bên trong NestedScrollView nhưng, bạn sẽ gặp phải sự cố sau đó sử dụng mã sau bên trong nó:

app:layout_behavior="@string/appbar_scrolling_view_behavior" 

Khá nhiều.

Một mảnh của ViewPager có CoordinatorLayout và AppBarLayout + CollapsingToolbarLayout. XML:

Bạn không cần sử dụng chúng hai lần.

Answer 2

Tôi phải đối mặt với cùng một vấn đề ngày trước. Cuối cùng tôi tìm thấy giải pháp từ SwipeRefreshLayout. Chỉ cần mở rộng CoordinatorLayout và triển khai giao diện NestedScrollingChild. Nó hoạt động!

đây là mã của tôi:

public class NestedCoordinatorLayout extends CoordinatorLayout implements NestedScrollingChild { 
private final NestedScrollingChildHelper mNestedScrollingChildHelper; 

private final int[] mParentOffsetInWindow = new int[2]; 
private final int[] mParentScrollConsumed = new int[2]; 

public NestedCoordinatorLayout(Context context) { 
    this(context, null, 0); 
} 

public NestedCoordinatorLayout(Context context, AttributeSet attrs) { 
    this(context, attrs, 0); 
} 

public NestedCoordinatorLayout(Context context, AttributeSet attrs, int defStyleAttr) { 
    super(context, attrs, defStyleAttr); 
    mNestedScrollingChildHelper = new NestedScrollingChildHelper(this); 
    setNestedScrollingEnabled(true); 
} 

// NestedScrollingChild 

@Override 
public void setNestedScrollingEnabled(boolean enabled) { 
    mNestedScrollingChildHelper.setNestedScrollingEnabled(enabled); 
} 

@Override 
public boolean isNestedScrollingEnabled() { 
    return mNestedScrollingChildHelper.isNestedScrollingEnabled(); 
} 

@Override 
public boolean startNestedScroll(int axes) { 
    return mNestedScrollingChildHelper.startNestedScroll(axes); 
} 

@Override 
public void stopNestedScroll() { 
    mNestedScrollingChildHelper.stopNestedScroll(); 
} 

@Override 
public boolean hasNestedScrollingParent() { 
    return mNestedScrollingChildHelper.hasNestedScrollingParent(); 
} 

@Override 
public boolean dispatchNestedScroll(int dxConsumed, int dyConsumed, int dxUnconsumed, 
            int dyUnconsumed, int[] offsetInWindow) { 
    return mNestedScrollingChildHelper.dispatchNestedScroll(dxConsumed, dyConsumed, 
      dxUnconsumed, dyUnconsumed, offsetInWindow); 
} 

@Override 
public boolean dispatchNestedPreScroll(int dx, int dy, int[] consumed, int[] offsetInWindow) { 
    return mNestedScrollingChildHelper.dispatchNestedPreScroll(dx, dy, consumed, offsetInWindow); 
} 

@Override 
public boolean dispatchNestedFling(float velocityX, float velocityY, boolean consumed) { 
    return mNestedScrollingChildHelper.dispatchNestedFling(velocityX, velocityY, consumed); 
} 

@Override 
public boolean dispatchNestedPreFling(float velocityX, float velocityY) { 
    return mNestedScrollingChildHelper.dispatchNestedPreFling(velocityX, velocityY); 
} 

@Override 
public void onNestedScrollAccepted(View child, View target, int axes) { 
    super.onNestedScrollAccepted(child, target, axes); 

    // Dispatch up to the nested parent 
    startNestedScroll(axes & ViewCompat.SCROLL_AXIS_VERTICAL); 
} 

@Override 
public void onStopNestedScroll(View target) { 
    super.onStopNestedScroll(target); 
    stopNestedScroll(); 
} 

@Override 
public void onNestedScroll(View target, int dxConsumed, int dyConsumed, int dxUnconsumed, int dyUnconsumed) { 
    super.onNestedScroll(target, dxConsumed, dyConsumed, dxUnconsumed, dyUnconsumed); 
    dispatchNestedScroll(dxConsumed, dyConsumed, dxUnconsumed, dyUnconsumed, 
      mParentOffsetInWindow); 
} 

@Override 
public void onNestedPreScroll(View target, int dx, int dy, int[] consumed) { 
    super.onNestedPreScroll(target, dx, dy, consumed); 

    final int[] parentConsumed = mParentScrollConsumed; 
    if (dispatchNestedPreScroll(dx - consumed[0], dy - consumed[1], parentConsumed, null)) { 
     consumed[0] += parentConsumed[0]; 
     consumed[1] += parentConsumed[1]; 
    } 
} 

}

Sử dụng nó trong cách bố trí của mảnh của bạn.