1. Class 09
iOS 應⽤用軟體設計

2. 內容⼤大綱
• Storyboard 初探
• QV091：Storyboard 及轉場效果
• QV109：Static Table (懶⼈人表格)
• 多畫⾯面之切換及轉場動畫
• QV035：兩個畫⾯面的切換
• QV036：幾種不同的畫⾯面切換⽅方式
• 網⾴頁⾴頁⾯面切換
• QV042：UIWebView ⽤用法
(結合 UISegmentedcontrol 讀取外部網⾴頁)
• Samples：TBHintView (3rd Party ActionSheet)

3. Storyboard 初探

4. Project QV091
Storyboard
轉場效果

5. 使⽤用 Storyboards
產⽣生檔案

6. MainStoryboard.storyboard
拖移產⽣生新的
View Controller

7. 各別 UIViewController
及內部物件的設計

8. (1) 按住 Ctrol，滑⿏鼠按下後從
按鈕拖移到右邊 UIView
(2) 選擇 Modal

9. 選擇 Modal Segue
(接⼊入下個樂章，轉場) 設定轉場效果

10. 同理，製作返回功能

11. 四種轉場效果
Cover Vertical (垂直翻⾴頁)
Flip Horizonal (⽔水平翻轉)
Cross Dissolve (⼗十字溶解)
Partial Curl (部份捲曲)

12. Static table
(懶⼈人表格)

13. Project QV109
Storyboard
Static Table

14. 拖移 Table View Controller 進來

15. 設定屬性：Static Cells、
選擇 TableView 區段數⺫⽬目、群組⾵風格

16. 設注意分別選擇：
均有不同的屬性
(1) Table View
內容可以設定
(2) Table View Cell
(3) Label

18. 表格內各格⼦子點選後顯⽰示的畫⾯面，亦可採⽤用設定完成

19. 多畫⾯面之切換及轉場動畫

20. Project QV035
兩個畫⾯面間的切換
⾴頁⾯面切換之Animation動畫

21. UIView 切換動畫相關之⽅方法
+ (void) beginAnimation
+ (void) setAnimationDuration
+ (void) setAnimationCurve
+ (void) setAnimationTransition
+ (void) commitAnimations

22. 動畫切換之過渡效果
UIViewAnimationTransitionFlipFromLeft (從左側翻轉)
UIViewAnimationTransitionFlipFromRight (從右側翻轉)
UIViewAnimationTransitionCurlUp (往上捲起)
UIViewAnimationTransitionCurlDown (往下捲起)
UIViewAnimationTransitionNone (無效果)

23. ViewController.h
#import <UIKit/UIKit.h>
@class SwitchView;
@interface ViewController : UIViewController
{
SwitchView *switchView;
}
@end

24. ViewController.m (1/2)
#import "ViewController.h"
#import "SwitchView.h"
@implementation ViewController
- (void)viewDidLoad
{
[super viewDidLoad];
UIButton *myButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
myButton.frame = CGRectMake(120, 250, 80, 40);
[myButton setTitle:@"Switch" forState:UIControlStateNormal];
[myButton addTarget:self
action:@selector(onSwitch:)
forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview: myButton];
self.view.backgroundColor = [UIColor redColor];
}

