Diese Präsentation wurde erfolgreich gemeldet.
Die SlideShare-Präsentation wird heruntergeladen. ×
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Nächste SlideShare
I os 11
I os 11
Wird geladen in …3
×

Hier ansehen

1 von 35 Anzeige

Weitere Verwandte Inhalte

Ähnlich wie 004 (20)

Anzeige

Aktuellste (20)

004

  1. 1. 資策會行動開發學院 iPhone/iPad App 設計開發 沈志宗 stronger@mit.com.tw
  2. 2. 2012/11/19 iOS 語法基礎 使用者介面綜觀 • ViewController • Navigation Controller • TableView Controller
  3. 3. ViewController
  4. 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. 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. 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. 7. 實作練習 1, 2 • 三種 UIView 轉場 • 使用 + (void)transitionWithView 將上次的 Project UIPickerView 改成滑上/滑下
  8. 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. 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. 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. 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. 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. 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. 14. Navigation Controller
  15. 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. 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. 17. 使用 StoryBoard 處理堆疊 實作練習 nav1 - 從範本 Master-Detail Application 開始
  18. 18. 使用 StoryBoard 處理堆疊 實作練習 nav1 - 從範本 Master-Detail Application 開始
  19. 19. 使用 StoryBoard 處理堆疊 實作練習 nav2 - 從 Single View 開始
  20. 20. 使用 StoryBoard 處理堆疊 實作練習 nav2 - 從 Single View 開始
  21. 21. TableView Controller
  22. 22. UITableView • 以表格式呈現資料的一個很重要類別 條列式一維表格 UIScrollView 的 subclass 可設計 static(靜態固定) 或 dynamic(動態異動資料) 表格 許多的 dataSource protocol 與 delegate protocol 可以很有效率呈現大量資料 • 如果要呈現多維資料 ? 搭配 UINavigationController 一層層延伸 • UITableViews 的種類 Plain 或 Grouped Static 或 Dynamic 有沒有 sections
  23. 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. 24. UITableView Plain Style
  25. 25. UITableView Grouped Style
  26. 26. UITableView Sections
  27. 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. 28. UITableViewCellStyle Default、Subtitle、Value 1、Value 2
  29. 29. 實作練習 • static cell: table 1 table.pdf pp.9-33 • dynamic cell: table 2 table.pdf pp.34-55
  30. 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. 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. 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. 33. 實作練習 table 2
  34. 34. http://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/IconsImages/IconsImages.html
  35. 35. 沈志宗 Stronger Shen (Appletrees) • http://mit.com.tw http://iphone.to • stronger@mit.com.tw shen@iphone.to strongershen@gmail.com

Hinweis der Redaktion

  • \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

×