炎炎夏日學 Android 課程 - Part2: Android 元件介紹
0 likes282 views
文档介绍了 Android 开发的基本知识，包括软件设计、项目文件结构和组件介绍。重点讨论了布局管理器（如 LinearLayout 和 RelativeLayout）以及如何设置尺寸和位置属性。还包括了单元测试原则和 Android 活动的生命周期管理。
炎炎夏日學 Android 課程 - Part2: Android 元件介紹
- 1. 炎炎夏⽇日學 Android Johnny Sung Part2: Android 元件介紹
- 2. Mobile Device developer Johnny Sung https://fb.com/j796160836 https://blog.jks.coffee/ https://www.slideshare.net/j796160836 https://github.com/j796160836
- 3. ⼤大綱 • 軟體設計介紹 • Android 專案資料夾結構介紹 • Android 部件介紹
- 4. 軟體設計 • 企劃 • UI/UX 介⾯面設計（美術） • 程式 • 測試
- 5. 開⼀一個新專案吧！
- 8. 專案資料夾結構 寫程式區 編譯資訊 / Logcat / Debug ⾯面版 / 搜尋⾯面板...等
- 9. 資料夾結構 • app 模組 • AndroidManifest.xml • Kotlin 程式檔案 • Gradle 設定檔檔案 • 畫⾯面 XML 檔案 ( res/layout ) • 圖片檔案 ( res/drawable ) • 字串串檔 ( res/values/strings.xml )
- 10. app 模組 AndroidManifest.xml Kotlin 程式檔案 單元測試 (Unit test) 檔案 Gradle 設定檔檔案 畫⾯面 XML 檔案 圖片檔案 字串串檔
- 11. 畫⾯面 XML 檔案
- 13. Gradle 設定檔檔案（專案）
- 15. MVC
- 16. Model View Controller 控制器模型 視圖
- 18. Layout
- 19. View 視圖
- 20. Layout • LinearLayout • FrameLayout • RelativeLayout • ConstraintLayout
- 23. Layout 畫⾯面參參數 android:layout_width="match_parent" android:layout_height="match_parent" 元件的⾼高度 元件的寬度 match_parent 符合⽗父親⼤大⼩小 wrap_content 符合內容⼤大⼩小 150dp 指定 dp 寬度（例例如：150dp） 0dp 依照特定規則執⾏行行
- 26. RelativeLayout 相對布局 http://fiend1120.pixnet.net/blog/post/191809863 android:layout_above 將此元件置於"指定元件"(使⽤用元件id指定)上⽅方. android:layout_below 將此元件置於"指定元件"(使⽤用元件id指定)下⽅方. android:layout_toLeftOf 將此元件置於"指定元件"(使⽤用元件id指定)左⽅方. android:layout_toRightOf 將此元件置於"指定元件"(使⽤用元件id指定)右⽅方.
- 27. RelativeLayout 相對布局 http://fiend1120.pixnet.net/blog/post/191809863 android:layout_alignParentTop 將此元件對⿑齊於佈局畫⾯面上邊線 android:layout_alignParentRight 將此元件對⿑齊於佈局畫⾯面右邊線 android:layout_alignParentLeft 將此元件對⿑齊於佈局畫⾯面左邊線 android:layout_alignParentBottom 將此元件對⿑齊於佈局畫⾯面底線 android:layout_centerHorizontal 將該元件⽔水平居中於整個布局畫⾯面 android:layout_centerVertical 將該元件垂直居中於整個布局畫⾯面 android:layout_centerInParent 將該元件⽔水平及垂直均居中於整個布局畫⾯面
- 29. RelativeLayout • 對⿑齊類 android:layout_alignParentLeft 靠左對⿑齊，(吸附邊框左邊) android:layout_alignParentTop 靠上對⿑齊，(吸附邊框上⽅方) android:layout_alignParentRight 靠右對⿑齊，(吸附邊框右邊) android:layout_alignParentBottom 靠下對⿑齊，(吸附邊框下⽅方) android:layout_centerInParent 置中，(計算放在正中間)
- 30. TextView • android:text="Hello!" • android:background="#ff384c0a" • android:textColor="#ffe5d9ff" • android:textSize="35sp"
- 31. dp? px? 單位長度⼤大集合 • 螢幕長度 • px (pixel) 像素，RGB螢幕三原⾊色合成的⼀一個彩⾊色點 • 物理理長度 • inch (inches) 英吋，1 Inch = 2.54 cm • pt (points) 點數，1pt = 1/72 Inch = 0.352777778 mm
- 33. dp? px? 單位長度⼤大集合 • 密度 • dpi (dot per inch)：⼀一英吋有幾個 點 • ppi (pixel per inch)：⼀一英⼨寸有多少 像素
- 35. 密度 (Density) ( > 300dpi = Retina ) 160dpi (mdpi) 326dpi (xhdpi) iPhone 3Gs iPhone 4
- 36. dp? px? 單位長度⼤大集合 •dp, dip (Density-Independent Pixels) 對應到在 160 dpi 的螢幕上的幾個 px（像素） • 1 dp = 1/160 Inch = 0.15875 mm •sp (Scale Independent Pixels) 對應在 160 dpi 的螢幕上的幾個 pt。
- 38. 我的圖應該要多⼤大？ • px = dip * (density / 160) • dip = px / (density / 160) • sp = pt * (density / 160) • 2:3:4:6:8 scaling ratio
- 39. 我的圖應該要多⼤大？ • ldpi (low) ~120dpi • mdpi (medium) ~160dpi • hdpi (high) ~240dpi • xhdpi (extra-high) ~320dpi • xxhdpi (extra-extra-high) ~480dpi • xxxhdpi (extra-extra-extra-high) ~640dpi https://www.pixplicity.com/dp-px-converter
- 45. my_button.setOnClickListener { // ... } <Button android:id="@+id/my_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="按⼀一下！" /> import kotlinx.android.synthetic.main.activity_main.* activity_main.xml MainActivity.kt
- 46. findViewById
- 52. Thread 執⾏行行緒
- 54. https://flipedu.parenting.com.tw/article/4060 Main Thread (UI Thread) 主執⾏行行緒 Thread 1 Thread 2 Thread 3 ...
- 55. val mainHandler = Handler(Looper.getMainLooper()) val thread = Thread(Runnable { // Do something mainHandler.post { // My result } }) thread.start() （把繁重的事情放在這） （回傳結果給 Main Thread 顯⽰示）
- 56. Model 模型
- 57. 單元測試原則 • Arrange – 準備，準備輸入資料與期待值 • Act – 執⾏行行，執⾏行行測試對象 • Assert – 驗證，驗證結果 3A 原則
- 58. class ExampleUnitTest { @Test fun addition_isCorrect() { // Arrange val expected = 4 // Act val actual = 2 + 2 // Assert assertEquals(expected, actual) } } Arrange 準備 Act 執⾏行行 Aessrt 驗證
- 59. 休息⼀一下 ☕
- 60. 等等來來⼩小試⾝身⼿手！