组织和调整每台设备的UILabel位置 - Swift 3

时间:2017-08-07 09:52:03

标签: swift database sqlite uilabel cgrect

我有SQLite数据库文件和UILabel,并且在将String转换为Characters之后,我在数据库中为标签设置了文本,我添加了扩展名(length ),它的工作计算字符数。

enter image description here

我在这张照片中遇到的问题是:UILabels的尺寸和位置并不是按设备排列我希望它们在X轴的中心位置

问题:

1)如何将标签设置为中心并在屏幕的左右两侧设置标签(每台设备)??

2)如果设备为iPhone 7 / 6S / 6加宽度= 50,如果设备为iPhone 7 / 6S / 6宽度= 45且设备为iPhone SE / 5S / 5C,如何设置标签宽度/ 5 width = 38 ??

3)最后,如果字符数超过8,标签如何变小10?

这是我的代码:

func createTarget(id: Int) {

    listdata = dbHelpr.getDatabase(rowId: id)

    for data in listdata {

        let lengthOfChar : CGFloat = data.ans.length
        let yAxis : CGFloat = (self.view.frame.height) * 60%
        let width: CGFloat = view.frame.size.width - 40 // frame width
        var targetWidth: CGFloat = (width - (lengthOfChar - 1) * 5) / lengthOfChar
        let targetHeigt : CGFloat = 5

        if lengthOfChar >= 8 {
            targetWidth = 40
        } else {
            targetWidth = 50
        }

        let totalWidth: CGFloat = (targetWidth * lengthOfChar) + ((lengthOfChar - 5) * 5)

        for (indexTar, tar) in data.ans.characters.enumerated() {

            let x : CGFloat = (width / 2) - (totalWidth / 2)
            let xx : CGFloat = (CGFloat(indexTar) * targetWidth) + (CGFloat(indexTar) * 5) + 20
            var xAxis : CGFloat = (x + xx)
            xAxis = width - xAxis



            let targetLabel = UILabel(frame: CGRect(x: xAxis, y: yAxis, width: targetWidth, height: targetHeigt))
            targetLabel.backgroundColor = .white
            targetLabel.layer.masksToBounds = true
            targetLabel.layer.cornerRadius = 5
            targetLabel.text = String(describing: tar)
            targetLabel.textAlignment = .center
            targetLabel.textColor = .white
            self.view.addSubview(targetLabel)

        }

    }

}

2 个答案:

答案 0 :(得分:0)

