当前位置： 文江博客话题详情

如何在android中为View设置阴影？

发布于 2024-10-06 23:21:20 字数 326 浏览 4 评论 0原文

我想知道如何向 android 中的任何常规视图添加阴影层。例如：假设我有一个布局 xml，显示类似这样的内容。

<?xml version="1.0" encoding="utf-8"?>  
<LinearLayout  
    android:layout_height="wrap_content"  
    android:layout_width="wrap_content"  
    <Button....  
    ...  
</LinearLayout>

现在，当它显示时，我希望在它周围有一个阴影。

原文

I want to know how to add a shadow layer to any general View in android. for eg: suppose i have a layout xml, showing something like this..

<?xml version="1.0" encoding="utf-8"?>  
<LinearLayout  
    android:layout_height="wrap_content"  
    android:layout_width="wrap_content"  
    <Button....  
    ...  
</LinearLayout>

Now when it is displayed I want to have a shadow around it.

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（7）

梦纸 2024-10-13 23:21:20

创建阴影的最佳方法是使用 9patch 图像作为
视图的背景（或包装视图的ViewGroup）。

第一步是创建一个周围有阴影的 png 图像。我
使用 Photoshop 创建这样的图像。这真的很简单。

  • 使用 Photoshop 创建新图像。
  • 添加一个图层并创建一个 4x4 的黑色正方形。
  • 通过选择图层中的图层在图层上创建阴影
    资源管理器并单击标题为 fx 的按钮并选择投影。
  • 将图像导出为 png。

下一步是从此图像创建 9 块可绘制对象。

  • 从 android-sdk/tools 打开 draw9patch
  • 在 draw9patch 中打开图像
  • 在正方形的四个边上创建 4 条黑线，如下所示
    然后将图像另存为 shadow.9.png。

现在您可以添加此阴影作为您想要的视图的背景
添加阴影。将 shadow.9.png 添加到 res/drawables 中。现在添加它
作为背景：

<LinearLayout
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:background="@drawable/shadow"
  android:paddingBottom="5px"
  android:paddingLeft="6px"
  android:paddingRight="5px"
  android:paddingTop="5px"
>

我最近写了一篇 博客文章 详细解释了这一点
包括我用来创建阴影的 9patch 图像。

The best way to create a shadow is to use a 9patch image as the
background of the view (or a ViewGroup that wraps the view).

The first step is to create a png image with a shadow around it. I
used photoshop to create such an image. Its really simple.

  • Create a new image with Photoshop.
  • Add a layer and create a black square of 4x4.
  • Create a shadow on the layer by selecting the layer in layer
    explorer and clicking on a button titled fx and choosing drop shadow.
  • Export the image as png.

The next step is to create 9-patch drawables from this image.

  • Open draw9patch from android-sdk/tools
  • Open the image in draw9patch
  • Create 4 black lines on the four sides of the square like the
    following and then save the image as shadow.9.png.

Now you can add this shadow as the background of the views you want to
add the shadow to. Add shadow.9.png to res/drawables. Now add it
as a background:

<LinearLayout
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:background="@drawable/shadow"
  android:paddingBottom="5px"
  android:paddingLeft="6px"
  android:paddingRight="5px"
  android:paddingTop="5px"
>

I recently wrote a blog post that explains this in detail and
includes the 9patch image that I use for creating the shadow.

回复 原文
坚持沉默 2024-10-13 23:21:20

假设您将使用线性布局（我考虑过垂直线性布局）..并且在线性布局下方有一个视图。现在为该视图提供开始颜色和结束颜色..
我也想得到这个东西，它对我有用。如果你需要更好的效果，那么只需解决开始和结束颜色即可。

activity_main

<?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:orientation="vertical" >

    <LinearLayout
        android:id="@+id/vertical"
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:background="@drawable/layout_back_bgn"
        android:orientation="vertical" >
    </LinearLayout>

    <View
        android:layout_below="@+id/vertical"
        android:layout_width="match_parent"
        android:layout_height="10dp"
        android:background="@drawable/shadow"
        >
    </View>


</LinearLayout>

layout_back_bgn.xml

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >

<solid android:color="#FF4500" />

</shape>

shadow.xml

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android"  android:shape="rectangle">    
    <gradient
        android:startColor="#4D4D4D"
        android:endColor="#E6E6E6"
        android:angle="270"
        >
    </gradient>
</shape>

我尝试发布一张使用上述代码后得到的图像，但 stackoverflow 不允许我这样做，因为我没有声誉..对此感到抱歉。

Assuming u would use a linear layout(i have considered a vertical linear layout)..and have a view just below your linear layout.Now for this view provide a start colour and end colour..
I also wanted to get this thing,its working for me..If you need a even better effect,then just work around the start and end colour.

