Tôi có một UICollectionViewcái cho thấy hình ảnh. Tôi đã tạo ra bộ sưu tập bằng cách sử dụng UICollectionViewFlowLayout. Nó hoạt động tốt nhưng tôi muốn có khoảng cách trên lề. Có thể làm điều đó bằng cách sử dụng UICollectionViewFlowLayouthoặc tôi phải tự thực hiện UICollectionViewLayout?

Bạn có thể sử dụng collectionView:layout:insetForSectionAtIndex:phương thức cho UICollectionViewhoặc đặt thuộc sectionInsettính của UICollectionViewFlowLayoutđối tượng được đính kèm UICollectionView:

- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section{
    return UIEdgeInsetsMake(top, left, bottom, right);
}

hoặc là

UICollectionViewFlowLayout *aFlowLayout = [[UICollectionViewFlowLayout alloc] init];
[aFlowLayout setSectionInset:UIEdgeInsetsMake(top, left, bottom, right)];

Đã cập nhật cho Swift 5

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
       return UIEdgeInsets(top: 25, left: 15, bottom: 0, right: 5)
    }

Thiết lập các phần tử trong Trình tạo giao diện như hiển thị trong ảnh chụp màn hình bên dưới

Sẽ dẫn đến một cái gì đó như thế này:

Để thêm khoảng cách trên toàn bộ UICollectionView :

UICollectionViewFlowLayout *flow = (UICollectionViewFlowLayout*) collection.collectionViewLayout;
flow.sectionInset = UIEdgeInsetsMake(topMargin, left, bottom, right);

Để chơi với khoảng cách giữa các thành phần của cùng một hàng (cột nếu bạn cuộn theo chiều ngang) và kích thước của chúng:

flow.itemSize = ...;
flow.minimumInteritemSpacing = ...;

Swift 4

    let flow = collectionView.collectionViewLayout as! UICollectionViewFlowLayout // If you create collectionView programmatically then just create this flow by UICollectionViewFlowLayout() and init a collectionView by this flow.

    let itemSpacing: CGFloat = 3
    let itemsInOneLine: CGFloat = 3
    flow.sectionInset = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
    let width = UIScreen.main.bounds.size.width - itemSpacing * CGFloat(itemsInOneLine - 1) //collectionView.frame.width is the same as  UIScreen.main.bounds.size.width here.
    flow.itemSize = CGSize(width: floor(width/itemsInOneLine), height: width/itemsInOneLine)
    flow.minimumInteritemSpacing = 3
    flow.minimumLineSpacing = 3

EDIT XCode 11.4 và nhanh chóng 5

let flow = collectionView.collectionViewLayout as! UICollectionViewFlowLayout

không hoạt động. Sử dụng dưới đây hoạt động.

let flow = UICollectionViewFlowLayout()

Chỉ cần sửa một số thông tin sai trong trang này:

1- MinimalInteritemSpaces : Khoảng cách tối thiểu để sử dụng giữa các mục trong cùng một hàng.

Giá trị mặc định: 10.0.

(Đối với lưới cuộn theo chiều dọc, giá trị này biểu thị khoảng cách tối thiểu giữa các mục trong cùng một hàng.)

2- MinimalLineSpaces : Khoảng cách tối thiểu để sử dụng giữa các dòng của các mục trong lưới.

Tham chiếu: http://developer.apple.com/l Library / ios / # document / uikit / report / UollollViewViewFlowLayout_group / Reference / Reference.html

Swift hiện đại, tính toán bố cục tự động

Mặc dù chủ đề này đã chứa một loạt các câu trả lời hữu ích, tôi muốn thêm một phiên bản Swift hiện đại , dựa trên câu trả lời của William Hu. Nó cũng cải thiện hai điều:

• Khoảng cách giữa các dòng khác nhau sẽ luôn khớp với khoảng cách giữa các mục trong cùng một dòng.
• Bằng cách đặt chiều rộng tối thiểu, mã sẽ tự động tính toán số lượng mục trong một hàng và áp dụng kiểu đó cho bố cục luồng.

Đây là mã:

// Create flow layout
let flow = UICollectionViewFlowLayout()

// Define layout constants
let itemSpacing: CGFloat = 1
let minimumCellWidth: CGFloat = 120
let collectionViewWidth = collectionView!.bounds.size.width

// Calculate other required constants
let itemsInOneLine = CGFloat(Int((collectionViewWidth - CGFloat(Int(collectionViewWidth / minimumCellWidth) - 1) * itemSpacing) / minimumCellWidth))
let width = collectionViewWidth - itemSpacing * (itemsInOneLine - 1)
let cellWidth = floor(width / itemsInOneLine)
let realItemSpacing = itemSpacing + (width / itemsInOneLine - cellWidth) * itemsInOneLine / max(1, itemsInOneLine - 1))

