1.
資策會行動開發學院
iPhone/iPad App 設計開發
沈志宗 stronger@mit.com.tw

2.
2012/11/19 iOS 語法基礎
使用者介面綜觀
• ViewController
• Navigation Controller
• TableView Controller

3.
ViewController

4.
UIViewController 順序
• - (void)viewDidLoad;
實例化建立起來，也就是載入記憶體
只進入一次
• - (void)viewWillAppear:(BOOL)animated;
畫面出現前，會進入許多次
• - (void)viewWillDisappear:(BOOL)animated
{
• - (void)viewDidAppear:(BOOL)animated;
• - (void)viewDidDisappear:(BOOL)animated;
• - (void)view{Will,Did}LayoutSubviews;
元件邊框有變化時進入
• - (void)willRotateToInterfaceOrientation:(UIInterfaceOrientation)anOrientation
duration:(NSTimeInterval)seconds;
• - (void)willAnimateRotationToInterfaceOrientation:(UIInterfaceOriention)orient
duration:(NSTimeInterval)seconds;
• - (void)didRotateFromInterfaceOrientation: (UIInterfaceOrientation)anOrientation;
• - (void)viewDidUnload

5.
UIView 轉場
針對某個 UIView 進行轉場 (實作 view1Trans)
+ (void)transitionWithView:(UIView *)view duration:(NSTimeInterval)duration
options:(UIViewAnimationOptions)options animations:(void (^)
(void))animations completion:(void (^)(BOOL finished))completion
由一個 UIView 轉到另一個 UIView (實作 view2Trans)
+ (void)transitionFromView:(UIView *)fromView toView:(UIView *)toView
duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options
completion:(void (^)(BOOL finished))completion
使用 Quartz 2D

6.
Quartz 2D
1. Targets Build Phase 的 Link Binary 需加入 QuartzCore.framework
2. 需 #import <QuartzCore/QuartzCore.h>
水波效果
CATransition *anim = [CATransition animation];
anim.delegate = self;
anim.duration = 1.5f;
anim.type = @"rippleEffect";
[[ice layer] addAnimation:anim forKey:@"RippleEffect"];
吸入效果
CATransition *anim = [CATransition animation];
anim.delegate = self;
anim.duration = 1.5f;
anim.type=@"suckEffect";
[[ice layer] addAnimation:anim forKey:@"SuckAnim"];

7.
實作練習 1, 2
• 三種 UIView 轉場
• 使用 + (void)transitionWithView 將上次的
Project UIPickerView 改成滑上/滑下

8.
UIView / UIViewController
UIView 畫面的產生
CGPoint、CGSize、CGRect
CGPointMake(x,y)
CGSizeMake(width,height)
CGRectMake(x,y, width,height)
UIView 方法
- (void)addSubview:(UIView *)view
- (void)removeFromSuperview
- (void)bringSubviewToFront:(UIView *)view
UIViewController 事件的處理
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event

9.
實作練習 3 - UIView touches
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
點選畫面處，放置 Ken 動畫。
新增 Project TouchKen
新增 UIView Class file

10.
實作練習 3 - UIView touches
Ken.m 實作 initWithPoint:
- (Ken *)initWithPoint:(CGPoint)point
{
self = [super init];
if (self) {
NSArray *imgArray = [[NSArray alloc] initWithObjects:
[UIImage imageNamed:@"ken1r.png"],
[UIImage imageNamed:@"ken2r.png"],
[UIImage imageNamed:@"ken3r.png"],
[UIImage imageNamed:@"ken4r.png"],
[UIImage imageNamed:@"ken5r.png"],
[UIImage imageNamed:@"ken6r.png"],
nil];
UIImageView *kenImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"ken1r.png"]];
CGSize imageSize = kenImageView.frame.size;
kenImageView.animationImages = imgArray;
kenImageView.animationDuration = 0.8;
//將畫面大小設成與圖片大小相同
[self setFrame:CGRectMake(point.x, point.y, imageSize.width, imageSize.height)];
[self addSubview:kenImageView];
[kenImageView startAnimating];
接下頁

11.
實作練習 3 - UIView touches
Ken.m 實作 initWithPoint: (續)
//設定UILabel
labelX = [[UILabel alloc] initWithFrame:CGRectMake(imageSize.width+1, 0.0, 20.0, 15.0) ];
labelY = [[UILabel alloc] initWithFrame:CGRectMake(imageSize.width+1, 16.0, 20.0, 15.0)];
UIFont *font = [UIFont fontWithName:@"Arial" size:10.0];
[labelX setFont:font];
[labelY setFont:font];
labelX.text = [NSString stringWithFormat:@"%.f", point.x];
labelY.text = [NSString stringWithFormat:@"%.f", point.y];
[labelX setBackgroundColor:[UIColor clearColor]];
[labelY setBackgroundColor:[UIColor clearColor]];
[self addSubview:labelX];
[self addSubview:labelY];
[self setClipsToBounds:NO];
}
return self;
}

