Android workshop - 01. Getting started on android phone

All example sources are in Github:
Example 00: Hello, World
https://github.com/j796160836/PetStar-Exercise00_HelloWorld
Example 01: Show pet’s name
https://github.com/j796160836/PetStar-Exercise01_PetsName
Example 02: Pet’s name card
https://github.com/j796160836/PetStar-Exercise02_PetsNameCard

Transcript

1. Android Workshop 01. Getting started on android phone Johnny Sung
4. Android Studio 設定 • Appearance • Theme: Darcula • Keymap • Keymaps: Eclipse (Mac OS X)
5. Appearance Settings
6. Keymap Settings
7. ⼿手機前置作業 • 開啟USB偵錯 • 設定 > 關於 • 連續點擊 Build Number • 設定 > 開發⼈人員選項 • 勾選未知的來源 • 設定 > 安全性
8. 開啟 開發⼈人員選項 選單
9. 勾選未知的來源 開啟 USB 偵錯
13. Exercise 00: Hello, World
14. Exercise 00: Hello, World
15. 建⽴立專案 • 建⽴立⼀一個專案 • Application name: PetStar • Company Domain: johnny.com • Package name: com.johnny.petstar
21. 執⾏行您的 Hello, World • 接上 Android ⼿手機 • 安裝驅動 (Windows) • ⼿手機勾選允許裝置 • 按下執⾏行
23. Code Examples http://goo.gl/RFPHzi PetStar -
 Exercise00: HelloWorld
24. Break;
25. Project Overview
26. 專案結構 • Module • AndroidManifest.xml (專案設定) • java (程式碼) • res • drawable (圖⽚片) • layout (版⾯面) • values/strings.xml (字串檔) • Gradle
27. activity_main.xml
28. MainActivity.java
29. AndroidManifest.xml
30. Gradle
31. Exercise 01: Show pet’s name
32. Exercise 01: Show pet’s name
33. activity_main.xml Change to LinearLayout Add this
34. MainActivity.java Add this
35. 鎖定螢幕橫直 • AndroidManifest.xml • <activity> </activity> 中加上 • android:screenOrientation="portrait" • android:screenOrientation="landscape"
36. AndroidManifest.xml Add this
37. Code Examples http://goo.gl/UH814G PetStar -
 Exercise01: PetsName
38. Layout properties • android:layout_width="wrap_content" • android:layout_height="wrap_content" • wrap_content • match_parent (fill_parent) • dp (dip) • px
39. 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"
40. Layout • RelativeLayout • FrameLayout • LinearLayout
41. LinearLayout • 排列⽅方向 • android:orientation="vertical" 
 排列⽅方向為垂直(由上⽽而下) • android:orientation="horizontal" 
 排列⽅方向為⽔水平(由左⽽而右)
42. RelativeLayout • 對⿑齊類 • android:layout_alignParentLeft 靠左對⿑齊，(吸附邊框左邊) • android:layout_alignParentTop 靠上對⿑齊，(吸附邊框上⽅方) • android:layout_alignParentRight 靠右對⿑齊，(吸附邊框右邊) • android:layout_alignParentBottom 靠下對⿑齊，(吸附邊框下⽅方) • android:layout_centerInParent 置中，(計算放在正中間)
43. RelativeLayout • 相對位置類 • android:layout_toLeftOf 
 這在(等下要寫的控制項的名)的左邊 • android:layout_toRightOf 
 這在(等下要寫的控制項的名)的右邊 • android:layout_below 
 這在(等下要寫的控制項名)的下⾯面 • android:layout_above 
 這在(等下要寫的控制項名)的上⾯面
44. TextView • android:text="Hello!" • android:background="#ff384c0a" • android:textColor="#ffe5d9ff" • android:textSize="35sp"
45. 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)：⼀一英⼨寸有多少像素
46. 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。
47. Density 160dpi (mdpi) 326dpi (xhdpi) ( >300dpi = Retina ) iPhone 3Gs iPhone 4
48. 我的圖應該要多⼤大？ • 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/
49. 我的圖應該要多⼤大？ • 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/
50. Density Independent
51. Activity LifeCycle • onCreate() 程式⼀一開始執⾏行時 • onResume() 畫⾯面可⾒見時 • onPause() 畫⾯面不可⾒見時 • onDestroy() 程式結束時 • 橫直轉換時例外
53. Exercise 02: Pet’s name card
57. http://www.collarplanetonline.com/military-style-qr-code-pet-id-tag-in-black/
59. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity" > <ScrollView android:layout_width="match_parent" android:layout_height="match_parent" > <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical" android:padding="16dp" > <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/dog01" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="10dp" android:text="Eason" android:textSize="28sp" /> <!-- 以下省略 —> </LinearLayout> </ScrollView> </LinearLayout> activity_main.xml
60. <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="15dp" android:layout_marginBottom="15dp" android:orientation="horizontal"> <ImageView android:id="@+id/facebook_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/facebook" android:layout_margin="5dp" /> <ImageView android:id="@+id/gplus_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/gplus" android:layout_margin="5dp" /> </LinearLayout> activity_main.xml
61. Challenge: Open Browser • 利⽤用剛才的 Layout 讓 Facebook 圖⽚片
 能夠正常被按下 • 提⽰示： • findViewById • setOnClickListener private void openWebBrowser(String url) { try { Intent i = new Intent(Intent.ACTION_VIEW, Uri.parse(url)); startActivity(i); } catch (Exception e) { e.printStackTrace(); } }
62. Code Examples http://goo.gl/YlNU1R PetStar -
 Exercise02: PetsNameCard
63. Where To Go From Here? • ListView / BaseAdapter • Layout orientation changes • Internet • Thread / Handler / Asynctask • Fragment
64. Q & A