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