ใช้ Tab Bar ใน iPhone OS

อีกครั้งกับ entry ง่ายๆ สำหรับผู้เริ่มต้นด้วยการใช้ Tab bar ใน iPhone, iPad

การใช้ Tab Bar ถือเป็นวิธีการหลักอันหนึ่ง ที่มักถูกเลือกมาใช้ช่วยในการจัดกลุ่ม content ของโปรแกรมออกเป็นกลุ่ม ซึ่งพบเห็นได้ทั่วไปในโปแกรมหลักๆ บน iPhone

เราจะใช้ UITabBarController ในการสร้าง Tab Bar ขึ้นมาใช้งาน ซึ่งใจความหลักแล้ว UITabBarController จะเก็บ Array ของ view controller และแสดงมันออกมานั่นเอง หรือให้มองว่ามันเป็น Array ของ View Controller ไปเลยก็ได้เหมือนกัน

หากเราเป็น reference ของ UIViewController ดูแล้วจะพบว่ามันมี property ชื่อ tabBarItem ให้เราด้วย ซึ่งนั่นทำให้เราพอจะมีขั้นตอนการสร้าง Tab Bar ขึ้นมาใช้งานในโปแกรมของเราได้คร่าวๆดังนี้

1. สร้าง UIViewController มากกว่า 1 อัน และเก็บมันลงใน Array สำหรับนำมาใส่ใน UITabBarController
2. กำหนด tab bar item ให้กับ UIViewController แต่ละอัน (ขั้นตอนนี้ไม่จำเป็นต้องทำก็ได้ แต่ควรทำ)
3. สร้าง UI TabBarController และกำหนด viewControllers ให้กับมันด้วยการนำ Array ของ UIViewController มากำหนดค่าให้

เริ่มจากสร้าง UIViewController และกำหนด UITabBarItem ให้

UIViewController *firstViewController = [[UIViewController alloc] init];

firstViewController.view.backgroundColor = [UIColor redColor];

UITabBarItem *firstTabBarItem = [[UITabBarItem alloc] initWithTabBarSystemItem: UITabBarSystemItemFeatured tag: 0];

firstViewController.tabBarItem = firstTabBarItem;

จากนั้นสร้าง UIViewController อันอื่นๆ เพิ่มอีกในลักษณะเดียวกัน (ตามตัวอย่างจะสร้าง secondViewController และ thirdViewController เพิ่มขึ้นมา) และนำมาเก็บลงไปใน NSArray ดังนี้

NSArray *viewArray = [[NSArray alloc] initWithObjects:

  firstViewController,

  secondViewController,

  thirdViewController,

  nil];

สร้าง UITabBarController ขึ้นมา และกำหนด viewArray ที่เราได้สร้างขึ้นให้กับมัน พร้อมทั้งใส่ tab bar ลงไปใน window

UITabBarController *tabBarController = [[UITabBarController alloc] init];

tabBarController.viewControllers = viewArray;

[window addSubview: tabBarController.view];

เท่านี้ก็เรียบร้อย

จะเห็นได้ว่าหากเราจะสร้าง Tab Bar ขึ้นมาใช้เอง เราไม่จำเป็นต้องพึ่ง Interface Builder  (IB) ช่วยเลยแม้แต่น้อย ซึ่งสำหรับบางคนหากมองว่าการใช้ IB ช่วยมันซับซ้อนก็อาจใช้วิธีนี้แทนก็ได้ และใช้ IBแค่การ design content ใน view เป็นหลักอย่างเดียวเลยก็ได้

Related Link from Roti

การใช้ UIScrollView

ปกติแล้วเราจะใช้ UIScrollView ช่วยในการแสดง content ที่มีขนาดใหญ่กว่าพื้นที่แสดงผล วิธีใช้งานโดยทั่วไปมีหลักการดังนี้

1. สร้าง UIScrollView
2. กำหนดขนาดของ content ที่จะแสดง (โดยมากมักใหญ่กว่าขนาดของ UIScrollView)
3. เอา view ใส่ลงไปใน UIScrollView

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

    // Override point for customization after application launch

UIImage *image = [UIImage imageNamed: @"ipad.jpg"];

