資策會行動開發學院iPhone/iPad App 設計開發沈志宗 stronger@mit.com.tw
2012/11/19 iOS 語法基礎  使用者介面綜觀• ViewController• Navigation Controller• TableView Controller
ViewController
UIViewController 順序•   - (void)viewDidLoad;    實例化建立起來,也就是載入記憶體    只進入一次•   - (void)viewWillAppear:(BOOL)animated;    畫面出現...
UIView 轉場針對某個 UIView 進行轉場 (實作 view1Trans)+ (void)transitionWithView:(UIView *)view duration:(NSTimeInterval)durationoption...
Quartz 2D1.   Targets Build Phase 的 Link Binary 需加入 QuartzCore.framework2.   需 #import <QuartzCore/QuartzCore.h>     水波效果 ...
實作練習 1, 2• 三種 UIView 轉場• 使用 + (void)transitionWithView 將上次的  Project UIPickerView 改成滑上/滑下
UIView / UIViewControllerUIView 畫面的產生CGPoint、CGSize、CGRectCGPointMake(x,y)CGSizeMake(width,height)CGRectMake(x,y, width,he...
實作練習 3 - UIView touches- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event- (void)touchesMoved:(NSSet *)touch...
實作練習 3 - UIView touches     Ken.m 實作 initWithPoint:- (Ken *)initWithPoint:(CGPoint)point{    self = [super init];    if (s...
實作練習 3 - UIView touches        Ken.m 實作 initWithPoint: (續)         //設定UILabel         labelX = [[UILabel alloc] initWithF...
實作練習 3 - UIView touches     Ken.m 加上 touch event-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{    //將被觸碰...
實作練習 3 - UIView touches     在 ViewController.m 加上 touch event,放置 Ken Class 進來-(void)touchesBegan:(NSSet *)touches withEven...
Navigation Controller
navigationItemnavigationItem:左邊按鈕、右邊按鈕、標題按鈕 navigationItem.leftBarButtonItem = UIBarButtonItem標題 navigationItem.titleView加...
畫面堆疊navigationController.viewControllersnavigationController.topViewControllernavigationController pushViewController:(UIV...
使用 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(動態異動資料) 表格    許多的 data...
UITableViewMobileHIG.pdf pp.119-128、Table View Programming Guide for iOS  TableView Styles and Accessory ViewsStyle: Plain...
UITableView Plain Style
UITableView Grouped Style
UITableView Sections
table-view elementsCheckmark                                    Indicates that the row is selectedDisclosure indicator    ...
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 – numb...
UITableViewDelegate讓 UITableView 要如何顯示Managing Selections  – tableView:willSelectRowAtIndexPath:  – tableView:didSelectRow...
Table View Segue- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender{   NSIndexPath *indexPath = [self.tab...
實作練習 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@gma...
Upcoming SlideShare
Loading in …5
×

004

1,160 views

Published on

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,160
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \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

    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)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
    6. 6. 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"];
    7. 7. 實作練習 1, 2• 三種 UIView 轉場• 使用 + (void)transitionWithView 將上次的 Project UIPickerView 改成滑上/滑下
    8. 8. 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
    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. 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:)];
    16. 16. 畫面堆疊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
    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. UITableViewMobileHIG.pdf pp.119-128、Table View Programming Guide for iOS TableView Styles and Accessory ViewsStyle: Plain tables(UITableViewStylePlain) 與 Grouped tables(UITableViewStyleGrouped)
    24. 24. UITableView Plain Style
    25. 25. UITableView Grouped Style
    26. 26. UITableView Sections
    27. 27. 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
    28. 28. UITableViewCellStyleDefault、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

    ×