使用点九图在Android Studio中实现与Axure设计图一致的阴影效果
本文首发于我的Hexo博客:https://likianta.coding.me/2018/android-abc/0111120836/
Android在5.0中提出了“高度”的概念,并提供了elevation
属性给开发者直接设定z值高度。但其效果与Axure设计图相差甚远:
另外我们知道Android制作阴影的方法有很多种,下面就是利用点九图实现与Axure的设计图中一致的阴影效果的方法。
生成点九图
点九图阴影效果在线生成网站:https://inloop.github.io/shadow4android/
我们对比一下Axure的阴影属性和该网站支持的属性:
支持属性 | Axure RP 8 | Android 9-patch Shadow Generator | Android elevation |
---|---|---|---|
x偏移 | 支持 | 支持 | 不支持 |
y偏移 | 支持 | 支持 | 不支持 |
模糊值(blur) | 支持 | 支持 | 仅通过改变高度调节投影强度 |
阴影颜色 | 支持 | 支持 | 不支持 |
阴影透明度 | 支持 | 支持 | 不支持 |
从上表可知,使用点九图制作,理论上可以完美实现和Axure设计图一致的阴影效果。
注意事项
需要根据屏幕像素等级制作不同分辨率的点九图
虽然Android设备可以根据自身屏幕像素等级对资源进行缩放,但很多人都有切图的需求。针对不同分辨率需要制作的点九图是不同的,这里举例说明一下:
切图分辨率/px | 点九图弧度半径 | x偏移 | y偏移 | blur |
---|---|---|---|---|
一倍切图 360x640 | 6 | 5 | 5 | 8 |
二倍切图 720x1280 | 12 | 10 | 10 | 16 |
三倍切图 1080x1920 | 18 | 15 | 15 | 24 |
四倍切图 1440x2560 | 24 | 20 | 20 | 32 |