25. ViewController.m (2/2)
- (void)onSwitch:(id)sender
{
! switchView = [[SwitchView alloc]
initWithNibName:@"SwitchView" bundle:nil];
! [self.view addSubview:switchView.view];
! // 加⼊入動畫
! [UIView beginAnimations:@"flipview" context:nil];
! [UIView setAnimationDuration:0.5];
! [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
! [UIView setAnimationTransition:UIViewAnimationTransitionFlipFromLeft
! ! ! ! ! ! forView:self.view cache:YES];
! [UIView commitAnimations];
}

26. SwitchView.h
#import <UIKit/UIKit.h>
@interface SwitchView : UIViewController
-(void) onBack:(id)sender;
@end

27. - (void)viewDidLoad
{ SwitchView.m
[super viewDidLoad];
UIButton *myButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
myButton.frame = CGRectMake(120, 350, 80, 40);
[myButton setTitle:@"Back" forState:UIControlStateNormal];
[myButton addTarget:self
action:@selector(onBack:)
forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview: myButton];
self.view.backgroundColor = [UIColor blueColor];
}
- (void)onBack:(id)sender
{
! [UIView beginAnimations:@"flipview" context:nil];
! [UIView setAnimationDuration:5];
! [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
! [UIView setAnimationTransition:UIViewAnimationTransitionCurlUp
! ! ! ! ! ! forView:self.view.superview cache:YES];
[self.view removeFromSuperview];
[UIView commitAnimations];
}

28. Project QV036
簡單的兩個⾴頁⾯面切換，但改
⽤用xib處理畫⾯面
三種常⽤用⽅方法
addSubView
presentModalViewController
presentViewController
畫⾯面間的切換

29. ⽅方法⼀一：視為⼦子畫⾯面新增加⼊入
[A.view addSubview:B.view]
[B.view removeFromSuperview]

30. ⽅方法⼆二：presentModalViewController
注意：已在 iOS5 中移除
[A presentModalViewController:B animated:]
[B dismissModalViewControllerAnimated:]

31. ⽅方法三：presentViewController
[A presentViewController:B
animated: completion:]
[B dismissViewControllerAnimated:
completion:]
包含切換完成後的處理程序

32. 討論問題
presentView 適⽤用時機？
presentView 和 ActionSheet 之異同？

33. 網⾴頁切換 UIWebView
• QV042：UIWebView ⽤用法
(結合 UISegmentedcontrol 讀取外部網⾴頁)

34. Project QV042
點選項⺫⽬目按鈕，進⼊入網站
UISegmentedControl
UIWebView
連結外部網站與內部網⾴頁檔

35. ViewController.h
#import <UIKit/UIKit.h>
@interface ViewController : UIViewController
{
IBOutlet UISegmentedControl *segmentedControl;
IBOutlet UIWebView *webView;
NSArray *nameArray;
NSArray *linkArray;
}
- (IBAction) change:(id)sender;
@end

36. ViewController.xib

37. ViewController.m (1/2)
- (void)viewDidLoad
{
[super viewDidLoad];
//建⽴立陣列並設定其內容來當作選項
nameArray =[NSArray arrayWithObjects:
@"三寶家庭",
@"Yahoo!",
@"Google",
@"Apple",
nil];
在迴圈內逐⼀一指定
linkArray =[NSArray arrayWithObjects:
@"page1",
@"http://www.yahoo.com.tw/",
內部檔案之主檔名 @"http://www.google.com/",
@"http://www.apple.com/",
nil];
//使⽤用陣列來建⽴立UISegmentedControl
for(int i=0; i<segmentedControl.numberOfSegments; i++)
{
NSString *str = [nameArray objectAtIndex:i];
[segmentedControl setTitle:str forSegmentAtIndex:i];
}
// segmentedControl.selectedSegmentIndex = 2;
}

38. ViewController.m (2/2)
- (IBAction)change:(id)sender
{
NSString *link = [linkArray objectAtIndex:[sender
selectedSegmentIndex]];
NSString *str1 = [link substringToIndex:4];
NSString *str2 = [NSString stringWithFormat:@"http"];
if([str1 isEqualToString:str2])
{
// 讀網⾴頁
[webView loadRequest:[NSURLRequest
requestWithURL:[NSURL URLWithString:link]]];
}
else
{
// 讀檔案
[webView loadRequest:[NSURLRequest requestWithURL:[NSURL
fileURLWithPath:[[NSBundle mainBundle]
pathForResource:link
ofType:@"htm"]isDirectory:NO]]];
}
}

39. 問題
是否可以使⽤用陣列來定義按鈕的項⺫⽬目？
參考：關於 UISegmentedControl 的基
本設定⽅方式
(http://furnacedigital.blogspot.com/2011/08/uisegmentedcontrol.html)
網⾴頁切換有其它的⽅方法嗎？

40. 範例：
TBHintView
3rd Party : ActionSheet

41. http://furnacedigital.blogspot.com/2012/05/tbhintview-uiactionsheet.html

43. ............