Установить конкретный макет для каждого другого элемента в collectionView - PullRequest
Новая
       13

Установить конкретный макет для каждого другого элемента в collectionView

0 голосов
/ 30 августа 2018

У меня есть collectionView с пользовательской ячейкой. Я хочу создать макет imageView внутри моей ячейки с определенной компоновкой, но он неправильно его раскладывает.

enter image description here

1-я и 3-я строки имеют правильную компоновку, но 2-я строка неверна. Правильный макет должен быть таким, чтобы каждое изображение, находящееся посередине, было ниже двух других с обоих концов.

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

Как сделать так, чтобы макет был похож на изображение ниже?

enter image description here

Код: 

override func viewDidLoad() {
    super.viewDidLoad()

    let layout = UICollectionViewFlowLayout()
    layout.sectionInset = UIEdgeInsetsMake(15, 0, 5, 0)
    layout.scrollDirection = .vertical

    collectionView = UICollectionView(frame: .zero, collectionViewLayout: layout)
    collectionView.translatesAutoresizingMaskIntoConstraints = false
    // collectionView datasource, delegate, and cell registration set
    view.addSubview(collectionView)

    collectionView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor).isActive = true
    collectionView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor).isActive = true
    collectionView.leftAnchor.constraint(equalTo: view.leftAnchor, constant: 5).isActive = true
    collectionView.rightAnchor.constraint(equalTo: view.rightAnchor, constant: -5).isActive = true
}

func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return 9
}

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: cellId, for: indexPath) as! CustomCell

    cell.item = indexPath.item
 }

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

    let width = (view.frame.width - 25) / 3
    return CGSize(width: width, height: width)
}

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
    return 25
}

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
    return 5
}

Вот код внутри CollectionViewCell, который я использую для установки макета: 

class CustomCell: UICollectionViewCell {

    var item: Int = 0 {
        didSet {
             setLayout()
        }
    }

    func setLayout() {
        addSubview(imageView)

        imageView.leftAnchor.constraint(equalTo: self.leftAnchor).isActive = true
        imageView.rightAnchor.constraint(equalTo: self.rightAnchor).isActive = true

        if item % 2 == 0 {

            imageView.topAnchor.constraint(equalTo: self.topAnchor, constant: -10).isActive = true
            imageView.bottomAnchor.constraint(equalTo: self.bottomAnchor, constant: -10).isActive = true

        } else {

            imageView.topAnchor.constraint(equalTo: self.topAnchor, constant: 10).isActive = true
            imageView.bottomAnchor.constraint(equalTo: self.bottomAnchor, constant: 10).isActive = true
        }
    }
}

Ответы [ 2 ]

0 голосов
/ 30 августа 2018

давайте посмотрим .... предметы, которые вы хотите переместить, это 2, 5 и 8 ... + 3

так что ... попробуй .... 

if item == 2 {
    imageView.topAnchor.constraint(equalTo: self.topAnchor, constant: 10).isActive = true
    imageView.bottomAnchor.constraint(equalTo: self.bottomAnchor, constant: 10).isActive = true

} 
if (item - 2 ) % 3 == 0{
imageView.topAnchor.constraint(equalTo: self.topAnchor, constant: 10).isActive = true
    imageView.bottomAnchor.constraint(equalTo: self.bottomAnchor, constant: 10).isActive = true
 } else {
    imageView.topAnchor.constraint(equalTo: self.topAnchor, constant: -10).isActive = true
    imageView.bottomAnchor.constraint(equalTo: self.bottomAnchor, constant: -10).isActive = true
}

// Вы видите, куда я иду? Исключением из вашего правила является 2. Вам нужно настроить каждую 2 + 3 (n) ячейку. 

// so if item = 2; process code
// if item = 5: minus it by 2; item = 3 which % 3 == 0
// if item = 8: minus it by 2; item = 6 which % 3 == 0

// and so on. 
// hope you understand now, I'm not very good at explaining,
0 голосов
/ 30 августа 2018

Похоже, вы хотите проверить if (item + 1) % 3 == 2, а затем переместить ячейку вниз. Вот отредактированный код: 

   if (item + 1) % 3 == 2 {
        imageView.topAnchor.constraint(equalTo: self.topAnchor, constant: 10).isActive = true
        imageView.bottomAnchor.constraint(equalTo: self.bottomAnchor, constant: 10).isActive = true

    } else {

        imageView.topAnchor.constraint(equalTo: self.topAnchor, constant: -10).isActive = true
        imageView.bottomAnchor.constraint(equalTo: self.bottomAnchor, constant: -10).isActive = true
    }
...