欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

Android 布局阴影实现

程序员文章站 2022-04-14 15:36:13
最近项目要求,ui有很多有关于阴影的设计要求,网上找了些实现方式,但都不是很理想。现在闲下来了,就寻思着自己写个阴影布局耍耍,以备后用。先说道说道我找到的几种阴影实现方式: 系统阴影 Andorid 系统自api 21之后就多了一个熟悉 android:elevation ,这是android最新引 ......

最近项目要求,ui有很多有关于阴影的设计要求,网上找了些实现方式,但都不是很理想。现在闲下来了,就寻思着自己写个阴影布局耍耍,以备后用。先说道说道我找到的几种阴影实现方式:

系统阴影

andorid 系统自api 21之后就多了一个熟悉 android:elevation ,这是android最新引入的轴的概念,可通过设置elevation来设置阴影(z轴的大小),设置如下:

 1 <!-- base z depth of the view. -->
 2   <attr name="elevation" format="dimension" />
 3 
 4   <textview
 5         android:id="@+id/shadow1"
 6         app:layout_constraintstart_tostartof="parent"
 7         app:layout_constrainttop_totopof="parent"
 8         android:layout_marginstart="20dp"
 9         android:layout_margintop="20dp"
10         android:text="系统阴影"
11         android:background="#fff"
12         android:gravity="center"
13         android:textsize="14sp"
14         android:textcolor="@color/colorblack"
15         android:layout_width="100dp"
16         android:elevation="3dp"
17         android:layout_height="80dp"/>

 

 

效果也是不错,可以完成一些简单的阴影设置效果。
Android 布局阴影实现

但需要注意些细节,不然 elevation 可能会无效:

  • 父布局要保留足够的空间,elevation本身不占有view的大小
  • 需要设置背景色且不可设置为透明色
  • 不能设置是否为扩散的还是指定方向的

layer-list 伪阴影

为什么说是伪阴影呢,layer-list本身很强大,器支持的层叠式绘制基本可以解决我们大多说的背景设计,对于一些要求不是很严格的阴影用它也不是不可以,但效果是真的不好,毕竟shape提供的层叠()并不支持模糊绘制(或者可以选择使用模糊背景图片绘制)。下面给一个用layer-list绘制的阴影做参考。


 1 <textview
 2     android:id="@+id/shadow2"
 3     app:layout_constraintstart_toendof="@id/shadow1"
 4     app:layout_constrainttop_totopof="parent"
 5     android:layout_marginstart="50dp"
 6     android:layout_margintop="20dp"
 7     android:text="layer-list阴影"
 8     android:gravity="center"
 9     android:background="@drawable/shadow_layer"
10     android:textsize="14sp"
11     android:textcolor="@color/colorblack"
12     android:layout_width="100dp"
13     android:layout_height="80dp"/>
14 
15 
16 
17 <!--shadow_layer.xml -->
18 <?xml version="1.0" encoding="utf-8"?>
19 <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
20 
21     <item android:top="3dp"
22         android:left="3dp">
23         <shape android:shape="rectangle">
24             <solid android:color="#333333"/>
25             <gradient android:startcolor="#80ff0000"
26                 android:type="radial"
27                 android:centerx="0.5"
28                 android:centery="0.5"
29                 android:gradientradius="30"
30                 android:endcolor="#10ff0000"/>
31             <size android:width="100dp" android:height="80dp"/>
32         </shape>
33     </item>
34 
35     <item android:bottom="3dp"
36         android:right="3dp">
37         <shape android:shape="rectangle">
38             <solid android:color="#fff"/>
39             <size android:width="100dp" android:height="80dp"/>
40         </shape>
41     </item>
42 
43 </layer-list>

 

效果比较生硬,其本质就是颜色的渐变,如下:
Android 布局阴影实现

还有如让ui切阴影背景图,但由于控件大小规格差异较大,风格差异较大,并不推荐使用。

