炎炎夏日學 Android 課程 - Part2: Android 元件介紹 （Kotlin EveryWhere 活動）

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 檔案

12. Gradle 設定檔檔案（app 模組）

13. Gradle 設定檔檔案（專案）

14. Kotlin 程式檔案 (MainActivity.kt)

15. MVC

16. Model View Controller
控制器模型 視圖

17. Controller
ViewModel
控制器
模型 視圖
Activity
Fragment

18. Layout

19. View
視圖

20. Layout
• LinearLayout
• FrameLayout
• RelativeLayout
• ConstraintLayout

21. LinearLayout 線性布局
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<View
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<View
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<View
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>

22. FrameLayout 框架布局
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="150sp"
android:text="T"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="200sp"
android:text="A"/>
</FrameLayout>

23. Layout 畫⾯面參參數
android:layout_width="match_parent"
android:layout_height="match_parent"
元件的⾼高度
元件的寬度
match_parent 符合⽗父親⼤大⼩小
wrap_content 符合內容⼤大⼩小
150dp 指定 dp 寬度（例例如：150dp）
0dp 依照特定規則執⾏行行

24. Layout 畫⾯面參參數
android:layout_marginTop="5dp"
android:layout_marginLeft="5dp"
android:layout_marginStart="5dp"
android:layout_marginRight="5dp"
android:layout_marginEnd="5dp"
android:layout_marginBottom="5dp"
Margin
android:paddingTop="10dp"
android:paddingLeft="10dp"
android:paddingStart="10dp"
android:paddingRight="10dp"
android:paddingEnd="10dp"
android:paddingBottom="10dp"
Padding

25. LinearLayout
android:orientation="vertical"
android:orientation="horizontal"
排列列⽅方向為⽔水平(由左⽽而右)
排列列⽅方向
排列列⽅方向為垂直(由上⽽而下)

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 將該元件⽔水平及垂直均居中於整個布局畫⾯面

28. RelativeLayout 相對布局
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:id="@+id/view1"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<View
android:id="@+id/view2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/view1"/>
<View
android:id="@+id/view3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/view2"/>
</RelativeLayout>

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

32. 1px (pixel) 像素
http://img01.hc360.cn/01/busin/166/732/b/01-166732201.jpg

33. dp? px? 單位長度⼤大集合
• 密度
• dpi (dot per inch)：⼀一英吋有幾個 點
• ppi (pixel per inch)：⼀一英⼨寸有多少 像素

34. https://blog.prototypr.io/designing-for-multiple-screen-densities-on-android-5fba8afe7ead
密度 (Density)

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。

37. https://blog.prototypr.io/designing-for-multiple-screen-densities-on-android-5fba8afe7ead
密度 (Density)

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

40. https://blog.prototypr.io/designing-for-multiple-screen-densities-on-android-5fba8afe7ead

41. https://blog.prototypr.io/designing-for-multiple-screen-densities-on-android-5fba8afe7ead

42. https://material.io/tools/devices/

43. https://www.pixplicity.com/dp-px-converter

44. Controller
Activity
Fragment
控制器

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

47. Android Lifecycle
(⽣生命週期)

48. https://www.youtube.com/watch?v=6KMm0quizrQ

49. https://www.youtube.com/watch?v=6KMm0quizrQ

50. https://android.i-visionblog.com/trip-on-android-activity-life-cycle-%EF%B8%8F-3ea59a3261fb

51. https://android.i-visionblog.com/trip-on-android-activity-life-cycle-%EF%B8%8F-3ea59a3261fb

52. Thread
執⾏行行緒

53. https://www.taiwanviptravel.com/see-join-puppet-theater-restaurant-2/

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. 等等來來⼩小試⾝身⼿手！