12.
實作練習 3 - UIView touches
Ken.m 加上 touch event
-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
//將被觸碰到鍵移動到所有畫面的最上層
[[self superview] bringSubviewToFront:self];
CGPoint point = [[touches anyObject] locationInView:self];
location = point;
}
-(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
CGPoint point = [[touches anyObject] locationInView:self];
CGRect frame = self.frame;
frame.origin.x += point.x - location.x;
frame.origin.y += point.y - location.y;
[self setFrame:frame];
labelX.text = [NSString stringWithFormat:@"%.f", frame.origin.x];
labelY.text = [NSString stringWithFormat:@"%.f", frame.origin.y];
}

13.
實作練習 3 - UIView touches
在 ViewController.m 加上 touch event，放置 Ken Class 進來
-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
CGPoint point = [[touches anyObject] locationInView:self.view];
Ken *ken = [[Ken alloc] initWithPoint:point];
[self.view addSubview:ken];
}
點選此處，
就可以放置 Ken
點選此處，
就可以放置 Ken

14.
Navigation Controller

15.
navigationItem
navigationItem：左邊按鈕、右邊按鈕、標題
按鈕 navigationItem.leftBarButtonItem = UIBarButtonItem
標題 navigationItem.titleView
加上右邊按鈕
UIBarButtonItem *btnAdd = [[UIBarButtonItem alloc] initWithTitle:@"Add"
style:UIBarButtonItemStyleBordered target:self action:nil];
self.navigationItem.rightBarButtonItem = btnAdd;
按鈕安排事件
UIBarButtonItem *btnAdd = [[UIBarButtonItem alloc]
initWithBarButtonSystemItem:UIBarButtonSystemItemAdd target:self
action:@selector(insertNewObject:)];

16.
畫面堆疊
navigationController.viewControllers
navigationController.topViewController
navigationController pushViewController:(UIViewController *) animated:(BOOL)
只能載入一般 View
navigationController presentedViewController
可以再載入另一個 UINavigationController
navigationController popViewControllerAnimated
透過 pushViewController 返回上一層
navigationController popToRootViewControllerAnimated
透過 pushViewController 返回最頂層
連接下一層畫面
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender

17.
使用 StoryBoard 處理堆疊
實作練習 nav1 - 從範本 Master-Detail Application 開始

18.
使用 StoryBoard 處理堆疊
實作練習 nav1 - 從範本 Master-Detail Application 開始

19.
使用 StoryBoard 處理堆疊
實作練習 nav2 - 從 Single View 開始

20.
使用 StoryBoard 處理堆疊
實作練習 nav2 - 從 Single View 開始

21.
TableView Controller

22.
UITableView
• 以表格式呈現資料的一個很重要類別
條列式一維表格
UIScrollView 的 subclass
可設計 static(靜態固定) 或 dynamic(動態異動資料) 表格
許多的 dataSource protocol 與 delegate protocol
可以很有效率呈現大量資料
• 如果要呈現多維資料 ？
搭配 UINavigationController 一層層延伸
• UITableViews 的種類
Plain 或 Grouped
Static 或 Dynamic
有沒有 sections

