如何處理Android切圖

簡述

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

Android排版策略

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

1. 只使用一套切圖，在各種裝置上以Scale的方式排版
2. 將切圖分為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進位色碼及透明度，工程師可以自行使用工具產生。

工程師的產生切圖工具

• Android Asset Studio
• Android Asset Studio for material design

上述兩項工具具有相同功能，第二項則內建了官方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

Corner HUD 介紹

首先到Google Play搜尋Corner HUD就找的到這個App，

這是一個抬頭顯示的導航應用，

只要切換到HUD 模式把手機放擋風玻璃下方，

手機的畫面就會投射到擋風玻璃上，

當然你也可以不使用HUD模式直接看，

這個App和Navier HUD這個App風格很像，因為作者都是我．．．

只是Navier HUD當初只畫出行走的路線，

沒有其他道路，因此希望藉由開發這個App

來補足當初還沒完成的功能，

當然Navier HUD還是有這個App所沒有的特色。

Corner HUD is available on Google Play

Corner HUD available on Google Play

   

Holo style : the Android style

我是一位Android開發者，獨立開發者，
從UI設計到程式開發一手包辦，
很多會寫程式的人，程式的部份可以自己搞定，
但多數人會卡在『糟糕；我沒有美術的天份』這裡，
認為自己弄不出夠水準的介面設計。

於是會將程式介面外包給設計師來做，
本來術業有專攻，那也沒什麼不好。
問題是，有些介面設計師手拿iPhone, iPad，
連Android手機都沒用過，
你怎麼能期待他比你更知道Android的介面應該是什麼樣子呢？

Hangout 造成發送與接收SMS問題

Google 在Android 4.4改以Hangout來取代原本預設的簡訊App，因此在App如果有寫到傳送或接收SMS功能時，在Kitkat上或是有安裝Hangout的舊版本（Android 4.3及以下）手機上，可能會運作不正常。

在接收SMS時，因為Hangout有可能由使用者在Google Play下載，裝在舊版的手機上，為了避免有兩個預設的SMS App在收到SMS時都提供通知，因此若有安裝Hangout，Hangout似乎會攔住"android.provider.Telephony.SMS_RECEIVED"這個broadcast event，來避免舊的簡訊App也產生notification，因此如果您的App有聆聽此event來獲得收到的簡訊時，在安裝Hangout之後會發現收不到"android.provider.Telephony.SMS_RECEIVED"。此時解決方法是在Broadcast Receiver上加上priority，並將priority設為大於3，如此一來便能解決收不到"android.provider.Telephony.SMS_RECEIVED"的問題。請參考此討論

<receiver android:name="com.google.android.apps.babel.sms.AbortSmsReceiver" android:permission="android.permission.BROADCAST_SMS" android:enabled="false">
    <intent-filter android:priority="3">
        <action android:name="android.provider.Telephony.SMS_RECEIVED" />
    </intent-filter>
</receiver>

在傳送SMS時在Kitkat上Google 已經把簡訊App拿掉，因此已以往Intent的方式來發送SMS可能會遇到找不到預設App的問題，解決方式如下：請參考此討論

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) //At least KitKat
    {
        String defaultSmsPackageName = Telephony.Sms.getDefaultSmsPackage(activity); //Need to change the build to API 19

        Intent sendIntent = new Intent(Intent.ACTION_SEND);
        sendIntent.setType("text/plain");
        sendIntent.putExtra(Intent.EXTRA_TEXT, smsText);

        if (defaultSmsPackageName != null)//Can be null in case that there is no default, then the user would be able to choose any app that support this intent.
        {
            sendIntent.setPackage(defaultSmsPackageName);
        }
        activity.startActivity(sendIntent);

    }
    else //For early versions, do what worked for you before.
    {
        Intent sendIntent = new Intent(Intent.ACTION_VIEW);
        sendIntent.setData(Uri.parse("sms:"));
        sendIntent.putExtra("sms_body", smsText);
        activity.startActivity(sendIntent);
    }

Code Lab - Communication among Android devices : A chat room

此Android程式練習是為成大資工系-電腦通訊網路課程 所設計的一個Code Lab，目的在介紹Android之間的裝置通訊，以及在Android上面如何實作一個聊天室應用，其中包含在Server端的HttpServerlet以及GCM Api的使用。
此App運用可以上安裝此App的所有使用者彼此間進行聊天。
課程時間：3小時

投影片下載

Code Lab - RESTful App on Android : A POI Map

此Android程式練習是為成大資工系-電腦通訊網路課程 所設計的一個Code Lab，目的在介紹REST架構的運作原理，以及在Android上面如何實作包含Google Map、Http Request、AsyncTask及UI Adapter應用。

此App運用DEH API來開發一個簡易的LBS服務，查詢地圖中心附近2公里內所包含的景點有哪些。

課程時間：3小時
投影片下載
在Google Play下載：

CoWallet

Coming soon on Google Play!

CoWallet makes expense management of a group easier.

Suunto Ambit：一支和Navier HUD操作邏輯酷似的錶