activity_main

<?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:orientation="vertical" >

    <LinearLayout
        android:id="@+id/vertical"
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:background="@drawable/layout_back_bgn"
        android:orientation="vertical" >
    </LinearLayout>

    <View
        android:layout_below="@+id/vertical"
        android:layout_width="match_parent"
        android:layout_height="10dp"
        android:background="@drawable/shadow"
        >
    </View>


</LinearLayout>

layout_back_bgn.xml

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >

<solid android:color="#FF4500" />

</shape>

shadow.xml

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android"  android:shape="rectangle">    
    <gradient
        android:startColor="#4D4D4D"
        android:endColor="#E6E6E6"
        android:angle="270"
        >
    </gradient>
</shape>

I tried to post an image which i have it after using the above code,but stackoverflow doesnot allow me coz i dont have reputation..Sorry about that.

回复 原文
客…行舟 2024-10-13 23:21:20

您可以使用自 API 级别 21 起可用的海拔

视图的标高（由 Z 属性表示）决定了
其阴影的视觉外观：具有较高 Z 值投射的视图
更大、更柔和的阴影。具有较高 Z 值的视图会遮挡视图
较低的 Z 值；然而，视图的 Z 值不会影响
视图的大小。设置视图的高度：

在布局定义中，使用
 

android:海拔

属性。要在活动代码中设置视图的高度，
使用

View.setElevation()

方法。

来源

You can use elevation, available since API level 21

The elevation of a view, represented by the Z property, determines the
visual appearance of its shadow: views with higher Z values cast
larger, softer shadows. Views with higher Z values occlude views with
lower Z values; however, the Z value of a view does not affect the
view's size. To set the elevation of a view:

in a layout definition, use the  

android:elevation

 attribute. To set the elevation of a view in the code of an activity,
use the

View.setElevation()

 method.

Source

回复 原文
梦忆晨望 2024-10-13 23:21:20

这是我的解决方案的俗气版本...这是对找到的解决方案的修改
这里

我不喜欢角落的样子，所以我把它们全部淡化了。 ..

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!--Layer 0-->
<!--Layer 1-->
<!--Layer 2-->
<!--Layer 3-->
<!--Layer 4 (content background)-->

<!-- dropshadow -->
<item>
    <shape>
        <gradient 
            android:startColor="@color/white"
            android:endColor="@color/white"
            android:centerColor="#10CCCCCC"
            android:angle="180"/>
        <padding android:top="0dp" android:right="0dp" android:bottom="2dp" android:left="0dp" />
    </shape>
</item>

<item>
    <shape>
        <gradient 
            android:startColor="@color/white"
            android:endColor="@color/white"
            android:centerColor="#20CCCCCC"
            android:angle="180"/>
        <padding android:top="0dp" android:right="0dp" android:bottom="2dp" android:left="0dp" />
    </shape>
</item>

<item>
    <shape>
        <gradient 
            android:startColor="@color/white"
            android:endColor="@color/white"
            android:centerColor="#30CCCCCC"
            android:angle="180"/>

        <padding android:top="0dp" android:right="0dp" android:bottom="2dp" android:left="0dp" />
    </shape>
</item>

<item>
    <shape>
        <gradient 
            android:startColor="@color/white"
            android:endColor="@color/white"
            android:centerColor="#40CCCCCC"
            android:angle="180"/>
        <padding android:top="0dp" android:right="0dp" android:bottom="2dp" android:left="0dp" />
    </shape>
</item>

<item>
    <shape>
        <gradient 
            android:startColor="@color/white"
            android:endColor="@color/white"
            android:centerColor="#50CCCCCC"
            android:angle="180"/>
        <padding android:top="0dp" android:right="0dp" android:bottom="2dp" android:left="0dp" />
    </shape>
</item>

<!-- content background -->
<item>
    <shape>
        <solid android:color="@color/PostIt_yellow" />
    </shape>
</item>

Here's my cheesy version of the solution...This is the modification of the solution found
here

I didn't like how the corners look so I faded all of them...

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!--Layer 0-->
<!--Layer 1-->
<!--Layer 2-->
<!--Layer 3-->
<!--Layer 4 (content background)-->

<!-- dropshadow -->
<item>
    <shape>
        <gradient 
            android:startColor="@color/white"
            android:endColor="@color/white"
            android:centerColor="#10CCCCCC"
            android:angle="180"/>
        <padding android:top="0dp" android:right="0dp" android:bottom="2dp" android:left="0dp" />
    </shape>
</item>

