iPhone: UIScrollView Delegate for Slide Photo Gallery


iPhone: UIScrollView Delegate for Slide Photo Gallery

บทความที่ 3 แล้วนะครับสำหรับเรื่องของ UIScrollView เป็นอย่างไรบ้างครับ สำหรับบทความสองบทความแรกพอจะเข้าใจหลักการของ UIScrollView แล้วหรือยังครับ หากยังไม่ค่อยเข้าใจเท่าไร เรามาศึกษาในลำดับต่อไปกันดีกว่า ในบทความนี้จะนำเสนอเรื่องของการใช้งาน UIScrollViewDelegate สำหรับการแสดงผลว่าเราเลื่อนมาถึงภาพที่เท่าไรแล้ว นะครับ ในบทความนี้จะใช้โค้ดเดิมจากบทความ iPhone: Slide Photo Gallery (2) เพื่อต่อยอดในบทความนี้ครับ

สิ่งที่เราต้องเขียนเพิ่มได้แก่

  1. การสร้าง UIPageControl
  2. Delegate function ของ UIScrollView ที่ใช้ในบทความนี้

1) เริ่มกันเลยนะครับ จากการสร้าง UIPageControl ก่อน ให้เราไปประกาศตัวแปร UIPageControl เอาไว้ที่ .h และเขียน delegate ของ UIScrollView เอาไว้ต่อท้าย UIViewColltroller ด้วย <UIScrollViewDelegate> ด้วยนะครับ


#import <UIKit/UIKit.h>

@interface DemoPhotoSlideViewController : UIViewController <UIScrollViewDelegate>{
UIPageControl *pageControl;
}

@end

การประกาศตัวแปร UIPageControl *pageControl ประกาศแบบนี้เลยครับ ไม่ต้องมี IBOutlet และไม่ต้องประกาศ @property นะครับ เพราะเราไม่ได้นำไปใช้กับ Interface Builder และไม่ได้ประกาศตัวแปรให้เพื่อใช้ฟังก์ชั่น getter และ setter

2) เขียนโค้ดสร้าง UIPageControl ที่โค้ด .m โดยเขียนต่อจากโค้ดของบทความ iPhone: Slide Photo Gallery (2) นะครับ


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

//เพิ่มการเซ็ต delegate ของ scrollView
scrollView.delegate = self;

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

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

//เขียนโค้ดเพิ่มเติม การสร้าง UIPageControl
pageControl = [[UIPageControl alloc] initWithFrame:CGRectMake(0, 400, 320, 20)];
[pageControl setNumberOfPages:number];
[self.view addSubview:pageControl];
}

เขียนโค้ดเพิ่มเอานะครับ จะได้ไม่ต้องเสียเวลาเขียนโค้ด และหารูปมาใหม่

2.1) การสร้าง PageControl ก้อเหมือนกับ View ทั่วไปครับ คือสร้างด้วย Frame กำหนด x, y, width และ height

2.2) การกำหนดจำนวน page (จะเป็นรูปวงกลมสีขาวๆ) ด้วยคำสั่ง


[pageControl setNumberOfPages:number];

2.3 ) เพิ่ม PageControl เข้าใน self.view


[self.view addSubview:pageControl];

เท่านี้เราก้อจะได้ PageControl มาอยู่ในวิวของเราเป็นที่เรียบร้อยครับ

3) เรากำลังจะทำให้ วงกลมสีขาวนั้นเปลี่ยนตำแหน่งไปตาม ตำแหน่งของภาพที่เลื่อนมาแสดงนะครับ โดยสิ่งที่ต้องทำคือ เซ็ต delegate ให้กับ UIScrollView และ เขียนฟังก์ชั่น scrollViewDidEndDecelerating เพื่อเปลี่ยนตำแหน่งการแสดงของวงกลมสีขาวของ PageControl

3.1) เซ็ต delegate ให้กับ UIScrollView


scrollView.delegate = self;

การเซ็ต delegate เพื่อให้ เมื่อเวลาเกิดอีเวนท์ต่างๆ ขึ้นในตัวอย่างเราพยายามดักอีเวนท์การเลื่อนภาพใน UIScrollView ก้อเขียนฟังก์ชั่นรับอีเวนท์คือ scrollViewDidEndDecelerating

3.2) ใน delegate ฟังก์ชั่น


-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{
int index = scrollView.contentOffset.x/scrollView.frame.size.width;
[pageControl setCurrentPage:index];
}

int index คือตำแหน่งที่เราจะเปลี่ยนตำแหน่งการแสดงผลของ PageControl โดยสามารถคำนวณได้จาก

scrollView.contentOffset.x/scrollView.frame.size.width

scrollView.contentOffset.x คือ ค่าในแกน x ของ content ใน ScrollView

ตัวอย่าง เมื่อเราเลื่อนภาพไปทางซ้าย ค่า x นี้จะเท่ากับ 300 ครับ ดังนั้นเมื่อเราเอา scrollView.frame.size.width (ความกว้างของ ScrollView) มาหารก้อจะได้ index  = 1 และการแสดงผลของ PageControl จะเลื่อนไปยังตำแหน่งที่ 1 (ตำแหน่งเริ่มต้นคือ 0)

และเมื่อรันโปรแกรมดูจะเห็นผลลัพธ์ ดังต่อไปนี้นะครับ

เป็นอย่างไรบ้างครับ เท่านี้เราก็ได้ Slide Photo Gallery ของเราเองแล้ว ง่ายมั้ยหละครับ หากเพื่อนๆ คนไหนมีคำถาม เม้นเข้ามาได้เลยนะครับ ผมรอตอบอยู่… ส่วนบทความต่อไปเรายังจะอยู่ในเรื่องของ ScrollView เหมือนเดิมครับ แต่เราจะมาเล่นเรื่องการ Zoom กันดีกว่า รอติดตามนะครับว่า เราจะมีลูกเล่นอะไรอีกบ้างในการเล่นกับ ScrollView วันนี้สวัสดีครับ

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

adaydesign :)

About adaydesign

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

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

  1. มได้ลองทำตามบทความนี้แล้ว เวลาเลื่อนรูปวงกลมข้างล่างจะเลื่อนตามแต่ถ้าคลิกให้วงกลมเลื่อนภาพจะไม่ยอมเลื่อนตามนะครับ

  2. ผมทำสองหน้าอ่ะครับแต่อยากให้ขึ้นหน้าสองเรยแร้วค่อยเลื่อนไปทางซ้าย

ใส่ความเห็น

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: