วันพฤหัสบดีที่ 9 มิถุนายน พ.ศ. 2554

iPhone: Slide Photo Gallery

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





ขั้นตอน

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

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

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

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

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



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



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

[sourcecode langauge="objc"]

#import <UIKit/UIKit.h>

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

@end

[/sourcecode]

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



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



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

[sourcecode language="objc"]

- (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];
}

[/sourcecode]

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

[sourcecode language="objc"]

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

[/sourcecode]

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

[sourcecode language="objc"]

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

[/sourcecode]

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

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

[sourcecode language="objc"]

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

[/sourcecode]

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

[sourcecode language="objc"]

[scrollView setShowsHorizontalScrollIndicator:NO];

[/sourcecode]

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

[sourcecode language="objc"]

[scrollView setPagingEnabled:YES];

[/sourcecode]

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

[sourcecode language="objc"]

[scrollView addSubview:photoView];

[/sourcecode]

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

[sourcecode language="objc"]

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

[/sourcecode]

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

[sourcecode language="objc"]

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

[/sourcecode]

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

 



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

adaydesign :)

ไม่มีความคิดเห็น:

แสดงความคิดเห็น