เลื่อน UIScrollView ทีละครึ่งหน้า

หลายครั้งที่เรามักเจอการเลื่อนดูอะไรบางอย่างบน UIScrollView และเมื่อ scroll หยุดวิ่งแล้ว เราจะเห็นเพียงแค่ทีละหน้าเท่านั้น ไม่สามารถเห็น item อันถัดไป หรืออันก่อนหน้าได้ เหตุผลหลักๆก็เนื่องมาจาก scrollview มันเลื่อนทีละหน้า เช่นการดูรูปใน Gallery

สิ่งที่เราต้องการก็คิอ scrollview ที่เลื่อนไปทีละครึ่งหน้า เพื่อให้เห็น item อันถัดไป และอันก่อนหน้าดังรูปต่อไปนี้

วิธีทำนั้นง่ายมากด้วยวิธีต่อไปนี้

1. สมมติว่าผมมีรูปอยู่ 5 รูป ดังนั้นผมสามารถสร้าง scrollview และ content view สำหรับใส่ view ย่อยๆ ให้มีขนาดพอเหมาะกับ iPhone ได้แบบนี้

UIScrollView *scrollView = [[UIScrollView alloc] init];

scrollView.backgroundColor = [UIColor darkGrayColor];

scrollView.frame = CGRectMake(0, 0, 320, 480);

scrollView.contentSize = CGSizeMake(320 * 5, 480);

scrollView.delegate = self;

scrollView.pagingEnabled = YES;

UIView *view = [[UIView alloc] init];

view.frame = CGRectMake(0, 0, 320 * 5, 480);

view.tag = 100;

2. จากนั้นเอา view ย่อยๆ ใส่ลงไป และเอา content view ใส่ลงไปใน scrollview ให้พร้อม และกำหนดตำแหน่งของ view ตามปกติ

UIImageView *imageView = nil;

for(int i = 0; i < 5; i ++){

imageView = [[UIImageView alloc] initWithImage: MY_IMAGE];

imageView.frame = CGRectMake(0, 0, 100, 133);

imageView.center = CGPointMake((320/2) * (i + 1), 480 / 2);

[view addSubview: imageView];

[imageView release];

}

[scrollView addSubview: view];

[view release];

3. ขั้นที่ผ่านมายังไม่มีอะไร เป็นการแค่สร้างและจับ view ใส่ลงไปใน scrollview ธรรมดาๆ จุดสำคัญคือขั้นตอนต่อไปนี้

เราจะจัดการกับ event ที่เรียก delegate method ของ UIScrollViewDelegate ได้ตาม code ด้านล่างนี้

- (void) scrollViewDidScroll:(UIScrollView *)scrollView {

CGFloat offset = scrollView.contentOffset.x/2;

CGAffineTransform transform = CGAffineTransformMakeTranslation(offset, 0);

[[scrollView viewWithTag: 100] setTransform:transform];

}

เท่านี้ก็เป็นอันเรียบร้อย ไม่ยากเลย ^_^

Related Link from Roti