如何在單元格之間添加邊距-啟用UICollectionView分頁

Question

我有一個啟用了分頁的UICollectionView。 每個單元格占用屏幕的大小。 它的工作原理類似於圖片庫，但是，我想在單元格之間添加5px的填充。 當我在InterfaceBuilder執行此操作時，它會影響我的單元格的對齊方式（第一個單元格在屏幕上，第二個單元格在第一個單元格的末尾以5pxs的間隔結束）。

我整個上午都在梳頭。 這是我的代碼；

.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

我使用以下簡單解決方案在每個項目之間插入邊距（例如UIScrollView的性能）：將每個collectionViewItem的寬度擴展為固定值'pageSpacing'（例如10.0），並將collectionView的寬度擴展為相同值。 並且不要忘記，當布局collevtionViewCell的子視圖時，存在一個額外的間距，該間距不能用於顯示實際內容。

這是用Swift 3.1編寫的代碼，我相信它很容易為您理解：

 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)
     }
 }

希望能對您有所幫助。