มุมมองการเลื่อนทับซ้อนกับ AppBarLayout


103

ฉันต้องการใช้รูปแบบ 'พื้นที่ยืดหยุ่นพร้อมเนื้อหาที่ทับซ้อนกัน' จากไฟล์ เทคนิคการเลื่อนดีไซน์ Materialเช่นในวิดีโอนี้ : พื้นที่ที่ยืดหยุ่นพร้อม 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>

มีวิธีง่ายๆในการทำให้สำเร็จโดยใช้ไลบรารีการออกแบบหรือไม่ หรือฉันต้องสร้างCoordinatorLayoutแบบกำหนดเองพฤติกรรมในการทำสิ่งนี้?


ฉันกำลังค้นหาสิ่งที่ตรงกันข้ามภาพใน CollapsingToolbarLayout ควรแสดง dps เพิ่มขึ้นอีกเล็กน้อยหลังจากแถบเครื่องมือและด้านล่าง NestedScrollView เป็นสีอื่น!
เดวิด

ฉันใช้ FrameLayout, RelativeLayout แต่ส่วนที่ซ้อนทับกับ actionBar เสมอ การใช้ NestedScrollView เป็นพาเรนต์สำหรับชิ้นส่วนทั้งหมดเป็นวิธีแก้ปัญหา ขอบคุณ!
JCarlosR

คำตอบ:


148

ในความเป็นจริงการซ้อนทับมุมมองการเลื่อนด้วย AppBarLayout เป็นคุณลักษณะที่รวมอยู่ในไลบรารีการสนับสนุนการออกแบบ Android : คุณสามารถใช้app:behavior_overlapTopแอตทริบิวต์บนNestedScrollView (หรือมุมมองใด ๆ โดยใช้ScrollingViewBehavior ) เพื่อกำหนดจำนวนที่ทับซ้อนกัน:

<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"การทำงานที่ใช้แอตทริบิวต์ (ไม่ใช่ View หรือ Parent ViewGroup เนื่องจากแอตทริบิวต์มักจะใช้กับ) ดังนั้นbehavior_คำนำหน้า

หรือตั้งค่าโดยใช้โปรแกรมผ่านsetOverlayTop () :

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

1
เกือบจะได้ผลสำหรับฉันยกเว้น RecyclerView ของฉัน (ซึ่งฉันตั้งค่าlayout_behaviorและbehavior_overlapTop) จะจบลงที่ด้านหลัง AppBarLayout ซึ่งเป็นพี่น้องกัน ฉันได้ลองเปลี่ยนลำดับใน XML แล้ว แต่ดูเหมือนจะไม่มีผลใด ๆ มีความคิดอะไรที่อาจเป็นปัญหา?
Vicky Chijwani

1
เมื่อฉันปิดการใช้งานการเลื่อน (ลบแอพ: layout_scrollFlags แอตทริบิวต์) - behavior_overlapTop ไม่ทำงาน - NestedScrollView อยู่ภายใต้ AppBarLayout คุณรู้วิธีแก้ไขปัญหานี้หรือไม่?
Pavel Biryukov

@PavelBiryukov คุณทำอะไรให้ API <21
Vicky Chijwani

1
สวัสดีมันใช้ไม่ได้กับฉัน ฉันได้รับerror no resource identifier found for attribute behavior_overlayTop
Jack Lynx

1
@Lynx - สับสนพอสมควรbehavior_overlapTopแต่setOverlayTop()- ทับซ้อนกับการซ้อนทับ ตรวจสอบให้แน่ใจว่าคุณใช้ถูกต้อง!
ianhanniballake

21

นอกเหนือจากคำตอบที่ยอมรับแล้วให้เรียก setTitleEnabled (false) บน CollapsingToolbarLayout ของคุณเพื่อให้ชื่อคงที่ที่ด้านบนดังในตัวอย่าง

แบบนี้:

CollapsingToolbarLayout.setTitleEnabled(false);

หรือเพิ่มเป็น xml ดังนี้:

app:titleEnabled="false"

ไม่เช่นนั้นชื่ออาจหายไปหลังเนื้อหาที่ทับซ้อนกันเว้นแต่ว่านั่นเป็นพฤติกรรมที่คุณต้องการ


2
คุณสามารถใส่ expandTitleMarginBottom ที่มีขนาดใหญ่เพียงพอใน CollapsingToolbarLayout เพื่อหลีกเลี่ยงการทับหัวเรื่องเมื่อขยาย
WindRider
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.