【问题标题】:Elevation not working for BottomSheet inside Coordinator layout高程不适用于协调器布局内的 BottomSheet
【发布时间】:2016-07-30 03:38:32
【问题描述】:

我正在尝试在我的布局中使用BottomSheet。 根视图是CoordinatorLayout,我想在底部工作表的顶部设置Elevation,因此我将其设置为较高的值(50dp),但是当应用程序运行时它没有显示,但它出现在 android studio设计工具。

我尝试使用纯色而不是渐变为工作表设置背景,但它仍然有效。我也尝试使用阴影形状,但它没有给出相同的高程外观。

这是我的 XML

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.atefhares.StartActivity"
    android:clipToPadding="false">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <LinearLayout
            android:id="@+id/DetailsView"
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:orientation="vertical">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Details Should be shown here"
                android:id="@+id/textView"
                android:textSize="25sp"
                android:padding="20dp" />
        </LinearLayout>

        <fragment xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:tools="http://schemas.android.com/tools"
            android:id="@+id/map"
            android:name="com.google.android.gms.maps.SupportMapFragment"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            tools:context="com.atefhares.Start_Activity" />


    </LinearLayout>
    <android.support.v4.widget.SlidingPaneLayout
        android:id="@+id/bottom_sheet"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:behavior_peekHeight="70dp"
        app:layout_behavior="android.support.design.widget.BottomSheetBehavior"
        android:background="@drawable/gradiant"
        android:fillViewport="true"
        android:elevation="50dp">


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

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

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

编辑: bottom_sheet_layout.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fillViewport="true"
    android:orientation="vertical">


    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="70dp"
        android:background="@color/colorPrimary"
        android:padding="10dp"
        android:id="@+id/inviteLL">

        <ImageView
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:id="@+id/imageView"
            android:background="@drawable/invite_icon"
            android:layout_margin="5dp"
            android:layout_gravity="center_vertical" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Invite Friends"
            android:textSize="22sp"
            android:textColor="#ffffff"
            android:padding="10dp"
            android:fontFamily="sans-serif-condensed"
            android:gravity="center_vertical"
            android:id="@+id/inviteTV"

            android:layout_gravity="center_vertical"
            android:layout_weight="1" />

        <ImageView
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:id="@+id/arrowIV"
            android:layout_gravity="center_vertical"
            android:background="@drawable/arrow_up" />
    </LinearLayout>


    <ListView
        android:layout_width="match_parent"
        android:layout_height="fill_parent"
        android:id="@+id/usersLV"
        android:dividerHeight="1dp"
        android:divider="#ffffff"
        android:background="#ffffff" />

</LinearLayout>

那么我怎样才能在Bottom Sheet上方显示立面图

有人可以帮忙吗?

【问题讨论】:

  • 这里有同样的问题 :) 赞成你的问题。我可以建议您添加屏幕截图吗?还增加了赏金
  • 你是用什么安卓版本的手机测试的?
  • 发布您的底部工作表布局代码
  • @piotrek1543 版本 M、K、L
  • @AtefHares 我发现其他人也有同样的问题:stackoverflow.com/q/32395983/2013835stackoverflow.com/q/27741567/2013835

标签: android android-coordinatorlayout elevation bottom-sheet


【解决方案1】:

试试这个,

<android.support.v4.widget.SlidingPaneLayout
        android:id="@+id/bottom_sheet"
xmlns:slide_panel="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:behavior_peekHeight="70dp"
      app:layout_behavior="android.support.design.widget.BottomSheetBehavior"
        android:background="@drawable/gradiant"
        android:fillViewport="true"
        slide_panel:elevation="50dp">

【讨论】:

  • 海拔仅适用于大于 5.0 的设备
  • Elevation 可在 5 台以上的设备上随处使用。这是一个视图属性。但是在这里它不起作用,因为 BottomSheetBehavior 所做的事情,您建议的修改:使用 slide_panel:elevation 代替 android:elevation 是没有意义的。
【解决方案2】:

根据google guidelines 与android:elevation 是不可能的(您也可以阅读更多关于keyligth 的信息)。

在最常见的情况下,当您向上滚动“BottomSheet”时,“BottomSheet”后面会出现一个半透明层,这有助于让用户专注于“BottomSheet”操作,例如these examples

如果你想要一个顶部阴影,你可以设置一个带有渐变的可绘制背景(shadow_top.xml):

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

您的 SlidingPanelLayout 将是:

