web-dev-qa-db-ja.com

底面シートビューに影を追加するにはどうすればよいですか？

現在、Android=デザインライブラリの公式のボトムシートコンポーネントが実装されているため、トップエッジには影が表示されません。ただし、さまざまなモックアップやマテリアルデザインで見たものについては、スペック、下のシートには、ある種の個別のシャドウが含まれています。

特にピーク値が設定されていたり、ボトムシートが常に表示されている場合は、シャドウがメインレイアウトからボトムシートを遠ざけるのに役立つと思います。それ以外の場合は、メインレイアウトとそのアイテムとブレンドされます。

ViewCompat.setElevation(bottomSheet, 5);とAndroid:elevation="5dp"をXMLのビューに設定してみましたが、成功しませんでした。

Bottom sheet example from Material Design specs

androidandroid-layoutandroid-design-librarybottom-sheet
24
Chris

影の形状は標高と同じ外観ではないことを知っていますが、少なくとも試してみてください。コツはapp:layout_anchor影を下のシートにクリップします。

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>

このように見えます：

Bottom Sheet Shadow

[〜＃〜]編集[〜＃〜]

カスタムShadowViewでさらに良い結果を得る：

次に、次の操作を実行できます。

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

APIレベル21以上の場合、親ビューで次のように設定します。ボトムシートのルートビューで試すこともできます（ルートビューでは試していません）

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

背景がない場合は使用できます

Android:outlineProvider="bounds"

たとえば、ネストされたスクロールビュー内にシートがあります

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

トリックは、CardViewを親として使用し、CardViewに標高を設定することです

<Android.support.v7.widget.CardView
    Android:layout_width="match_parent"
    Android:background="#fff"
    Android:clickable="true"
    Android:focusable="true"
    app:behavior_hideable="true"
    app:layout_behavior="Android.support.design.widget.BottomSheetBehavior"
    Android:layout_height="140dp"
    app:cardElevation="8sp"
    card_view:cardCornerRadius="0dp">

      <!--The content of your Bottom sheet-->
        <Android.support.constraint.ConstraintLayout
         Android:layout_width="match_parent"
         Android:layout_height="match_parent">
          .
          .
      </Android.support.constraint.ConstraintLayout>

</Android.support.v7.widget.CardView>

[〜＃〜]編集[〜＃〜]

KitKat以下をサポートしている場合、この手法は最適なソリューションではありません。これは、Cardviewによって追加されたマージンが原因です。

1
Badr