炎炎夏日學 Android 課程 - Part2: Android 元件介紹

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

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

⼤大綱
• 軟體設計介紹

• Android 專案資料夾結構介紹

• Android 部件介紹

軟體設計
• 企劃

• UI/UX 介⾯面設計（美術）

• 程式

• 測試

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

資料夾結構
• app 模組

• AndroidManifest.xml

• Kotlin 程式檔案

• Gradle 設定檔檔案

• 畫⾯面 XML 檔案 ( res/layout )

• 圖片檔案 ( res/drawable )

• 字串串檔 ( res/values/strings.xml )

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

Gradle 設定檔檔案（app 模組）

Gradle 設定檔檔案（專案）

Kotlin 程式檔案 (MainActivity.kt)

Model View Controller
控制器模型視圖

Controller
ViewModel
控制器
模型視圖
Activity
Fragment

Layout
• LinearLayout

• FrameLayout

• RelativeLayout

• ConstraintLayout

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

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

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

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

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

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

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

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

TextView
• android:text="Hello!"

• android:background="#ff384c0a"

• android:textColor="#ffe5d9ff"

• android:textSize="35sp"

dp? px? 單位長度⼤大集合
• 螢幕長度

• px (pixel) 像素，RGB螢幕三原⾊色合成的⼀一個彩⾊色點

• 物理理長度

• inch (inches) 英吋，1 Inch = 2.54 cm

• pt (points) 點數，1pt = 1/72 Inch 
= 0.352777778 mm

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

• 密度

• dpi (dot per inch)：⼀一英吋有幾個點

• ppi (pixel per inch)：⼀一英⼨寸有多少像素

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

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

•dp, dip (Density-Independent Pixels) 
對應到在 160 dpi 的螢幕上的幾個 px（像素）

• 1 dp = 1/160 Inch = 0.15875 mm

•sp (Scale Independent Pixels) 
對應在 160 dpi 的螢幕上的幾個 pt。

我的圖應該要多⼤大？
• px = dip * (density / 160)

• dip = px / (density / 160)

• sp = pt * (density / 160)

• 2:3:4:6:8 scaling ratio

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

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

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

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

Controller
Activity
Fragment
控制器

my_button.setOnClickListener {
// ...
}
<Button
android:id="@+id/my_button"
android:text="按⼀一下！"
/>
import kotlinx.android.synthetic.main.activity_main.*
activity_main.xml
MainActivity.kt

Android Lifecycle
(⽣生命週期)

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

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

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

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

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

單元測試原則
• Arrange – 準備，準備輸入資料與期待值

• Act – 執⾏行行，執⾏行行測試對象

• Assert – 驗證，驗證結果
3A 原則

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

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

炎炎夏日學 Android 課程 - Part2: Android 元件介紹

Recommended

More Related Content

More from Johnny Sung (20)

炎炎夏日學 Android 課程 - Part2: Android 元件介紹