android layout 工程師在想什麼？給視覺設計師
TRANSCRIPT
Android Layout工程師在想什麼？- 給視覺設計師
Kane
大綱
1. Layout方式：底層元件 + 指定長寬
2. 多螢幕支援
3. 圖片顯示設定：ImageView ScaleType
4. 9-Patch
5. StateList, LevelList
6. Shape
7. Animation
8. Text Shadow
工程師如何 layout ?
以愛免費為例
寬高都填滿
寬度為填滿高度為80dp靠最上方
寬度為填滿高度為60dp靠最下方
ListView寬高皆為填滿
位置：指定方式依底層元件而定
長寬：外層元件決定內層元件決定固定
RelativeLayout裡面的元件可以指定相對位置
底層元件 - RelativeLayout
a b
c
d
a: 靠上 + 靠左
b: 靠上 + 在a的右邊
c: 靠下 + 靠右
d: 垂直置中 + 水平置中
e: 在a的下面 + 水平置中
e
底層元件 - LinearLayout
LinearLayout裡面的元件依照順序擺放，可指定順序為橫向或直向
a
b
c
a b
指定長寬的方式
match_parent: 填滿，外層元件決定
wrap_content: 內部元件決定
指定大小: 單位為 dp 或 px建議用dp
建議用dp
建議用dp
什麼是dp？
在不同像素密度下，呈現出近似的物理尺寸。
px = dp * dpi / 160
200dp在各螢幕之px：xxmdpi(160)：200*160/160=200pxxxhdpi(240)：200*240/160=300pxxxhdpi(360)：200*320/160=400pxxxhdpi(480)：200*480/160=600px
像素密度：dpi
螢幕密度低 （粗糙） 螢幕密度高 （清晰）
L HL H
像素密度比較重要 2/2
螢幕密度低 螢幕密度高
只能佔到這些空間
如果以px為單位，呈現可能不如預期。
比如，預期480*800顯示為左圖，
結果在另一個螢幕呈現出來卻是 ...
L H
gg
螢幕密度低 只能容納這些像素
螢幕密度高
LH
建議使用的單位
dp: 可在不同密度下呈現近似的物理尺寸
sp: 與dp一樣，但是是給字體用的 (text size)
px, pt, in, mm: 上兩者不符需求才考慮。
圖怎麼給？
1. 根據不同螢幕密度，出多張不同的圖
APK因為圖檔多而肥大，但執行較快。
2. 出一種圖，與其他螢幕密度共用
效能較差，或是圖變得比較模糊。（看是否在接受範圍內）
MyProject/
res/
drawable-xhdpi/
awesomeimage.png
drawable-hdpi/
awesomeimage.png
drawable-mdpi/
awesomeimage.png
drawable-ldpi/
awesomeimage.png
如何給全螢幕圖檔？
1. 製成 9-Patch：設定允許拉伸之範圍
2. 分為背景和前景
3. ImageView ScaleType：允許被自動裁切或拉伸
4. 直接填滿：不管長寬比變形的問題
參考讀物
Density-independent Pixelshttps://www.youtube.com/watch?v=zhszwkcay2A
Supporting Multiple Screenshttp://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
ImageView ScaleType
● CENTER
● CENTER_CROP
● CENTER_INSIDE
● FIT_CENTER
● FIT_START
● FIT_END
● FIT_XY
請直接閱讀此篇：http://blog.csdn.net/larryl2003/article/details/6919513
9-Patch
可伸縮的圖檔
9-Patch 應用 1/2
9-Patch 應用 2/2
9-Patch 製作工具
1. 線上快速製作http://romannurik.github.io/AndroidAssetStudio/nine-patches.html
2. 官方提供工具（SDK: /tools/draw9patch）
3. 自己依照格式劃線
State List
觸控環境下，通常只需提供兩種狀態：
● normal● pressed
圖檔 或 顏色
Level List
圖檔依等級而變化，例如：WiFi訊號強弱
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
Shape Examples
Animation
1. Tween 漸變alpha, scale, translate, rotate
Interpolator - 設定動畫速度變化
2. Frame 影格
Text Shadow
指定四個參數
colorradiusdxdy
建議讀物
Shapehttp://blog.csdn.net/lonelyroamer/article/details/8254592
Animation詳解http://www.cnblogs.com/bill-joy/archive/2012/04/27/2473524.html
Android Resource Typehttp://developer.android.com/guide/topics/resources/available-resources.html
Google Material Designhttps://developer.android.com/design/material/index.html