不久前買了一支手錶Suunto Ambit，原本只是期待有個功能穩定具有GPS軌跡記錄功能的手錶，不過卻發現其操作邏輯和Navier HUD的使用邏輯相當接近。

荷蘭廠商Suunto將Suunto Ambit其定位為適合專業登山及運動的電子錶，以硬體規格來看，這隻錶具有GPS接收器、氣溫計、氣壓(高度)計、羅盤四種Sensor，並且可以無線連接心律帶，因而能夠提供GPS定位、軌跡記錄、提供氣溫、垂直水平移動速度、距離、高度等資訊，並具有100米防水的規格，也就是你絕對可以帶著去進行大部分水中的活動，並絕對可以提供大部分運動時的需求。

透過Movecounts帳號，可以輕易的將運動記錄保留下來，並分享到其他社群網站當中。並且在Movescount網頁中調教你的手錶設定

只要安裝Moveslink這個軟體，並將手錶連接到電腦上，就能進行資料同步。

但以上都不是重點，以下才是重點XDDD

到底哪裡和Navier HUD有夠相似呢？以下兩點說明：

自定資訊顯示面板

Suunto Ambit中提供了幾種預設的運動模式，也可以自行調整或新增運動模式，每種運動模式能夠顯示最多八個畫面的內容，每個畫面可以自行調整要顯示哪些資訊。

舉個例子，我希望在我跑步這個模式當中，能夠有五個畫面來顯示我需要的訊息，其中第一個畫面要顯示包含跑步累積時間、累積的距離、以及我的心律。第二個畫面則要顯示跑步的速度、平均速度及當時的氣溫。第三個畫面顯示我的上坡累計里程和下坡累計里程、目前時間...

當我在執行跑步的模式時，我就能透過按鈕來切換到不同的畫面，查看我所定義的畫面。因此你可以調整各種運動所需要取得的內容，來因應當運動的需求。

這樣的概念與Navier HUD可以依照需求來新增與編輯所需的面板，並且為每個面板加入適當的元件，邏輯一致。但Navier HUD因為手機畫面較大，能夠調整元件的位置較自由。Suunto Ambit則因為所配備的Sensor而能夠有更多移動資訊來源。

路線導航

Suunto Ambit因為具備GPS Sensor，因此也具備了簡單的導航功能，由於手錶操作限制，在使用導航功能之前，你需要在Movecounts先規劃完路線，並連接手錶與電腦將路線匯入之後，就可以開啟導航功能。

和Navier HUD同樣，你得先在地圖上找出要走的路，啟動導航之後，你只會看到該走的路線，而不包含其他的叉路。

除了這些以外，Suunto Ambit也把App的概念帶進來，在Suunto Ambit當中所指的App，其實是以簡單的Script將本來已經有的數值資料，經過額外的計算產生另一個你所想要知道的資料。

舉例來說，我常常一次跑步跑5公里，所以當我在跑步時想知道依我現在跑步的速率，以及累計的里程數來算，究竟還要跑多少時間才能跑完5公里？或者單車騎士在行進過程到底做了多少次衝刺？

這些資料在原本的手錶當中並沒有提供，使用者卻可以利用撰寫程式碼來建立符合自己需求的App，將計算結果放到某個運動模式的畫面中，並可以選擇把它分享在App Zone當中。

如果你懶得自己寫，或者不會寫程式，可以直接到App Zone當中找到適合你使用的App，其中已經有多達一千多個App，有很大的機會有其他人已經寫了你需要的計算了。

這真是一支很酷的手錶，並且耗電也在可接受的範圍（沒使用GPS時，可以使用約30天，連續使用GPS且設定每秒一筆資料時，可以支撐八小時，和一般軌跡記錄器差不多），還有很多功能小細節沒有講，只好自己去體驗。這絕對不是勸拜文，如果你不小心拜了，也要記得連Navier HUD一起拜阿阿阿...

抬頭顯示DIY

常常有使用者問說在白天的時候，使用Navier HUD時是不是會看不清楚?
是的，如果在大太陽下把手機放擋風玻璃下肯定會看不清楚，
但如果需要在白天也能使用抬頭顯示，其實還是有方法可以自己DIY做到，

反光隔熱紙

只要到汽車用品店購買一張反光隔熱紙，貼在手機映射的位置上，
就能讓抬頭顯示影像在白天更清楚。
一般市售隔熱紙都是一大張，因此需要依照自己的手機大小，動手裁切成適合的尺寸。
我覺得在駕駛座左下角是最適合的位置，也不會擋到視野。

止滑墊

且為了避免手機會在前方會滑來滑去，
您可能還需要一個小小的止滑墊，也是在汽車用品店可以買到，

車充與電源線

在使用抬頭顯示時，通常會把手機亮度開到最大，這時螢幕耗電量將大增，

因此如果是長途使用時，會需要以車充來補充電源，車充在便利商店就可以買到。

如此一來，配合上Navier HUD您就有一個專業的抬頭顯示環境囉。

在這裡下載Navier HUD