Android workshop - 01. Getting started on android phone

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

8a6e58b272b266faf22d8a3b2927624f?s=128

Johnny Sung

January 07, 2015
Tweet

Transcript

  1. Android Workshop 01. Getting started on android phone Johnny Sung

  2. None
  3. None
  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 偵錯

  10. None
  11. None
  12. None
  13. Exercise 00: Hello, World

  14. Exercise 00: Hello, World

  15. 建⽴立專案 • 建⽴立⼀一個專案 • Application name: PetStar • Company Domain:

    johnny.com • Package name: com.johnny.petstar
  16. None
  17. None
  18. None
  19. None
  20. None
  21. 執⾏行您的 Hello, World • 接上 Android ⼿手機 • 安裝驅動 (Windows)

    • ⼿手機勾選允許裝置 • 按下執⾏行
  22. None
  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() 程式結束時 • 橫直轉換時例外
  52. None
  53. Exercise 02: Pet’s name card

  54. None
  55. None
  56. None
  57. http://www.collarplanetonline.com/military-style-qr-code-pet-id-tag-in-black/

  58. None
  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