UIImageView *imageView = [[UIImageView alloc] initWithImage: image];

[imageView setTag: 100];

    // Step 1

_scrollView = [[UIScrollView alloc] init];

_scrollView.frame = CGRectMake(0, 0, 320, 480 - 20);

    // Step 2

_scrollView.contentSize = image.size;

    // Step 3

[_scrollView addSubview: imageView];

[imageView release];

UIViewController *mainViewController = [[UIViewController alloc] init];

[mainViewController.view addSubview: _scrollView];

[_scrollView release];

[window addSubview: mainViewController.view];

[mainViewController release];

    [window makeKeyAndVisible];

return YES;

}

_scrollView เป็น ivar เอาไว้อ้างถึงในภายหลัง เท่านี้เราก็จะได้ scrollview ที่เลื่อน content ข้างในไปมาได้แล้ว

จากตัวอย่างด้านบน เราใช้ UIScrollView เพื่อแสดงรูป ถึงตรงนี้ เรายังไม่สามารถใช้ 2 นิ้วซูมรูป (zoom) เข้า/ออก เพื่อย่อขยายรูปได้อย่างที่เคยทำได้ใน Photo Gallery เพื่อที่จะทำแบบนั้นได้ ให้เพิ่ม code ลงไปดังนี้

เริ่มจากกำหนด delegate ให้กับ _scrollView ก่อน

_scrollView.delegate = self;

จากนั้นกำหนดขนาดเล็กสุดของรูปที่จะถูกย่อได้ และขนาดใหญ่สุดของรูปที่จะถูกขยายได้ จากตัวอย่างกำหนดให้ขนาดเล็กสุด เป็นขนาดพอดีกับความกว้างของพื้นที่แสดงผล และขนาดใหญ่สุดคือ 10 เท่าของรูป ดังนี้

    float minScale  = [_scrollView frame].size.width  / [imageView frame].size.width;

_scrollView.minimumZoomScale = minScale;

_scrollView.maximumZoomScale = 10;

และ implemente delegate method ดังนี้

- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView {

    UIView *view = nil;

    if (scrollView == _scrollView) {

        view = [_scrollView viewWithTag:100];

    }

    return view;

}

จาก code เราจะ return view ที่เราจะย่อ/ขยายมันกลับออกไป โดยเรียก view นั้นอิงจาก tag ที่เราแปะไว้ให้ในตอนแรก เท่านี้ก็เป็นอันเรียบร้อย

ตัวอย่าง

Related Link from Roti

รูปถ่ายเมื่อปีที่แล้ว

ปีนี้ไปต่างจังหวัดไม่ได้ถ่ายรูปอะไรเท่าไหร่เลย เพราะอากาศร้อนมาก เลยไม่ได้ออกไปทำกิจกรรมที่เน้นถ่ายรูปเท่าไหร่

ส่วนปีที่แล้วกลับบ้านช่วงสงกรานต์ได้ไปถ่ายรูปในแบบที่ไม่เคยถ่าย ได้เซ็ตนี้มา
ตอนนั้นคิดว่ารูปการทำกิจกรรมแบบชาวบ้านๆ งมหาปลาในสระน้ำกลางทุ่งหายากมาก ไม่ค่อยเห็นใครสนใจจะไปถ่ายสักเท่าไหร่ เลยตัดสินใจลุยทุ่งไปบันทึกภาพเก็บไว้สักหน่อย

ตอนที่ไปเก็บภาพเหล่านี้ผมได้เรียนรู้อะไรหลายๆ อย่างที่คนที่อยู่แต่ในเมืองอย่างผม ไม่รู้ ทำไม่เป็น และไม่เคยรู้มาก่อนเลย

จริงๆ อยากหาโอกาสไปลุยทุ่งถ่ายรูปตอนชาวบ้านดำนากันหลังแข็งกลางทุ่ง ตากแดดร้อนๆ บ้างเหมือนกัน

เห็นว่าใน Flickr มัน embed Flash ได้ด้วย เลยลองเอามาแปะดูหน่อย ได้หน้าตาแบบนี้มา

รูปทั้งหมดในเซ็ตนี้ http://www.flickr.com/photos/khomkrit/sets/72157616535986161/

Related Link from Roti