// Apply values
flow.sectionInset = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
flow.itemSize = CGSize(width: cellWidth, height: cellWidth)
flow.minimumInteritemSpacing = realItemSpacing
flow.minimumLineSpacing = realItemSpacing

// Apply flow layout
collectionView?.setCollectionViewLayout(flow, animated: false)

sử dụng setMinimumLineSpacing:và setMinimumInteritemSpacing:trên UICollectionViewFlowLayout-Oject.

Sử dụng collectionViewFlowLayout.sectionInsethoặc collectionView:layout:insetForSectionAtIndex:là chính xác.

Tuy nhiên, nếu bộ sưu tập của bạn có nhiều phần và bạn muốn thêm lề vào toàn bộ bộ sưu tập, tôi khuyên bạn nên sử dụng scrollView contentInset:

UIEdgeInsets collectionViewInsets = UIEdgeInsetsMake(50.0, 0.0, 30.0, 0.0);
self.collectionView.contentInset = collectionViewInsets;
self.collectionView.scrollIndicatorInsets = UIEdgeInsetsMake(collectionViewInsets.top, 0, collectionViewInsets.bottom, 0);

Để đặt không gian giữa CollectionItemcác s sử dụng này

viết hai dòng này trong viewdidload

UICollectionViewFlowLayout *collectionViewLayout = (UICollectionViewFlowLayout*)self.collectionView.collectionViewLayout;
collectionViewLayout.sectionInset = UIEdgeInsetsMake(<CGFloat top>, <CGFloat left>, <CGFloat bottom>, <CGFloat right>)

Đặt thuộc insetForSectionAttính của UICollectionViewFlowLayoutđối tượng gắn liền với của bạnUICollectionView

Đảm bảo thêm giao thức này

UICollectionViewDelegateFlowLayout

Nhanh

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
        return UIEdgeInsets (top: top, left: left, bottom: bottom, right: right)
    }

Mục tiêu - C

- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section{
    return UIEdgeInsetsMake(top, left, bottom, right);
}

Trong Mục tiêu-C

CGFloat spacing = 5;
UICollectionViewFlowLayout *flow = (UICollectionViewFlowLayout*)_habbitCollectionV.collectionViewLayout;
flow.sectionInset = UIEdgeInsetsMake(0, spacing, 0, spacing);
CGFloat itemsPerRow = 2;
CGRect screenRect = [[UIScreen mainScreen] bounds];
CGFloat oneMore = itemsPerRow + 1;
CGFloat width = screenRect.size.width - spacing * oneMore;
CGFloat height = width / itemsPerRow;

flow.itemSize = CGSizeMake(floor(height), height);
flow.minimumInteritemSpacing = spacing;
flow.minimumLineSpacing = spacing;

Tất cả bạn phải làm là thay đổi giá trị itemsPerRow và nó sẽ cập nhật số lượng mục trên mỗi hàng tương ứng. Hơn nữa, bạn có thể thay đổi giá trị khoảng cách nếu bạn muốn khoảng cách chung nhiều hơn hoặc ít hơn.

Để thêm lề vào các ô đã chỉ định, bạn có thể sử dụng bố cục luồng tùy chỉnh này. https://github.com/voyages-sncf-technology/VSCollectionViewCellInsetFlowLayout/

extension ViewController : VSCollectionViewDelegateCellInsetFlowLayout 
{
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForItemAt indexPath: IndexPath) -> UIEdgeInsets {
        if indexPath.item == 0 {
            return UIEdgeInsets(top: 0, left: 0, bottom: 10, right: 0)
        }
        return UIEdgeInsets.zero
    }
}

Trong swift 4 và autoLayout, bạn có thể sử dụng phầnInset như thế này:

let layout = UICollectionViewFlowLayout()
        layout.scrollDirection = .vertical
        layout.itemSize = CGSize(width: (view.frame.width-40)/2, height: (view.frame.width40)/2) // item size
        layout.sectionInset = UIEdgeInsetsMake(10, 10, 10, 10) // here you can add space to 4 side of item
        collectionView = UICollectionView(frame: self.view.bounds, collectionViewLayout: layout) // set layout to item
        collectionView?.register(ProductCategoryCell.self, forCellWithReuseIdentifier: cellIdentifier) // registerCell
        collectionView?.backgroundColor = .white // background color of UICollectionView
        view.addSubview(collectionView!) // add UICollectionView to view

Để thêm phân tách 10px giữa mỗi phần, chỉ cần viết này

flowLayout.sectionInset = UIEdgeInsetsMake(0.0, 0.0,10,0);

- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section {       
         return UIEdgeInsetsMake(7, 10, 5, 10);    
   }