How to get the dynamic distance between 2 elements in iOS with auto layout

Question

I have this following UI that needs to draw a dashed line. I'm not sure how to calculate the width needed especially with the autolayout dynamically determining the spacing by screen. The green bars are single UITableViewCells. Below is the code for drawing the dashed line:

extension UIView {

    func addDashedBorder(barWidth: Int, maxWidth: Int) {
        //Create a CAShapeLayer
        let shapeLayer = CAShapeLayer()
        shapeLayer.strokeColor = UIColor.red.cgColor
        shapeLayer.lineWidth = 2
        // passing an array with the values [2,3] sets a dash pattern that alternates between a 2-user-space-unit-long painted segment and a 3-user-space-unit-long unpainted segment
        shapeLayer.lineDashPattern = [2,3]

        let path = CGMutablePath()
        path.addLines(between: [CGPoint(x: 0, y: 0),
                                CGPoint(x: barWidth - maxWidth, y: 0)])
        shapeLayer.path = path
        layer.addSublayer(shapeLayer)
    }
}

I need the red lines to overlap with the gray line. How would I do that given that finding the width of the gray line is inconsistent due to the when the delegate functions are called? I am currently attempting to get the width through the didMoveToSuperview method with no luck

DonMag · Accepted Answer

There are various ways to approach this.

One option... instead of drawing only the red-dotted line as a shape layer, draw the gray line, the red-dotted line and the green bar as 3 sub-layers.

Bottom layer: gray line
Middle layer: red-dotted line
Top layer: green "bar" line

Since the green bar will be covering the red-dots and the gray line, those can each span the full width between the left edge of the cell and the left edge of the first label. That means the only piece that needs to change size is the green bar layer.

Here is some example code:

class MyProgressBarView: UIView {

    var progress: CGFloat = 0.0 {
        didSet {
            setNeedsLayout()
        }
    }

    let greenBar = CAShapeLayer()
    let grayBar = CAShapeLayer()
    let redBar = CAShapeLayer()

    override init(frame: CGRect) {
        super.init(frame: frame)
        commonInit()
    }

    required init?(coder: NSCoder) {
        super.init(coder: coder)
        commonInit()
    }

    func commonInit() -> Void {

        layer.addSublayer(grayBar)
        layer.addSublayer(redBar)
        layer.addSublayer(greenBar)

        redBar.strokeColor = UIColor.red.cgColor
        redBar.lineWidth = 2
        // passing an array with the values [2,3] sets a dash pattern that alternates between a 2-user-space-unit-long painted segment and a 3-user-space-unit-long unpainted segment
        redBar.lineDashPattern = [2,3]

        grayBar.strokeColor = UIColor.lightGray.cgColor
        grayBar.lineWidth = 1

        greenBar.strokeColor = UIColor.green.cgColor

    }

    override func layoutSubviews() {
        super.layoutSubviews()

        var path = CGMutablePath()
        path.addLines(between: [CGPoint(x: 0, y: bounds.height * 0.5),
                                CGPoint(x: bounds.width, y: bounds.height * 0.5)])

        grayBar.path = path
        redBar.path = path

        path = CGMutablePath()

        // cell height may change, so set greenBar's height here
        greenBar.lineWidth = bounds.height

        path.addLines(between: [CGPoint(x: 0, y: bounds.height * 0.5),
                                CGPoint(x: bounds.width * progress, y: bounds.height * 0.5)])

        greenBar.path = path

    }
}

class ProgressCell: UITableViewCell {

    @IBOutlet var val1Label: UILabel!
    @IBOutlet var val2Label: UILabel!

    @IBOutlet var progView: MyProgressBarView!

    var val1: CGFloat = 0.0 {
        didSet {
            val1Label.text = "\(val1)"
            // make sure we don't divide by Zero
            progView.progress = val2 > 0 ? val1 / val2 : 0.0
        }
    }
    var val2: CGFloat = 0.0 {
        didSet {
            val2Label.text = "$\(val2)M"
            // make sure we don't divide by Zero
            progView.progress = val2 > 0 ? val1 / val2 : 0.0
        }
    }

}

struct MyValues {
    var v1: CGFloat = 0.0
    var v2: CGFloat = 0.0
}

class ProgressTableViewController: UITableViewController {

    var myData: [MyValues] = [
        MyValues(v1:  50.0, v2: 250.0),
        MyValues(v1:  80.0, v2: 250.0),
        MyValues(v1: 105.0, v2: 250.0),
        MyValues(v1: 127.0, v2: 250.0),
        MyValues(v1:  93.0, v2: 250.0),
        MyValues(v1:  80.0, v2: 250.0),
        MyValues(v1: 205.0, v2: 250.0),
        MyValues(v1: 177.0, v2: 250.0),
        MyValues(v1: 245.0, v2: 250.0),
    ]

    override func viewDidLoad() {
        super.viewDidLoad()
    }

    override func numberOfSections(in tableView: UITableView) -> Int {
        return 1
    }

    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return myData.count
    }

    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

        let cell = tableView.dequeueReusableCell(withIdentifier: "ProgressCell", for: indexPath) as! ProgressCell
        let d = myData[indexPath.row]
        cell.val1 = d.v1
        cell.val2 = d.v2
        cell.selectionStyle = .none
        return cell

    }

    override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        tableView.deselectRow(at: indexPath, animated: true)
        if let c = tableView.cellForRow(at: indexPath) as? ProgressCell {
            let d = myData[indexPath.row]
            var v = d.v1 + 10.0
            v = min(v, d.v2)
            myData[indexPath.row].v1 = v
            c.val1 = v
        }
    }

}

And here is the Storyboard source:

The result:

and, with the device rotated, so you can see it automatically handles the size change - no special code for that:

If you add this to a new project and run it, I've also implemented didSelectRowAt -- each time you tap a row, it will increase the "left value" by 10.0 so you can see the green bar grow dynamically.

How to get the dynamic distance between 2 elements in iOS with auto layout

Answers (2)

Related Questions