当前位置: 首页 > 面试题库 >

UICellView单元格布局快速

廖绍辉
2023-03-14
问题内容

我正在尝试使用UICollectionView创建一个网格,用户可以将其设置为x单元x y单元(在文本框中输入),同时仍在屏幕上占据相同的宽度。

我已经能够创建一个包含正确数量的单元格的网格视图,但是这些视图的布局不正确,即,按5输入7将得到35个单元格,但不能按5输入7个单元格进行布局。这是我到目前为止的代码。

MyCollectionViewCell.swift导入UIKit

class MyCollectionViewCell: UICollectionViewCell {

    @IBOutlet var cellLabel: UILabel!

}

CreateNewProject.swift

class CreateNewProject : UIViewController, UICollectionViewDataSource, UICollectionViewDelegate, UITextFieldDelegate {

    @IBOutlet var widthTextBox: UITextField!

    @IBOutlet var lengthTextBox: UITextField!

    @IBOutlet var myCollection: UICollectionView!

    let reuseIdentifier = "cell" // also enter this string as the cell identifier in the storyboard

    @IBAction func updateView(sender: AnyObject) {
        let widthValue = Int(widthTextBox.text!)
        let lengthValue = Int(lengthTextBox.text!)
        multiplyValue = Int(widthValue! * lengthValue!)
        createArray()
    }


    func createArray() {
        var i = 0
        while i < multiplyValue {
            items.append("")
            i += 1
        }
        myCollection.reloadData()
    }


    func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        print(self.items.count)
    }

    // make a cell for each cell index path
    func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {

        // get a reference to storyboard cell
        let cell = collectionView.dequeueReusableCellWithReuseIdentifier(reuseIdentifier, forIndexPath: indexPath) as! MyCollectionViewCell

        // Use the outlet in custom class to get a reference to the UILabel in the cell
        cell.cellLabel.text = self.items[indexPath.item]
        cell.backgroundColor = UIColor.lightGrayColor()

        return cell
    }    
}

我限制了UICollectionView的左侧,右侧和顶部,并希望以编程方式将集合视图中的单元格调整为UICollectionView.width /
x(用户选择的单元格宽度数)。

不确定执行此操作的最佳方法,并且还需要在各个单元格之间保留一些空白。任何帮助将非常感激!


问题答案:

简单,添加实现该UICollectionViewDelegateFlowLayout协议的视图控制器扩展:

extension ViewController: UICollectionViewDelegateFlowLayout {
    func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
        let  size = collectionView.frame.size.width / CGFloat(cols) - CGFloat((cols - 1)) * spacingBetweenCells
        return CGSize(width: size, height: size)
    }
}

spacingBetweenCells 在此表示您要在单元格之间放置的间距。



 类似资料:
  • 我有一个带有一堆单元格的表视图(自定义单元格,它只有它的内容视图)。 在 中,我正在向自定义单元格的content视图添加一个预定义的UIView(它有几个子视图)。我之前为UIView及其子视图设置了所有约束。 最后但并非最不重要的是,我为我的自定义单元格的内容视图(superview)和UIView设置了垂直和水平约束,UIView是在(subview)之前添加的。 约束字符串如下所示: 不幸

  • 问题内容: 在为Java代码构建一套单元测试时,是否有关于将测试代码与源代码放置在何处的约定? 例如,如果我有一个包含一堆源文件的目录,那么最好将测试用例本身放在其中或使用类似的内容。 如果首选后者,那么在包之外无法使用类的 / 成员时,如何测试代码的内部? 问题答案: 您可以将测试与原始类放在同一包中,即使源代码位于其自己的目录根目录下: 您可以在下声明一个类,并在下声明其测试。 至于访问私有成

  • Grid 宫格布局 平台差异说明 App H5 微信小程序 支付宝小程序 百度小程序 头条小程序 QQ小程序 √ √ √ √ √ √ √ 基本使用 该组件外层为u-grid组件包裹,通过col设置内部宫格的列数 内部通过ugrid-item组件的slot设置宫格的内容 如果不需要宫格的边框,可以设置border为false <template> <u-grid :col="3"> <u-gr

  • 使用表单布局创建响应式的精美的表单布局。表单布局就是 列表,但是会有一些拓展。 简单的表单布局 让我们看一种最简单的表单布局: <div class="list-block"> <ul> ... <li> <div class="item-content"> <div class="item-media">... icon here ...</div

  • 我使用autolayout在故事板中创建了一个UIViewController,它有一个嵌入式UITableView。由于某些原因,表视图部分上方存在空白。我的期望是tableview将所有可用空间分割为单元格,并使单元格从顶部开始。 当使用自动布局和大小类时,是什么导致表视图在第一部分上方添加空白?

  • 本文向大家介绍Android布局之表格布局TableLayout详解,包括了Android布局之表格布局TableLayout详解的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了Android表格布局TableLayout的具体代码,供大家参考,具体内容如下 1.TableLayout TableLayout表格布局模型以行列的形式管理子控件,每一行为一个TableRow的对象, 当