Question

我正在创建此国际象棋游戏。为了构建该板，我采用了64个小视图，并将它们全部放在堆栈视图中。但是每次我发现一两行或一列的视图与其余的列和行（具有相同大小的视图）的大小都不相同。例如：-在此图像中，第二和第六列以及第二和第六行的大小为（67.67，67），其中所有其余视图的大小为（67，67）。为什么会这样呢？如何使所有视图具有完全相同的大小？

谢谢

Answer 1

最好使用UICollectionView而不是StackView，因为您可以使用UICollectionView的FlowLayout并为棋盘创建64个单元格GridView。

我制作了一个GitHub Repo来做到这一点，请转到SecondViewController代码：SourceCode

说明：

第1步：使集合视图的宽度为最大屏幕宽度的8的倍数。

  override func viewDidLoad() {
    super.viewDidLoad()
    let deviceWidth = UIScreen.main.bounds.size.width
    let cellWidth = floor(deviceWidth / 8)
    let collectionViewWidth = 8 * cellWidth
    self.collectionViewWidthConstraint.constant = collectionViewWidth

}

步骤2：定义collectionCell的大小

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

    let deviceWidth = UIScreen.main.bounds.size.width
    let width = floor(deviceWidth / 8)
    let height = width
    return CGSize(width: width, height: height)
}

步骤3：定义单元格总数和每个单元格的颜色

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

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {

        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "unique", for: indexPath)

        let chessRow = indexPath.row / 8
        if chessRow % 2 == 0 {
            if indexPath.row % 2 == 0 {
                 cell.backgroundColor = UIColor.white
            }else{
                cell.backgroundColor = UIColor.black
            }
        } else{
            if indexPath.row % 2 == 0 {
                cell.backgroundColor = UIColor.black
            }else{
                cell.backgroundColor = UIColor.white
            }
        }

        return cell
    }

步骤4：在情节提要约束中将collectionView AspectRatio设置为1。

最终结果：

在swift4中创建相同高度和宽度的棋盘

1 个答案: