开发APP不管是什么项目,都离不开对于图片的使用,我们在开发过程中经常会遇见前端访问时,图片或者视频、音频文件会出现卡、顿等加载缓慢的现象,这就是我们的图像等文件过大,深圳APP开发公司本文就详细与各位分享,我们各种APP项目开发过程是如何解决这些想象得,首先我们APP开发工程师说说怎样减少图片所占空间大小,要减少图片所占空间大小,可以采用以下方案。
(1)尽量使用Android和iOS系统自带的图片,系统没有的图片才预置在APP中。(2)减少预置图片的个数。如AndroidAPP可以只预置一套XHDPI密度的图片,只有个别的小图标,如桌面icon,每种密度的都预置一张。iOSAPP只预置2X和3X的图片。
(3)普通的位图在不同分辨率的设备上伸缩时,很容易变形,APP内常会预置内容一样但分辨率不同的多张图来解决这个问题,这样也导致APP所占空间变大。可以使用点9图或SVG矢量图代替普通的位图,这样不需预置多张内容一样、分辨率不同的图片,只需预置一张就可以了,可以有效减少图片所占空间大小。
(4)APP通常都使用PNG格式的图,主要是Android和iOS系统会对其进行硬件加速,图片的加载速度相对会变快。但对于欢迎界面的图、背景图和引导页的图,这些大尺寸的图片建议使用JPG格式图片。PNG格式有透明通道,是无损压缩;JPG格式的没有透明通道,且是有损压缩,使用JPG图片,虽然加载慢些,但图片体积
体积小,也减少了图片所占空间大小。
(5)通常引导页的多张图片只是中间的内容不同、背景都一样的,可以把引导图拆成一张背景图和多张内容图,相比多张完整的图片可以有效减少图片所占空间大小。
(6)APP有时会使用到上下左右箭头这类内容一样、方向不同的图片,可以只预置一张向上的箭头图标,向下、向左、向右的箭头可以使用代码旋转上箭头图标实现。这样只需预置一张图片,也减少了图片所占空间大小。如图27-1所示,两个图标箭头都是朝右的。图27-1对应的XML代码如下:
< ImageView android: layout_ width=" 80dp" android: layout_ height=" wrap_ content" app: srcCompat="@ drawable/ arrow_ right_ red" android: id="@+ id/ imageView" /> < ImageView android: layout_ width=" 80dp" android: layout_ height=" wrap_ content" app: srcCompat="@ drawable/ arrow_ right_ red" android: id="@+ id/ imageViewLeft" />
如果想把第二个箭头改成向左的图标,可按如下方式实现。
//定义 旋转 功能 的 XML 代码 <? xml version=" 1. 0" encoding=" utf- 8"?> < rotate xmlns: android=" http:// schemas. android. com/ apk/ res/ android" android: fromDegrees=" 0" android: pivotX=" 50%" android: pivotY=" 50%" android: toDegrees=" 180" /> //具体 实现 代码 Animation rotateAnimation = AnimationUtils. loadAnimation( this, R. anim. rotate); ImageView imageViewLeft = (ImageView) findViewById( R. id. imageViewLeft); imageViewLeft. startAnimation( rotateAnimation); //图片 旋转 后, 不 恢复 原状 rotateAnimation. setFillAfter( true);
结果如图27-2所示,只用一张图,通过代码实现了两种显示效果。
(7)在设计动画效果时,需要设计和开发同事配合,以便不用帧动画也可以实现动画效果,这样不需要预置多张帧动画需要的图片;也可以设计使用SVG矢量图实现动画,减少图片所占空间大小。
(8)需要设计同事在制作APP预置的图片时,不能只考虑绚丽的效果,也要尽可能减少每张图片的尺寸。iOS系统的扁平化设计和Android系统的MaterialDesign也都是要求简洁的设计风格。
(9)使用tint和tintmode属性减少预置的图片资源。当只是要改变图片内容的颜色,而不改变图片内容时,以往做法是预置几张不同颜色的图片,使用这两个属性只需预置一张图片就可以了,程序运行时动态改变图片的颜色。如图27-3所示的界面中的图片内容是彩色的,可以利用tint属性把颜色改成灰色。
可以在XML文件中放置属性改变颜色,如下所示:
< ImageView android: id="@+ id/ login_ image" android: layout_ width=" match_ parent" android: layout_ height=" 200dp" android: layout_ marginTop=" 8dp" android: src="@ drawable/ login" android: tint="# EEEEEE"/>
也可以通过代码设置颜色,如下所示:
ImageView imageView = (ImageView) findViewById( R. id. login_ image); imageView. setColorFilter( Color. GRAY);
实现效果如图27-4所示。
在许多APP中,输入密码的编辑框右边都有一个图标,反复点击图标,图标会显示不同的颜色,同时密码会以明文或密文形式显示如图27-5所示。传统方式也是预置两张不同颜色的图片,使用tint和tintmode属性只需预置一张图片就可以了,程序运行时动态改变图片的颜色。图27-5可以在XML文件中设计属性改变颜色,如下所示:
< android. support. v7. widget. AppCompatTextView android: id="@+ id/ login_ eye_ et" android: layout_ width=" wrap_ content" android: layout_ height=" wrap_ content" android: layout_ gravity=" right| center" android: layout_ marginRight=" 12dp"
android: background="@ drawable/ login_ eye_ first" android: gravity=" center" android: backgroundTint="@ color/ colorAccent" android: backgroundTintMode=" screen" />
也可以通过代码设置颜色,如下所示:
private void setDisplayPassword() { mIsDisplayPassword = !mIsDisplayPassword; if (mIsDisplayPassword){ ViewCompat. setBackgroundTintList( mLoginEyeEt, ColorStateList. valueOf (Color. parseColor("# FF4081"))); ViewCompat. setBackgroundTintMode( mLoginEyeEt, PorterDuff. Mode. SCREEN); mEditPassword. setTransformationMethod( PasswordTransformationMethod. getInstance()); } else { ViewCompat. setBackgroundTintList( mLoginEyeEt, ColorStateList. valueOf (Color. parseColor("# CCCCCC"))); ViewCompat. setBackgroundTintMode( mLoginEyeEt, PorterDuff. Mode.
Mode. SCREEN); mEditPassword. setTransformationMethod( HideReturnsTransformationMethod. getInstance()); } }
实现效果如图27-6所示。
使用AppCompatTextView控件是为了在低于Android5.0版本(APIlevel21)的系统中也可以使用tint和tintmode属性。
(10)使用WebP格式的图片,也可以减少图片所占空间的大小。
(11)减少动画图片的帧数。
(12)可以使用Drawableobjects,如<shape>之类的代替使用
使用图片。
(13)直接用代码生成图片,如单色的背景图,以减少预置的图片。
(14)使用pngcrush和packJPG等工具压缩PNG和JPEG格式图片的大小。 (15)针对不同内容的图片,选择不同的格式。具有丰富多彩颜色的图片用JPG格式比PNG格式具有更高的压缩率,图片所占空间更小;色彩比较单调的图片,采用PNG格式比JPG格式所占的空间更小。如图27-7和图27-8所示,左边的图片色彩比较丰富,右边的图片色彩比较单调:之前已经介绍过,WebP格式的图片比PNG和JPG格式图片所占的空间都小,所以优先考虑使用WebP格式的图片。具体选择哪种格式的图片,可以按图27-9所示的流程处理。
好了,APP开发公司本文关于“APP制作时怎样减少图片所占空间大小”详细方法与步骤就分享到这里,谢谢关注,博纳网络编辑整理。