<item>
    <shape>
        <gradient 
            android:startColor="@color/white"
            android:endColor="@color/white"
            android:centerColor="#20CCCCCC"
            android:angle="180"/>
        <padding android:top="0dp" android:right="0dp" android:bottom="2dp" android:left="0dp" />
    </shape>
</item>

<item>
    <shape>
        <gradient 
            android:startColor="@color/white"
            android:endColor="@color/white"
            android:centerColor="#30CCCCCC"
            android:angle="180"/>

        <padding android:top="0dp" android:right="0dp" android:bottom="2dp" android:left="0dp" />
    </shape>
</item>

<item>
    <shape>
        <gradient 
            android:startColor="@color/white"
            android:endColor="@color/white"
            android:centerColor="#40CCCCCC"
            android:angle="180"/>
        <padding android:top="0dp" android:right="0dp" android:bottom="2dp" android:left="0dp" />
    </shape>
</item>

<item>
    <shape>
        <gradient 
            android:startColor="@color/white"
            android:endColor="@color/white"
            android:centerColor="#50CCCCCC"
            android:angle="180"/>
        <padding android:top="0dp" android:right="0dp" android:bottom="2dp" android:left="0dp" />
    </shape>
</item>

<!-- content background -->
<item>
    <shape>
        <solid android:color="@color/PostIt_yellow" />
    </shape>
</item>

回复 原文
深陷 2024-10-13 23:21:20

有一个简单的技巧，使用两个视图形成阴影。

<?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>

希望这有帮助。

There are a simple trick, using two views that form the shadow.

<?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>

Hope this help.

回复 原文
高跟鞋的旋律 2024-10-13 23:21:20

使用以下代码在 res/drawable 文件夹中创建 card_background.xml：

<?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="#BDBDBD"/>
        <corners android:radius="5dp"/>
    </shape>
</item>

<item
    android:left="0dp"
    android:right="0dp"
    android:top="0dp"
    android:bottom="2dp">
    <shape android:shape="rectangle">
        <solid android:color="#ffffff"/>
        <corners android:radius="5dp"/>
    </shape>
</item>
</layer-list>

然后将以下代码添加到您想要卡片布局的元素中，

android:background="@drawable/card_background"

以下行定义卡片阴影的颜色

<solid android:color="#BDBDBD"/>

Create card_background.xml in the res/drawable folder with the following code:

<?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="#BDBDBD"/>
        <corners android:radius="5dp"/>
    </shape>
</item>

<item
    android:left="0dp"
    android:right="0dp"
    android:top="0dp"
    android:bottom="2dp">
    <shape android:shape="rectangle">
        <solid android:color="#ffffff"/>
        <corners android:radius="5dp"/>
    </shape>
</item>
</layer-list>

Then add the following code to the element to which you want the card layout

android:background="@drawable/card_background"

the following line defines the color of the shadow for the card

<solid android:color="#BDBDBD"/>
回复 原文
冷血 2024-10-13 23:21:20

输入图片此处描述

</LinearLayout>
            <View
                android:layout_width="match_parent"
                android:layout_height="2dp"
                android:background="@color/dropShadow" />

在 LinearLayout 下方使用

另一种方法

在此处输入图像描述

在 /drawable 文件夹中创建“rounded_corner_bg.xml”

<?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="@color/primaryColor" />

        <corners android:radius="4dp" />
    </shape>
</item>

<item
    android:bottom="2dp"
    android:left="0dp"
    android:right="0dp"
    android:top="0dp">
    <shape android:shape="rectangle">
        <solid android:color="#F7F7F7" />

        <corners android:radius="4dp" />
    </shape>
</item>

</layer-list>

使用此布局 android:background="@drawable/rounded_corner_bg"

enter image description here

</LinearLayout>
            <View
                android:layout_width="match_parent"
                android:layout_height="2dp"
                android:background="@color/dropShadow" />

Use Just Below the LinearLayout

Another Method

enter image description here

create "rounded_corner_bg.xml" in /drawable folder

<?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="@color/primaryColor" />

        <corners android:radius="4dp" />
    </shape>
</item>

<item
    android:bottom="2dp"
    android:left="0dp"
    android:right="0dp"
    android:top="0dp">
    <shape android:shape="rectangle">
        <solid android:color="#F7F7F7" />

        <corners android:radius="4dp" />
    </shape>
</item>

</layer-list>

To use this Layout android:background="@drawable/rounded_corner_bg"

回复 原文
~没有更多了~

关于作者

茶花眉

暂无简介

0 文章
0 评论
22 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

内心激荡

文章 0 评论 0

JSmiles

文章 0 评论 0

赏烟花じ飞满天

文章 0 评论 0

左秋

文章 0 评论 0

迪街小绵羊

文章 0 评论 0

瞳孔里扚悲伤

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文