วันศุกร์ที่ 10 มิถุนายน พ.ศ. 2554

iPhone: Slide Photo Gallery (2)

iPhone: Slide Photo Gallery (2)
วันนี้จะมาต่อกันจากบทความเมื่อวานนะครับ เรื่องการทำ Slide Photo Gallery โดยที่เราไม่ต้องไปสร้าง UIView ที่ Interface Builder แล้วเอารูปใส่เองนะครับ ในบทความนี้จะนำเสนอวิธีเขียนโค้ดเพื่อสร้าง UIView และเขียนโค้ดเพื่อเอารูปเรียงใส่ UIView และนำมาแสดงที่ UIScrollView เหมือนบทความที่แล้วนะครับ โอเคเรามาเริ่มกันเลยดีกว่า


1) เริ่มจากการเตรียมภาพให้พร้อมในโปรเจคก่อนเลยนะครับ


จากภาพตัวอย่างผมเตรียมเอาไว้ 8 ภาพ โดยเรียงชื่อจาก 1 2 3 4 ... 8.png เพื่อจะได้ง่ายต่อการเรียกใช้งาน

2) มาเริ่มเขียนโค้ดกันเลย โดยโค้ดของบทความนี้เขียนเพียงแค่ที่ฟังก์ชั่น viewDidLoad เท่านั้น ดังนี้

[sourcecode langauge="objc"]
- (void)viewDidLoad{

[super viewDidLoad];

int width = 300;
int number = 8;

UIView *photoView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, width*number, width)];
for (int i=0;i<number; i++) {
UIImageView *tempImage = [[UIImageView alloc] initWithFrame:CGRectMake(i*width, 0, width, width)];
tempImage.image = [UIImage imageNamed:[NSString stringWithFormat:@"%d.png",(i+1)]];
[photoView addSubview:tempImage];
[tempImage release];
}

UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(10, 90, width, width)];
[scrollView setContentSize:CGSizeMake(width*number, width)];
[scrollView setShowsHorizontalScrollIndicator:NO];
[scrollView setPagingEnabled:YES];

[scrollView addSubview:photoView];
[photoView release];

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

จากโค้ดด้านบนเป็นโค้ดทั้งหมดในการเขียนเพื่อสร้าง Slide Photo Gallery นะครับ โดยจะแบ่งออกเป็น 2 ส่วนหลักๆ คือ การสร้าง UIView ที่เก็บภาพเรียงกัน และการสร้าง UIScrollView ที่จะทำให้เราสไลด์ภาพดูได้ โดยเริ่มต้นดังนี้

1) การสร้าง UIView เพื่อจะสร้างวิวที่มีภาพเรียงต่อกัน สิ่งที่เราเตรียมเอาไว้แล้วคือ ภาพจำนวน 8 ภาพ โดยแต่ละภาพขนาด 300x300 พิกเซล และมีชื่อเป็นลำดับตัวเลขตั้งแต่ 1-8 เพื่อง่ายต่อการเรียกใช้งาน โค้ดการสร้าง UIView มีดังนี้

[sourcecode langauge="objc"]
int width = 300;
int number = 8;
[/sourcecode]

ประกาศตัวแปรขนาด 300 ไว้ใส่เป็นค่าความกว้างและความสูงของภาพ และตัวแปรจำนวน ไว้แสดงว่ามี 8 ภาพ

[sourcecode langauge="objc"]
UIView *photoView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, width*number, width)];
for (int i=0;i<number; i++) {
UIImageView *tempImage = [[UIImageView alloc] initWithFrame:CGRectMake(i*width, 0, width, width)];
tempImage.image = [UIImage imageNamed:[NSString stringWithFormat:@"%d.png",(i+1)]];
[photoView addSubview:tempImage];
[tempImage release];
}
[/sourcecode]

จากโค้ดข้างต้นเป็นการแสดงการสร้าง UIView ด้วยคำสั่ง

[sourcecode langauge="objc"]
UIView *photoView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, width*number, width)];
[/sourcecode]

หมายถึง การสร้าง UIView ตามตำแหน่ง x,y = 0,0 และขนาด width,height = 2400,300 จากนั้นก็วนลูปเพื่อเพิ่มรูปเข้าไปในวิว โดยให้รูปนั้นเรียงกันตามแนวแกน x นะครับ

[sourcecode langauge="objc"]
for (int i=0;i<number; i++) {
UIImageView *tempImage = [[UIImageView alloc] initWithFrame:CGRectMake(i*width, 0, width, width)];
tempImage.image = [UIImage imageNamed:[NSString stringWithFormat:@"%d.png",(i+1)]];
[photoView addSubview:tempImage];
[tempImage release];
}
[/sourcecode]

วนลูปเพื่อสร้างตัวแปร UIImageView ขึ้นมา โดยสังเกตค่า x นะครับ จะขยับไปตามลำดับโดยการคำนวณ i*width
การเซ็ตรูปให้กับ UIImageView นั้นจะใช้ property .image = [UIImage imageNamed:@"ชื่อรูปในโปรเจคของเรา.นามสกุลไฟล์"]
เพิ่มรูปเข้าไปใน UIView ด้วยคำสั่ง addSubview:view

จะเป็นอันเรียบร้อยในขั้นตอนแรกสำหรับการสร้าง UIView และการสร้าง UIImageView เพื่อที่จะนำเข้าไปจัดเรียงใน UIView

2) การสร้าง UIScrollView อันนี้จะเหมือนการสร้าง UIScrollView ในบทความ iPhone: Slide Photo Gallery

3) หลังจากเราสร้าง  UIScrollView เสร็จ เราก้อเพิ่ม UIView ลงใน UIScrollView

[sourcecode langauge="objc"]
[scrollView addSubview:photoView];
[photoView release];
[/sourcecode]

และเพิ่ม UIScrollView ลง self.view ก็เป็นอันเสร็จเรียบร้อยแล้วครับ

[sourcecode langauge="objc"]
[self.view addSubview:scrollView];
[scrollView release];
[/sourcecode]

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

บทความที่เกี่ยวข้อง

adaydesign :)

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

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