Android layout 工程師在想什麼？給視覺設計師
7 likes3,177 views
该文档探讨了Android布局工程师的设计考量，包括不同布局方式、支持多屏幕的设计和图像显示设置。主要方法包括使用相对布局和线性布局来确定组件的位置和大小，同时强调使用dp作为单位以确保在不同屏幕密度下保持一致的物理大小。文档还涉及如何使用9-patch和StateList来管理图像及其状态，以及动画和文本阴影的实现。
Android layout 工程師在想什麼？給視覺設計師
- 2. 大綱 1. Layout方式：底層元件 + 指定長寬 2. 多螢幕支援 3. 圖片顯示設定：ImageView ScaleType 4. 9-Patch 5. StateList, LevelList 6. Shape 7. Animation 8. Text Shadow
- 5. RelativeLayout 裡面的元件可以指定相對位置 底層元件 - RelativeLayout a b c d a: 靠上 + 靠左 b: 靠上 + 在a的右邊 c: 靠下 + 靠右 d: 垂直置中 + 水平置中 e: 在a的下面 + 水平置中 e
- 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
- 13. 建議使用的單位 dp: 可在不同密度下呈現近似的物理尺寸 sp: 與dp一樣，但是是給字體用的 (text size) px, pt, in, mm: 上兩者不符需求才考慮。
- 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 圖檔 或 顏色
- 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 影格
- 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