iPhone: Slide Photo Gallery


iPhone: Slide Photo Gallery

บทความนี้นำเสนอ Tutorial ง่ายๆ สำหรับการสร้าง Slide Photo Gallery ซึ่งสามารถเขียนได้เพียงโค้ดไม่กี่บรรทัด หลักการของ Slide Photo Gallery คือการนำ UIView ที่มีภาพหลายๆ ภาพมาใส่ใน UIScrollView และเซ็ตให้ UIScrollView ไม่ให้แสดง scrollbar และเซ็ต paging ให้กับ UIScrollView วิธีทำเป็นอย่างไรนั้นติดตามได้เลยครับ

ขั้นตอน

สิ่งที่ต้องเตรียมคือ ภาพที่จะนำมาทำการแสดงแบบ slide ผมยกตัวอย่างภาพขนาด 300×300 pixel จำนวน 8 ภาพนะครับ

1) เริ่มจากไปที่ .xib เลยนะครับ สร้าง UIView ขึ้นมาเพิ่มอีก  1 ตัว (ไม่ได้อยู่ self.view นะครับ สร้างแยกมาเลย) ขนาดกำหนดเป็น

width = จำนวนภาพ x ความกว้างของภาพ : 8×300 = 2400

height = ความสูงของภาพ : 300 = 300

ดังนั้น UIViewที่ผมสร้างขึ้นมาเพิ่มจะขนาด 2400×300 pixel นะครับ

2) สร้าง UIImageView ขนาดตามต้องการ (แต่ขนาดต้องเท่ากันทุกภาพนะครับ) แล้วใส่ลงไปใน UIView ตามข้อ 1) ให้เรียงกันจนครบทุกรูปนะครับ ตำแหน่ง x ของแต่ละภาพก้อไล่ตามความกว้างของภาพไปเรื่อยๆ ครับ

3) สร้าง IBOutlet UIView มา 1 ตัวเพื่อเชื่อมกับ UIView ของเราที่สร้างไว้ในข้อ 1) ใน .h


#import <UIKit/UIKit.h>

@interface DemoPhotoSlideViewController : UIViewController {
IBOutlet UIView *photoView;
}

@end

4) ทำการเชื่อม IBOutlet UIView *photoView กับ UIView ที่เราสร้างใน Interface Builder ถนัดแบบลากอย่างนี้

หรือแบบคลิ้กขวาไปที่ File’s Owner ก็ได้เช่นกันนะครับ ใครถนัดแบบไหนตามสบายครับ จุดประสงค์คือเชื่อม UIView  กับตัวแปรที่เราประกาศมาเท่านั้นเอง

5) เมื่อเราเชื่อมตัวแปรกับ UI เรียบร้อยแล้ว ทีนี้เราก็เริ่มเขียนโปรแกรม การสร้าง UIScrollView  ขั้นมาได้เลยครับ ใน .m ที่ฟังก์ชั่น viewDidLoad


- (void)viewDidLoad{
[super viewDidLoad];

UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(10, 90, 300, 300)];
[scrollView setContentSize:CGSizeMake(2400, 300)];
[scrollView setShowsHorizontalScrollIndicator:NO];
[scrollView setPagingEnabled:YES];
[scrollView addSubview:photoView];

[self.view addSubview:scrollView];
[scrollView release];
}

อธิบายเพิ่มเติม


UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(10, 90, 300, 300)];

การสร้าง UIScrollView ขึ้นมาโดยที่ขนาดความสูงกับความกว้างจะเท่ากับขนาดของภาพ 1 ภาพเท่านั้น เพื่อจะได้แสดงทีละภาพ


[scrollView setContentSize:CGSizeMake(2400, 300)];
[scrollView setShowsHorizontalScrollIndicator:NO];
[scrollView setPagingEnabled:YES];

เมื่อสร้างตัวแปรขึ้นมาแล้ว มาถึงขั้นตอนการเซ็ตค่าต่างๆ ของ UIScrollView ที่จำเป็นเริ่มจาก

กำหนดขนาดของข้อมูลที่จะใส่เข้าไป คือความสูงและความกว้างทั้งหมดของวิวที่เก็บรูปภาพเอาไว้ (UIView) ใช้คำสั่ง


