2. 課程⼤大綱
• 介紹、開發需求、開始 iOS 程式
• 置放按鈕，彈出視窗顯⽰示⽂文字 (UIButton
+UIAlertView)
• QV053：⽤用程式碼寫作
• QV054：⽤用 xib 畫⾯面連接
• 學習圖⽚片的顯⽰示
• 按鈕切換圖⽚片 (UIImageView)
• QV055：使⽤用 xib
• QV056：使⽤用程式碼編寫
4. 請認清楚這些名詞
Apple Macintosh iPhone
Mac iMac iPad
Mac Pro
Leopard (10.5) iPod Touch
Snow Leopard (10.6) MacBook
Lion (10.7) MBP MBA
Mountain Lion (10.8)
Mac OS X iOS
7. Mac 電腦
http://store.apple.com/tw
10. 虛擬機器 (不建議)
在 PC 內使⽤用虛擬機器軟體 (VM) 模擬 Mac
速度慢
操作不⽅方便
沒有完整的⽤用⼾戶使⽤用經驗
11. 開發軟體 (唯⼀一選擇)
• xcode
• 開發編輯器
• iOS SDK
• iOS 模擬器
Interface Builder Instruments
https://developer.apple.com/xcode/
12. 開發者帳號
價格：
US$ 99 / 年 (個⼈人帳號)
US$ 399 / 年 (公司帳號)
功能：
線上資源查詢整合
上傳⾄至實機測試
App上架發佈
14. xcode
下載、安裝
執⾏行
開新專案
在模擬器中執⾏行
16. 專案名稱
公司識別
檔名前置⽂文字 (空⽩白)
設定裝置
Storyboards
(暫不使⽤用)
⾃自動記憶體管理 (使⽤用)
18. 執⾏行功能 屬性設定、連接設定
主要開發編寫介⾯面
檔案區
偵錯輸出 元件選擇
21. 範例：
置放按鈕，按下後
彈出視窗顯⽰示⽂文字
QV053：⽤用程式碼寫作
QV054：⽤用 xib 畫⾯面連接
28. 在主畫⾯面載⼊入後執⾏行 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) 置於在畫⾯面上
30. UIButton 的樣式
試驗⼀一下：按鈕的其他樣式
UIButtonTypeRoundedRect (圓⾓角⽅方形按鈕)
UIButtonTypeDetailDisclosure (細節顯⽰示)
UIButtonTypeInfoLight (⽩白⾊色資訊 i)
UIButtonTypeInfoDark (深⾊色資訊 i)
UIButtonTypeContactAdd (加號按鈕)
UIButtonTypeCustom (使⽤用者⾃自訂)
34. 步驟⼀一：在 .h 檔案進⾏行宣告 ViewController.h
#import <UIKit/UIKit.h>
@interface ViewController : UIViewController
{
IBOutlet UIButton *myButton;
} 宣告在此類別，
- (IBAction)onClick:(id)sender; 會需要的資料或元件
@end
36. 建⽴立『物件』的關連
按住 Ctrl 鍵
再⽤用滑⿏鼠由 "File's Owner" 拉到 "按鈕"
37. 建⽴立『事件』的關連
按住 Ctrl 鍵
再⽤用滑⿏鼠由 "按鈕" 拉到 "File's Owner"
39. 步驟三：在 .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];
}
41. 圖形的使⽤用
• 圖檔以 .png 檔最佳 (.jpg 亦可)
• 事先處理好圖檔的⼤大⼩小尺⼨寸
• 圖檔必須先加⼊入⾄至專案內
• 搭配 UIImage 及 UIImageView 使⽤用
48. 0
Group 為專案內的整理
和實際存放的資料夾無關
49. 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
50. 2 ViewController.xib (1/4)
51. 2 ViewController.xib (2/4)
52. 2 ViewController.xib (3/4)
53. 2 ViewController.xib (4/4)
54. 3
建⽴立類別和xib的關連(包含物件和事件)
有多種⽅方法......
56. 4
ViewController.m
#import "ViewController.h"
@implementation ViewController
- (IBAction)btn1Click:(id)sender
{
[self.view bringSubviewToFront:myImageView01];
}
- (IBAction)btn2Click:(id)sender
{
[self.view bringSubviewToFront:myImageView02];
}
59. 產⽣生圖⽚片 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];
........以下省略 (⾒見下⾴頁).......
}
60. 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];
}
61. ViewController.m (3/3)
- (void) btn1Click: (id)sender
{
[self.view bringSubviewToFront:myImageView01];
}
- (void) btn2Click: (id)sender
{
[self.view bringSubviewToFront:myImageView02];
}
