หลายครั้งที่เรามักเจอการเลื่อนดูอะไรบางอย่างบน UIScrollView และเมื่อ scroll หยุดวิ่งแล้ว เราจะเห็นเพียงแค่ทีละหน้าเท่านั้น ไม่สามารถเห็น item อันถัดไป หรืออันก่อนหน้าได้ เหตุผลหลักๆก็เนื่องมาจาก scrollview มันเลื่อนทีละหน้า เช่นการดูรูปใน Gallery
Related Link from Roti
สิ่งที่เราต้องการก็คิอ 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];
}
เท่านี้ก็เป็นอันเรียบร้อย ไม่ยากเลย ^_^



