logo标签列表

协调布局中的底部工作表高度无效

androidandroid-coordinatorlayoutelevationbottom-sheet
13

我正在尝试在我的布局中使用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>

那么，我该如何让高程值显示在底部工作表的顶部呢？

有人可以帮忙吗？

你用什么版本的安卓手机进行测试？ - piotrek1543
请发布您的底部表单布局代码。 - Burhanuddin Rashid
@piotrek1543 版本 M，K，L - Atef Hares
@DanieleSegato，是的，我尝试使用 Linear layout 替代 SlidingPaneLayout => 没有区别，并且我将背景更改为纯色 => 没有区别。 - Atef Hares
1
@AtefHares 我发现其他人也遇到了同样的问题：https://dev59.com/PFwY5IYBdhLWcg3wpJA- 和 https://dev59.com/MV4c5IYBdhLWcg3wl7Xm - JJ86
显示剩余11条评论
4个回答
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及以上版本的设备。 - Karthik Sridharan
高度属性在5+设备上都可以使用。它是一个视图属性。但是在这里，由于BottomSheetBehavior的某些原因，它不起作用，您建议的修改：使用slide_panel:elevation代替android:elevation是没有意义的。 - Daniele Segato
1
根据Google指南，android:elevation不可用（还可以阅读更多关于keylight的内容）。
无论如何，在最常见的情况下，当您向上滚动“BottomSheet”时，一个半透明层会出现在“BottomSheet”后面，这有助于保持用户专注于“BottomSheet”操作，例如这些示例。
如果您仍然想要顶部阴影，可以设置带有渐变的可绘制背景，例如（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"
    >

最好的问候。

谷歌的指南中从未提到不可能。 - Daniele Segato
指南上说“从主光源和环境光源中结合阴影”，你可以看到灯光的指向。 - Vinicius DSL
是的。它没有说没有阴影。它是结合在一起的。而环境光没有方向。 - Daniele Segato
是的，但是请注意“主光源投射的阴影”，在顶部没有阴影，您可以假设主光源的方向（我没有看到在Android上更改主光源的选项）。https://zh.wikipedia.org/wiki/%E4%B8%BB%E5%85%89%E6%BA%90 - Vinicius DSL
我在我的应用程序中有一个BottomSheetLayout，它具有高程，并且我可以在顶部看到高程。它比底部（16dp）要不可见得多，但它是可见的。因此，你的论点是无效的。环境阴影在顶部是可见的。 - Daniele Segato
再说一遍，我说“看看由主光源投射的阴影”，顶部没有阴影。我知道顶部的阴影是环境光的结果，最终阴影的大部分是由“由主光源投射的阴影”引起的，而且据我所知，在Android上，您无法更改/反转此光线。 - Vinicius DSL
0

别忘了，要绘制阴影，必须使用硬件加速绘图。

hardwareAccelerated = true enter image description here

hardwareAccelerated = false enter image description here

有关详细信息，请参见Android 硬件加速。

3
默认情况下启用。 - Daniele Segato
0
答案是：不可能的（除非您自己创建一个具有顶部高程功能的自定义视图）。 高程 不是用于在视图顶部可见，而是在底部、右侧和左侧可见。
如果您仔细查看官方 Material Design 指南，您会发现底部栏根本没有这个功能（不要与卡片和底部栏之间的灰色空间混淆）。

enter image description here

例如：从Android Studio导入Card View示例并在模拟器或设备上进行操作。您会发现，如果增加高程值，则视图除顶部外的任何地方都会有阴影（请参见下面的第二张图片）。

enter image description here

另一个例子是通过导入 Elevation Basic 来实现的。

编辑

以下代码摘自 Card View 示例。其中包含一个带有 elevation 的 CardView 布局。每当您更改高程时，您将始终在任何地方看到阴影，但不会在顶部（该代码已在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>

1
非常感谢详细的回复，但这并不正确。从这里的图片可以看到：https://developer.android.com/training/material/shadows-clipping.html，在视图上方可以清楚地看到一个阴影。你的图片没有显示顶部阴影的原因肯定是其他问题（比如布局中的某些剪裁）。 - Daniele Segato
@DanieleSegato 谢谢你，但我清楚地看到第一个矩形的左侧、右侧和底部都有阴影。这个例子是从Google代码中获取的，我已经更新了我的答案。 - JJ86
这是我的代码，使用阴影和高度将阴影放在顶部。它对我有效。问题非常愚蠢。对于原始问题，答案不是“无法在顶部有阴影”。 - Daniele Segato
这个答案绝对是误导性的。视图上方确实有阴影。您可以在卡片的每一侧看到剪切，而不仅仅是在顶部，因此这是您布局的问题，而不是顶部阴影的问题。作为理解的关键，请尝试使用clipToPadding属性进行调整。 - the korovay
感谢您的评论，我会尝试改进。 - JJ86
显示剩余3条评论
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接