<android.support.v4.widget.SlidingPaneLayout
    android:id="@+id/bottom_sheet"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:behavior_peekHeight="95dp"
    android:paddingTop="25dp"
    app:layout_behavior="android.support.design.widget.BottomSheetBehavior"
    android:background="@drawable/shadow_top"
    android:fillViewport="true"
    >

最好的问候。

【讨论】:

  • 没有在谷歌指南中说这是不可能的
  • 指南上写着“来自键和环境光的组合阴影”,您可以看到灯光的指向。
  • 是的。它并没有说下面没有阴影。它结合了。而且环境光没有方向。
  • true,但是看“Shadow cast by key light”,上面没有阴影,可以假设key light的方向(我没有看到改变key的选项安卓灯)en.wikipedia.org/wiki/Key_light
  • 我的应用中有一个底部表格布局,它有高度,我可以看到顶部的高度。如果底部(16dp)但它是可见的,那么它的可见性要低得多。所以你的论点是无效的。环境阴影在顶部可见。
【解决方案3】:

不要忘记绘制阴影必须使用硬件加速绘图

hardwareAccelerated = true

hardwareAccelerated = false

详情请见Android Hardware Acceleration

【讨论】:

  • 默认开启
【解决方案4】:

答案是:不,这是不可能的(除非您创建自己的视图自定义并在顶部添加高程特征)。

海拔并不意味着在视图顶部可见,而是在底部、右侧和左侧可见。

如果您仔细查看official Material Design 指南,您会发现底部栏根本没有它(不要与卡片和底部栏之间的灰色空间混淆)。

例如:从 Android Studio 导入 Card View 示例,然后在模拟器或您的设备上使用它。你会看到,如果你增加高度值,除了顶部之外,视图的任何地方都会有他的阴影(见下面的第二张图片)。

另一个例子是导入Elevation Basic

编辑

以下代码取自卡片视图示例。有一个布局包含带有 elevationCardView。每当您更改海拔高度时,您总是会在各处看到阴影,但不是在顶部(代码已使用 Lollipop 和 Marshmallow 进行了测试)。

<LinearLayout android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:orientation="vertical"
              android:paddingBottom="@dimen/activity_vertical_margin"
              android:paddingTop="@dimen/activity_vertical_margin"
              android:paddingLeft="@dimen/activity_horizontal_margin"
              android:paddingRight="@dimen/activity_horizontal_margin"
    >
    <android.support.v7.widget.CardView
        android:id="@+id/cardview"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:elevation="100dp"
        card_view:cardBackgroundColor="@color/cardview_initial_background"
        card_view:cardCornerRadius="8dp"
        android:layout_marginLeft="@dimen/margin_large"
        android:layout_marginRight="@dimen/margin_large"
        >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/margin_medium"
            android:text="@string/cardview_contents"
            />
    </android.support.v7.widget.CardView>

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/margin_large"
        android:orientation="horizontal"
        >
        <TextView
            android:layout_width="@dimen/seekbar_label_length"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:text="@string/cardview_radius_seekbar_text"
            />
        <SeekBar
            android:id="@+id/cardview_radius_seekbar"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/margin_medium"
            />
    </LinearLayout>

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        >
        <TextView
            android:layout_width="@dimen/seekbar_label_length"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:text="@string/cardview_elevation_seekbar_text"
            />
        <SeekBar
            android:id="@+id/cardview_elevation_seekbar"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/margin_medium"
            />
    </LinearLayout>
</LinearLayout>

【讨论】:

  • 我很欣赏详细的回复,但这根本不是真的。正如您从此处的图像中看到的那样:developer.android.com/training/material/shadows-clipping.html 在视图顶部可以清楚地看到阴影。您的图像顶部没有显示阴影的原因肯定是其他原因(例如布局中的一些剪辑)。
  • @DanieleSegato 谢谢你,但我清楚地看到了第一个矩形的左侧、右侧和底部的 swadow。该示例取自谷歌代码,我已经更新了我的答案。
  • @DanieleSegato 这个家伙添加了更多细节,包括指向另一个指南的链接:stackoverflow.com/a/39380091/2013835
  • 我的代码就在这里,顶部有阴影,使用高程。在职的。为了我。这个问题非常愚蠢。对于原始问题,这是另一回事。但答案不是:“上面不可能有阴影”。
  • @DanieleSegato 好,您可以在另一个答案中分享代码,或者编辑我的代码吗?
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2016-04-19
  • 2017-04-13
  • 1970-01-01
  • 2018-11-07
  • 2015-12-15
  • 2015-08-14
  • 2018-06-29
相关资源
最近更新 更多