[scrollView setContentSize:CGSizeMake(2400, 300)];

กำหนดว่าไม่ให้แสดง ScrollIndicator เพราะว่ามันจะไม่สวย ใช้คำสั่ง


[scrollView setShowsHorizontalScrollIndicator:NO];

กำหนดการเลื่อนแบบ Paging ให้เวลาเราเลื่อนภาพนั้นเลื่อนไปทีละภาพ (ทั้งนี้ขึ้นอยู่กับความกว้างของ UIScrollView ด้วย ผมจึงทำให้ความกว้างของ UIScrollView กับ ความกว้างของภาพ 1 ภาพเท่ากัน) ใช้คำสั่ง


[scrollView setPagingEnabled:YES];

เพิ่ม UIView ที่มีภาพเข้าไปใน ScrollView ด้วยคำสั่ง


[scrollView addSubview:photoView];

เพิ่ม ScrollView ให้แสดงใน self.view ด้วยคำสั่ง


[self.view addSubview:scrollView];
[scrollView release];

การ release photoView ให้ไปเขียนที่ฟังก์ชั่น dealloc นะครับ


- (void)dealloc{
[photoView release];
[super dealloc];
}

เท่านี้ก็เป็นอันเรียบร้อยครับ กดรันแล้วทดสอบโปรแกรมได้เลย ….

 

เป็นอย่างไรกันบ้างครับกับการทำ Photo Slide ง่ายๆ แค่นี้เอง ผมก้อเขียนไปซะยาวเลย เอาให้ละเอียดๆ เข้าไว้ครับ จะได้อ่านเข้าใจ โอเค.. การทำ Photo Slide แบบแรกอาจจะยังเป็นแบบแข็งๆ อยู่เพราะเราต้องเพิ่มข้อมูลไปก่อนใน Interface Builder แต่หากเรามีข้อมูลอยู่ในอาเรย์หรือมีข้อมูลที่เยอะๆ หละเราจะทำอย่างๆ และการใช้งาน UIScrollerView กับ UIPageControl จะใช้งานร่วมกันอย่างไร ติดตามในบทความหน้านะครับ เพื่อนๆ คนไหนมีข้อแนะนำติชมร่วมสนทนากันได้เลยนะครับ

adaydesign :)

About adaydesign

นักพัฒนาแอพพลิเคชั่นบนโมบาย [iPhone Android] คนหนึ่งซึ่งอยากจะบันทึกเรื่องราวของเส้นทางนักพัฒนาโมบายแอพพลิเคชั่นเอาไว้ในบล็อคน้อยๆ แห่งนี้ เผื่อจะแบ่งบันและแลกเปลี่ยนความรู้ให้กับคนอื่นๆ ได้บ้าง :) Mobile Application Developer; Flash Mobile, iPhone/iPad, Android Mobile Phone/Tablet and Blackberry Playbook.

Posted on มิถุนายน 8, 2011, in [Dev] iOS and tagged , , . Bookmark the permalink. 2 ความเห็น.

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

    ขอบคุณล่วงหน้าครับ

  2. วิธีดึงภาพจาก url แบบไม่แสดงการโหลดนะครับ เหมาะกับรูปเล็กๆ
    NSImage *image = [UIImage imageWithData:[NSData dataWithContentsOfURL:[NSURL URLWithString:MyURL]]];

    หากต้องการใส่ข้อความใต้รูป
    ต้องสร้าง Xib ใหม่ขึ้นมาที่มีรูป ImageView และ Text อยู่ด้วยกัน จากนั้นก็สร้างวิวจาก Xib ที่เราสร้างมาใส่ scrollview (ผมคงอธิบายได้ไม่เข้าใจหรอกครับ คงต้องดูจากตัวอย่างลองเซิส custom view xcode ดูครับ)

ใส่ความเห็น

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / เปลี่ยนแปลง )

Twitter picture

You are commenting using your Twitter account. Log Out / เปลี่ยนแปลง )

Facebook photo

You are commenting using your Facebook account. Log Out / เปลี่ยนแปลง )

Google+ photo

You are commenting using your Google+ account. Log Out / เปลี่ยนแปลง )

Connecting to %s

%d bloggers like this: