ใช้ 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

แปลง string ให้กลายเป็น NSDate ด้วย NSDateFormatter

หากเราได้รับ input ของวันที่เข้ามาในรูปของ string ลักษณะนี้

20100405
20100406
20100407

เป็นตัวอักษร 8 หลัก ปี เดือน วัน
แล้วเราต้องการแปลงให้เป็น object ของ NSDate เพื่อให้การนำไปใช้งานสะดวกขึ้น วิธีทำก็คือใช้ NSDateFormatter ช่วย โดยกำหนด format ที่จะนำเข้าให้ date formatter ตาม pattern ที่ของ string ดังนี้

NSDateFormatter *dateFormat = [[NSDateFormatter alloc] init];
[dateFormat setDateFormat: @"yyyyMMdd"];

NSString *dateString = @"20100405";
NSDate *date = [dateFormat dateFromString: dateString];

จากนั้นลอง print date ออกมาจะได้ผลลัพธ์คือ

2010-04-05 00:00:00 +0700

หากเรายังไม่แปลง string ให้กลายมาเป็น date แล้วล่ะก็ การบวกเวลาเพิ่มเข้าไปอีก 1 วันคงไม่ใช่เรื่องง่ายนัก แต่ด้วยการที่มันอยู่ในรูปของ NSDate เราจึงใช้ method ปกติที่มีได้เลย ในที่นี่จะใช้วิธีบวกวินาทีเพิ่มเข้าไป เช่น

NSDate *tomorrow = [date addTimeInterval: 60 * 60 * 24 * 1];

เราก็จะได้ผลลัพธ์เป็นวันที่ถัดไปอีก 1 วันข้างหน้า

หรือหากต้องการแปลงกลับมาให้เป็น string ใน pattern เดิม ก็ยังสามารถใช้ method stringFromDate: ได้
และหากเราต้องการรู้อีกว่าวันนั้นตรงกับวันอะไร เราสามารถใช้ date formatter ช่วยอีกได้ ดังนี้

[dateFormat setDateFormat: @"E"];
NSString *day = [dateFormat stringFromDate: tomorrow];

ผลลัพธ์ที่ได้คือ

Tue

อ่านวิธีเขียน format string อื่นๆได้จาก ที่นีี่  :)

ขอบคุณ @katanyoo ที่ช่วยหา resource มาให้

Related Link from Roti

Filter ข้อมูลด้วย NSPredicate

หลายครั้งที่ผมมักเก็บข้อมูลต่างๆ ลง object แล้วนำ object เหล่านั้นเก็บไว้ใน array ก่อนนำมาใช้งาน ปัญหาที่พบก็คือหากต้องการลือก object บางตัวเพื่อนำมาใช้งานต้องเขียนโปรแกรมให้วิ่งเข้าไปวนรอบหาเอง

อีกวิธีหนึ่งที่่ช่วยให้เราไม่ต้องวนรอบหา object ที่ต้องการเองก็คือ ใช้ NSPredicate ช่วย ซึ่งมันจะ filter object ที่ถูกเก็บใน array โดยอิงจาก property ต่างๆของ object แทนเรา

เริ่มจากหากผมมี คลาส Person ที่มีื property ดังนี้

NSString *name;
NSString *department;
NSInteger salary;

และผมมี object ของคลาส Person หลายตัวเก็บอยู่ในตัวแปร array ยาวๆ จากนั้นหากผมต้องการเลือก object ที่มี property name เป็น "Steve Jobs" ผมจะเขียน code ได้ดังนี้

NSPredicate *predicate = [NSPredicate predicateWithFormat: 
    @"name == 'Steve Jobs'"];
[personList filterUsingPredicate: predicate];

เราจะเรียก method ชื่อ predicateWithFormat: พร้อมทั้งใส่ query string ลงไปตาม code ตัวอย่าง เท่านี้ personList ก็จะมีเฉพาะ object ของคลาส Person ที่มี name เป็น Steve Jobs แล้ว

นอกจากนี้เรายังสามารถเขียน predicate format ต่างๆ ที่ซับซ้อนกว่านี้ได้อีก โดยอ่านเพิ่มเติมได้ที่ Predicate Format String Syntax

Related Link from Roti