[ios] UICollectionView 간격 여백

나는 UICollectionView사진을 보여줍니다. 을 사용하여 collectionview를 만들었습니다 UICollectionViewFlowLayout. 잘 작동하지만 여백에 간격을두고 싶습니다. 그것을 사용하여 그렇게 할 수 있습니까? UICollectionViewFlowLayout내 자신을 구현해야 UICollectionViewLayout합니까?



답변

에 대한 collectionView:layout:insetForSectionAtIndex:방법을 사용 UICollectionView하거나에 연결된 객체 의 sectionInset속성을 설정할 UICollectionViewFlowLayout수 있습니다 UICollectionView.

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

또는

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

스위프트 5 업데이트

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


답변

아래 스크린 샷과 같이 Interface Builder에서 삽입 설정

UICollectionView에 대한 섹션 삽입 설정

다음과 같은 결과가 발생합니다.

섹션 삽입이있는 컬렉션 뷰 셀


답변

온 간격을 추가하려면 전체 UICollectionView :

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

같은 행의 요소 (가로로 스크롤하는 경우 열)와 해당 크기 사이 의 간격을 유지하려면 :

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


답변

스위프트 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


XCode 11.4 및 신속한 5 편집

let flow = collectionView.collectionViewLayout as! UICollectionViewFlowLayout

작동하지 않습니다. 아래 작품을 사용하십시오.


let flow = UICollectionViewFlowLayout()

여기에 이미지 설명을 입력하십시오


답변

이 페이지에서 잘못된 정보를 수정하면됩니다.

1- minimumInteritemSpacing : 같은 행에있는 항목 사이에 사용할 최소 간격입니다.

기본값은 10.0입니다.

세로 스크롤 그리드의 경우이 값은 같은 행에있는 항목 사이의 최소 간격을 나타냅니다.

2- minimumLineSpacing : 그리드의 항목 라인 사이에 사용할 최소 간격입니다.

참조 : http://developer.apple.com/library/ios/#documentation/uikit/reference/UICollectionViewFlowLayout_class/Reference/Reference.html


답변

최신 스위프트, 자동 레이아웃 계산

이 스레드에는 이미 유용한 답변이 많이 있지만 William Hu의 답변을 기반으로 최신 Swift 버전 을 추가하고 싶습니다 . 또한 다음 두 가지를 개선합니다.

  • 다른 줄 사이의 간격은 이제 항상 같은 줄에있는 항목 사이의 간격과 일치합니다.
  • 최소 너비를 설정하면 코드에서 행의 항목 수를 자동으로 계산하고 해당 스타일을 흐름 레이아웃에 적용합니다.

코드는 다음과 같습니다.

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


답변

사용 setMinimumLineSpacing:setMinimumInteritemSpacing:UICollectionViewFlowLayout-object.