UICollection 간격 여백 보기

UICollection 간격 여백 보기

나는 있습니다UICollectionView사진을 보여줍니다.다음을 사용하여 컬렉션 보기를 만들었습니다.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)];

Swift 5용으로 업데이트됨

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

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

다음과 같은 결과를 초래할 수 있습니다.

전체에 간격을 추가하려면 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)

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

편집

변경할 경우scrollDirction수평:

flow.scrollDirection = .horizontal

메모

한 줄로 항목을 올바르게 설정하지 않은 경우 컬렉션 보기에 패딩이 있는지 확인합니다.즉, 다음과 같습니다.

let width = UIScreen.main.bounds.size.width - itemSpacing * CGFloat(itemsInOneLine - 1)

collectionView 너비여야 합니다.

이 페이지의 잘못된 정보를 수정하기 위해:

1-최소의항목 간 간격:동일한 행에 있는 항목 간에 사용할 최소 간격입니다.

기본값은 10.0입니다.

(수직 스크롤 그리드의 경우 이 값은 동일한 행에 있는 항목 사이의 최소 간격을 나타냅니다.)

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

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

최신 Swift, 자동 레이아웃 계산

이 스레드에는 이미 유용한 답변이 많이 포함되어 있지만, 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-객체.

사용.collectionViewFlowLayout.sectionInset또는collectionView:layout:insetForSectionAtIndex:맞습니다.

그러나 collectionView에 여러 섹션이 있고 전체 collectionView에 여백을 추가하려면 스크롤View 컨텐츠를 사용하는 것이 좋습니다.삽입:

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

간격을 두려면CollectionItem이것을 사용합니다.

view didload에 이 두 줄을 씁니다.

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

설정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);
}

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

행당 항목 수 값을 변경하기만 하면 행당 항목 수가 그에 따라 업데이트됩니다.또한 일반 간격을 늘리거나 줄이려면 간격 값을 변경할 수 있습니다.

지정된 셀에 여백을 추가하는 경우 이 사용자 정의 흐름 레이아웃을 사용할 수 있습니다.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
    }
}

swift 4 및 autoLayout에서는 섹션을 사용할 수 있습니다.다음과 같이 삽입:

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

각 섹션 간에 10px 분리를 추가하려면 다음과 같이 입력합니다.

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

언급URL : https://stackoverflow.com/questions/13970950/uicollectionview-spacing-margins