Как я могу центрировать кнопки в UICollectionViewFlowLayout для двух столбцов? Может ли быть более эффективный способ решить эту проблему?

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


Вот как это выглядит прямо сейчас:

введите здесь описание изображения

Это мой код для ViewController:

import SideMenu
import UIKit

class ViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {

    @IBOutlet weak var collectionView: UICollectionView!
    var button_titles : [String] = ["Action", "KnowHow", "Beginner", "Expert", "Level Up", "What is", "How to use", "Home"]
    
    override func viewDidLoad() {
        super.viewDidLoad()
        self.title = "Prana Power"
        collectionView.delegate = self
        collectionView.dataSource = self
        
        self.collectionView.register(UINib(nibName: "ButtonCollectionViewCell", bundle: nil), forCellWithReuseIdentifier: "ButtonMainMenu")
    }
      
    override func viewWillAppear(_ animated: Bool) {
         super.viewWillAppear(animated)
         //collection.reloadData()
     }

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        let flowayout = collectionViewLayout as? UICollectionViewFlowLayout
        let space: CGFloat = (flowayout?.minimumInteritemSpacing ?? 0.0) + (flowayout?.sectionInset.left ?? 0.0) + (flowayout?.sectionInset.right ?? 0.0)
        let size:CGFloat = (collectionView.frame.size.width - space) / 2.0
        return CGSize(width: size, height: size)
    }
    

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

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        guard let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "ButtonMainMenu", for: indexPath) as? ButtonCollectionViewCell else { return UICollectionViewCell()}
        cell.btnClick.setTitle(button_titles[indexPath.item], for: .normal)
        cell.btnClick.titleLabel!.font = UIFont(name: "HelveticaNeue-Thin", size: 20)
        cell.backgroundColor = UIColor.lightGray
        return cell
    }
    
    
    }

Таким образом, кнопка находится в центре моей раскадровки для ButtonCollectionViewCell, как это видно на debug view hierarchy, но не во внешней ячейке:

введите здесь описание изображения

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

введите здесь описание изображения

Я попытался использовать второй ответ из этот пост в качестве решения:

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

Когда я потом запускаю код, он, похоже, не влияет на мое представление. Я попытался изменить функцию на

    func centerItemsInCollectionView(cellWidth: Double, numberOfItems: Double, spaceBetweenCell: Double, collectionView: UICollectionView) -> UIEdgeInsets {
        return UIEdgeInsets(top: 15, left: 15, bottom: 15, right: 15)
    }

чтобы проверить, есть ли вообще какие-либо эффекты, но после перезапуска приложения все то же самое.

Прочитав этот пост, я понял, что мог бы необходимо установить minimumInteritemSpacing. Я попытался установить flowayout?.minimumInteritemSpacing = 6 в моей функции collectionView для возврата CGSize без какого-либо эффекта.


Итак, два моих вопроса:

  1. Есть ли более простой способ добиться желаемого макета? Так как я хорошо разбираюсь в iOS и Swift, я не знаком со всеми возможностями создания макетов.
  2. Как я могу исправить свою проблему в текущем коде?

Пожалуйста, дайте мне сейчас, если у вас есть какие-либо советы, решения или идеи по этому вопросу. Заранее спасибо!


person FelixOuttaSpace    schedule 06.05.2021    source источник
comment
Почему бы не использовать автораскладку раскадровки?   -  person Kudos    schedule 06.05.2021
comment
вы устанавливаете здесь UICollectionViewDelegateFlowLayout, но вы устанавливаете приблизительный размер .automatic, просто измените его на .none, это сработает :).   -  person    schedule 06.05.2021
comment
@Kudos, как бы вы использовали автомакет в этом отношении?   -  person FelixOuttaSpace    schedule 06.05.2021
comment
@RB, я пытался изменить это, но, к сожалению, это не повлияло на перезапуск.   -  person FelixOuttaSpace    schedule 06.05.2021
comment
Autolayout исправил это сейчас, у меня были некоторые конфликтующие ограничения! Спасибо!   -  person FelixOuttaSpace    schedule 06.05.2021
comment
@FelixOuttaSpace Я был прав??   -  person Kudos    schedule 06.05.2021
comment
@kudos да, это устранило проблему с установкой расстояния до ячейки. Я пытался установить это раньше, но пришлось еще немного попробовать, теперь все работает, спасибо!   -  person FelixOuttaSpace    schedule 06.05.2021
comment
Я предоставляю ответ Пожалуйста, отметьте его как правильный.   -  person Kudos    schedule 06.05.2021


Ответы (1)


Используйте Autoloayout раскадровки. У вас наверняка есть конфликты ограничений.

     |
-  Button -
     |
person Kudos    schedule 06.05.2021