I os 11

785 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
785
On SlideShare
0
From Embeds
0
Number of Embeds
21
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

I os 11

  1. 1. Class 11iOS 應⽤用軟體設計
  2. 2. 內容⼤大綱• UISplitViewController • QV116:UISplitViewController 基本原理 • QV118: UISplitViewController 結合 Navigation, TableView及資 料顯⽰示等綜合應⽤用 • Samples:MultipleDetailViews • Samples:Websites• UIPopoverController • QV117:UIPopoverController 基本原理 • Samples:Popovers • QV120:UIPopoverController使⽤用 Protocol 之 delegate• UIPageViewController • QV113:UIPageViewController 基本原理 (多⾴頁⾯面翻書程式)
  3. 3. UISplitViewControllerUIPopoverControllerUIPageViewController
  4. 4. for iPadUISplitViewController
  5. 5. Split View Controllers (iPad)
  6. 6. 範例: QV116UISplitViewController 基本原理
  7. 7. Project QV116 UISplitViewController 於 iPad 上使⽤用
  8. 8. 兩組畫⾯面 ViewController AppDelegate.h#import <UIKit/UIKit.h>@class ViewController;@class DetailViewController;@interface AppDelegate : UIResponder <UIApplicationDelegate>@property (strong, nonatomic) UIWindow *window;@property (strong, nonatomic) ViewController *viewController;@property (strong, nonatomic) DetailViewController *detailController;@property (strong, nonatomic) UISplitViewController *splitViewController;@end 另建⼀一個 UISplitViewController
  9. 9. AppDelegate.m#import "ViewController.h"#import "DetailViewController.h"@implementation AppDelegate- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions{ self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]]; // Override point for customization after application launch. self.viewController = [[ViewController alloc] initWithNibName:@"ViewController" bundle:nil]; self.detailController = [[DetailViewController alloc] initWithNibName:@"DetailViewController" bundle:nil]; splitViewController = [[UISplitViewController alloc] init]; splitViewController.viewControllers = [NSArray arrayWithObjects: self.viewController, self.detailController, nil]; [self.window addSubview:splitViewController.view]; //self.window.rootViewController = self.viewController; [self.window makeKeyAndVisible]; return YES;} ⽤用陣列指定內容並加⼊入 window
  10. 10. 直向時只看到⼀一個畫⾯面 橫向時會顯⽰示分割畫⾯面
  11. 11. 問題討論其實什麼內容都沒有,然後呢?
  12. 12. 範例: QV118 UISplitViewController 結合 Navigation, TableView 及資料顯⽰示等綜合應⽤用
  13. 13. Project QV118由新增專案 Master-DetailApp 開始(使⽤用 Storyboard 及 iPad)增加 Master View 的清單增加 Detail View 的連結 
  14. 14. 執⾏行,測試結果(注意:包含直向及橫向)
  15. 15. 檢查 Storyboard
  16. 16. SplitViewController 指定了兩個畫⾯面
  17. 17. 準備以程式進⾏行 MasterViewController 內部的 Table View 需指定
  18. 18. MasterViewController.h#import <UIKit/UIKit.h>@class DetailViewController;@interface MasterViewController : UITableViewController{ NSArray *bookArray;} 資料陣列,給 TableView ⽤用@property (strong, nonatomic) DetailViewController *detailViewController;@end
  19. 19. MasterViewController.m- (void)viewDidLoad{ [super viewDidLoad]; // 定義要呈現的項⺫⽬目清單 bookArray = [[NSArray alloc] initWithObjects:@"書劍恩仇錄", @"碧⾎血劍",@"射鵰英雄傳", @"雪⼭山飛狐", @"神鵰俠侶", @"飛狐外傳", @"⽩白⾺馬嘯⻄西⾵風", @"鴛鴦⼑刀",@"倚天屠⻯⿓龍記", @"連城訣", @"天⻯⿓龍⼋八部", @"俠客⾏行", @"笑傲江湖", @"⿅鹿⿍鼎記", nil]; self.navigationItem.leftBarButtonItem = self.editButtonItem; UIBarButtonItem *addButton = [[UIBarButtonItem alloc]initWithBarButtonSystemItem:UIBarButtonSystemItemAdd target:selfaction:@selector(insertNewObject:)]; self.navigationItem.rightBarButtonItem = addButton; 要顯⽰示的清單 self.detailViewController = (DetailViewController *)[[self.splitViewController.viewControllers lastObject] topViewController]; // 初始即選擇到某區某列 (注意:不會觸發 UITableViewDelegate 的 method) [self.tableView selectRowAtIndexPath: [NSIndexPath indexPathForRow:0 inSection:0] animated:NO scrollPosition:UITableViewScrollPositionMiddle];}
  20. 20. MasterViewController.m- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{ //return _objects.count; return [bookArray count];}- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{ static NSString *cellIdentifier = @"CellIdentifier"; UITableViewCell *cell = [tableViewdequeueReusableCellWithIdentifier:cellIdentifier]; if(cell==nil) { cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefaultreuseIdentifier:cellIdentifier]; } cell.textLabel.text = [bookArray objectAtIndex:indexPath.row]; return cell;}
  21. 21. ⼀一些畫⾯面顯⽰示⽂文字,需注意會在何處...#pragma mark - Split view- (void)splitViewController:(UISplitViewController *)splitController willHideViewController:(UIViewController *)viewController withBarButtonItem:(UIBarButtonItem *)barButtonItemforPopoverController:(UIPopoverController *)popoverController{ barButtonItem.title = NSLocalizedString(@"顯⽰示作品清單", @"Master"); [self.navigationItem setLeftBarButtonItem:barButtonItem animated:YES]; self.masterPopoverController = popoverController;}
  22. 22. MasterViewController.m- (void)viewDidLoad{ [super viewDidLoad]; // 定義要呈現的項⺫⽬目清單 bookArray = [[NSArray alloc] initWithObjects:@"書劍恩仇錄", @"碧⾎血劍",@"射鵰英雄傳", @"雪⼭山飛狐", @"神鵰俠侶", @"飛狐外傳", @"⽩白⾺馬嘯⻄西⾵風", @"鴛鴦⼑刀",@"倚天屠⻯⿓龍記", @"連城訣", @"天⻯⿓龍⼋八部", @"俠客⾏行", @"笑傲江湖", @"⿅鹿⿍鼎記", nil]; self.navigationItem.leftBarButtonItem = self.editButtonItem; UIBarButtonItem *addButton = [[UIBarButtonItem alloc]initWithBarButtonSystemItem:UIBarButtonSystemItemAdd target:selfaction:@selector(insertNewObject:)]; self.navigationItem.rightBarButtonItem = addButton; self.detailViewController = (DetailViewController *)[[self.splitViewController.viewControllers lastObject] detail 的內容topViewController]; // 初始即選擇到某區某列 (注意:不會觸發 UITableViewDelegate 的 method) [self.tableView selectRowAtIndexPath:[NSIndexPath indexPathForRow:0inSection:0] animated:NOscrollPosition:UITableViewScrollPositionMiddle]; self.detailViewController.detailItem = @"陳家洛、霍⻘青桐、⾹香⾹香公主";}
  23. 23. - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{ //NSDate *object = [_objects objectAtIndex:indexPath.row]; //self.detailViewController.detailItem = object;! switch (indexPath.row) {! ! case 0:! ! ! self.detailViewController.detailItem = @"陳家洛,霍⻘青桐,⾹香⾹香公主";! ! ! break;! ! case 1:! ! ! self.detailViewController.detailItem = @"袁崇煥,⾦金蛇郎君";! ! ! break;! ! case 2:! ! ! self.detailViewController.detailItem = @"郭靖,⻩黄蓉,⿈黃藥師,歐陽鋒";! ! ! break;! ! case 3:! ! ! self.detailViewController.detailItem = @"胡斐";! ! ! break;! ! *** 省略部分程式 ***! ! default:! ! ! break;! }}
  24. 24. 執⾏行測試...
  25. 25. 問題討論往前邁進⼀一⼤大步!但道路還很遠......
  26. 26. 範例觀摩:MultipleDetailViews
  27. 27. 範例觀摩:WebView Source: (書附範例) iPad 應⽤用開發實戰 (李晨)
  28. 28. for iPadUIPopoverController
  29. 29. Project QV117 UIPopoverController
  30. 30. 內容畫⾯面置於⼀一個ViewController 內
  31. 31. ViewController.h#import <UIKit/UIKit.h>@interface ViewController : UIViewController <UIPopoverControllerDelegate>{ UIPopoverController *popController;}- (IBAction) showPopover:(id)sender; 使⽤用協定@end
  32. 32. #import "ViewController.h"#import "PopoverContentViewController.h" ViewController.m@implementation ViewController- (IBAction) showPopover:(id)sender{ PopoverContentViewController *content = [[PopoverContentViewController alloc] init];! // 取得按鈕 UIButton *tappedButton = (UIButton *)sender; 設置內容 // 設置 popover popController = [[UIPopoverController alloc] initWithContentViewController:content]; // 設定 popover 內容尺⼨寸,若空間不夠放,會⾃自動縮⼩小! popController.popoverContentSize = CGSizeMake(256, 256); 指定位置! popController.delegate = self; [popController presentPopoverFromRect:tappedButton.frame inView:self.view 彈出顯⽰示 permittedArrowDirections:UIPopoverArrowDirectionAny animated:YES];}
  33. 33. 補充說明如何決定彈出⽅方框的位置,以及箭頭的⽅方向?彈出⽅方框內為獨⽴立的 UIViewController,此內部若有事件,該如何做?( 有難度)
  34. 34. 範例觀摩:Popovers
  35. 35. 範例: QV120 UIPopoverController使⽤用 Protocol 之 delegate 程式寫法
  36. 36. Project QV120 延伸 QV117 UIPopoverController delegate / protocol 的 程式寫法
  37. 37. 彈出之內容畫⾯面
  38. 38. (2)設定遵循協定 (4) 開啟彈出畫⾯面 主要畫⾯面 (3)實作代理⽅方法 ViewController 彈出控制器 UIPopoverController (5) 執⾏行傳回資料(1)在此定義出協定 彈出之內容畫⾯面 (呼叫代理⽅方法) PopoverContentViewCotroller
  39. 39. PopoverContentViewController.h#import <UIKit/UIKit.h>@protocol DismissPopoverDelegate <NSObject> 定義出協定 - (void) dismissWithData:(NSString *)data;@end 1@interface PopoverContentViewController : UIViewController{ __unsafe_unretained id <DismissPopoverDelegate> delegate;}@property (nonatomic, assign) __unsafe_unretainedid<DismissPopoverDelegate> delegate;- (IBAction) sendBack:(id)sender;- (IBAction) sendBack2:(id)sender; 定義出協定- (IBAction) sendBack3:(id)sender;@end
  40. 40. ViewController.h#import <UIKit/UIKit.h>#import "PopoverContentViewController.h"@interface ViewController : UIViewController<UIPopoverControllerDelegate, DismissPopoverDelegate>{ UIPopoverController *popController; 2 IBOutlet UILabel *display;} 使⽤用協定- (IBAction) showPopover:(id)sender;@end
  41. 41. ViewController.m- (void) dismissWithData:(NSString *)data{ display.text = [NSString stringWithFormat:@"收到資料 %@", data]; [popController dismissPopoverAnimated:YES];} 3 實作協定
  42. 42. #import "ViewController.h"#import "PopoverContentViewController.h" ViewController.m@implementation ViewController 4- (IBAction) showPopover:(id)sender{ PopoverContentViewController *content =[[PopoverContentViewController alloc] init]; content.delegate = self; 在此指定 "內容畫⾯面物件" // 取得按鈕 UIButton *tappedButton = (UIButton *)sender; 的代理⼈人 // 設置 popover popController = [[UIPopoverController alloc]initWithContentViewController:content]; // 設定 popover 內容尺⼨寸,若空間不夠放,會⾃自動縮⼩小 //popController.popoverContentSize = CGSizeMake(256, 256); popController.delegate = self; [popController presentPopoverFromRect:tappedButton.frame inView:self.view permittedArrowDirections:UIPopoverArrowDirectionAny animated:YES];}
  43. 43. PopoverContentViewController.m#import "PopoverContentViewController.h"@implementation PopoverContentViewController@synthesize delegate;- (IBAction) sendBack:(id)sender{ 5 [self.delegate dismissWithData:@"1"];} 透過代理⼈人- (IBAction) sendBack2:(id)sender{ 傳遞資料 [self.delegate dismissWithData:@"2"];}- (IBAction) sendBack3:(id)sender{ [self.delegate dismissWithData:@"3"];}
  44. 44. UIPageViewController
  45. 45. Delegate method• UIPageViewControllerDelegate• UIPageViewControllerDataSource
  46. 46. 範例: QV113UIPageViewController 基本原理
  47. 47. Project QV113 UIPageViewController 多個⾴頁⾯面的翻書程式
  48. 48. 新增每⾴頁內容的畫⾯面 ContentViewControllerContentViewController.h#import <UIKit/UIKit.h> ⾴頁⾯面內顯⽰示@interface ContentViewController : UIViewController{ WebView}@property (strong, nonatomic) IBOutlet UIWebView *webView;@property (strong, nonatomic) id dataObject;@end
  49. 49. ContentViewController.xib加⼊入 WebView 以顯⽰示資料
  50. 50. ContentViewController.m 於每次翻⾴頁時, 將 dataObject 內容 指定到 WebView@implementation ContentViewController@synthesize webView, dataObject;- (void)viewWillAppear:(BOOL)animated{ [super viewWillAppear:animated]; [webView loadHTMLString:dataObject baseURL:[NSURL URLWithString:@""]];} 寫於 ContentViewController.m 的 viewDidLoad: 也可以
  51. 51. ViewController.h Data Model#import <UIKit/UIKit.h>#import "ContentViewController.h"@interface ViewController : UIViewController<UIPageViewControllerDataSource>{ UIPageViewController *pageController; NSArray *pageContent;}@property (strong, nonatomic) UIPageViewController *pageController;@property (strong, nonatomic) NSArray *pageContent;@end
  52. 52. ViewController.m- (void) createContentPages{ NSMutableArray *pageStrings = [[NSMutableArray alloc] init]; for (int i=1; i<11; i++) { NSString *contentString = [[NSString alloc] initWithFormat:@"<html><head></head><body><h1>Chapter %d</h1><p>This is the page%d of content displayed using UIPageViewController in iOS 5.</p></body></html>", i, i]; [pageStrings addObject:contentString]; } pageContent = [[NSArray alloc] initWithArray:pageStrings];}- (void)viewDidLoad{ 將 1~10 ⾴頁內容 [super viewDidLoad]; [self createContentPages]; 儲存於陣列內 ****** 省略部分程式 ******}
  53. 53. 建⽴立兩個⽅方法,供代理 ViewController.m 程式於切換⾴頁⾯面時呼叫- (ContentViewController *)viewControllerAtIndex:(NSUInteger)index{ // Return the data view controller for the given index. if (([self.pageContent count] == 0) || (index >= [self.pageContent count])) { 指定某⼀一⾴頁,傳回建⽴立好的 return nil; } ContentViewController // Create a new view controller and pass suitable data. ContentViewController *dataViewController = [[ContentViewController alloc] initWithNibName:@"contentViewController" bundle:nil]; dataViewController.dataObject = [self.pageContent objectAtIndex:index]; return dataViewController;}- (NSUInteger)indexOfViewController:(ContentViewController *)viewController{ return [self.pageContent indexOfObject:viewController.dataObject];}
  54. 54. ViewController.m UIPageViewController 的代理⽅方法(viewControllerBeforeViewController)- (UIViewController *)pageViewController:(UIPageViewController *)pageViewController viewControllerBeforeViewController:(UIViewController *)viewController{ NSUInteger index = [self indexOfViewController: (ContentViewController *)viewController]; if ((index == 0) || (index == NSNotFound)) { return nil; } index--; return [self viewControllerAtIndex:index];}
  55. 55. ViewController.m UIPageViewController 的代理⽅方法(viewControllerAfterViewController)- (UIViewController *)pageViewController:(UIPageViewController *)pageViewController viewControllerAfterViewController:(UIViewController *)viewController{ NSUInteger index = [self indexOfViewController: (ContentViewController *)viewController]; if (index == NSNotFound) { return nil; } index++; if (index == [self.pageContent count]) { return nil; } return [self viewControllerAtIndex:index];}
  56. 56. - (void)viewDidLoad ViewController.m{ [super viewDidLoad]; [self createContentPages]; NSDictionary *options = [NSDictionary dictionaryWithObject: [NSNumber numberWithInteger:UIPageViewControllerSpineLocationMin] forKey:UIPageViewControllerOptionSpineLocationKey]; self.pageController = [[UIPageViewController alloc] initWithTransitionStyle:UIPageViewControllerTransitionStylePageCurl navigationOrientation:UIPageViewControllerNavigationOrientationHorizontal options: options]; pageController.dataSource = self; [[pageController view] setFrame:[[self view] bounds]]; ContentViewController *initialViewController = [self viewControllerAtIndex:0]; NSArray *viewControllers = [NSArray arrayWithObject:initialViewController]; [pageController setViewControllers:viewControllers direction:UIPageViewControllerNavigationDirectionForward animated:NO completion:nil]; [self addChildViewController:pageController]; [[self view] addSubview:[pageController view]]; [pageController didMoveToParentViewController:self];}
  57. 57. 問題討論An Example iOS5 iPhoneUIPageViewController Application(Source: http://www.techotopia.com/index.php/An_Example_iOS_5_iPhone_UIPageViewController_Application)
  58. 58. ............

×