iOS 6.0: UICollectionView không tôn trọng clipsToBounds với pagingEnabled

Question

nền

Tôi đang thực hiện một UICollectionView (lần đầu tiên) trong một nỗ lực để đạt được một cái nhìn cuộn ngang paged của gạch. Tôi muốn mỗi ô hiển thị ở giữa khung hình với gạch chị em của nó hiển thị một phần ở bên trái và bên phải (giống như bộ chọn trang trong ứng dụng Safari). Tôi quan tâm đến việc sử dụng các UICollectionView để tận dụng lợi thế của dequeueing tế bào được xây dựng trong và thay vì không sử dụng một xoay UITableView.

Issue

Vấn đề tôi đang tìm là khi sử dụng pagingEnabled = YES và clipsToBounds = NO, các UICollectionView loại bỏ tế bào bên ngoài collectionView khung (họ không trong mảng visibleCells) càng sớm càng phân trang hoàn tất. Bất cứ ai có thể cung cấp lời khuyên về làm thế nào để đạt được hiệu quả của việc hiển thị xem trước của gạch chị em trong khi duy trì thiết lập cơ bản này? Hoặc tôi đang tiếp cận điều này không chính xác?

Ảnh chụp màn hình

bắt đầu di chuyển cuối

Các di chuyển màn hình là chính xác đúng. Nhưng trong những bức ảnh bắt đầu và kết thúc, tôi muốn có màu xanh lá cây có thể nhìn thấy được ở các mép màu xanh.

Dưới đây là những gì trong AppDelegate.m tôi (tín dụng để tutsplus.com cho các thiết lập cơ bản ở đây):

#import "AppDelegate.h" 

@interface ViewController : UICollectionViewController 
@end 

@implementation ViewController 

- (void)viewDidLoad 
{ 
    [super viewDidLoad]; 
    [self.collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"ID"]; 
    [self.view setBackgroundColor:[UIColor blueColor]]; 
    // pad the collection view by 20 px 
    UIEdgeInsets padding = UIEdgeInsetsMake(20.0, 20.0, 20.0, 20.0); 
    [self.collectionView setFrame:UIEdgeInsetsInsetRect(self.view.frame, padding)]; 
    // set pagingEnabled and clipsToBounds off 
    [self.collectionView setPagingEnabled:YES]; 
    [self.collectionView setClipsToBounds:NO]; 
} 

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section 
{ 
    return 5; 
} 

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath 
{ 
    UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"ID" forIndexPath:indexPath]; 
    UILabel *label = [[UILabel alloc] initWithFrame:cell.bounds]; 
    label.textAlignment = NSTextAlignmentCenter; 
    label.text = [NSString stringWithFormat:@"%d", indexPath.row]; 
    [label setBackgroundColor:[UIColor greenColor]]; 
    [cell.contentView addSubview:label]; 
    return cell; 
} 
@end 

@implementation AppDelegate 
{ 
    ViewController *vc; 
} 

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions 
{ 
    self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]]; 
    // setup the UICollectionViewFlowLayout 
    UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init]; 
    layout.itemSize = CGSizeMake(280, 280); 
    layout.minimumInteritemSpacing = 0; 
    layout.minimumLineSpacing = 0; 
    layout.scrollDirection = UICollectionViewScrollDirectionHorizontal; 
    // add a custom UICollectionViewController to the window 
    vc = [[ViewController alloc] initWithCollectionViewLayout:layout]; 
    self.window.rootViewController = vc; 
    self.window.backgroundColor = [UIColor yellowColor]; 
    [self.window makeKeyAndVisible]; 
    return YES; 
} 
@end 

Answer 1

Hóa ra giải pháp cho điều này thực sự khá đơn giản. Tôi chỉ cần chồng chéo các ô UICollectionViewCell bằng đủ pixel để chúng vẫn hiển thị trong khung của collectionView sau khi cuộn xong trang được phân trang. Các mã có liên quan là

layout.itemSize = CGSizeMake(300, 300); 
layout.minimumLineSpacing = -20.0; 

Và tôi subclassed các UICollectionViewFlowLayout và overrode các (CGSize)collectionViewContentSize phương pháp để trở về kích thước không chồng chéo của các tế bào.

Answer 2

Tôi không phải là một chuyên gia trong collectionView, nhưng nó có thể có thể làm với dòng này trong cellForItemAtIndexPath:

[cell.contentView addSubview:label]; 

Mỗi lần được gọi, một nhãn phụ khác được thêm vào ô. Kiểm tra nhãn hiện có hoặc lớp con UICollectionViewCell?

Answer 3

Rất cám ơn về mẹo sử dụng CPCLineSpacing âm. Tôi đã tạo ứng dụng trình kiểm tra sử dụng ô xem bộ sưu tập được tải từ tệp xib. Ô này có nền trong suốt và khung nhìn “bên trong” cho nội dung của ô.

Bằng cách này, không cần bố cục luồng tùy chỉnh.

https://github.com/j4johnfox/CollectionViewTester

Answer 4

Bạn sẽ muốn cũng phải ghi đè lên -pointInside:withEvent: cho phép cử chỉ cuộn để bắt đầu bên ngoài khung của xem bộ sưu tập. Tôi làm điều này bằng cách sử dụng tài sản UIEdgeInsets trong bộ sưu tập xem lớp con của tôi:

- (BOOL)pointInside:(CGPoint)point withEvent:(UIEvent *)event { 
    CGRect extendedBounds = UIEdgeInsetsInsetRect(self.bounds, self.touchAreaInsets); 

    return CGRectContainsPoint(extendedBounds, point); 
} 

Nếu bạn không cần phải an toàn App Store, bạn có thể ghi đè _visibleBounds để tránh hacks khoảng cách tiêu cực:

- (CGRect)_visibleBounds { 
    return UIEdgeInsetsInsetRect(self.bounds, self.touchAreaInsets); 
} 

Nếu bạn' không quá nhấn vào kích thước mã và cần sự an toàn của App Store, bạn cũng có thể phân lớp PSTCollectionView và có thể ghi đè lên visibleBoundRects cho cùng một hiệu ứng.