如何在android中的视图上方添加阴影

Question

我有一个视图是服务器作为页脚标题.这只是一个视图,您可以将其视为按钮或文本视图或布局(我对任何事情都很开放).这是xml

<RelativeLayout>
   <ScrollView >… </ScrollView> //match parent width and height
   <MyBottomView/> // align parent bottom
 </RelativeLayout>

因此,您可以看到ScrollView在MyBottomView下方滚动.我想在MyBottomView中添加一个顶部阴影,使其看起来更像Material Design.我怎么能这样做？

Answer 1

如果您需要在视图的一侧(例如在顶部)有阴影,您可以在它之前添加另一个视图并使用渐变阴影作为其背景.

这是top_shadow_gradient.xml您必须存储在drawable文件夹中的渐变文件:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient android:startColor="#40000000" android:endColor="#30ffffff" android:angle="90"/>
</shape>

以下是如何使用它的示例布局:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/transparent"
    android:orientation="vertical">

    <View
        android:layout_width="match_parent"
        android:layout_height="8dp"
        android:background="@drawable/top_shadow_gradient" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#ffffff"
        android:orientation="vertical"
        android:paddingTop="8dp">

        <!-- Put your content here-->

    </LinearLayout>

</LinearLayout>

重要提示:根布局必须是透明的(android:background="@android:color/transparent"),并且"内容"布局需要具有白色背景(android:background="#ffffff").

这就是结果:

Answer 2

以下是此问题的一些解决方案 - 选择最佳:

• 在StackOverFlow上,在2012年10月22日的帖子中, 如何在android中的linearlayout周围显示阴影？,你会读到:

Android中没有这样的属性来显示阴影.但可能的方法是:

1. 添加一个带有灰色的普通LinearLayout,在其上添加您的实际布局,底部和右侧的边距等于1或2 dp

2. 使用带阴影的9补丁图像并将其设置为线性布局的背景

和

通过实现将作为LinearLayoout的背景的图层列表,还可以解决该问题.

添加background_with_shadow.xml文件到res/drawable.含:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item >
        <shape 
            android:shape="rectangle">
        <solid android:color="@android:color/darker_gray" />
        <corners android:radius="5dp"/>
        </shape>
    </item>
    <item android:right="1dp" android:left="1dp" android:bottom="2dp">
        <shape 
            android:shape="rectangle">
        <solid android:color="@android:color/white"/>
        <corners android:radius="5dp"/>
        </shape>
    </item>
</layer-list>

然后在LINELayout中将图层列表添加为背景.

<LinearLayout
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:background="@drawable/background_with_shadow"/>

您还可以阅读:http://odedhb.blogspot.com/2013/05/android-layout-shadow-without-9-patch.html

• 来自StackOverflow的另一篇文章,如何在Android中将视图设置为View？,给你另一个解决方案(使用两个形成阴影的视图.):

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" 
    android:padding="10dp"
    android:background="#CC55CC">
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <TableLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:stretchColumns="0">
            <TableRow>
                <LinearLayout
                    android:id="@+id/content"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content">
                    <TextView  
                        android:layout_width="fill_parent" 
                        android:layout_height="wrap_content"
                        android:background="#FFFFFF" 
                        android:text="@string/hello" />
                </LinearLayout>
                <View
                    android:layout_width="5dp"
                    android:layout_height="fill_parent"
                    android:layout_marginTop="5dp"
                    android:background="#55000000"/>
            </TableRow>
        </TableLayout>
        <View
            android:layout_width="fill_parent"
            android:layout_height="5dp"
            android:layout_marginLeft="5dp"
            android:background="#55000000"/>
    </LinearLayout>
</FrameLayout>

• 您还可以使用特定的可绘制表单Android资源来模仿阴影效果.请看:t/sf/ask/1484830931/或者只是阅读下面的帖子:

我正在使用Android Studio 0.8.6而我找不到:

android:background="@drawable/abc_menu_dropdown_panel_holo_light"

所以我找到了这个:

android:background="@android:drawable/dialog_holo_light_frame"

它看起来像这样:

![在此处输入图像说明] [1]

[1]:http://i.stack.imgur.com/tId9L.jpg

如果您对清洁材料设计效果感兴趣,请阅读以下文档:

• Android L开发者预览:视图和阴影
• 定义阴影和剪切视图

Answer 3

在 hack 我发现这是将您的视图包装在父级中并使用旋转。例如，如果您有一个 cardview 并且正在为其添加高度，则可以像这样进行两次旋转以实现上方而不是下方的阴影：

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:clipToPadding="false"
    android:paddingBottom="10dp"
    android:rotation="180">

    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:rotation="180"
        app:cardElevation="8dp">
    <!--Card view content-->
    </android.support.v7.widget.CardView>
</RelativeLayout>

这给出了类似于附加屏幕截图的内容。

这仍然存在一个问题 - 这需要在父布局上设置 paddingBottom 这意味着很明显布局上方的任何可滚动兄弟都不会在其下方。

因此，即使在当今高度和轮廓提供者的时代，最好改为添加半透明视图。:(

Answer 4

我通过使用 ConstraintLayouts更新了Ivo 的出色答案。

可绘制：shadow_top.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient android:startColor="#40000000" android:endColor="#10ffffff" android:angle="90"/>
</shape>

布局：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  android:layout_width="match_parent"
  android:layout_height="match_parent">

    <androidx.constraintlayout.widget.ConstraintLayout
      android:id="@+id/cl_topView"
      android:layout_width="match_parent"
      android:layout_height="0dp"
      app:layout_constraintBottom_toTopOf="@id/cl_bottomView"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintTop_toTopOf="parent">
      
         ... nested views

    </androidx.constraintlayout.widget.ConstraintLayout>

    <View
      android:id="@+id/v_shadowTop"
      android:layout_width="match_parent"
      android:layout_height="3dp"
      android:background="@drawable/shadow_top"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintBottom_toTopOf="@id/cl_bottomView"/>

   <androidx.constraintlayout.widget.ConstraintLayout
      android:id="@+id/cl_bottomView"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintTop_toBottomOf="@id/cl_topView">

         ... nested views

    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

结果： 按照上述步骤，我能够得到下图中箭头所示的顶部阴影。

对于那些刚接触 Android 开发的人：

高度调整： 阴影的高度由视图的“ v_shadowTop ”高度（当前为 3dp）控制。

渐变调整：渐变的颜色由“ shadow_top.xml ” 绘图中的startColor（当前为000000）和endColor（当前为ffffff）的最后六个字符（十六进制代码）控制。

透明度由 Shadow_top.xml 可绘制对象中的 startColor（当前为 40）和 endColor（当前为 10）的前两个字符控制。