Làm cách nào để thêm bóng vào chế độ xem trang tính dưới cùng?

Question

Hiện tại, với thành phần chính thức của trang tính đáy từ thư viện thiết kế Android được triển khai, cạnh trên không hiển thị bóng. Nhưng đối với những gì tôi đã thấy trong các mô hình khác nhau và trong các thông số kỹ thuật của Material Design, phần dưới cùng bao gồm một cái bóng rời rạc nào đó.

Tôi nghĩ rằng bóng sẽ giúp cách xa trang tính dưới cùng khỏi bố cục chính, đặc biệt nếu có tập giá trị nhìn trộm và/hoặc bảng dưới cùng luôn hiển thị. Nếu không, nó chỉ sẽ hòa trộn với bố cục chính và các mục của nó.

Tôi đã thử cả hai ViewCompat.setElevation(bottomSheet, 5); và đặt android:elevation="5dp" cho chế độ xem trong XML, mà không thành công.

Answer 1

Tôi biết rằng hình dạng bóng không có ngoại hình giống như độ cao - nhưng ít nhất hãy thử. Bí quyết là sử dụng app:layout_anchor để cắt bóng cho bảng dưới cùng.

activity_main.xml

<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:layout_width="match_parent" 
android:layout_height="match_parent"> 

<MapView 
    android:id="@+id/map" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" /> 

<View 
    android:id="@+id/shadow" 
    android:layout_width="match_parent" 
    android:layout_height="16dp" 
    android:background="@drawable/shape_gradient_top_shadow" 
    app:layout_anchor="@id/bottom_sheet" /> 

<FrameLayout 
    android:id="@+id/bottom_sheet" 
    android:layout_width="match_parent" 
    android:layout_height="200dp" 
    android:clipToPadding="false" 
    app:layout_behavior="android.support.design.widget.BottomSheetBehavior" /> 

</android.support.design.widget.CoordinatorLayout> 

shape_gradient_top_shadow.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"> 
<gradient 
    android:angle="90" 
    android:endColor="@android:color/transparent" 
    android:startColor="#64000000"/> 
</shape> 

Trông như thế này:

EDIT

Nhận một kết quả thậm chí tốt hơn với một tùy chỉnh ShadowView:

• bài viết từ Roman Nurik về chủ đề này: https://plus.google.com/+RomanNurik/posts/2QvHVFWrHZf
• Gist của ShadowView dựa trên Roman Nurik của giải pháp: https://gist.github.com/MariusBoepple/bf869e02541cd4750550e88fa07b5ddd

Sau đó, bạn có thể làm như sau:

<ShadowView 
    android:id="@+id/shadow" 
    android:layout_width="match_parent" 
    android:layout_height="16dp" 
    android:gravity="bottom" 
    app:layout_anchor="@id/bottom_sheet" /> 

Answer 2

Đối với API Level 21 và cao hơn, thiết lập như sau trong giao diện cha mẹ. Bạn cũng có thể thử trong rootview của bottomsheet (Tôi đã không thử nó trong giao diện gốc)

android:background="@android:color/white" 
android:elevation="16dp" 

Nếu không có nền sau đó có thể sử dụng

android:outlineProvider="bounds" 

Ví dụ, tôi có tấm của tôi bên trong một chế độ xem cuộn lồng nhau

<android.support.v4.widget.NestedScrollView 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:clipToPadding="false" 
    app:layout_behavior="android.support.design.widget.BottomSheetBehavior" 
     android:elevation="16dp" 
     android:outlineProvider="bounds" 
     > 

    <include layout="@layout/bottomsheet_1" /> 

    </android.support.v4.widget.NestedScrollView>