Your SlideShare is downloading. ×

I os 11

474
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
474
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Class 11iOS 應⽤用軟體設計
  • 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. UISplitViewControllerUIPopoverControllerUIPageViewController
  • 4. for iPadUISplitViewController
  • 5. Split View Controllers (iPad)
  • 6. 範例: QV116UISplitViewController 基本原理
  • 7. Project QV116 UISplitViewController 於 iPad 上使⽤用
  • 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. 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. 直向時只看到⼀一個畫⾯面 橫向時會顯⽰示分割畫⾯面
  • 11. 問題討論其實什麼內容都沒有,然後呢?
  • 12. 範例: QV118 UISplitViewController 結合 Navigation, TableView 及資料顯⽰示等綜合應⽤用
  • 13. Project QV118由新增專案 Master-DetailApp 開始(使⽤用 Storyboard 及 iPad)增加 Master View 的清單增加 Detail View 的連結 
  • 14. 執⾏行,測試結果(注意:包含直向及橫向)
  • 15. 檢查 Storyboard
  • 16. SplitViewController 指定了兩個畫⾯面
  • 17. 準備以程式進⾏行 MasterViewController 內部的 Table View 需指定
  • 18. MasterViewController.h#import <UIKit/UIKit.h>@class DetailViewController;@interface MasterViewController : UITableViewController{ NSArray *bookArray;} 資料陣列,給 TableView ⽤用@property (strong, nonatomic) DetailViewController *detailViewController;@end
  • 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. 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. ⼀一些畫⾯面顯⽰示⽂文字,需注意會在何處...#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. 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. - (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. 執⾏行測試...
  • 25. 問題討論往前邁進⼀一⼤大步!但道路還很遠......
  • 26. 範例觀摩:MultipleDetailViews
  • 27. 範例觀摩:WebView Source: (書附範例) iPad 應⽤用開發實戰 (李晨)
  • 28. for iPadUIPopoverController
  • 29. Project QV117 UIPopoverController
  • 30. 內容畫⾯面置於⼀一個ViewController 內
  • 31. ViewController.h#import <UIKit/UIKit.h>@interface ViewController : UIViewController <UIPopoverControllerDelegate>{ UIPopoverController *popController;}- (IBAction) showPopover:(id)sender; 使⽤用協定@end
  • 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. 補充說明如何決定彈出⽅方框的位置,以及箭頭的⽅方向?彈出⽅方框內為獨⽴立的 UIViewController,此內部若有事件,該如何做?( 有難度)
  • 34. 範例觀摩:Popovers
  • 35. 範例: QV120 UIPopoverController使⽤用 Protocol 之 delegate 程式寫法
  • 36. Project QV120 延伸 QV117 UIPopoverController delegate / protocol 的 程式寫法
  • 37. 彈出之內容畫⾯面
  • 38. (2)設定遵循協定 (4) 開啟彈出畫⾯面 主要畫⾯面 (3)實作代理⽅方法 ViewController 彈出控制器 UIPopoverController (5) 執⾏行傳回資料(1)在此定義出協定 彈出之內容畫⾯面 (呼叫代理⽅方法) PopoverContentViewCotroller
  • 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. 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. ViewController.m- (void) dismissWithData:(NSString *)data{ display.text = [NSString stringWithFormat:@"收到資料 %@", data]; [popController dismissPopoverAnimated:YES];} 3 實作協定
  • 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. 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. UIPageViewController
  • 45. Delegate method• UIPageViewControllerDelegate• UIPageViewControllerDataSource
  • 46. 範例: QV113UIPageViewController 基本原理
  • 47. Project QV113 UIPageViewController 多個⾴頁⾯面的翻書程式
  • 48. 新增每⾴頁內容的畫⾯面 ContentViewControllerContentViewController.h#import <UIKit/UIKit.h> ⾴頁⾯面內顯⽰示@interface ContentViewController : UIViewController{ WebView}@property (strong, nonatomic) IBOutlet UIWebView *webView;@property (strong, nonatomic) id dataObject;@end
  • 49. ContentViewController.xib加⼊入 WebView 以顯⽰示資料
  • 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. 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. 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. 建⽴立兩個⽅方法,供代理 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. 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. 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. - (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. 問題討論An Example iOS5 iPhoneUIPageViewController Application(Source: http://www.techotopia.com/index.php/An_Example_iOS_5_iPhone_UIPageViewController_Application)
  • 58. ............