Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
炎炎夏日學 Android 課程 - Part2: Android 元件介紹
Search
Johnny Sung
June 30, 2019
Programming
0
63
炎炎夏日學 Android 課程 - Part2: Android 元件介紹
炎炎夏日學 Android 課程 - Part2: Android 元件介紹
(Kotlin EveryWhere 活動)
Johnny Sung
June 30, 2019
Tweet
Share
More Decks by Johnny Sung
See All by Johnny Sung
Kubernetes 地端自建 v.s. GKE,哪個更適合你? @Devfest Taipei 2024
j796160836
0
6
地端自建 Kubernetes (K8s) 小宇宙 (On-premises Kubernetes) @ CNTUG 2024/11 Meetup #63
j796160836
0
3
[AI LLM] Gemma 初體驗 @ GDG Cloud Taipei Meetup #70
j796160836
0
3
ArgoCD 的雷 碰過的人就知道 @TSMC IT Community Meetup #4
j796160836
0
39
使用 Kong 與 GitOps 來管理您企業的 API 呼叫 @ 2024 台灣雲端大會
j796160836
0
28
[AI / ML] 用 LLM (Large language model) 來整理您的知識庫 @ Devfest Taipei 2023
j796160836
0
120
[Flutter] Flutter Provider 看似簡單卻又不簡單的狀態管理工具
j796160836
0
13
[Golang] 以 Mobile App 工程師視角,帶你進入 Golang 的世界 (Introduction of GoLang)
j796160836
0
25
[Flutter] 來體驗 bloc 小方塊的神奇魔法 @Devfest 2022
j796160836
0
220
Other Decks in Programming
See All in Programming
快速入門可觀測性
blueswen
0
380
Recoilを剥がしている話
kirik
5
6.8k
採用事例の少ないSvelteを選んだ理由と それを正解にするためにやっていること
oekazuma
2
1k
PHPとAPI Platformで作る本格的なWeb APIアプリケーション(入門編) / phpcon 2024 Intro to API Platform
ttskch
0
270
testcontainers のススメ
sgash708
1
120
Beyond ORM
77web
7
980
今年のアップデートで振り返るCDKセキュリティのシフトレフト/2024-cdk-security-shift-left
tomoki10
0
210
これでLambdaが不要に?!Step FunctionsのJSONata対応について
iwatatomoya
2
3.7k
PHPで学ぶプログラミングの教訓 / Lessons in Programming Learned through PHP
nrslib
3
300
SymfonyCon Vienna 2025: Twig, still relevant in 2025?
fabpot
3
1.2k
KubeCon + CloudNativeCon NA 2024 Overviewat Kubernetes Meetup Tokyo #68 / amsy810_k8sjp68
masayaaoyama
0
260
アクターシステムに頼らずEvent Sourcingする方法について
j5ik2o
4
290
Featured
See All Featured
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.9k
Designing on Purpose - Digital PM Summit 2013
jponch
116
7k
Side Projects
sachag
452
42k
Imperfection Machines: The Place of Print at Facebook
scottboms
266
13k
Speed Design
sergeychernyshev
25
670
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
111
49k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
665
120k
What's in a price? How to price your products and services
michaelherold
243
12k
Into the Great Unknown - MozCon
thekraken
33
1.5k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.1k
Transcript
炎炎夏⽇日學 Android Johnny Sung Part2: Android 元件介紹
Mobile Device developer Johnny Sung https://fb.com/j796160836 https://blog.jks.coffee/ https://www.slideshare.net/j796160836 https://github.com/j796160836
⼤大綱 • 軟體設計介紹 • Android 專案資料夾結構介紹 • Android 部件介紹
軟體設計 • 企劃 • UI/UX 介⾯面設計(美術) • 程式 • 測試
開⼀一個新專案吧!
None
None
專案資料夾結構 寫程式區 編譯資訊 / Logcat / Debug ⾯面版 / 搜尋⾯面板...等
資料夾結構 • app 模組 • AndroidManifest.xml • Kotlin 程式檔案 •
Gradle 設定檔檔案 • 畫⾯面 XML 檔案 ( res/layout ) • 圖片檔案 ( res/drawable ) • 字串串檔 ( res/values/strings.xml )
app 模組 AndroidManifest.xml Kotlin 程式檔案 單元測試 (Unit test) 檔案 Gradle
設定檔檔案 畫⾯面 XML 檔案 圖片檔案 字串串檔
畫⾯面 XML 檔案
Gradle 設定檔檔案(app 模組)
Gradle 設定檔檔案(專案)
Kotlin 程式檔案 (MainActivity.kt)
MVC
Model View Controller 控制器 模型 視圖
Controller View Model 控制器 模型 視圖 Activity Fragment
Layout
View 視圖
Layout • LinearLayout • FrameLayout • RelativeLayout • ConstraintLayout
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>
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>
Layout 畫⾯面參參數 android:layout_width="match_parent" 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://fiend1120.pixnet.net/blog/post/191809863 android:layout_above 將此元件置於"指定元件"(使⽤用元件id指定)上⽅方. android:layout_below 將此元件置於"指定元件"(使⽤用元件id指定)下⽅方. android:layout_toLeftOf 將此元件置於"指定元件"(使⽤用元件id指定)左⽅方. android:layout_toRightOf
將此元件置於"指定元件"(使⽤用元件id指定)右⽅方.
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 將該元件⽔水平及垂直均居中於整個布局畫⾯面
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>
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
dp? px? 單位長度⼤大集合 • 密度 • 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? px? 單位長度⼤大集合 •dp, dip (Density-Independent Pixels) 對應到在 160 dpi
的螢幕上的幾個 px(像素) • 1 dp = 1/160 Inch = 0.15875 mm •sp (Scale Independent Pixels) 對應在 160 dpi 的螢幕上的幾個 pt。
https://blog.prototypr.io/designing-for-multiple-screen-densities-on-android-5fba8afe7ead 密度 (Density)
我的圖應該要多⼤大? • 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://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:layout_width="wrap_content" android:layout_height="wrap_content" android:text="按⼀一下!"
/> import kotlinx.android.synthetic.main.activity_main.* activity_main.xml MainActivity.kt
findViewById
Android Lifecycle (⽣生命週期)
https://www.youtube.com/watch?v=6KMm0quizrQ
https://www.youtube.com/watch?v=6KMm0quizrQ
https://android.i-visionblog.com/trip-on-android-activity-life-cycle-%EF%B8%8F-3ea59a3261fb
https://android.i-visionblog.com/trip-on-android-activity-life-cycle-%EF%B8%8F-3ea59a3261fb
Thread 執⾏行行緒
https://www.taiwanviptravel.com/see-join-puppet-theater-restaurant-2/
https://flipedu.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 顯⽰示)
Model 模型
單元測試原則 • 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 驗證
休息⼀一下 ☕
等等來來⼩小試⾝身⼿手!