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
74
炎炎夏日學 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
用 Gemma 3 開放模型來解決企業難解的問題 @ COSCUP 2025
j796160836
0
6
[GDG Build with AI] 善用現代 AI 科技:打造專屬行銷工具箱 @ GDG Changhua 彰化
j796160836
0
16
Kubernetes 地端自建 v.s. GKE,哪個更適合你? @Devfest Taipei 2024
j796160836
0
52
地端自建 Kubernetes (K8s) 小宇宙 (On-premises Kubernetes) @ CNTUG 2024/11 Meetup #63
j796160836
0
40
[AI LLM] Gemma 初體驗 @ GDG Cloud Taipei Meetup #70
j796160836
0
36
ArgoCD 的雷 碰過的人就知道 @TSMC IT Community Meetup #4
j796160836
0
100
使用 Kong 與 GitOps 來管理您企業的 API 呼叫 @ 2024 台灣雲端大會
j796160836
0
77
[AI / ML] 用 LLM (Large language model) 來整理您的知識庫 @ Devfest Taipei 2023
j796160836
0
230
[Flutter] Flutter Provider 看似簡單卻又不簡單的狀態管理工具
j796160836
0
43
Other Decks in Programming
See All in Programming
Vue・React マルチプロダクト開発を支える Vite
andpad
0
110
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
300
Microsoft Orleans, Daprのアクターモデルを使い効率的に開発、デプロイを行うためのSekibanの試行錯誤 / Sekiban: Exploring Efficient Development and Deployment with Microsoft Orleans and Dapr Actor Models
tomohisa
0
230
AIでLINEスタンプを作ってみた
eycjur
1
220
MLH State of the League: 2026 Season
theycallmeswift
0
210
TanStack DB ~状態管理の新しい考え方~
bmthd
2
410
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
east_takumi
0
360
私の後悔をAWS DMSで解決した話
hiramax
4
180
Processing Gem ベースの、2D レトロゲームエンジンの開発
tokujiros
2
120
「手軽で便利」に潜む罠。 Popover API を WCAG 2.2の視点で安全に使うには
taitotnk
0
260
フロントエンドのmonorepo化と責務分離のリアーキテクト
kajitack
2
150
AIコーディングAgentとの向き合い方
eycjur
0
250
Featured
See All Featured
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
Designing for Performance
lara
610
69k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
Speed Design
sergeychernyshev
32
1.1k
The Cult of Friendly URLs
andyhume
79
6.6k
Building Applications with DynamoDB
mza
96
6.6k
Navigating Team Friction
lara
189
15k
Making the Leap to Tech Lead
cromwellryan
134
9.5k
Done Done
chrislema
185
16k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
How GitHub (no longer) Works
holman
315
140k
Documentation Writing (for coders)
carmenintech
73
5k
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 驗證
休息⼀一下 ☕
等等來來⼩小試⾝身⼿手!