Android workshop - 01. Getting started on android phone

Slide 1

Slide 1 text

Android Workshop 01. Getting started on android phone Johnny Sung

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

Android Studio 設定 • Appearance • Theme: Darcula • Keymap • Keymaps: Eclipse (Mac OS X)

Slide 5

Slide 5 text

Appearance Settings

Slide 6

Slide 6 text

Keymap Settings

Slide 7

Slide 7 text

⼿手機前置作業 • 開啟USB偵錯 • 設定 > 關於 • 連續點擊 Build Number • 設定 > 開發⼈人員選項 • 勾選未知的來源 • 設定 > 安全性

Slide 8

Slide 8 text

開啟開發⼈人員選項選單

Slide 9

Slide 9 text

勾選未知的來源開啟 USB 偵錯

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

Exercise 00: Hello, World

Slide 14

Slide 14 text

Exercise 00: Hello, World

Slide 15

Slide 15 text

建⽴立專案 • 建⽴立⼀一個專案 • Application name: PetStar • Company Domain: johnny.com • Package name: com.johnny.petstar

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

執⾏行您的 Hello, World • 接上 Android ⼿手機 • 安裝驅動 (Windows) • ⼿手機勾選允許裝置 • 按下執⾏行

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

Code Examples http://goo.gl/RFPHzi PetStar -  Exercise00: HelloWorld

Slide 24

Slide 24 text

Break;

Slide 25

Slide 25 text

Project Overview

Slide 26

Slide 26 text

專案結構 • Module • AndroidManifest.xml (專案設定) • java (程式碼) • res • drawable (圖⽚片) • layout (版⾯面) • values/strings.xml (字串檔) • Gradle

Slide 27

Slide 27 text

activity_main.xml

Slide 28

Slide 28 text

MainActivity.java

Slide 29

Slide 29 text

AndroidManifest.xml

Slide 30

Slide 30 text

Gradle

Slide 31

Slide 31 text

Exercise 01: Show pet’s name

Slide 32

Slide 32 text

Exercise 01: Show pet’s name

Slide 33

Slide 33 text

activity_main.xml Change to LinearLayout Add this

Slide 34

Slide 34 text

MainActivity.java Add this

Slide 35

Slide 35 text

鎖定螢幕橫直 • AndroidManifest.xml • 中加上 • android:screenOrientation="portrait" • android:screenOrientation="landscape"

Slide 36

Slide 36 text

AndroidManifest.xml Add this

Slide 37

Slide 37 text

Code Examples http://goo.gl/UH814G PetStar -  Exercise01: PetsName

Slide 38

Slide 38 text

Layout properties • android:layout_width="wrap_content" • android:layout_height="wrap_content" • wrap_content • match_parent (ﬁll_parent) • dp (dip) • px

Slide 39

Slide 39 text

Layout properties • Margin • android:layout_marginLeft="5dp" • android:layout_marginRight="5dp" • android:layout_marginTop="5dp" • android:layout_marginBottom=“5dp" • Padding • android:paddingLeft="5dp" • android:paddingRight="5dp" • android:paddingTop="5dp" • android:paddingBottom="5dp"

Slide 40

Slide 40 text

Layout • RelativeLayout • FrameLayout • LinearLayout

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

RelativeLayout • 相對位置類 • android:layout_toLeftOf   這在(等下要寫的控制項的名)的左邊 • android:layout_toRightOf   這在(等下要寫的控制項的名)的右邊 • android:layout_below   這在(等下要寫的控制項名)的下⾯面 • android:layout_above   這在(等下要寫的控制項名)的上⾯面

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

dp? px? 單位⻑⾧長度⼤大集合 • 螢幕⻑⾧長度 • px (pixel) 像素，RGB螢幕三原⾊色合成的⼀一個彩⾊色點 • 物理⻑⾧長度 • in (inches) 英吋，1 Inch = 2.54 cm • pt (points) 點數，1pt = 1/72 Inch  = 0.352777778 mm • 密度 • dpi (dot per inch)：⼀一英吋有幾個點 • ppi (pixel per inch)：⼀一英⼨寸有多少像素

Slide 46

Slide 46 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 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 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 http://pixplicity.com/dp-px-converter/

Slide 50

Slide 50 text

Density Independent

Slide 51

Slide 51 text

Activity LifeCycle • onCreate() 程式⼀一開始執⾏行時 • onResume() 畫⾯面可⾒見時 • onPause() 畫⾯面不可⾒見時 • onDestroy() 程式結束時 • 橫直轉換時例外

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

Exercise 02: Pet’s name card

Slide 54

Slide 54 text

No content

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

http://www.collarplanetonline.com/military-style-qr-code-pet-id-tag-in-black/

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

Slide 60

Slide 60 text

activity_main.xml

Slide 61

Slide 61 text

Challenge: Open Browser • 利⽤用剛才的 Layout 讓 Facebook 圖⽚片  能夠正常被按下 • 提⽰示： • ﬁndViewById • setOnClickListener private void openWebBrowser(String url) { try { Intent i = new Intent(Intent.ACTION_VIEW, Uri.parse(url)); startActivity(i); } catch (Exception e) { e.printStackTrace(); } }

Slide 62

Slide 62 text

Code Examples http://goo.gl/YlNU1R PetStar -  Exercise02: PetsNameCard

Slide 63

Slide 63 text

Where To Go From Here? • ListView / BaseAdapter • Layout orientation changes • Internet • Thread / Handler / Asynctask • Fragment

Slide 64

Slide 64 text

Q & A