การใช้ 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