iPhone: Zoom Image with UIScrollView

iPhone: Zoom Image with UIScrollView

เรายังอยู่กับเรื่องของ UIScrollView อยู่นะครับ บทความนี้จะนำเสนอเรื่องของการย่อ/ขยายภาพ กันนะครับว่ามีวิธีทำยังไง จะว่ากันไปแล้วนั้นวิธีการเขียนโปรแกรม ย่อ/ขยายภาพ มีวิธีการทำอยู่เยอะพอสมควร แล้วแต่เทคนิคของแต่ละคนครับ บ้างคนก็ชอบอะไรง่ายๆ ก้อใช้ UIScrollView แต่บางคนชอบลงลึกก็ใช้ Touch Event หรือไม่ก้อเขียนเองทั้งหมดเลย ไม่ใช้ API ที่มีให้ แต่บทความนี้เราเอาเรื่องอะไรที่ง่ายๆ ก่อนดีกว่าครับ มาเริ่มกันเลย

หลักๆ ของการใช้งาน ย่อ/ขยาย (zoom) ภาพคือ การใส่ภาพ UIImageView ลงใน UIScrollView และเซ็ตค่า max min zoom scale ให้กับ UIScrollView จากนั้น ไปที่ delegate function viewForZoomingInScrollView ของ UIScrollView เพื่อ return UIImageView ออกมา เป็นอันเสร็จครับ เรามาไล่ดูกันทีละขั้นนะครับ

1) เริ่มแรก การสร้าง UIImageView จากภาพที่เราเตรียมเอาไว้ ผมเตรียมภาพ image.png เอาไว้ใช้เป็นตัวอย่าง และสร้าง UIScrollView เอาไว้รองรับภาพ ในฟังก์ชั่น viewDidLoad

- (void)viewDidLoad{

[super viewDidLoad];
//สร้าง UIScrollView
UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, 320, 460)];

//สร้าง UIImageView
UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"image.png"]];
[scrollView addSubview:imageView];

//เซ็ตค่า UIScrollView
[scrollView setContentSize:imageView.frame.size];
[scrollView setDelegate:self];
[scrollView setMaximumZoomScale:5.0f];
[scrollView setMinimumZoomScale:0.2f];
//[scrollView setZoomScale:3.5f];

[self.view addSubview:scrollView];

[imageView release];
[scrollView release];
}

2) ทำการเซ็ตค่าต่างๆ ของ UIScrollView เพื่อให้รองรับการ zoom ภาพ

//เซ็ตค่า UIScrollView
[scrollView setContentSize:imageView.frame.size];
[scrollView setDelegate:self];
[scrollView setMaximumZoomScale:5.0f];
[scrollView setMinimumZoomScale:0.2f];
//[scrollView setZoomScale:3.5f];

ฟังก์ชั่น setContentSize:(CGSize) คือฟังก์ชั่นที่ให้เราเซ็ตขนาด (width x height) ของการบรรจุวิวลงใน UIScrollView

ฟังก์ชั่น setDelegate:self เราต้องเซ็ต delegate ด้วยนะครับ เพื่อใช้ฟังก์ชั่น

ในไฟล์ .h เขียน implement <UIScrollViewDelegate>

@interface DemoZoomPhotoViewController : UIViewController <UIScrollViewDelegate>{

}

@end

ในไฟล์ .m เขียน implement function viewForZoomingInScrollView

-(UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView{
return [[scrollView subviews] objectAtIndex:0];//return UIImageView ซึ่งเรารู้อยู่แล้วว่ามันอยู่ index ที่ 0
}

ฟังก์ชั่น setMaximum, setMinimum ZoomScale:(CGFloat) คือฟังก์ชั่นการกำหนดค่า การ zoom ได้สูงสุด/ต่ำสุด กี่เท่า

ฟังก์ชั่น setZoomScale:(CGFloat) คือฟังก์ชั่นการกำหนดค่าการ zoom เริ่มต้น

3) เพิ่ม UIScrollView ใส่ใน self.view

[self.view addSubview:scrollView];

//release objet
[imageView release];
[scrollView release];

ทำนี้ก้อเรียบร้อยครับ เสร็จแล้วก้อรันดูผลลัพธ์ได้เลย หากเราเปิดดูบน simulator ก้อกด alt ค้างไว้แล้วก้อกดเมาส์ค้างเพื่อ zoom นะครับ

ก็เป็นอันเรียบร้อยไปแล้วนะครับ สำหรับอีกหนึ่ง tutorial ง่ายๆ สำหรับการ zoom image บน iOS ด้วยการใช้ UIScrollView แต่วิธีการ zoom ยังมีทริคและวิธีทำในแบบอื่นๆ อีกเยอะครับ ลองศึกษาจากลิ้งที่ผมเอาไว้ให้ก็ได้นะครับ แต่เรื่องของการนำ UIScrollView มาประยุกต์ใช้ยังไม่หมดเพียงเท่านี้ ต่อไปเราจะมาลองดูกันสิว่าหาก UIScrollView ใส่วิวที่ซับซ้อนยิ่งกว่านี้จะมีผลอย่างไรต่อการ zoom หรือไม่ ติดตามในบทความถัดไปนะครับ

Reference

วิธีการทำ zoom image แบบต่างๆ

• http://stackoverflow.com/questions/2135744/iphone-uiimageview-pinch-zoom
• http://stackoverflow.com/questions/500027/how-to-zoom-in-out-an-uiimage-object-when-user-pinches-screen
• http://www.iphonesdkarticles.com/2008/09/multi-touch-tutorial-3.html

adaydesign :)