Android Workshop01. Getting started on android phone

Johnny Sung

Android Studio 設定

• Appearance

• Theme: Darcula

• Keymap

• Keymaps: Eclipse (Mac OS X)

Appearance Settings

Keymap Settings

⼿手機前置作業• 開啟USB偵錯

• 設定 > 關於

• 連續點擊 Build Number

• 設定 > 開發⼈人員選項

• 勾選未知的來源

• 設定 > 安全性

開啟 開發⼈人員選項 選單

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

Exercise 00: Hello, World

Exercise 00: Hello, World

建⽴立專案

• 建⽴立⼀一個專案

• Application name: PetStar

• Company Domain: johnny.com

• Package name: com.johnny.petstar

執⾏行您的 Hello, World• 接上 Android ⼿手機

• 安裝驅動 (Windows)

• ⼿手機勾選允許裝置

• 按下執⾏行

Code Examples

http://goo.gl/RFPHzi

PetStar - Exercise00: HelloWorld

Break;

Project Overview

專案結構• Module

• AndroidManifest.xml (專案設定)

• java (程式碼)

• res

• drawable (圖⽚片)

• layout (版⾯面)

• values/strings.xml (字串檔)

• Gradle

activity_main.xml

MainActivity.java

AndroidManifest.xml

Gradle

Exercise 01: Show pet’s name

Exercise 01: Show pet’s name

activity_main.xmlChange to LinearLayout

Add this

MainActivity.java

Add this

鎖定螢幕橫直• AndroidManifest.xml

• <activity> </activity> 中加上

• android:screenOrientation="portrait"

• android:screenOrientation="landscape"

AndroidManifest.xml

Add this

Code Examples

http://goo.gl/UH814G

PetStar - Exercise01: PetsName

Layout properties• android:layout_width="wrap_content"

• android:layout_height="wrap_content"

• wrap_content

• match_parent (fill_parent)

• dp (dip)

• px

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"

Layout

• RelativeLayout

• FrameLayout

• LinearLayout

LinearLayout

• 排列⽅方向

• android:orientation="vertical" 排列⽅方向為垂直(由上⽽而下)

• android:orientation="horizontal" 排列⽅方向為⽔水平(由左⽽而右)

RelativeLayout

• 對⿑齊類 • android:layout_alignParentLeft 靠左對⿑齊，(吸附邊框左邊)

• android:layout_alignParentTop 靠上對⿑齊，(吸附邊框上⽅方)

• android:layout_alignParentRight 靠右對⿑齊，(吸附邊框右邊)

• android:layout_alignParentBottom 靠下對⿑齊，(吸附邊框下⽅方)

• android:layout_centerInParent 置中，(計算放在正中間)

RelativeLayout• 相對位置類

• android:layout_toLeftOf 這在(等下要寫的控制項的名)的左邊

• android:layout_toRightOf 這在(等下要寫的控制項的名)的右邊

• android:layout_below 這在(等下要寫的控制項名)的下⾯面

• android:layout_above 這在(等下要寫的控制項名)的上⾯面

TextView

• android:text="Hello!"

• android:background="#ff384c0a"

• android:textColor="#ffe5d9ff"

• android:textSize="35sp"

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)：⼀一英⼨寸有多少像素

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。

Density

160dpi (mdpi) 326dpi (xhdpi)

( >300dpi = Retina )

iPhone 3Gs iPhone 4

我的圖應該要多⼤大？

• 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/

我的圖應該要多⼤大？

• 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/

Density Independent

Activity LifeCycle• onCreate() 程式⼀一開始執⾏行時

• onResume() 畫⾯面可⾒見時

• onPause() 畫⾯面不可⾒見時

• onDestroy() 程式結束時

• 橫直轉換時例外

Exercise 02: Pet’s name card

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

<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

<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

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(); }}

Code Examples

http://goo.gl/YlNU1R

PetStar - Exercise02: PetsNameCard

Where To Go From Here?

• ListView / BaseAdapter

• Layout orientation changes

• Internet

• Thread / Handler / Asynctask

• Fragment

Q & A