如何在单元格之间添加边距-启用UICollectionView分页

Question

I have a UICollectionView with paging enabled. Each cell takes up the size of the screen. It works similar to an image gallery, however, I would like to add 5px of padding between my cells. When I do this in InterfaceBuilder it affects the alignment of my cells (the first cell its the screen, the second cell ends 5pxs in shower the end of the first cells etc).

I've been pulling my hair out all morning. Here is my code;

.m

@interface GCViewController ()<UICollectionViewDataSource,UICollectionViewDelegate>
@property (weak, nonatomic) IBOutlet UICollectionView *collectionView;
@property (nonatomic) CGFloat minimumLineSpacing;
@property (nonatomic) UIEdgeInsets sectionInset;

@property (nonatomic)NSMutableArray * collArray;
@end

@implementation GCViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    self.collectionView.delegate =self;
    self.collectionView.dataSource=self;
    self.collArray = [[NSMutableArray alloc] initWithObjects:[UIColor greenColor],[UIColor redColor],[UIColor blueColor],[UIColor purpleColor],[UIColor greenColor], nil];

}

- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section {
    return UIEdgeInsetsMake(0, 0, 0, 0);
}
-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{
CGSize size = CGSizeMake(self.view.frame.size.width, self.view.frame.size.height);

    return size;
}

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{

    return self.collArray.count;
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
UICollectionViewCell * cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"Cell" forIndexPath:indexPath];
    cell.backgroundColor = [self.collArray objectAtIndex:indexPath.row];
    return cell;
}


- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{

}

- (void)collectionView:(UICollectionView *)collectionView didDeselectItemAtIndexPath:(NSIndexPath *)indexPath{

}

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}


@end

Answer 1

I use the following simple solution to insert a margin between every item (like UIScrollView's preformance): Expand every collectionViewItem's width by a fixed value 'pageSpacing' (such as 10.0), and expand the collectionView's width by the same value, too. And don't forget that, when layout collevtionViewCell's subviews, there's an additional spacing which is not for diplaying the real content.

Heres the code written in Swift 3.1, I'm sure it's easily understanding for you:

 let pageSpacing: CGFloat = 10

 class ViewController: UITableViewController {
      override func viewDidLoad() {
         super.viewDidLoad()

         let layout = UICollectionViewFlowLayout()
         layout.itemSize                = CGSize(width: view.frame.width + pageSpacing, height: view.frame.height)
         layout.scrollDirection         = .horizontal
         layout.minimumInteritemSpacing = 0
         layout.minimumLineSpacing      = 0

         let frame = CGRect(x: 0, y: 0, width: view.frame.width + pageSpacing, height: view.frame.height)
         let collectionView = UICollectionView(frame: frame, collectionViewLayout: layout)
         view.addSubview(collectionView)
     }
 }

 class MyCell: UICollectionViewCell {
     var fullScreenImageView = UIImageView()
     override func layoutSubviews() {
         super.layoutSubviews()
         fullScreenImageView.frame = CGRect(x: 0, y: 0, width: frame.width - pageSpacing, height: frame.height)
     }
 }

Hope that can help you.