为了定位标签,您需要做一些事情:

  1. 标记容器以保持所有内容并且屏幕边缘有边距
  2. 根据设备尺寸等标签之间的约束。
  3. 如果你需要断线 - 你还需要手动处理它
  4. 要识别设备种类并使用不同的逻辑,您可以查看以下帖子: iOS: How to determine the current iPhone/device model in Swift?

    为了用标签填充视图,下面是一个实现此目的的示例代码:

    self.view.backgroundColor = UIColor.black
    
    let labelContainerView : UIView = UIView(frame: CGRect(x: 0, y: 0, width: 10, height: 10))
    labelContainerView.translatesAutoresizingMaskIntoConstraints = false
    
    let containerLeftConstraint : NSLayoutConstraint = NSLayoutConstraint(item: self.view, attribute: .left, relatedBy: .greaterThanOrEqual, toItem: labelContainerView, attribute: .left, multiplier: 1, constant: 8)
    let containerRightConstraint : NSLayoutConstraint = NSLayoutConstraint(item: self.view, attribute: .right, relatedBy: .greaterThanOrEqual, toItem: labelContainerView, attribute: .right, multiplier: 1, constant: 8)
    let containerCenterX : NSLayoutConstraint = NSLayoutConstraint(item: labelContainerView, attribute: .centerX, relatedBy: .equal, toItem: self.view, attribute: .centerX, multiplier: 1, constant: 0)
    let containerCenterY : NSLayoutConstraint = NSLayoutConstraint(item: labelContainerView, attribute: .centerY, relatedBy: .equal, toItem: self.view, attribute: .centerY, multiplier: 1, constant: 0)
    
    self.view.addSubview(labelContainerView)
    self.view.addConstraints([ containerLeftConstraint, containerRightConstraint, containerCenterX, containerCenterY ])
    
    // Add some labels
    let totalLabels : Int = 10
    
    var lastAddedLabel : UILabel? = nil
    
    for labelAt : Int in 1 ... totalLabels
    {
        var addedConstraint : [NSLayoutConstraint] = [NSLayoutConstraint]()
    
        let label : UILabel = UILabel(frame: CGRect.zero)
        label.translatesAutoresizingMaskIntoConstraints = false
        label.text = "_"
        label.textColor = UIColor.white
        label.textAlignment = .center
        label.adjustsFontSizeToFitWidth = true
    
        if (lastAddedLabel != nil)
        {
            // Add left constraint to previous label
            let leftConstraint : NSLayoutConstraint = NSLayoutConstraint(item: label, attribute: .left, relatedBy: .equal, toItem: lastAddedLabel!, attribute: .right, multiplier: 1, constant: 8)
            let equalWidth : NSLayoutConstraint = NSLayoutConstraint(item: label, attribute: .width, relatedBy: .equal, toItem: lastAddedLabel!, attribute: .width, multiplier: 1, constant: 0)
    
            addedConstraint.append(contentsOf: [ leftConstraint, equalWidth ])
        }
        else
        {
            // Add left constraint to super view
            let leftConstraint : NSLayoutConstraint = NSLayoutConstraint(item: labelContainerView, attribute: .left, relatedBy: .equal, toItem: label, attribute: .left, multiplier: 1, constant: 0)
    
            addedConstraint.append(leftConstraint)
        }
    
        // Add top bottom constraint
        let topConstraint : NSLayoutConstraint = NSLayoutConstraint(item: labelContainerView, attribute: .top, relatedBy: .equal, toItem: label, attribute: .top, multiplier: 1, constant: 0)
        let bottomConstraint : NSLayoutConstraint = NSLayoutConstraint(item: labelContainerView, attribute: .bottom, relatedBy: .equal, toItem: label, attribute: .bottom, multiplier: 1, constant: 0)
    
        addedConstraint.append(contentsOf: [ topConstraint, bottomConstraint ])
    
        // Add right constraint if this is the last label
        if (labelAt == totalLabels)
        {
            let rightConstraint : NSLayoutConstraint = NSLayoutConstraint(item: labelContainerView, attribute: .right, relatedBy: .equal, toItem: label, attribute: .right, multiplier: 1, constant: 0)
    
            addedConstraint.append(rightConstraint)
        }
    
        labelContainerView.addSubview(label)
        labelContainerView.addConstraints(addedConstraint)
    
        lastAddedLabel = label
    }
    
    self.view.layoutIfNeeded()
    

    这给出了输出:

    enter image description here

    您可能需要做出的更改:

    1. 根据您的要求更改“totalLabels”号码
    2. 可能会为第一个生成的标签添加另一个宽度约束,以便为所有标签定义特定的 - 其余标签与第一个标签保持相同的宽度
    3. 从不同设备的两侧调整包含视图边距
    4. 通过预先计算标签可能使用的宽度来手动处理新行。
    5. 祝你好运

答案 1 :(得分:0)

我解决了我的问题和答案:

func createTarget(id: Int) {

    listdata = dbHelpr.getDatabase(rowId: id)
    var targetHeigt = CGFloat()
    let viewWidth = self.view.frame.size.width
    if viewWidth == 320 {
        targetHeigt = 2.5
    } else {
        targetHeigt = 5
    }

    for data in listdata {
        let yAxis : CGFloat = (self.view.frame.height) * 60%
        let i = data.ans.length
        // char count
        let width: Int = Int(view.frame.size.width) - 40

        // frame width
        var targetWidth: Int = (width - (i - 1) * 5) / i

        if targetWidth > 50 {
            targetWidth = 50
        }
        let totalWidth: Int = (targetWidth * i) + ((i - 1) * 5)

        for x in 0..<i {
            let currentWidth: Int = (width / 2) - (totalWidth / 2) + (x * targetWidth) + (x * 5) + 20

            let targetLabel = UILabel(frame: CGRect(x: CGFloat(currentWidth), y: yAxis, width: CGFloat(targetWidth), height: targetHeigt))
            targetLabel.backgroundColor = .white
            targetLabel.layer.masksToBounds = true
            targetLabel.layer.cornerRadius = 5
            targetLabel.textAlignment = .center
            targetLabel.textColor = .white

            for i in listdata {
                let tar = data.ans.characters.map{String($0)}
                targetLabel.text = String(describing: tar)
            }
            self.view.addSubview(targetLabel)
        }
    }
}