UICollectionView 간격 여백


181

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

답변:


332

에 대한 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)
    }

35
수직 흐름 레이아웃을 사용할 때 왼쪽 및 오른쪽 삽입물이 작동하지 않는 것 같습니다.
John

1
이제 서브 클래스 UICollectionViewFlowLayout의 sectionInset 메소드를 재정의해도 효과가 없습니다. 아래 설명 된 설정 속성이 작동합니다.
Dren

4
주의 : UICollectionViewDelegateFlowLayout이 방법을 사용하려면 ViewController 대리인 목록에 추가 하십시오insetForSectionAtIndex
David Douglas

98

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

UICollectionView에 대한 섹션 삽입 설정

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

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


2
큰 대답은 섹션 삽입이 잘 작동하도록 최소 간격으로 재생해야한다는 점을 지적하고 싶었습니다.
Sash Yash

75

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

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

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

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

5
이것은 작동하지만 collection.collectionViewLayout@Pooja의 예제와 같이 캐스트 가 필요합니다. UICollectionViewFlowLayout *flow = (UICollectionViewFlowLayout*) self.collectionViewLayout;
jwj

신속한 캐스팅if let flow = collectionViewLayout as? UICollectionViewFlowLayout { flow.itemSize = CGSize(width: 100, height: 100) }
emily

41

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

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


간격을 색상으로 설정하는 방법이 있습니까?
Martín Serrano

1
@ MartínDaniel의를 설정 backgroundColor하십시오 collectionView. 또는 슈퍼 뷰가 무엇이든간에.
William Hu

1
그러나 가장자리에 여백이 없습니다
user924

@ user924 UIEdgeInsets (top : left : bottom : right :)를 사용하여 가장자리 여백을 설정할 수 있습니다. 세로로 스크롤하는 경우 왼쪽 / 오른쪽 삽입을 설정하십시오. 가로로 스크롤하는 경우 상단 및 하단 삽입을 설정하십시오.
Marcy

40

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

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

기본값은 10.0입니다.

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

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

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


2
이것은 섹션 사이의 간격에 영향을 미치지 않고 같은 섹션 내의 항목 사이에만 영향을 미치는 것 같습니까?
Crashalot

@Crashalot-minimumLineSpacing을 의미하지 않습니까? 즉, 모든 세포주? 실제로 섹션을 사용하는 경우 섹션 삽입에 대한 옵션도 있습니다.
Chucky

스토리 보드 인터페이스를 통해이 작업을 수행했습니다. 가로 전용 컬렉션 뷰에 대한 솔루션을 찾고있었습니다. 감사합니다 +10
kemicofa 유령

9

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

이 스레드에는 이미 유용한 답변이 많이 있지만 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)

경우 itemsInOneLine1 인 다음 이는 현재 0으로 나눔에 NaN이 될 것이다itemsInOneLine / (itemsInOneLine - 1)
TylerJames

1
@TylerJames 감사합니다! 문제를 해결하기 위해 코드를 조정했습니다.)
fredpi

8

사용 setMinimumLineSpacing:setMinimumInteritemSpacing:UICollectionViewFlowLayout-object.


예상대로 작동하지 않습니다. setMinimumLineSpacing is : 같은 행에있는 항목 사이에 사용할 최소 간격입니다. 그리고 setMinimumInteritemSpacing is : 그리드의 아이템 라인 사이에서 사용할 최소 간격입니다. 내 질문은 요소 사이의 간격이 아닌 여백에 관한 것입니다. 예. 첫 번째 요소의 왼쪽 및 위쪽 간격.
Mert

수직 srollDirection을 가정하면 첫 번째 행과 마지막 행의 상단 및 하단 간격에 contentInset을 사용할 수 있습니다. 또한 셀에 여백을 추가 할 수 있습니다.
Jonathan Cichon

8

사용 collectionViewFlowLayout.sectionInset중이거나 collectionView:layout:insetForSectionAtIndex:정확합니다.

그러나 collectionView에 여러 섹션이 있고 전체 collectionView에 여백을 추가하려는 경우 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);

5

사이에 공백을 넣으려면 CollectionItem이것을 사용하십시오.

이 두 줄을 viewdidload에 작성하십시오.

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

5

에 연결된 객체 의 insetForSectionAt속성을 설정 UICollectionViewFlowLayout하십시오UICollectionView

이 프로토콜을 추가하십시오

UICollectionViewDelegateFlowLayout

빠른

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

목표-C

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

2

Objective-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;

itemsPerRow 값을 변경하기 만하면 행당 항목 수가 업데이트됩니다. 또한 일반적인 간격을 원하는 경우 간격 값을 변경할 수 있습니다.

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


1
니스 ... 완벽합니다.
sohil

1

지정된 셀에 여백을 추가하기 위해이 사용자 정의 플로우 레이아웃을 사용할 수 있습니다. https://github.com/voyages-sncf-technologies/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
    }
}

0

swift 4 및 autoLayout에서 sectionInset을 다음 과 같이 사용할 수 있습니다 .

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

-1

각 섹션 사이에 10px 구분을 추가하려면 다음을 작성하십시오.

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

UICollectionElementKindSectionFooter 종류의 UICollectionReusableView를 사용하면 솔루션이 작동하지 않습니다
Pratik Jamariya

-1
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section {       
         return UIEdgeInsetsMake(7, 10, 5, 10);    
   }
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.