Tumpang tindih tampilan scrolling dengan AppBarLayout

103

Saya ingin menerapkan pola 'Ruang Fleksibel dengan konten yang tumpang tindih' dari teknik pengguliran desain Material , seperti dalam video ini : Ruang Fleksibel dengan GIF konten yang tumpang tindih

Tata letak XML saya sekarang terlihat seperti:

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

Adakah cara mudah untuk melakukannya dengan menggunakan Design Library? Atau apakah saya harus membuat CoordinatorLayout.Behavior kustom untuk melakukan ini?

android android-design-library android-collapsingtoolbarlayout

— ianhanniballake
sumber

Saya mencari kebalikannya, gambar di dalam CollapsingToolbarLayout akan menunjukkan beberapa dps lagi setelah toolbar dan di bawah NestedScrollView dengan warna lain!

— David

Saya menggunakan FrameLayout, RelativeLayout tetapi selalu fragmennya tumpang tindih dengan actionBar. Menggunakan NestedScrollView sebagai induk untuk semua fragmen adalah solusinya. Terima kasih!

— JCarlosR

Jawaban:

148

Faktanya, menghamparkan tampilan scrolling dengan AppBarLayout adalah fitur yang disertakan di Pustaka Dukungan Desain Android : Anda bisa menggunakan app:behavior_overlapTopatribut di NestedScrollView(atau Tampilan apa pun menggunakan ScrollingViewBehavior ) untuk menyetel jumlah tumpang tindih:

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

Perhatikan bahwa app:behavior_overlapTophanya berfungsi pada tampilan yang memiliki app:layout_behavior="@string/appbar_scrolling_view_behavior"Behavior apa adanya yang menggunakan atribut (bukan View atau Parent ViewGroup, karena atribut biasanya diterapkan), oleh karena itu behavior_awalannya.

Atau setel secara terprogram melalui setOverlayTop () :

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

— ianhanniballake
sumber

Ini hampir berhasil untuk saya, kecuali RecyclerView saya (yang telah saya setel layout_behaviordan behavior_overlapTop) berakhir di belakang AppBarLayout saudaranya. Saya sudah mencoba mengganti urutan dalam XML, tetapi sepertinya tidak berpengaruh apa pun. Ada ide apa yang bisa menjadi masalah?

— Vicky Chijwani

Ketika saya menonaktifkan pengguliran (menghapus atribut app: layout_scrollFlags) - behaviour_overlapTop tidak berfungsi - NestedScrollView berada di bawah AppBarLayout. Apakah Anda tahu cara memperbaikinya?

— Pavel Biryukov

@PavelBiryukov apa yang Anda lakukan untuk API <21?

— Vicky Chijwani

Halo, itu tidak berhasil untuk saya. Saya menerimaerror no resource identifier found for attribute behavior_overlayTop

— Jack Lynx

@ Lynx - cukup membingungkan, behavior_overlapToptetapi setOverlayTop()- tumpang tindih vs hamparan. Pastikan Anda menggunakan yang benar!

— ianhanniballake

Selain jawaban yang diterima , panggil setTitleEnabled (false) di CollapsingToolbarLayout Anda untuk membuat judul tetap di atas seperti pada contoh.

Seperti ini:

CollapsingToolbarLayout.setTitleEnabled(false);

atau dengan menambahkannya dalam xml seperti ini:

app:titleEnabled="false"

Jika tidak, judul dapat menghilang di balik konten yang tumpang tindih, kecuali tentu saja itu adalah perilaku yang Anda inginkan.

— G.deWit
sumber

Anda dapat meletakkan ExpandTitleMarginBottom yang cukup besar ke CollapsingToolbarLayout untuk menghindari tumpang tindih judul saat diperluas.

— WindRider