開發(fā)APP不管是什么項目，都離不開對于圖片的使用，我們在開發(fā)過程中經(jīng)常會遇見前端訪問時，圖片或者視頻、音頻文件會出現(xiàn)卡、頓等加載緩慢的現(xiàn)象，這就是我們的圖像等文件過大，深圳APP開發(fā)公司本文就詳細與各位分享，我們各種APP項目開發(fā)過程是如何解決這些想象得，首先我們APP開發(fā)工程師說說怎樣減少圖片所占空間大小，要減少圖片所占空間大小，可以采用以下方案。
（1）盡量使用Android和iOS系統(tǒng)自帶的圖片，系統(tǒng)沒有的圖片才預(yù)置在APP中。（2）減少預(yù)置圖片的個數(shù)。如AndroidAPP可以只預(yù)置一套XHDPI密度的圖片，只有個別的小圖標(biāo)，如桌面icon，每種密度的都預(yù)置一張。iOSAPP只預(yù)置2X和3X的圖片。
（3）普通的位圖在不同分辨率的設(shè)備上伸縮時，很容易變形，APP內(nèi)常會預(yù)置內(nèi)容一樣但分辨率不同的多張圖來解決這個問題，這樣也導(dǎo)致APP所占空間變大?？梢允褂命c9圖或SVG矢量圖代替普通的位圖，這樣不需預(yù)置多張內(nèi)容一樣、分辨率不同的圖片，只需預(yù)置一張就可以了，可以有效減少圖片所占空間大小。
（4）APP通常都使用PNG格式的圖，主要是Android和iOS系統(tǒng)會對其進行硬件加速，圖片的加載速度相對會變快。但對于歡迎界面的圖、背景圖和引導(dǎo)頁的圖，這些大尺寸的圖片建議使用JPG格式圖片。PNG格式有透明通道，是無損壓縮；JPG格式的沒有透明通道，且是有損壓縮，使用JPG圖片，雖然加載慢些，但圖片體積
體積小，也減少了圖片所占空間大小。
（5）通常引導(dǎo)頁的多張圖片只是中間的內(nèi)容不同、背景都一樣的，可以把引導(dǎo)圖拆成一張背景圖和多張內(nèi)容圖，相比多張完整的圖片可以有效減少圖片所占空間大小。
（6）APP有時會使用到上下左右箭頭這類內(nèi)容一樣、方向不同的圖片，可以只預(yù)置一張向上的箭頭圖標(biāo)，向下、向左、向右的箭頭可以使用代碼旋轉(zhuǎn)上箭頭圖標(biāo)實現(xiàn)。這樣只需預(yù)置一張圖片，也減少了圖片所占空間大小。如圖27-1所示，
兩個圖標(biāo)箭頭都是朝右的。圖27-1對應(yīng)的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" />
如果想把第二個箭頭改成向左的圖標(biāo)，可按如下方式實現(xiàn)。
//定義 旋轉(zhuǎn) 功能 的 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" /> //具體 實現(xiàn) 代碼 Animation rotateAnimation = AnimationUtils. loadAnimation( this, R. anim. rotate); ImageView imageViewLeft = (ImageView) findViewById( R. id. imageViewLeft); imageViewLeft. startAnimation( rotateAnimation); //圖片 旋轉(zhuǎn) 后， 不 恢復(fù) 原狀 rotateAnimation. setFillAfter( true);
結(jié)果如圖27-2所示，只用一張圖，通過代碼實現(xiàn)了兩種顯示效果。
（7）在設(shè)計動畫效果時，需要設(shè)計和開發(fā)同事配合，以便不用幀動畫也可以實現(xiàn)動畫效果，這樣不需要預(yù)置多張幀動畫需要的圖片；也可以設(shè)計使用SVG矢量圖實現(xiàn)動畫，減少圖片所占空間大小。
（8）需要設(shè)計同事在制作APP預(yù)置的圖片時，不能只考慮絢麗的效果，也要盡可能減少每張圖片的尺寸。iOS系統(tǒng)的扁平化設(shè)計和Android系統(tǒng)的MaterialDesign也都是要求簡潔的設(shè)計風(fēng)格。
（9）使用tint和tintmode屬性減少預(yù)置的圖片資源。當(dāng)只是要改變圖片內(nèi)容的顏色，而不改變圖片內(nèi)容時，以往做法是預(yù)置幾張不同顏色的圖片，使用這兩個屬性只需預(yù)置一張圖片就可以了，程序運行時動態(tài)改變圖片的顏色。如圖27-3所示的界面中的圖片內(nèi)容是彩色的，可以利用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"/>
也可以通過代碼設(shè)置顏色，如下所示：
ImageView imageView = (ImageView) findViewById( R. id. login_ image); imageView. setColorFilter( Color. GRAY);
實現(xiàn)效果如圖27-4所示。
在許多APP中，輸入密碼的編輯框右邊都有一個圖標(biāo)，反復(fù)點擊圖標(biāo)，圖標(biāo)會顯示不同的顏色，同時密碼會以明文或密文形式顯示如圖27-5所示。
傳統(tǒng)方式也是預(yù)置兩張不同顏色的圖片，使用tint和tintmode屬性只需預(yù)置一張圖片就可以了，程序運行時動態(tài)改變圖片的顏色。圖27-5可以在XML文件中設(shè)計屬性改變顏色，如下所示：
< 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" />
也可以通過代碼設(shè)置顏色，如下所示：
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()); } }
實現(xiàn)效果如圖27-6所示。
使用AppCompatTextView控件是為了在低于Android5.0版本（APIlevel21）的系統(tǒng)中也可以使用tint和tintmode屬性。
（10）使用WebP格式的圖片，也可以減少圖片所占空間的大小。
（11）減少動畫圖片的幀數(shù)。
（12）可以使用Drawableobjects，如<shape>之類的代替使用
使用圖片。
（13）直接用代碼生成圖片，如單色的背景圖，以減少預(yù)置的圖片。
（14）使用pngcrush和packJPG等工具壓縮PNG和JPEG格式圖片的大小?！ 。?5）針對不同內(nèi)容的圖片，選擇不同的格式。具有豐富多彩顏色的圖片用JPG格式比PNG格式具有更高的壓縮率，圖片所占空間更?。簧时容^單調(diào)的圖片，采用PNG格式比JPG格式所占的空間更小。如圖27-7
和圖27-8所示
，左邊的圖片色彩比較豐富，右邊的圖片色彩比較單調(diào)：之前已經(jīng)介紹過，WebP格式的圖片比PNG和JPG格式圖片所占的空間都小，所以優(yōu)先考慮使用WebP格式的圖片。具體選擇哪種格式的圖片，可以按圖27-9所示的流程處理。
好了，APP開發(fā)公司本文關(guān)于“APP制作時怎樣減少圖片所占空間大小”詳細方法與步驟就分享到這里，謝謝關(guān)注，博納網(wǎng)絡(luò)編輯整理。
