Whilerain Studio: 如何處理Android切圖

簡述

因為Android系統特性關係，及裝置機種繁多，為了減輕設計師的負擔，讓設計師專注於流程與介面設計，而不浪費時間在處理切圖，Android工程師需要學習如何自己簡易的處理切圖。

Android排版策略

基本上Android的切圖排版策略分為二種：

只使用一套切圖，在各種裝置上以Scale的方式排版
將切圖分為mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi等數套圖

使用哪種策略端看設計師所繪的設計圖而定，當面臨的設計圖看起來在各種不同尺寸的配備當中，缺乏彈性調整的空間時，或是講求位置精確的設計圖當中，我們會選用一套切圖，並以縮放的方式將圖定位在正確的位置上。例如在Android Animation Desk Classic上的排版就較適合使用一套切圖縮放的方式處理。這樣做的好處是，只要準備一種圖，且size容易計算。這種方式會需要考慮所可能使用最大解析度的裝置，來作為切圖的範本，如果以小的裝置來做設計時，當圖片放大時會產生圖片模糊的問題。另一個問題是當排版複雜時，這可能會耗費額外的運算資源在處理排版的縮放。

在具有彈性空間配置的設計圖，則最好能使用第二種方法，將套圖分為不同dpi的套圖。例如在NoteLedge Cloud和PDF Reader當中使用此方法。既然已經分為不同解析度的圖，就不應該在把這種圖進行任何縮放，也不需要擔心圖片模糊的問題。但需要較耗費時間處理各種解析度的切圖。

並非一個專案只能使用1或2其中一種方式，而是應依照排版設計，來做適當的選擇。同一個畫面也可能需要同時使用兩種方法來進行排版，端看介面需求而定。

設計師著手設計前

思考在不同裝置的樣子

設計師在開始著手設計介面之前，得先思考這個App在不同大小的裝置上，應該如何做介面適應，最好的設計是同一張設計圖得以運用在不同尺寸的平板或手機，或只要做行列數的調整，或只要版面位移就能做好不同裝置的適應。

考慮 48 rhythem，這是設計師應該了解的最重要概念，如果一個按鈕在手機上是48dp，在平板上也應該是48dp。另外48dp 是適合手指按壓的適切大小。大部分按鈕應大於48dp，不會因為螢幕小，按鈕就小。

參考資料：

UI Metrics & keylines

考慮哪個尺寸的裝置可能是最主要的使用者來源，選定介面設計的尺寸，並告知工程師，這個設計圖是使用哪個尺寸哪個density來設計的，例如選用Nexus 4為範本來設計時，其尺寸為768 x 1280 且density 為 xhdpi。裝置尺寸可以參考Device Matric網頁。

參考資料： Device Matric

選定設計圖裝置後，依上例設計師應以768 x 1280 為底開始設計，此時設計師在此設計圖中所設計的元件大小為解析度xhdpi的大小，設計師可以利用工具計算出所繪的元件pixel，實際上在xhdpi裝置上dp是多少，然後提供給工程師。Android工程師通常在元件的大小會使用dp為單位而非px。如此一來工程師就能自己產生所需要的圖。

參考資料： Supporting Multiple Screens

參考資料： dp/px converter tool

dp v.s. px

設計師切圖

一般的按鈕切圖(單色，正方形)

設計師提供給工程師切圖時，需要考慮到所提供的圖，支援的最大解析度所需的還大，這樣一來工程師自己製作套圖時才不會有模糊的情況。譬如即使是在xhdpi上設計的圖，設計師要計算出在xxxhdpi上需要多大的圖。至少提供給工程師比xxxhdpi大的圖或相等的圖即可。只要這張圖是單色，工程師就可以利用這張圖來產生不同dpi的套圖。

如果是使用Material Icons當中的圖示，設計師甚至可以提供icon名稱請工程師自行下載或使用Android Asset Studio for material design來製作就好。

Material Icons

不同顏色的切圖

如果因點擊效果而需要不同顏色或透明度的切圖時，只要這張圖示是單色，則不需另外提供切圖，只要告知16進位色碼及透明度，工程師可以自行使用工具產生。

工程師的產生切圖工具

上述兩項工具具有相同功能，第二項則內建了官方Material Design的圖示。有了上述工具，工程師能夠自己建立所需要的icon套圖，自定顏色、透明度和icon大小。

在Android Studio當中也有相同的工具，在module name按下右鍵 > New > Image asset 可以進行相同的切圖產生。

這個工具仍有其限制，就是當所要產生的切圖不是正方形時，上述工具就無法使用，目前仍未找到適當的工具，因此這時候仍然需要設計師幫忙。

程式當中直接變更Image顏色

執行期間動態變更image顏色

imageView.setColorFilter(Color.argb(255, 255, 255, 255)); // White Tint

在XML當中設置變更圖片顏色

<ImageView id="@+id/icon" 
   android:layout_width="wrap_content" 
   android:layout_height="wrap_content" 
   android:tint="#FF000000" 
   android:src="@drawable/chat_icon"/>

依點擊事件處理圖片顏色

How to use selector to tint imageview in android

Vector assets 和 SVG圖示

仍然有一些情況，不適合以上面的方式來處理圖片，例如不是作為按鈕的較大張說明用圖，像是用在Splash 畫面的圖示、不是長方形且大張需隨畫面調整大小的圖、或一些功能介紹圖這些情況會較適合以向量圖示來處理。[Tip: 按鈕通常不會隨裝置大小而變更大小，但介紹用的圖示會需要，所以按鈕icon不需使用向量圖示，但介紹用圖示需要]。

Vector assets

Vector asset是以xml來定義向量圖型的格式，需注意只支援Android 4.4 (API level 20) 及以後的版本。使用Android Studio中的Vector Asset Studio來製作出向量圖xml，並將xml放在drawable文件夾當中，使用時就和圖片資源使用方式一樣。

<ImageButton
  android:id="@+id/imageButton"
  android:src="@drawable/ic_build_24dp"
  android:tint="@color/colorAccent"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_below="@+id/textView2"
  android:layout_marginTop="168dp" />

參考文件：Vector Asset Studio

使用SVG

Vector Asset Studio也能夠直接將svg格式的文件轉換成Vector assets格式，因此設計師提供向量圖型時只需要提供常見的SVG給工程師即可。

支援Android 4.4以前版本

若需要使用向量圖片支援4.4以前的版本則需使用到其他資源庫，例如svg-android

Whilerain Studio

星期二, 4月 12, 2016

如何處理Android切圖

簡述