自定义阴影布局

这是我比较推荐的方式,可参考cardview的阴影实现自定义一个阴影布局实现。其实现是通过 setshadowlayer、setmaskfilter 实现。


1 //        mpaint.setshadowlayer(blurradius,0,0,shadowcolor);  
2         if (blurradius>0){
3             mpaint.setmaskfilter(new blurmaskfilter(blurradius,blurmaskfilter.blur.normal));
4         }

 

相较于 setshadowlayer 来说,setmaskfilter 可供选中的实现方式要多一个blur实现类型,效果更好些,所以我是通过使用 setmaskfilter 来实现自定义阴影布局。


 1 <cn.enjoytoday.shadow.shadowlayout
 2     android:id="@+id/shadow3"
 3     app:layout_constraintstart_tostartof="parent"
 4     app:layout_constrainttop_tobottomof="@id/shadow1"
 5     android:layout_margintop="20dp"
 6     android:text=""
 7     app:shadowradius="0dp"
 8     app:shadowcolor="#333"
 9     app:blurradius="5dp"
10     app:xoffset="0dp"
11     app:yoffset="0dp"
12     android:layout_marginstart="15dp"
13     android:gravity="center"
14     android:background="@drawable/shadow_layer"
15     android:textsize="14sp"
16     android:textcolor="@color/colorblack"
17     android:layout_width="wrap_content"
18     android:layout_height="wrap_content">
19 
20 
21     <textview
22         android:padding="5dp"
23         android:text="自定义应用布局"
24         android:gravity="center"
25         android:textsize="14sp"
26         android:textcolor="@color/colorblack"
27         android:layout_width="100dp"
28         android:layout_height="80dp"/>
29 
30 </cn.enjoytoday.shadow.shadowlayout>

 

Android 布局阴影实现

使用

shadowview 托管于github, 仿照css的box shadow 的阴影实现效果设计实现,可通过设置水平、竖直偏移确认阴影方向,可设置模糊半径和圆角半径、阴影颜色等。可通过gradle直接依赖使用:

添加依赖

repositories {
    //...
    maven { url 'https://jitpack.io' }
}

dependencies {
    implementation 'com.github.amikoj:shadowview:1.0.1'
}

 

xml中使用

 1   <cn.enjoytoday.shadow.shadowlayout
 2         android:orientation="vertical"
 3         android:id="@+id/shadowlayout"
 4         app:layout_constraintbottom_tobottomof="parent"
 5         app:layout_constraintleft_toleftof="parent"
 6         app:layout_constraintright_torightof="parent"
 7         app:layout_constrainttop_totopof="parent"
 8         android:gravity="center"
 9         app:shadowradius="10dp"
10         app:shadowcolor="#bebebe"
11         app:bgcolor="#fff"
12         app:xoffset="10dp"
13         app:yoffset="0dp"
14         app:blurradius="5dp"
15         android:layout_width="wrap_content"
16         android:layout_height="wrap_content">
17 
18    <!--嵌套需要添加阴影的布局 -->
19 
20     </cn.enjoytoday.shadow.shadowlayout>

 

 

属性说明

属性名 类型 说明
shadowcolor color 阴影渲染颜色
shadowradius dimension 背景圆角半径(0为矩形)
blurradius dimension 模糊半径
xoffset dimension 水平位移
yoffset dimension 竖直位移
bgcolor color 背景色

代码设置

也可通过代码设置阴影属性:

1 shadowlayout.getshadowconfig()   //获取配置类
2             . setblurradius(blurradius)  //设置模糊半径
3              .setxoffset(xoffset)   //设置水平位移,最大为20dp
4              .setyoffset(yoffset)   //设置竖直位移,最大为20dp
5              .setshadowradius(shadowradius) //设置圆角半径,为0时不是圆角
6              .setshadowcolor(shadowcolor)    //设置阴影颜色
7              .commit();             //生效修改