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
59
炎炎夏日學 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
ArgoCD 的雷 碰過的人就知道 @TSMC IT Community Meetup #4
j796160836
0
15
使用 Kong 與 GitOps 來管理您企業的 API 呼叫 @ 2024 台灣雲端大會
j796160836
0
23
[AI / ML] 用 LLM (Large language model) 來整理您的知識庫 @ Devfest Taipei 2023
j796160836
0
75
[Flutter] Flutter Provider 看似簡單卻又不簡單的狀態管理工具
j796160836
0
13
[Golang] 以 Mobile App 工程師視角,帶你進入 Golang 的世界 (Introduction of GoLang)
j796160836
0
22
[Flutter] 來體驗 bloc 小方塊的神奇魔法 @Devfest 2022
j796160836
0
220
與 Sign in with Apple 的愛恨情仇 @ iPlayground2020
j796160836
3
14k
Flutter 是什麼?用 Flutter 會省到時間嗎? @ GDG Devfest2020
j796160836
1
1.2k
談談 Android constraint layout
j796160836
0
87
Other Decks in Programming
See All in Programming
Интеграционное тестирование: как приручить хаос
mariyasaygina
0
520
Cloud Adoption Frameworkにみる組織とクラウド導入戦略(縮小版)
tomokusaba
1
180
全方位強化 Python 服務可觀測性:以 FastAPI 和 Grafana Stack 為例
blueswen
1
370
いまあるチームにフィットさせる Serverless そして Platform Engineeringへの挑戦 / Serverless Fits the Team You Have and Platform Engineering
seike460
PRO
2
1.4k
sqlcを利用してsqlに型付けを
kamiyam
0
240
Vue :: Better Testing 2024
up1
1
380
Go製CLIツールGatling Commanderによる負荷試験実施の自動化
okmtz
3
680
[KR] Server Driven Compose With Firebase
skydoves
2
170
AWS CDKを用いたセキュアなCI/CDパイプラインの構築 / Build a secure CI/CD pipeline using AWS CDK
seike460
PRO
3
590
利用者視点で考える、イテレータとの上手な付き合い方
syumai
4
220
CSC509 Lecture 01
javiergs
PRO
1
200
フロントエンドの現在地とこれから
koba04
10
4.4k
Featured
See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
249
21k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
125
18k
A better future with KSS
kneath
236
17k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
228
52k
Intergalactic Javascript Robots from Outer Space
tanoku
268
27k
Docker and Python
trallard
40
3k
Automating Front-end Workflow
addyosmani
1365
200k
Design by the Numbers
sachag
278
19k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
38
2.1k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
167
48k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
Building Your Own Lightsaber
phodgson
102
6k
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 驗證
休息⼀一下 ☕
等等來來⼩小試⾝身⼿手!