滿足視覺設計師的好奇： 1. 究竟Android工程師在刻UI的時候都在想什麼？ 2. 究竟Android上面能做到哪些？

1. Android Layout
工程師在想什麼？
- 給視覺設計師
Kane

2. 大綱
1. Layout方式：底層元件 + 指定長寬
2. 多螢幕支援
3. 圖片顯示設定：ImageView ScaleType
4. 9-Patch
5. StateList, LevelList
6. Shape
7. Animation
8. Text Shadow

3. 工程師如何 layout ?

4. 以愛免費為例
寬高都填滿
寬度為填滿
高度為80dp
靠最上方
寬度為填滿
高度為60dp
靠最下方
ListView
寬高皆為填滿
位置：
指定方式依底層元件而定
長寬：
外層元件決定
內層元件決定
固定

5. RelativeLayout
裡面的元件可以指定相對位置
底層元件 - RelativeLayout
a b
c
d
a: 靠上 + 靠左
b: 靠上 + 在a的右邊
c: 靠下 + 靠右
d: 垂直置中 + 水平置中
e: 在a的下面 + 水平置中
e

6. 底層元件 - LinearLayout
LinearLayout
裡面的元件依照順序擺放，可指定順序為橫向或直向
a
b
c
a b

7. 指定長寬的方式
match_parent: 填滿，外層元件決定
wrap_content: 內部元件決定
指定大小: 單位為 dp 或 px
建議用dp
建議用dp
建議用dp

8. 什麼是dp？
在不同像素密度下，
呈現出近似的物理尺寸。
px = dp * dpi / 160
200dp在各螢幕之px：
xxmdpi(160)：200*160/160=200px
xxhdpi(240)：200*240/160=300px
xxhdpi(360)：200*320/160=400px
xxhdpi(480)：200*480/160=600px

9. 像素密度：dpi

10. 螢幕密度低 （粗糙） 螢幕密度高 （清晰）
L HL H

11. 像素密度比較重要 2/2
螢幕密度低 螢幕密度高
只能佔到這些空間
如果以px為單位，呈現可能不如預期。
比如，預期480*800顯示為左圖，
結果在另一個螢幕呈現出來卻是 ...
L H

12. gg
螢幕密度低
只能容納這些像素
螢幕密度高
LH

13. 建議使用的單位
dp: 可在不同密度下呈現近似的物理尺寸
sp: 與dp一樣，但是是給字體用的 (text size)
px, pt, in, mm: 上兩者不符需求才考慮。

14. 圖怎麼給？
1. 根據不同螢幕密度，出多張不同的圖
APK因為圖檔多而肥大，但執行較快。
2. 出一種圖，與其他螢幕密度共用
效能較差，或是圖變得比較模糊。（看是否在接受範圍內）
MyProject/
res/
drawable-xhdpi/
awesomeimage.png
drawable-hdpi/
awesomeimage.png
drawable-mdpi/
awesomeimage.png
drawable-ldpi/
awesomeimage.png

15. 如何給全螢幕圖檔？
1. 製成 9-Patch：設定允許拉伸之範圍
2. 分為背景和前景
3. ImageView ScaleType：允許被自動裁切或拉伸
4. 直接填滿：不管長寬比變形的問題

16. 參考讀物
Density-independent Pixels
https://www.youtube.com/watch?v=zhszwkcay2A
Supporting Multiple Screens
http://developer.android.com/guide/practices/screens_support.html
如何做到多螢幕支援
http://j796160836.pixnet.net/blog/post/40383502-%5Bandroid%5D-%E5%A6%82%E4%BD%95%E5%81%9A%E5%
88%B0%E5%A4%9A%E9%87%8D%E8%9E%A2%E5%B9%95%E6%94%AF%E6%8F%B4-%28multi-screen-suppo

17. ImageView ScaleType
● CENTER
● CENTER_CROP
● CENTER_INSIDE
● FIT_CENTER
● FIT_START
● FIT_END
● FIT_XY
請直接閱讀此篇：http://blog.csdn.net/larryl2003/article/details/6919513

18. 9-Patch
可伸縮的圖檔

19. 9-Patch 應用 1/2

20. 9-Patch 應用 2/2

21. 9-Patch 製作工具
1. 線上快速製作
http://romannurik.github.io/AndroidAssetStudio/nine-patches.html
2. 官方提供工具（SDK: /tools/draw9patch）
3. 自己依照格式劃線

22. State List
觸控環境下，通常只需提供兩種狀態：
● normal
● pressed
圖檔 或 顏色

23. Level List
圖檔依等級而變化，例如：WiFi訊號強弱

24. Shape
用參數設定：
shape - rectangle, oval, line, ring
gradient - startColor, endColor, angle, type(liner, radial, sweep)
solid - color
stroke - width, color, dashWidth, dashGap
corners - radius, topRightRadius, … bottomLeftRadius

25. Shape Examples

26. Animation
1. Tween 漸變
alpha, scale, translate, rotate
Interpolator - 設定動畫速度變化
2. Frame 影格

27. Text Shadow
指定四個參數
color
radius
dx
dy

28. 建議讀物
Shape
http://blog.csdn.net/lonelyroamer/article/details/8254592
Animation詳解
http://www.cnblogs.com/bill-joy/archive/2012/04/27/2473524.html
Android Resource Type
http://developer.android.com/guide/topics/resources/available-resources.html
Google Material Design
https://developer.android.com/design/material/index.html