[ios] 수평으로 UICollectionView 셀을 중앙에 배치하는 방법은 무엇입니까?

몇 가지 연구를 수행했지만 UICollectionView에서 셀을 가로로 가운데에 배치하는 방법에 대한 코드 예제를 찾을 수 없습니다.

첫 번째 셀이 X00 과 같은 대신 과 같은 것이 아니라이 0X0같기를 원합니다 . 이것을 달성하는 방법이 있습니까?

편집하다:

내가 원하는 것을 시각화하려면 :

여기에 이미지 설명 입력

CollectionView에 요소가 하나만있을 때 버전 B처럼 보이도록해야합니다. 요소가 두 개 이상 있으면 버전 A와 비슷하지만 요소가 더 많아야합니다.

지금은 요소가 1 개 뿐인데 버전 A처럼 보이며 어떻게 B처럼 보이게 만들 수 있는지 궁금합니다.

도와 주셔서 감사합니다!



답변

라이브러리를 사용하는 것은 좋은 생각이 아닙니다. 만약 당신의 목적이 이것이 바로 중앙 정렬이라면.

collectionViewLayout 함수에서이 간단한 계산을 더 잘 수행 할 수 있습니다.

func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAtIndex section: Int) -> UIEdgeInsets {

    let totalCellWidth = CellWidth * CellCount
    let totalSpacingWidth = CellSpacing * (CellCount - 1)

    let leftInset = (collectionViewWidth - CGFloat(totalCellWidth + totalSpacingWidth)) / 2
    let rightInset = leftInset

    return UIEdgeInsets(top: 0, left: leftInset, bottom: 0, right: rightInset)
}


답변

스위프트 5.1

func centerItemsInCollectionView(cellWidth: Double, numberOfItems: Double, spaceBetweenCell: Double, collectionView: UICollectionView) -> UIEdgeInsets {
    let totalWidth = cellWidth * numberOfItems
    let totalSpacingWidth = spaceBetweenCell * (numberOfItems - 1)
    let leftInset = (collectionView.frame.width - CGFloat(totalWidth + totalSpacingWidth)) / 2
    let rightInset = leftInset
    return UIEdgeInsets(top: 0, left: leftInset, bottom: 0, right: rightInset)
}

스위프트 4.2

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {

    let totalCellWidth = 80 * collectionView.numberOfItems(inSection: 0)
    let totalSpacingWidth = 10 * (collectionView.numberOfItems(inSection: 0) - 1)

    let leftInset = (collectionView.layer.frame.size.width - CGFloat(totalCellWidth + totalSpacingWidth)) / 2
    let rightInset = leftInset

    return UIEdgeInsets(top: 0, left: leftInset, bottom: 0, right: rightInset)

}

스위프트 3

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAtIndex section: Int) -> UIEdgeInsets {

        let totalCellWidth = 80 * collectionView.numberOfItems(inSection: 0)
        let totalSpacingWidth = 10 * (collectionView.numberOfItems(inSection: 0) - 1)

        let leftInset = (collectionView.layer.frame.size.width - CGFloat(totalCellWidth + totalSpacingWidth)) / 2
        let rightInset = leftInset

        return UIEdgeInsetsMake(0, leftInset, 0, rightInset)

    }

프로토콜을 추가하는 것을 잊지 마세요

UICollectionViewDelegateFlowLayout


답변

Swift 4에 사용해보세요

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
        let cellWidth : CGFloat = 165.0

        let numberOfCells = floor(self.view.frame.size.width / cellWidth)
        let edgeInsets = (self.view.frame.size.width - (numberOfCells * cellWidth)) / (numberOfCells + 1)

        return UIEdgeInsetsMake(15, edgeInsets, 0, edgeInsets)
    }

165.0 대신 cellWidth 추가


답변

이를 위해 KTCenterFlowLayout 을 사용 하며 훌륭하게 작동합니다. UICollectionViewFlowLayout원하는대로 중앙 셀 의 사용자 지정 하위 클래스입니다 . (참고 : 이것은 일부 코드를 게시하여 해결하는 사소한 일이 아니기 때문에 GitHub 프로젝트에 연결합니다!)


답변

Darshan Patel의 답변에 대한 객관적인 C 버전 :

- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(nonnull UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section {
    CGFloat totalCellWidth = kItemWidth * self.dataArray.count;
    CGFloat totalSpacingWidth = kSpacing * (((float)self.dataArray.count - 1) < 0 ? 0 :self.dataArray.count - 1);
    CGFloat leftInset = (self.bounds.size.width - (totalCellWidth + totalSpacingWidth)) / 2;
    CGFloat rightInset = leftInset;
    UIEdgeInsets sectionInset = UIEdgeInsetsMake(0, leftInset, 0, rightInset);
    return sectionInset;
}


답변

@Safad Funy의 답변을 약간 수정하면 Swift 및 iOS의 최신 버전에서 저에게 효과적이었습니다. 이 경우 셀 너비가 컬렉션 뷰 크기의 1/3이되기를 원했습니다.

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {

  let totalCellWidth = Int(collectionView.layer.frame.size.width) / 3 * collectionView.numberOfItems(inSection: 0)
  let totalSpacingWidth = (collectionView.numberOfItems(inSection: 0) - 1)

  let leftInset = (collectionView.layer.frame.size.width - CGFloat(totalCellWidth + totalSpacingWidth)) / 2
  let rightInset = leftInset

  return UIEdgeInsetsMake(0, leftInset, 0, rightInset)
}


답변

이 확장 프로그램 (Swift 4)을 사용할 수 있습니다.

당신 collectionView이 가지고 있다면 그것은 세포를 중심에 둘 수 있습니다layout.estimatedItemSize = UICollectionViewFlowLayoutAutomaticSize .

모든 세포 크기에서 작동하며 다음과 같은 경우 완벽하게 작동합니다. scrollDirection = .horizontal

public extension UICollectionView {
    func centerContentHorizontalyByInsetIfNeeded(minimumInset: UIEdgeInsets) {
        guard let layout = collectionViewLayout as? UICollectionViewFlowLayout,
            layout.scrollDirection == .horizontal else {
                assertionFailure("\(#function): layout.scrollDirection != .horizontal")
                return
        }

        if layout.collectionViewContentSize.width > frame.size.width {
            contentInset = minimumInset
        } else {
            contentInset = UIEdgeInsets(top: minimumInset.top,
                                        left: (frame.size.width - layout.collectionViewContentSize.width) / 2,
                                        bottom: minimumInset.bottom,
                                        right: 0)
        }
    }
}


final class Foo: UIViewController {
    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        collectionView.centerContentHorizontalyByInsetIfNeeded(minimumInset: yourDefaultInset)
    }
}

도움이되기를 바랍니다!