Установить ширину пользовательского пера UIView для его родительского CollectionViewCell - PullRequest
Новая
       43

Установить ширину пользовательского пера UIView для его родительского CollectionViewCell

0 голосов
/ 21 марта 2019

Вот что у меня есть:

Представление коллекции с двумя столбцами, каждый из которых расположен на равном расстоянии.

Каждая ячейка загружает SmallCardView.xib.SmallCardView содержит квадратное изображение с текстом ниже.

Проблема:

Я хочу, чтобы ширина представления соответствовала ширине его родительского элемента (ячейки).Это лучше всего иллюстрируется сравнением размеров экрана

Screen size comparison

Как вы можете видеть выше, ячейка (фиолетовый контур) имеет размеры правильно на обоих экранах, но SmallCardView остаетсятот же размер

Вот код в моем контроллере представления коллекции:

viewDidLoad - 

private let spacing: CGFloat = 20.0

override func viewDidLoad() {
    super.viewDidLoad()

    let layout = UICollectionViewFlowLayout()
    layout.sectionInset = UIEdgeInsets(top: spacing, left: spacing, bottom: spacing, right: spacing)
    self.collectionView?.collectionViewLayout = layout
}

sizeForItemAt - 

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    let numberOfItemsPerRow: CGFloat = 2
    let spacingBetweenCells: CGFloat = 20

    let totalSpacing = (2 * self.spacing) + ((numberOfItemsPerRow - 1) * spacingBetweenCells) // Amount of total spacing in a row

    if let collection = self.collectionView {
        let width = (collection.bounds.width - totalSpacing)/numberOfItemsPerRow
        return CGSize(width: width, height: width * 1.2)
    } else {
        return CGSize(width: 0, height: 0)
    }
}

Спасибо!

Ответы [ 2 ]

1 голос
/ 21 марта 2019

Вы можете встроить вид с ограничениями на края как: 

extension UIView {

    func makeEdges(to view: UIView, useMargins: Bool = false) -> [NSLayoutConstraint] {
        return [
            (useMargins ? layoutMarginsGuide.leftAnchor : leftAnchor).constraint(equalTo: view.leftAnchor),
            (useMargins ? layoutMarginsGuide.rightAnchor : rightAnchor).constraint(equalTo: view.rightAnchor),
            (useMargins ? layoutMarginsGuide.topAnchor : topAnchor).constraint(equalTo: view.topAnchor),
            (useMargins ? layoutMarginsGuide.bottomAnchor : bottomAnchor).constraint(equalTo: view.bottomAnchor)
        ]
    }

    func edges(to view: UIView, useMargins: Bool = false) {
        NSLayoutConstraint.activate(makeEdges(to: view, useMargins: useMargins))
    }
}

И использовать его как: 

let cardView = ...
cardView.translatesAutoresizingMaskIntoConstraints = false
let cell = ...
cell.contentView.addSubview(cardView)
cell.contentView.edges(to: cardView, useMargins: true)
0 голосов
/ 21 марта 2019

Сначала возьмите коллекцию с раскадровки. Установите его ограничения, как показано ниже: -

  1. Ведущее пространство для контейнера - 20
  2. Тянущее пространство к контейнеру - 20
  3. Верхнее пространство для контейнера - 20
  4. От дна до контейнера - 20

Затем выберите вид коллекции и удалите отступы строк по умолчанию 10. Итак, обновите с 20. Таким образом, cellpadding должен быть 10 с каждой стороны.

Затем перейдите в файл viewcontroller и добавьте всех 3 делегатов. 1. UICollectionViewDelegate 2. UICollectionViewDataSource 3. UICollectionViewDelegateFlowLayout

Затем добавьте следующий код в ваш файл swift: - 

   func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {

       return CGSize(width: (self.view.frame.size.width - 60) / 2, height: (self.view.frame.size.width - 60) / 2)

   }
...