首页 文章

在swift中向tableViewCell动态添加多个视图时,UIViews重叠

提问于
浏览
2

我想在表格单元格中添加一些 n 视图(假设每个视图都是一行) . 根据 designerExpertiseList 计数,我为每一行创建了一个视图,并添加了1个图像视图和1个标签 .

但是当我滚动时,单元格的数据不正确 . 如果我长按一个单元格,我可以看到一个不同的视图与现在可见的视图重叠 . 请查看附带的屏幕截图

第一次加载视图时:http://i.stack.imgur.com/M8itL.png
向下滚动后,再次向上滚动并长按:http://i.stack.imgur.com/AuTG0.png

当我向上滚动时,数据对于少数单元格来说是第一次正确的,即使是搞砸了 . 我甚至试图在First Render上添加这些 dynamic views 一次 .

有全球声明:

let rowHeight:CGFloat = 20.0
let imageWidth:CGFloat = 15.0
let imageHeight:CGFloat = 15.0
let labelX:CGFloat = 30.0
let labelHeight:CGFloat = 20.0
var firstRender:[Bool] = [Bool]()

tableView cellForRowAtIndexPath 方法中的代码:

self.designer = AppController.getElementFromDesignersList(indexPath.section)

        cell.designerName.text = designer.getFirstName() + " " + designer.getLastName()
        cell.location.text = designer.getAddress()

        // Add more ROWS of expertise if exist! Getting only 1st expertise now, if it exists
        let expertiseList = self.designer.getExpertiseList()

        if self.firstRender[indexPath.section] {
            var i:Int = 0
            for e in expertiseList {
                let v = UIView(frame: CGRectMake(0, CGFloat(i)*rowHeight, cell.frame.width, rowHeight))
                v.backgroundColor = UIColor.yellowColor()
                let im = UIImageView(frame: CGRectMake(0, CGFloat(i)*imageHeight, imageWidth, imageHeight ))
                //print("expertise image path: ", e.getImagePath())
                im.af_setImageWithURL(
                    NSURL(string: e.getImagePath())!,
                    placeholderImage: UIImage(named: "default_galary_demo2")!
                )

                im.translatesAutoresizingMaskIntoConstraints = false
                v.addSubview(im)

                // Adding constraints
                NSLayoutConstraint(item: im, attribute: .CenterY, relatedBy: .Equal, toItem: v, attribute: .CenterY, multiplier: 1, constant: 0).active = true
                NSLayoutConstraint(item: im, attribute: NSLayoutAttribute.Leading, relatedBy: NSLayoutRelation.Equal, toItem: v, attribute: NSLayoutAttribute.LeadingMargin, multiplier: 1.0, constant: 0.0).active = true
                im.widthAnchor.constraintEqualToAnchor(nil, constant: imageWidth).active = true
                im.heightAnchor.constraintEqualToAnchor(nil, constant: imageHeight).active = true

                // cell.frame.width - im.frame.width - 50
                let label = UILabel(frame: CGRectMake(0, CGFloat(i)*labelHeight, UIScreen.mainScreen().bounds.width - imageWidth, labelHeight))
                label.font = UIFont(name: "OpenSans", size: 12)
                print("expertise dump:  ", dump(e.getExpertiseValuesList()))
                //print("expertise str: ", e.getExpertiseValuesList().map({"\($0.getName())"}).joinWithSeparator(","))
                label.text = e.getExpertiseValuesList().map({"\($0.getName())"}).joinWithSeparator(",")

                //label.translatesAutoresizingMaskIntoConstraints = false
                v.addSubview(label)


                NSLayoutConstraint(item: label, attribute: .CenterY, relatedBy: .Equal, toItem: v, attribute: .CenterY, multiplier: 1, constant: 0).active = true

                NSLayoutConstraint(item: label, attribute: NSLayoutAttribute.Leading, relatedBy: NSLayoutRelation.Equal, toItem: im, attribute: NSLayoutAttribute.LeadingMargin, multiplier: 1.0, constant: 10.0).active = true

                cell.designerExpertiseView.addSubview(v)
                i += 1
            }
            self.firstRender[indexPath.section] = false

3 回答

  • 0

    我不认为只在 if self.firstRender[indexPath.section] 时渲染单元格是正确的,因为当用户滚动表格视图时,屏幕外的单元格将被重用以显示其他不同的indexPaths . 另一件事,你创建约束,但不使用它们

  • 0

    您可以使用UIStackViews来处理约束 . 你会:

    • 大大减少类中的样板约束代码;

    • 简化添加子视图;

    • 允许自适应布局 .

    在您的UITableViewCell中添加一个垂直UIStackViewFor . 对于更复杂的布局,您可以将更多UIStackView嵌入到Vertical堆栈视图中,也可以混合使用AutoLayout和UIStackViews .

    Using a UIStackView

    我've quickly tried to recreate your layout and I' ve添加了一个UIStackView . 此实现将AutoLayout用于某些固定组件(如配置文件图片)和堆栈视图以处理以编程方式添加的UILabel .

    我希望这有帮助!

  • 0

    看起来,使用.addSubView()以编程方式将视图添加到单元格将不适合使用可重用单元格 . 之所以发生这种情况,是因为单元格在离开视图时会被重复使用,但是当再次变为可见时,会再次添加子视图 .

    我使用的解决方案/解决方法是从故事板添加另一个占位符视图 . 我在不需要时使用.removeFromSuperview()从superview中删除了视图 .

    我知道这种方法并不好Ex:假设我在一个单元格中放置了10个视图(假设10是我需要的最大视图),但根据我从服务器获得的数据,可能不需要其中许多视图 . 所以我将从视图中删除大部分内容 .

    我仍在为这个问题寻找更好/更实际的解决方案 .

相关问题