दो कोऑर्डिनेटर के स्क्रॉल को सिंक करने के लिए कैसे करें + AppBarLayout

Question

मेरे पास XML के साथ एक गतिविधि है।

कुछ की तरह:

<?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> 

ViewPager का एक Fragment एक CoordinatorLayout और AppBarLayout + CollapsingToolbarLayout है।

Fragment की एक्सएमएल:

<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> 

टुकड़ा एक बैनर, RelativeLayout है। मैं इन दो AppBarLayouts की स्क्रॉल को सिंक करना चाहता हूं ताकि बाहरी ऐपबार पहले या बाद में गिर जाए (इससे पहले कि यह पहले या बाद में होता है) अंदरूनी ऐपबार गिरने से कोई फर्क नहीं पड़ता? मैंने अपने ऑफसेट परिवर्तन श्रोता के आधार पर 2 ऐपबार्स के स्क्रॉल झंडे को सेट और अनसेट करने का प्रयास किया, यह थोड़े काम करता है लेकिन एक चिकनी स्क्रॉल प्रभाव नहीं देता है। जब तक बैनर ठीक काम करता है तब तक मैं खंड के एक्सएमएल को पूरी तरह से बदल सकता हूं।

साथ ही, क्या CollapsingToolbarLayout को ध्वस्त/विस्तारित करते समय स्टाइल/कॉल TabLayout के setTabTextColors को बदलने का कोई तरीका है?

Answer 1

मैं इन 2 AppBarLayouts की पुस्तक कैसे सिंक कर सकते हैं ताकि बाहरी AppBar गिर या तो/के बाद (कोई फर्क नहीं पड़ता अगर यह पहले या बाद में होता है) से पहले अंदर AppBar गिर?

हटाएं कि Fragment के CoordinatorLayout और बस (Fragment के लिए) एक रूट टैग के रूप में RelativeLayout उपयोग करना और फिर MainActivity में है कि ViewPager के साथ अपने सामान है।

उदाहरण के लिए, इस तरह कि CoordinatorLayout अंदर इसका इस्तेमाल:

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

Github उदाहरण:

https://github.com/TheLittleNaruto/SupportDesignExample

या शायद आप स्क्रॉल करने के लिए चाहते हैं कि ViewPagerNestedScrollView अंदर लेकिन, आप एक समस्या का सामना करेंगे, इसके बाद निम्न कोड का उपयोग करें:

app:layout_behavior="@string/appbar_scrolling_view_behavior" 

यह बहुत अधिक है।

ViewPager का एक टुकड़ा एक CoordinatorLayout और AppBarLayout + CollapsingToolbarLayout है। एक्सएमएल:

आपको उन्हें दो बार उपयोग करने की आवश्यकता नहीं है।

Answer 2

मुझे पहले एक ही समस्या का सामना करना पड़ता है। अंततः मुझे SwipeRefreshLayout से समाधान मिला। बस CoordinatorLayout का विस्तार करें और NestedScrollingChild इंटरफ़ेस लागू करें। यह काम करता हैं!

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]; 
    } 
} 

}

अपने टुकड़ा के लेआउट में यह प्रयोग करें:

यहाँ मेरी कोड है।