android workshop - 01. getting started on android phone
Post on 13-Jul-2015
162 Views
Preview:
TRANSCRIPT
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
top related