23.
UITableView
MobileHIG.pdf pp.119-128、Table View Programming Guide for iOS Table
View Styles and Accessory Views
Style: Plain tables(UITableViewStylePlain) 與 Grouped tables(UITableViewStyleGrouped)

24.
UITableView Plain Style

25.
UITableView Grouped Style

26.
UITableView Sections

27.
table-view elements
Checkmark Indicates that the row is selected
Disclosure indicator Displays another table associated with the
下一步指示器 row
Detail disclosure button Displays additional details about the row
下一步明細 in a new view
Row reorder Indicates that the row can be dragged to
another location in the table
Row insert Adds a new row to the table
Delete button control In an editing context, reveals and hides the
Delete button for a row
Delete button Deletes the row
Detail disclosure button 取得：
-(void)tableView:(UITableView *)tableView accessoryButtonTappedForRowWithIndexPath:
(NSIndexPath *)indexPath

28.
UITableViewCellStyle
Default、Subtitle、Value 1、Value 2

29.
實作練習
• static cell: table 1
table.pdf pp.9-33
• dynamic cell: table 2
table.pdf pp.34-55

30.
UITableViewDataSource
讓 UITableView 要顯示什麼
Configuring a Table View
– tableView:cellForRowAtIndexPath: required method
– numberOfSectionsInTableView:
– tableView:numberOfRowsInSection: required method
– sectionIndexTitlesForTableView:
– tableView:sectionForSectionIndexTitle:atIndex:
– tableView:titleForHeaderInSection:
– tableView:titleForFooterInSection:
Inserting or Deleting Table Rows
– tableView:commitEditingStyle:forRowAtIndexPath:
– tableView:canEditRowAtIndexPath:
Reordering Table Rows
– tableView:canMoveRowAtIndexPath:
– tableView:moveRowAtIndexPath:toIndexPath:

31.
UITableViewDelegate
讓 UITableView 要如何顯示
Managing Selections
– tableView:willSelectRowAtIndexPath:
– tableView:didSelectRowAtIndexPath:
– tableView:willDeselectRowAtIndexPath:
– tableView:didDeselectRowAtIndexPath:
Configuring Rows for the Table View
– tableView:heightForRowAtIndexPath:
– tableView:indentationLevelForRowAtIndexPath:
– tableView:willDisplayCell:forRowAtIndexPath:
Modifying the Header and Footer of Sections
– tableView:viewForHeaderInSection:
– tableView:viewForFooterInSection:
– tableView:heightForHeaderInSection:
– tableView:heightForFooterInSection:
Editing Table Rows
– tableView:willBeginEditingRowAtIndexPath:
– tableView:didEndEditingRowAtIndexPath:
– tableView:editingStyleForRowAtIndexPath:
– tableView:titleForDeleteConfirmationButtonForRowAtIndexPath:
– tableView:shouldIndentWhileEditingRowAtIndexPath:
Reordering Table Rows
– tableView:targetIndexPathForMoveFromRowAtIndexPath:toProposedIndexPath:
Copying and Pasting Row Content
– tableView:shouldShowMenuForRowAtIndexPath:
– tableView:canPerformAction:forRowAtIndexPath:withSender:
– tableView:performAction:forRowAtIndexPath:withSender:

32.
Table View Segue
- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender
{
NSIndexPath *indexPath = [self.tableView indexPathForCell:sender];
// prepare segue.destinationController to display based on information
// about my data structure corresponding to indexPath.row in indexPath.section
}
Model 資料如果異動，需要更新 UITableView
- (void)reloadData;
如果資料不多，可以更新特定幾筆
- (void)reloadRowsAtIndexPaths:(NSArray *)indexPaths
withRowAnimation:(UITableViewRowAnimation)animationStyle;

33.
實作練習
table 2

34.
http://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/IconsImages/IconsImages.html

35.
沈志宗 Stronger Shen (Appletrees)
• http://mit.com.tw
http://iphone.to
• stronger@mit.com.tw
shen@iphone.to
strongershen@gmail.com