Reproducing Popular iOS Controls - Part 18: | Ray Wenderlich Videos

🎓 Courses & Articles
1

In this video you will be challenged to figure out a cool Auto Layout issue.

This is a companion discussion topic for the original entry at https://www.raywenderlich.com/5298-reproducing-popular-ios-controls/lessons/18
2

So, I did the challenge, and I ended up with something much different that I believe is rather less complex than the solution posted; am I missing something?

  private func configureTimeStampLabel() {
    timeStampLabel.configureTitleLabel(withText: "09:00 AM ET, MAY 25")
    timeStampLabel.textColor = .lightTitleTextColor
    addSubview(timeStampLabel)
    timeStampLabel.translatesAutoresizingMaskIntoConstraints = false
    
    timeStampCentered = NSLayoutConstraint(item: timeStampLabel, attribute: .centerX, relatedBy: .equal, toItem: lineView, attribute: .centerX, multiplier: 1.0, constant: 0)
    timeStampCentered.priority = UILayoutPriority.defaultLow
    timeStampLeading = NSLayoutConstraint(item: timeStampLabel, attribute: .leading, relatedBy: NSLayoutConstraint.Relation.greaterThanOrEqual, toItem: self, attribute: .leading, multiplier: 1.0, constant: 0)
    timeStampLeading.priority = UILayoutPriority.defaultHigh
    timeStampTrailing = NSLayoutConstraint(item: timeStampLabel, attribute: .trailing, relatedBy: NSLayoutConstraint.Relation.lessThanOrEqual, toItem: self, attribute: .trailing, multiplier: 1.0, constant: 0)
    timeStampTrailing.priority = UILayoutPriority.defaultHigh
    
    addConstraints([
      NSLayoutConstraint(item: timeStampLabel, attribute: .bottom, relatedBy: .equal, toItem: lineView, attribute: .top, multiplier: 1.0, constant: 0.0),
      timeStampCentered,
      timeStampLeading,
      timeStampTrailing,
      ])
  }

It seemed like…the problem was to constrain the timestamp’s middle to the indicator, but also to constrain it to the leading and trailing edge of the graph view, and the leading and trailing constraints need to win over the centerX constraint when they conflict. This seems straightforward to solve with auto-layout directly, using layout priorities.

Are there deficiencies to this approach I’m not seeing?

This is a fantastic tutorial, by the way; I’m very grateful.

thanks,
Don

1 Like
3

Hey Don! Thanks so much for posting your solution!

There are absolutely no deficiencies with your code, in fact, I prefer over mine (:
But as always in software, there are multiple solutions to every problem, and so I decided to solve it a slightly different way.

I’m glad you’re enjoying the tutorial!

4

thanks for the quick response. I’m excited to get going on the App Store / Maps section.

1 Like
5

I also went for the AutoLayout solution :+1:

1 Like
6

Also wanted to note that at 00:51 it still says HINT: CGAffineTransform is your best friend. I thought that meant that we had to use an affine transform, and I tried to force it in my solution, but the UI became jittery :frowning: . Would be nice if the “updates” section can include that.