Tweet
Tweet

Slide 1

Slide 1 text

炎炎夏⽇日學 Android Johnny Sung Part2: Android 元件介紹

Slide 2

Slide 2 text

Mobile Device developer Johnny Sung https://fb.com/j796160836 https://blog.jks.coffee/ https://www.slideshare.net/j796160836 https://github.com/j796160836

Slide 3

Slide 3 text

⼤大綱 • 軟體設計介紹 • Android 專案資料夾結構介紹 • Android 部件介紹

Slide 4

Slide 4 text

軟體設計 • 企劃 • UI/UX 介⾯面設計（美術） • 程式 • 測試

Slide 5

Slide 5 text

開⼀一個新專案吧！

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

專案資料夾結構 寫程式區 編譯資訊 / Logcat / Debug ⾯面版 / 搜尋⾯面板...等

Slide 9

Slide 9 text

資料夾結構 • app 模組 • AndroidManifest.xml • Kotlin 程式檔案 • Gradle 設定檔檔案 • 畫⾯面 XML 檔案 ( res/layout ) • 圖片檔案 ( res/drawable ) • 字串串檔 ( res/values/strings.xml )

Slide 10

Slide 10 text

app 模組 AndroidManifest.xml Kotlin 程式檔案 單元測試 (Unit test) 檔案 Gradle 設定檔檔案 畫⾯面 XML 檔案 圖片檔案 字串串檔

Slide 11

Slide 11 text

畫⾯面 XML 檔案

Slide 12

Slide 12 text

Gradle 設定檔檔案（app 模組）

Slide 13

Slide 13 text

Gradle 設定檔檔案（專案）

Slide 14

Slide 14 text

Kotlin 程式檔案 (MainActivity.kt)

Slide 15

Slide 15 text

MVC

Slide 16

Slide 16 text

Model View Controller 控制器 模型 視圖

Slide 17

Slide 17 text

Controller View Model 控制器 模型 視圖 Activity Fragment

Slide 18

Slide 18 text

Layout

Slide 19

Slide 19 text

View 視圖

Slide 20

Slide 20 text

Layout • LinearLayout • FrameLayout • RelativeLayout • ConstraintLayout

Slide 21

Slide 21 text

LinearLayout 線性布局

Slide 22

Slide 22 text

FrameLayout 框架布局

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

RelativeLayout 相對布局 http://fiend1120.pixnet.net/blog/post/191809863 android:layout_above 將此元件置於"指定元件"(使⽤用元件id指定)上⽅方. android:layout_below 將此元件置於"指定元件"(使⽤用元件id指定)下⽅方. android:layout_toLeftOf 將此元件置於"指定元件"(使⽤用元件id指定)左⽅方. android:layout_toRightOf 將此元件置於"指定元件"(使⽤用元件id指定)右⽅方.

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

RelativeLayout 相對布局

Slide 29

Slide 29 text

RelativeLayout • 對⿑齊類 android:layout_alignParentLeft 靠左對⿑齊，(吸附邊框左邊) android:layout_alignParentTop 靠上對⿑齊，(吸附邊框上⽅方) android:layout_alignParentRight 靠右對⿑齊，(吸附邊框右邊) android:layout_alignParentBottom 靠下對⿑齊，(吸附邊框下⽅方) android:layout_centerInParent 置中，(計算放在正中間)

Slide 30

Slide 30 text

TextView • android:text="Hello!" • android:background="#ff384c0a" • android:textColor="#ffe5d9ff" • android:textSize="35sp"

Slide 31

Slide 31 text

dp? px? 單位長度⼤大集合 • 螢幕長度 • px (pixel) 像素，RGB螢幕三原⾊色合成的⼀一個彩⾊色點 • 物理理長度 • inch (inches) 英吋，1 Inch = 2.54 cm • pt (points) 點數，1pt = 1/72 Inch
 = 0.352777778 mm

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

密度 (Density) ( > 300dpi = Retina ) 160dpi (mdpi) 326dpi (xhdpi) iPhone 3Gs iPhone 4

Slide 36

Slide 36 text

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。

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

我的圖應該要多⼤大？ • px = dip * (density / 160) • dip = px / (density / 160) • sp = pt * (density / 160) • 2:3:4:6:8 scaling ratio

Slide 39

Slide 39 text

我的圖應該要多⼤大？ • 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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

Controller Activity Fragment 控制器

Slide 45

Slide 45 text

my_button.setOnClickListener { // ... } import kotlinx.android.synthetic.main.activity_main.* activity_main.xml MainActivity.kt

Slide 46

Slide 46 text

findViewById

Slide 47

Slide 47 text

Android Lifecycle (⽣生命週期)

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

Thread 執⾏行行緒

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

https://flipedu.parenting.com.tw/article/4060 Main Thread (UI Thread) 主執⾏行行緒 Thread 1 Thread 2 Thread 3 ...

Slide 55

Slide 55 text

val mainHandler = Handler(Looper.getMainLooper()) val thread = Thread(Runnable { // Do something mainHandler.post { // My result } }) thread.start() （把繁重的事情放在這） （回傳結果給 Main Thread 顯⽰示）

Slide 56

Slide 56 text

Model 模型

Slide 57

Slide 57 text

單元測試原則 • Arrange – 準備，準備輸入資料與期待值 • Act – 執⾏行行，執⾏行行測試對象 • Assert – 驗證，驗證結果 3A 原則

Slide 58

Slide 58 text

class ExampleUnitTest { @Test fun addition_isCorrect() { // Arrange val expected = 4 // Act val actual = 2 + 2 // Assert assertEquals(expected, actual) } } Arrange 準備 Act 執⾏行行 Aessrt 驗證

Slide 59

Slide 59 text

休息⼀一下 ☕

Slide 60

Slide 60 text

等等來來⼩小試⾝身⼿手！