• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
004
 

004

on

  • 1,201 views

 

Statistics

Views

Total Views
1,201
Views on SlideShare
1,201
Embed Views
0

Actions

Likes
0
Downloads
6
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

004 004 Presentation Transcript

  • 資策會行動開發學院iPhone/iPad App 設計開發沈志宗 stronger@mit.com.tw
  • 2012/11/19 iOS 語法基礎 使用者介面綜觀• ViewController• Navigation Controller• TableView Controller
  • ViewController
  • 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
  • UIView 轉場針對某個 UIView 進行轉場 (實作 view1Trans)+ (void)transitionWithView:(UIView *)view duration:(NSTimeInterval)durationoptions:(UIViewAnimationOptions)options animations:(void (^)(void))animations completion:(void (^)(BOOL finished))completion由一個 UIView 轉到另一個 UIView (實作 view2Trans)+ (void)transitionFromView:(UIView *)fromView toView:(UIView *)toViewduration:(NSTimeInterval)duration options:(UIViewAnimationOptions)optionscompletion:(void (^)(BOOL finished))completion使用 Quartz 2D
  • Quartz 2D1. Targets Build Phase 的 Link Binary 需加入 QuartzCore.framework2. 需 #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"];
  • 實作練習 1, 2• 三種 UIView 轉場• 使用 + (void)transitionWithView 將上次的 Project UIPickerView 改成滑上/滑下
  • UIView / UIViewControllerUIView 畫面的產生CGPoint、CGSize、CGRectCGPointMake(x,y)CGSizeMake(width,height)CGRectMake(x,y, width,height)UIView 方法- (void)addSubview:(UIView *)view- (void)removeFromSuperview- (void)bringSubviewToFront:(UIView *)viewUIViewController 事件的處理- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
  • 實作練習 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
  • 實作練習 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]; 接下頁
  • 實作練習 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;}
  • 實作練習 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];}
  • 實作練習 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
  • Navigation Controller
  • navigationItemnavigationItem:左邊按鈕、右邊按鈕、標題按鈕 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:selfaction:@selector(insertNewObject:)];
  • 畫面堆疊navigationController.viewControllersnavigationController.topViewControllernavigationController pushViewController:(UIViewController *) animated:(BOOL)只能載入一般 ViewnavigationController presentedViewController可以再載入另一個 UINavigationControllernavigationController popViewControllerAnimated透過 pushViewController 返回上一層navigationController popToRootViewControllerAnimated透過 pushViewController 返回最頂層連接下一層畫面- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender
  • 使用 StoryBoard 處理堆疊實作練習 nav1 - 從範本 Master-Detail Application 開始
  • 使用 StoryBoard 處理堆疊實作練習 nav1 - 從範本 Master-Detail Application 開始
  • 使用 StoryBoard 處理堆疊實作練習 nav2 - 從 Single View 開始
  • 使用 StoryBoard 處理堆疊實作練習 nav2 - 從 Single View 開始
  • TableView Controller
  • UITableView• 以表格式呈現資料的一個很重要類別 條列式一維表格 UIScrollView 的 subclass 可設計 static(靜態固定) 或 dynamic(動態異動資料) 表格 許多的 dataSource protocol 與 delegate protocol 可以很有效率呈現大量資料• 如果要呈現多維資料 ? 搭配 UINavigationController 一層層延伸• UITableViews 的種類 Plain 或 Grouped Static 或 Dynamic 有沒有 sections
  • UITableViewMobileHIG.pdf pp.119-128、Table View Programming Guide for iOS TableView Styles and Accessory ViewsStyle: Plain tables(UITableViewStylePlain) 與 Grouped tables(UITableViewStyleGrouped)
  • UITableView Plain Style
  • UITableView Grouped Style
  • UITableView Sections
  • table-view elementsCheckmark Indicates that the row is selectedDisclosure indicator Displays another table associated with the下一步指示器 rowDetail disclosure button Displays additional details about the row下一步明細 in a new viewRow reorder Indicates that the row can be dragged to another location in the tableRow insert Adds a new row to the tableDelete button control In an editing context, reveals and hides the Delete button for a rowDelete button Deletes the row Detail disclosure button 取得: -(void)tableView:(UITableView *)tableView accessoryButtonTappedForRowWithIndexPath: (NSIndexPath *)indexPath
  • UITableViewCellStyleDefault、Subtitle、Value 1、Value 2
  • 實作練習• static cell: table 1 table.pdf pp.9-33• dynamic cell: table 2 table.pdf pp.34-55
  • 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:
  • 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:
  • 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;
  • 實作練習 table 2
  • http://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/IconsImages/IconsImages.html
  • 沈志宗 Stronger Shen (Appletrees)• http://mit.com.tw http://iphone.to• stronger@mit.com.tw shen@iphone.to strongershen@gmail.com