Class 01iOS 應⽤用軟體設計
課程⼤大綱•   介紹、開發需求、開始 iOS 程式•   置放按鈕,彈出視窗顯⽰示⽂文字 (UIButton    +UIAlertView)    •   QV053:⽤用程式碼寫作    •   QV054:⽤用 xib 畫⾯面連接•  ...
課程⼤大綱
請認清楚這些名詞        Apple            Macintosh               iPhone                       Mac              iMac        iPad   ...
開發需求
硬體需求Mac電腦 (Intel CPU) Mac OSX (最新版本 10.8)iPhone、iPad、iPod Touch (⾮非必須) iOS (最新版本 6.0)
Mac 電腦         http://store.apple.com/tw
Mac OS X
⿊黑蘋果 (不建議) 使⽤用⾮非 Apple 的硬體安裝 Mac OS X 安裝困難 不穩定 昇級問題重重 缺乏完整的⽤用⼾戶使⽤用經驗
虛擬機器 (不建議) 在 PC 內使⽤用虛擬機器軟體 (VM) 模擬 Mac 速度慢 操作不⽅方便 沒有完整的⽤用⼾戶使⽤用經驗
開發軟體 (唯⼀一選擇)                                     • xcode                                      • 開發編輯器                     ...
開發者帳號 價格:  US$ 99 / 年 (個⼈人帳號)  US$ 399 /  年 (公司帳號) 功能:  線上資源查詢整合  上傳⾄至實機測試  App上架發佈
開始 iOS 程式
xcode   下載、安裝   執⾏行   開新專案   在模擬器中執⾏行
預設範本為開新專案選擇 iOS   Single View Application
專案名稱                 公司識別                  檔名前置⽂文字 (空⽩白)                 設定裝置Storyboards (暫不使⽤用)⾃自動記憶體管理 (使⽤用)
指定⼀一個儲存位置
執⾏行功能         屬性設定、連接設定               主要開發編寫介⾯面檔案區        偵錯輸出               元件選擇
執⾏行程式於模擬器中查看結果
歡迎進⼊入學習之路......
範例:     置放按鈕,按下後     彈出視窗顯⽰示⽂文字	 	 	 QV053:⽤用程式碼寫作	 	 	 QV054:⽤用 xib 畫⾯面連接
Project QV053按鈕物件 UIButton警告顯⽰示 UIAlertView
CGRectMake畫⾯面位置定義
在主畫⾯面載⼊入後執⾏行                  ViewController.m (1/2)- (void)viewDidLoad{    [super viewDidLoad];! // Do any additional set...
ViewController.m (2/2)- (void)onClick:(id)sender{    NSLog(@"You click the Button!");    UIAlertView *alert = [[UIAlertVie...
UIButton 的樣式試驗⼀一下:按鈕的其他樣式  UIButtonTypeRoundedRect (圓⾓角⽅方形按鈕)  UIButtonTypeDetailDisclosure (細節顯⽰示)  UIButtonTypeInfoLight...
同樣範例(改⽤用 xib 設計畫⾯面再連接)
Project QV054同 Project QV053,但採⽤用xib  的⽅方式設計畫⾯面設定 xib 畫⾯面與類別的連接按鈕物件 UIButton警告顯⽰示 UIAlertView
步驟⼀一:在 .h 檔案進⾏行宣告                               ViewController.h #import <UIKit/UIKit.h> @interface ViewController : UIVie...
步驟⼆二:在 .xib 檔案佈置      ViewController.xib               (2) 設定必要屬性         (1) 拖移進⼊入畫⾯面擺放
建⽴立『物件』的關連                       按住 Ctrl 鍵             再⽤用滑⿏鼠由 "Files Owner" 拉到 "按鈕"
建⽴立『事件』的關連                       按住 Ctrl 鍵             再⽤用滑⿏鼠由 "按鈕" 拉到 "Files Owner"
確定接⼝口是否正確建⽴立   由 xib 中檢查
步驟三:在 .m 檔案實作程式                                   ViewController.m- (void)viewDidLoad{    [super viewDidLoad];! // Do any ...
學習圖⽚片的顯⽰示
圖形的使⽤用• 圖檔以 .png 檔最佳 (.jpg 亦可)• 事先處理好圖檔的⼤大⼩小尺⼨寸• 圖檔必須先加⼊入⾄至專案內• 搭配 UIImage 及 UIImageView 使⽤用
範例:按鈕切換圖⽚片	 	 	 QV055:使⽤用 xib	 	 	 QV056:使⽤用程式碼編寫
Project QV055採⽤用 xib  的⽅方式設計畫⾯面圖⽚片物件 UIImageView
0    準備好圖⽚片,將圖⽚片移⼊入專案內
0
0   可以另建 Group 分類整理檔案
0    Group 為專案內的整理          和實際存放的資料夾無關
1                                  ViewController.h    #import <UIKit/UIKit.h>    @interface ViewController : UIViewContro...
2   ViewController.xib (1/4)
2   ViewController.xib (2/4)
2   ViewController.xib (3/4)
2   ViewController.xib (4/4)
3    建⽴立類別和xib的關連(包含物件和事件)             有多種⽅方法......
3    確定接⼝口是否正確建⽴立
4                                              ViewController.m    #import "ViewController.h"    @implementation ViewContr...
同樣範例(改⽤用純粹 coding)
Project QV056採⽤用 coding 的⽅方式完成圖⽚片物件 UIImageView、UIImage
產⽣生圖⽚片 UIImage,                   ViewController.m (1/3)            並置⼊入 UIImageView 內- (void)viewDidLoad{    [super viewD...
ViewController.m (2/3)- (void)viewDidLoad{    ........以上省略 (⾒見上⾴頁).......    // 設定第⼀一個按鈕     UIButton *myButton01 = [UIBut...
ViewController.m (3/3)- (void) btn1Click: (id)sender{    [self.view bringSubviewToFront:myImageView01];}- (void) btn2Click...
延伸學習• 查詢 UIImageView、UIButton 還有哪些屬 性可以設定• 查詢 UIButton 的事件除了按下之外,還 有哪些事件可以設定• 還有哪些 UI 元件,例如 UILable......等
Organizer - Document
在 xib 中顯⽰示 Quick Help
在程式編輯介⾯面快速顯⽰示      在關鍵字下按 option 鍵
............
I os 01
I os 01
I os 01
I os 01
I os 01
I os 01
I os 01
Upcoming SlideShare
Loading in …5
×

I os 01

620 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
620
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

I os 01

  1. 1. Class 01iOS 應⽤用軟體設計
  2. 2. 課程⼤大綱• 介紹、開發需求、開始 iOS 程式• 置放按鈕,彈出視窗顯⽰示⽂文字 (UIButton +UIAlertView) • QV053:⽤用程式碼寫作 • QV054:⽤用 xib 畫⾯面連接• 學習圖⽚片的顯⽰示• 按鈕切換圖⽚片 (UIImageView) • QV055:使⽤用 xib • QV056:使⽤用程式碼編寫
  3. 3. 課程⼤大綱
  4. 4. 請認清楚這些名詞 Apple Macintosh iPhone Mac iMac iPad Mac Pro Leopard (10.5) iPod TouchSnow Leopard (10.6) MacBook Lion (10.7) MBP MBAMountain Lion (10.8) Mac OS X iOS
  5. 5. 開發需求
  6. 6. 硬體需求Mac電腦 (Intel CPU) Mac OSX (最新版本 10.8)iPhone、iPad、iPod Touch (⾮非必須) iOS (最新版本 6.0)
  7. 7. Mac 電腦 http://store.apple.com/tw
  8. 8. Mac OS X
  9. 9. ⿊黑蘋果 (不建議) 使⽤用⾮非 Apple 的硬體安裝 Mac OS X 安裝困難 不穩定 昇級問題重重 缺乏完整的⽤用⼾戶使⽤用經驗
  10. 10. 虛擬機器 (不建議) 在 PC 內使⽤用虛擬機器軟體 (VM) 模擬 Mac 速度慢 操作不⽅方便 沒有完整的⽤用⼾戶使⽤用經驗
  11. 11. 開發軟體 (唯⼀一選擇) • xcode • 開發編輯器 • iOS SDK • iOS 模擬器 Interface Builder Instrumentshttps://developer.apple.com/xcode/
  12. 12. 開發者帳號 價格: US$ 99 / 年 (個⼈人帳號) US$ 399 /  年 (公司帳號) 功能: 線上資源查詢整合 上傳⾄至實機測試 App上架發佈
  13. 13. 開始 iOS 程式
  14. 14. xcode 下載、安裝 執⾏行 開新專案 在模擬器中執⾏行
  15. 15. 預設範本為開新專案選擇 iOS Single View Application
  16. 16. 專案名稱 公司識別 檔名前置⽂文字 (空⽩白) 設定裝置Storyboards (暫不使⽤用)⾃自動記憶體管理 (使⽤用)
  17. 17. 指定⼀一個儲存位置
  18. 18. 執⾏行功能 屬性設定、連接設定 主要開發編寫介⾯面檔案區 偵錯輸出 元件選擇
  19. 19. 執⾏行程式於模擬器中查看結果
  20. 20. 歡迎進⼊入學習之路......
  21. 21. 範例: 置放按鈕,按下後 彈出視窗顯⽰示⽂文字 QV053:⽤用程式碼寫作 QV054:⽤用 xib 畫⾯面連接
  22. 22. Project QV053按鈕物件 UIButton警告顯⽰示 UIAlertView
  23. 23. CGRectMake畫⾯面位置定義
  24. 24. 在主畫⾯面載⼊入後執⾏行 ViewController.m (1/2)- (void)viewDidLoad{ [super viewDidLoad];! // Do any additional setup after loading the view, typically from a nib. UIButton *myButton = [UIButton buttonWithType:UIButtonTypeRoundedRect]; myButton.frame = CGRectMake(100, 350, 120, 45); [myButton setTitle:@"按我" forState:UIControlStateNormal]; [myButton addTarget:self action:@selector(onClick:) forControlEvents:UIControlEventTouchUpInside]; [self.view addSubview:myButton];} (1) 宣告⼀一個按鈕 (2) 設定位置 (3) 設定標題⽂文字 (4) 指定按下後執⾏行的程式 (5) 置於在畫⾯面上
  25. 25. ViewController.m (2/2)- (void)onClick:(id)sender{ NSLog(@"You click the Button!"); UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"Hello World" message:@"你按了按鈕" delegate:self cancelButtonTitle:@"OK" otherButtonTitles:nil]; [alert show];}
  26. 26. UIButton 的樣式試驗⼀一下:按鈕的其他樣式 UIButtonTypeRoundedRect (圓⾓角⽅方形按鈕) UIButtonTypeDetailDisclosure (細節顯⽰示) UIButtonTypeInfoLight (⽩白⾊色資訊 i) UIButtonTypeInfoDark (深⾊色資訊 i) UIButtonTypeContactAdd (加號按鈕) UIButtonTypeCustom (使⽤用者⾃自訂)
  27. 27. 同樣範例(改⽤用 xib 設計畫⾯面再連接)
  28. 28. Project QV054同 Project QV053,但採⽤用xib  的⽅方式設計畫⾯面設定 xib 畫⾯面與類別的連接按鈕物件 UIButton警告顯⽰示 UIAlertView
  29. 29. 步驟⼀一:在 .h 檔案進⾏行宣告 ViewController.h #import <UIKit/UIKit.h> @interface ViewController : UIViewController { IBOutlet UIButton *myButton; } 宣告在此類別, - (IBAction)onClick:(id)sender; 會需要的資料或元件 @end
  30. 30. 步驟⼆二:在 .xib 檔案佈置 ViewController.xib (2) 設定必要屬性 (1) 拖移進⼊入畫⾯面擺放
  31. 31. 建⽴立『物件』的關連 按住 Ctrl 鍵 再⽤用滑⿏鼠由 "Files Owner" 拉到 "按鈕"
  32. 32. 建⽴立『事件』的關連 按住 Ctrl 鍵 再⽤用滑⿏鼠由 "按鈕" 拉到 "Files Owner"
  33. 33. 確定接⼝口是否正確建⽴立 由 xib 中檢查
  34. 34. 步驟三:在 .m 檔案實作程式 ViewController.m- (void)viewDidLoad{ [super viewDidLoad];! // Do any additional setup after loading the view, typically from a nib.}- (IBAction)onClick:(id)sender{ UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"Hello World" message:@"你按了按鈕" delegate:self cancelButtonTitle:@"OK" otherButtonTitles:nil]; [alert show];}
  35. 35. 學習圖⽚片的顯⽰示
  36. 36. 圖形的使⽤用• 圖檔以 .png 檔最佳 (.jpg 亦可)• 事先處理好圖檔的⼤大⼩小尺⼨寸• 圖檔必須先加⼊入⾄至專案內• 搭配 UIImage 及 UIImageView 使⽤用
  37. 37. 範例:按鈕切換圖⽚片 QV055:使⽤用 xib QV056:使⽤用程式碼編寫
  38. 38. Project QV055採⽤用 xib  的⽅方式設計畫⾯面圖⽚片物件 UIImageView
  39. 39. 0 準備好圖⽚片,將圖⽚片移⼊入專案內
  40. 40. 0
  41. 41. 0 可以另建 Group 分類整理檔案
  42. 42. 0 Group 為專案內的整理 和實際存放的資料夾無關
  43. 43. 1 ViewController.h #import <UIKit/UIKit.h> @interface ViewController : UIViewController { IBOutlet UIImageView *myImageView01; IBOutlet UIImageView *myImageView02; } - (IBAction)btn1Click:(id)sender; - (IBAction)btn2Click:(id)sender; @end
  44. 44. 2 ViewController.xib (1/4)
  45. 45. 2 ViewController.xib (2/4)
  46. 46. 2 ViewController.xib (3/4)
  47. 47. 2 ViewController.xib (4/4)
  48. 48. 3 建⽴立類別和xib的關連(包含物件和事件) 有多種⽅方法......
  49. 49. 3 確定接⼝口是否正確建⽴立
  50. 50. 4 ViewController.m #import "ViewController.h" @implementation ViewController - (IBAction)btn1Click:(id)sender { [self.view bringSubviewToFront:myImageView01]; } - (IBAction)btn2Click:(id)sender { [self.view bringSubviewToFront:myImageView02]; }
  51. 51. 同樣範例(改⽤用純粹 coding)
  52. 52. Project QV056採⽤用 coding 的⽅方式完成圖⽚片物件 UIImageView、UIImage
  53. 53. 產⽣生圖⽚片 UIImage, ViewController.m (1/3) 並置⼊入 UIImageView 內- (void)viewDidLoad{ [super viewDidLoad];! // 設定第⼀一張圖 UIImage *myImage01 = [UIImage imageNamed:@"image01.jpg"]; myImageView01 = [[UIImageView alloc] initWithImage:myImage01]; myImageView01.frame = CGRectMake(50, 40, 220, 290); [self.view addSubview:myImageView01]; // 設定第⼆二張圖 UIImage *myImage02 = [UIImage imageNamed:@"image02.jpg"]; myImageView02 = [[UIImageView alloc] initWithImage:myImage02]; myImageView02.frame = CGRectMake(50, 40, 220, 290); [self.view addSubview:myImageView02]; ........以下省略 (⾒見下⾴頁).......}
  54. 54. ViewController.m (2/3)- (void)viewDidLoad{ ........以上省略 (⾒見上⾴頁)....... // 設定第⼀一個按鈕 UIButton *myButton01 = [UIButton buttonWithType:UIButtonTypeRoundedRect]; myButton01.frame = CGRectMake(40, 370, 100, 40); [myButton01 setTitle:@"Image 01" forState:UIControlStateNormal]; [myButton01 addTarget:self action:@selector(btn1Click:) forControlEvents:UIControlEventTouchUpInside]; [self.view addSubview:myButton01]; // 設定第⼆二個按鈕 UIButton *myButton02 = [UIButton buttonWithType:UIButtonTypeRoundedRect]; myButton02.frame = CGRectMake(180, 370, 100, 40); [myButton02 setTitle:@"Image 02" forState:UIControlStateNormal]; [myButton02 addTarget:self action:@selector(btn2Click:) forControlEvents:UIControlEventTouchUpInside]; [self.view addSubview:myButton02];}
  55. 55. ViewController.m (3/3)- (void) btn1Click: (id)sender{ [self.view bringSubviewToFront:myImageView01];}- (void) btn2Click: (id)sender{ [self.view bringSubviewToFront:myImageView02];}
  56. 56. 延伸學習• 查詢 UIImageView、UIButton 還有哪些屬 性可以設定• 查詢 UIButton 的事件除了按下之外,還 有哪些事件可以設定• 還有哪些 UI 元件,例如 UILable......等
  57. 57. Organizer - Document
  58. 58. 在 xib 中顯⽰示 Quick Help
  59. 59. 在程式編輯介⾯面快速顯⽰示 在關鍵字下按 option 鍵
  60. 60. ............

×