AppBarLayout के साथ स्क्रॉल दृश्य देखें

103

मैं सामग्री डिजाइन स्क्रॉल तकनीकों से 'लचीले स्थान को अतिव्यापी सामग्री के साथ' लागू करना चाहता हूं , जैसे कि इस वीडियो में : अतिव्यापी सामग्री GIF के साथ लचीला स्थान

मेरा XML लेआउट अभी जैसा दिखता है:

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

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

    <android.support.design.widget.CollapsingToolbarLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

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

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
      <....>
    </LinearLayout>
  </android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

क्या डिज़ाइन लाइब्रेरी का उपयोग करके इसे पूरा करने का एक आसान तरीका है? या क्या मुझे ऐसा करने के लिए एक कस्टम समन्वयकलैटआउट का निर्माण करना होगा।

android android-design-library android-collapsingtoolbarlayout

— ianhanniballake
स्रोत

मैं विपक्षी की तलाश कर रहा हूं, CollapsingToolbarLayout के अंदर की छवि को टूलबार के बाद और किसी अन्य रंग में NestedScrollView के नीचे कुछ dps अधिक दिखाना चाहिए!

— डेविड

मैं FrameLayout, RelativeLayout का उपयोग कर रहा था लेकिन हमेशा टुकड़ों को एक्शनबार के साथ ओवरलैप किया गया था। सभी टुकड़ों के लिए एक माता-पिता के रूप में NestedScrollView का उपयोग करना समाधान था। धन्यवाद!

— JCarlosR

जवाबों:

148

वास्तव में, AppBarLayout के साथ स्क्रॉलिंग दृश्य को ओवरलेइंग करना एंड्रॉइड डिज़ाइन सपोर्ट लाइब्रेरी की एक सम्मिलित विशेषता है : आप ओवरलैप राशि निर्धारित करने के लिए app:behavior_overlapTopअपने NestedScrollView(या किसी भी दृश्य का उपयोग करके स्क्रॉलिंग व्यूबाइवर ) पर विशेषता का उपयोग कर सकते हैं :

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

ध्यान दें कि app:behavior_overlapTopकेवल उन विचारों पर काम करता है जिनमें app:layout_behavior="@string/appbar_scrolling_view_behavior"यह व्यवहार है जो विशेषता का उपयोग कर रहा है (न कि दृश्य या मूल दृश्य समूह, जैसा कि आमतौर पर विशेषताओं पर लागू होता है), इसलिए behavior_उपसर्ग।

या इसे setOverlayTop () के माध्यम से प्रोग्रामेटिक रूप से सेट करें :

NestedScrollView scrollView = ...
CoordinatorLayout.LayoutParams params = 
    (CoordinatorLayout.LayoutParams) scrollView.getLayoutParams();
AppBarLayout.ScrollingViewBehavior behavior =
    (AppBarLayout.ScrollingViewBehavior) params.getBehavior();
behavior.setOverlayTop(128); // Note: in pixels

— ianhanniballake
स्रोत

यह मेरे लिए लगभग काम कर रहा है, सिवाय मेरे RecyclerView (जिस पर मैंने सेट किया है layout_behaviorऔर behavior_overlapTop) अपने भाई-बहन AppBarLayout के पीछे समाप्त होता है । मैंने एक्सएमएल में ऑर्डर को स्विच करने की कोशिश की है, लेकिन इसका कोई असर नहीं दिख रहा है। कोई विचार क्या मुद्दा हो सकता है?

— विक्की चिजवानी

जब मैं स्क्रॉलिंग अक्षम करता हूं (एप्लिकेशन को हटा रहा हूं: लेआउट_स्क्रीन_फ्लैग एट्रिब्यूट्स) - behavior_overlapTop काम नहीं करता है - NestedScrollView AppBarLayout के अंतर्गत जाता है। क्या आप जानते हैं कि इसे कैसे ठीक किया जाए?

— पावेल बिरुकोव

@PavelBiryukov ने एपीआई <21 के लिए क्या किया?

— विक्की चिजवानी 13

हैलो, यह मेरे लिए काम नहीं करता है। मैं प्राप्त करता हूंerror no resource identifier found for attribute behavior_overlayTop

— जैक लिंक्स

@Lynx - भ्रामक रूप से पर्याप्त है, behavior_overlapTopलेकिन यह है setOverlayTop()- ओवरलैप बनाम ओवरले। सुनिश्चित करें कि आप सही का उपयोग कर रहे हैं!

— इयानहनिबेलके

स्वीकृत जवाब के अलावा , शीर्षक में उदाहरण के लिए शीर्ष पर स्थिर रहने के लिए अपने CollapsingToolbarLayout पर setTitleEnabled (गलत) कॉल करें।

ऐशे ही:

CollapsingToolbarLayout.setTitleEnabled(false);

या इसे इस तरह से xml में जोड़कर:

app:titleEnabled="false"

अन्यथा शीर्षक अतिव्यापी सामग्री के पीछे गायब हो सकता है, जब तक कि निश्चित रूप से, वह व्यवहार जो आप चाहते हैं।

— G.deWit
स्रोत

जब आप विस्तारित होते हैं तो शीर्षक को ओवरलैप करने से बचने के लिए आप CollapsingToolbarLayout में एक पर्याप्त पर्याप्त विस्तारित TitleMarginBottom रख सकते हैं।

— विंडराइडर