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.