当前位置: 首页 > 科技观察

巧妙利用Android图片资源,打造更精致的APP

时间:2023-03-16 12:48:34 科技观察

前言由于android系统的开放性,IOS的相对封闭性。第三方设备目前无法使用苹果的操作系统。于是,各家厂商纷纷投身到android的怀抱,android阵营也越来越强大。如今,移动操作系统以android和ios为主。正是由于android的开放性和高度的可定制性,各种屏幕尺寸和分辨率的Android设备被手机、平板、智能电视、手表、盒子、智能硬件……等所覆盖。应用场景。作为一名才华横溢的程序员,要为具有如此多尺寸和分辨率的设备创建一个一体化应用程序将需要付出很多努力。drawable-xxx资源文件夹还好谷歌已经给我们想好了对策,针对不同的分辨率提供不同的drawable资源。我们先来看看微信的安卓客户端。res目录下,以drawable开头的文件夹占图片资源的一半以上,其次是-hdpi、-land、-mdpi、-xhdpi……等文件夹,以适应不同分辨率的机型。可能有人会说开发一个应用只需要适配hdpi或者xhdpi,同样可以显示!为什么要那么多版本,浪费空间,还麻烦!如果是这样的想法,那只能说你的应用受众没有达到一定的层次,或者不追求细节的完美。对于高质量的应用程序,即使缺少单个像素也不是完美的。废话这么多,先看看谷歌官方对dp的定义Density-independentpixel(dip)定义UI布局时应该使用的虚拟像素单位,以密度无关的方式表达布局尺寸或位置。密度无关像素相当于160dpi屏幕上的一个物理像素,这是系统为“中等”密度屏幕假定的基线密度。在运行时,系统根据使用中屏幕的实际密度,根据需要透明地处理dp单位的任何缩放。dp单位到屏幕像素的转换很简单:px=dp*(dpi/160)。例如,在240dpi的屏幕上,1dp等于1.5个物理像素。在定义应用程序的UI时,您应该始终使用dp单位,以确保您的UI在不同密度的屏幕上正确显示。密度无关像素(dp)是用于确定UI布局的虚拟单位。用于表示布局大小或位置。dp是与屏幕密度相关的单位,dp与像素的换算关系为px=dp*(dpi/160)。例如,在密度为240(dpi)的屏幕上,dp等于1.5像素。以后应该尽量使用dp单位布局,而不是像素单位。这将使您的应用程序屏幕更加兼容。将同一张96x96像素的png图片分别放入hdpi、xhdpi、xxhdpi文件夹中,宽高显示在wrap_content![](https://cscdn.maxleap.cn/2.0/download/NTgwZWMzNjA3ZWYyMGIwMDA3N2ViOGEx/zcf-b929ae8b-ace3-4e8d-ad2d-5cb311738b04.jpg)可以看出适配较低drawable-dpi的资源图片有一个显示尺寸相对较大但清晰度较差。适配高dpi的图片显示尺寸比较小,但是锐度高,比较清晰!将像素为72x72、96x96、144x144像素的图片分别放入hdpixhdpixxhdpi文件夹中,宽高显示在wrap_content效果中。![](https://cscdn.maxleap.cn/2.0/download/NTgwZWMzNjA3ZWYyMGIwMDA3N2ViOGEx/zcf-bd311903-f4f9-4a40-baf5-0e8eaaf03e9d.jpg)可以看到不同大小的图片分别放在不同的资源文件夹中最后屏幕上显示的尺寸居然是一样的!但144x144像素对应的画面最为细腻清晰。至此,应该可以看到图片资源和drawable文件夹的对应关系了。即使不使用高质量的图片,在高分辨率的屏幕上依然可以显示,但是牺牲了控制显示的精细度,而且屏幕dpi越高,显示越不清晰。如果将高分辨率照片放在不合适的drawable下,则无法准确恢复其应有的大小和清晰度。对比IOS中图像的清晰度,2倍图像为-xhdpi密度,3倍图像为-xxhdpi密度。因此,如果想让应用程序中的图标更加精致,就需要配置相应的不同像素的图片。使用wrap_content而不是dp。很多人会用图片指定图标的大小,比如:wrap_content可以理解为包裹内容.当控件设置为wrap_content时,会按照实际大小显示。与直接设置dip的方式相比,图片的显示或多或少会有一些放大。也会导致图标显示不够精致。下面是应用中常用的tabbar作为对比:(1920x1080屏幕像素截图)图1图21中的icon统一设置为固定尺寸24dp,图片只在drawable-xhdpi适配。可以看出图片有不同程度的拉伸,图标显示也比较模糊。图2将图标的宽高设置为wrap_content,在drawable-xxhdpi中进行适配。图2中图标的清晰度得到了提升,因为wrap_content属性的设置导致图标图片本身的大小不一样,导致图标显示大小不一致。所以完美的解决方案是UI需要提供一张统一尺寸的大图,适配drawable-xxhdpi。与微信高清图片资源相比,展现的精美效果:SVGScalableVectorGraphics在Android5.0(APIlevel21)及更高版本中,可以定义矢量图,缩放图片不失清晰。创建矢量图像只需要一个资产文件,而位图图像需要每个屏幕密度的资产文件。如果创建矢量图像,请在XML元素中定义形状详细信息。下面的例子定义了一个矢量图:在drawable文件夹-->new-->vectorAsset下,可以选择MaterialIcon,使用studio自带的图标资源。这里选择LocalSVGfile,使用自己定义的svg文件。确定保存文件的位置。svg文件会导出为xml文件:生成的moon.xml内容如下,path节点下的fillColor属性可以自定义颜色值。布局和普通图片一样使用界面显示效果:控件的宽高可以dp任意设置,不影响清晰度。SVG除了可以用在矢量图上,在android上也可以用来展示精美的动画效果。有空再详细介绍一下svg的生成和使用。