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?


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

1
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

1
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

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

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

21

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.


2
Anda dapat meletakkan ExpandTitleMarginBottom yang cukup besar ke CollapsingToolbarLayout untuk menghindari tumpang tindih judul saat diperluas.
WindRider
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.