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 เท่านั้น ดังนี้

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

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

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

int width = 300;
int number = 8;

ประกาศตัวแปรขนาด 300 ไว้ใส่เป็นค่าความกว้างและความสูงของภาพ และตัวแปรจำนวน ไว้แสดงว่ามี 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];
}

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

 UIView *photoView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, width*number, width)];

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

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

วนลูปเพื่อสร้างตัวแปร 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

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

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

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

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

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

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

adaydesign :)

About adaydesign

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

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

  1. ถ้าจะให้แสดงหลายๆภาพ แทนที่จะแสดงรูปเดียว ต้องไปแก้ไขที่ตรงไหนคะ

ใส่ความเห็น

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: