ใช้ Split View ใน iPad

ใน iPad มี UI แบบใหม่ๆ ที่เราไม่เคยได้ใช้ใน iPhone เพิ่มเข้ามาด้วย หลักๆ ที่เรามักเห็นในโปรแกรมทั่วไปก็คือ Popover และ Split View

Split View ช่วยให้เราแบ่งหน้าจอการทำงานออกเป็น 2 ข้าง โดย panel ทางด้านซ้ายจะมีความกว้างตายตัวคือ 320 pixels ส่วน panel ทางขวา นั้นจะกว้างตามขนาดของหน้าจอที่เหลือ โดยทั่วไปเมื่อหน้าจอเป็น landscape แล้ว split view จะแสดงทั้ง 2 pane (ต่อไปจะเรียก pane ทางซ้ายว่า Master pane และเรียก pane ทางขวาว่า Detail pane) แต่หากเรา rotate หน้าจอเป็น portrait แล้ว master pane ก็จะหายไปเหลือแต่ detail pane ที่ยังอยู่

โดยทั่วไป หากเราต้องการใช้งาน master pane ที่หายไปใน portrait mode จะใช้้วิธีเพิ่มปุ่มลงไปที่ toolbar/navigation bar ของ detail pane และเมื่อกดปุ่มนั้นแล้ว pane ทางซ้ายจะถูกแสดงขึ้นมาใน Popover view ดังรูปด้านล่าง

Popover view จะเป็นหน้าต่างเล็กๆที่จะแสดงขึ้นมาเมื่อเรากดปุ่มอะไรบางอย่าง โดยพบเห็นได้ทั่วไปในโปรแกรมที่มีการใช้ split view อยู่แล้ว

และนี่คือลักษณะโดยทั่วไปของการใช้งาน split view เป็น landscape mode จะแสดงทั้งสอง pane หากเป็น portrait จะแสดงแค่ detail pane และเมื่อมีการกดปุ่มที่ toolbar/navigation bar จะแสดง popover view ออกมา ซึ่งในนั้นบรรจุ master pane อยู่ด้านใน ดังรูปด้านล่าง

สำหรับตัวอย่างของ split pane ให้หาดูได้จากโปรแกรมอย่างเช่น Notes และ Mail ที่ติดมากับ iPad

ลองใช้ Split View กันดีกว่า

หลักการก็คือ สร้าง split view ขึ้นมาจาก UISplitViewController จากนั้นสร้าง view controller อีก 2 ตัว และนำมากำหนดค่าให้กับ viewControllers ซึ่งเป็น peoperty ของ UISplitViewController จากนั้นนำ split view โยนลงไปใน window ก็เป็นอันเสร็จเรียบร้อย

จากขั้นตอนดังกล่าวเราจะได้ code หน้าตาประมาณนี้

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {    

    // Override point for customization after application launch

_masterViewController = [[MainViewController alloc] init];

_masterViewController.contentSizeForViewInPopover = CGSizeMake(320.0, 600.0);

_masterViewController.view.backgroundColor = [UIColor lightGrayColor];

_detailViewController = [[DetailViewController alloc] init];

_detailViewController.view.backgroundColor = [UIColor grayColor];

_navigationController = [[UINavigationController alloc] initWithRootViewController: _masterViewController];

_detailNavigationController = [[UINavigationController alloc] initWithRootViewController: _detailViewController];

_splitVC = [[UISplitViewController alloc] init];

_splitVC.viewControllers = [NSArray arrayWithObjects: _navigationController, _detailNavigationController, nil];

_splitVC.delegate = self;

[window addSubview: _splitVC.view];

        [window makeKeyAndVisible];

    

    return YES;

}

ดังที่กล่าวมาแล้วว่าโดยทั่วไปหากมีการแสดงผลใน portrait mode แล้ว master pane จะหายไป และควรจะมีปุ่มแปะที่ toolbar/ navigation bar ของ detail pane เพื่อเอาไว้เรียกใช้ master pane ที่หายไปขึ้นมาใช้งานได้ใหม่ ดังนั้นส่วนที่น่าจับตามองก็คือ ส่วนนี้

_masterViewController.contentSizeForViewInPopover = CGSizeMake(320.0, 600.0);

master view จะถูกแสดงขึ้นมาใน popover view และนี่เป็นการกำหนดว่าหาก view นี้ถูกแสดงขึ้นมาด้วย Popover view แล้วจะให้มีขนาดเป็นเท่าไหร่

จังหวะในการเพิ่มปุ่มที่ detail pane เพื่อใช้สำหรับเรียก master view ขึ้นมาเวลาอยู่ใน portrait mode เราจะทำใน split view delegate  method 2 method นี้

- (void)splitViewController: (UISplitViewController*)svc willHideViewController:(UIViewController *)aViewController withBarButtonItem:(UIBarButtonItem*)barButtonItem forPopoverController: (UIPopoverController*)pc {

    barButtonItem.title = @"Master List";

    [_detailNavigationController.navigationBar.topItem setLeftBarButtonItem:barButtonItem animated:YES];

    _popoverController = pc;

}

delegate method ด้านบนจะทำงานเมื่อ pane ทางซ้ามือต้องหายไปใน portrait mode

โดยเราจะได้รับ bar button item ที่พร้อมตอบรับกับการถูกกด และแสดง popover view ขึ้นมาให้ เราเพียงแค่กำหนด title ให้มันเท่านั้นว่าจะให้้มันมี title ว่าอย่างไร

จากนั้นเก็บ pc (popover controller) ที่ถูกส่งเข้ามาไว้ใช้งานต่อไปในเหตุการณ์ด้านล่างนี้

- (void)splitViewController: (UISplitViewController*)svc willShowViewController:(UIViewController *)aViewController invalidatingBarButtonItem:(UIBarButtonItem *)barButtonItem {

    

    [_detailNavigationController.navigationBar.topItem setLeftBarButtonItem:nil animated:YES];

    _popoverController = nil;

}

delegate method ด้านบนจะทำงานเมื่อการแสดงผลกลับไปสู่ landscape mode และ master pane กำลังกลับมา จากโค๊ดเราจะเอา left bar button item ออกจาก detail pane พร้อมทั้งสั่งกำหนด popover controller ที่เราเคยเก็บไว้ให้เป็น nil ไปซะ

เพียงเท่านี้เราก็จะได้การใช้งาน split view ร่วมกับ popover view มาใช้อย่างง่ายๆแล้ว

อ่านต่อ: Creating a Split View Interface

download source code ตัวอย่าง ได้ที่นี่

Related Link from Roti