Typewriter Effect UILabel width issue - ios

Question

I want to have a UILabel in the middle of the screen that starts from the left of the screen. The UILabel will get updated every second from a Timer to simulate a typewriter effect. So to display "Album releases", the UILabel will show this series of text:
A
Al
Alb
Albu
Album
Album
Album r
Album re
Album rel
Album rele
Album relea
Album releas
Album release
Album releases
The label has a black background. So I want to make sure the width fits the text. But if the text is too long then the width should go up to the screen width and then breaks into a second line. I tried using numberOfLines = 0 and sizeToFit to achieve that. But the issue is that for some reason, one letter is being written on a line. I cannot manage to fix that. Here's some code:
private let taglinesLabel: UILabel = {
let label = UILabel()
label.textAlignment = .left
label.textColor = .white
label.backgroundColor = .black
label.numberOfLines = 0
return label
}()
override func layoutSubviews() {
...
taglinesLabel.frame = CGRect(x: 0, y: 200, width: 0, height: 0)
...
}
public func showText() {
...
startTimer()
...
}
func startTimer () {
guard timer == nil else { return }
timer = Timer.scheduledTimer(
timeInterval: TimeInterval(0.1),
target : self,
selector : #selector(onTimer),
userInfo : nil,
repeats : true)
}
#objc private func onTimer() {
let tagline = taglines[taglineIndex]
if(taglineCharacterIndex < tagline.count) {
let substring = tagline.prefix(taglineCharacterIndex)
print(substring)
taglinesLabel.text = String(substring)
taglinesLabel.sizeToFit()
taglineCharacterIndex += 1
}
}
How to constraint the UILabel to expand its width and not go to the next line like shown in the picture?

Answer 1

Couple things...
First, use auto-layout and constraints instead of .sizeToFit().
Second, let's replace the UILabel with a non-editable, non-scrolling UITextView because:
It gives us a visually nice "padding" around the text
It keeps the text at the top (if we have set a height for the view)
It avoids a weird "line jumping" when the text wraps
So, start with an example controller that puts an instance of our custom TypingView 40-points from the Top and from each side. We'll also give it four sample "taglines" and we'll start the timer in viewDidAppear:
class ViewController: UIViewController {
let testView = TypingView()
override func viewDidLoad() {
super.viewDidLoad()
testView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(testView)
let g = view.safeAreaLayoutGuide
NSLayoutConstraint.activate([
testView.topAnchor.constraint(equalTo: g.topAnchor, constant: 40.0),
testView.leadingAnchor.constraint(equalTo: g.leadingAnchor, constant: 40.0),
testView.trailingAnchor.constraint(equalTo: g.trailingAnchor, constant: -40.0),
// no bottom or height constraint
// we let the TypingView set its own height
])
testView.taglines = [
"First sample string.",
"This is the Second sample tagline.",
"This tagline will be long enough that it will wrap onto at least two lines.",
"Here is the final tagline.",
]
}
override func viewDidAppear(_ animated: Bool) {
super.viewDidAppear(animated)
testView.startTimer()
}
}
Now, our custom UIView subclass:
class TypingView: UIView {
public var taglines: [String] = []
private var taglineIndex: Int = 0
private var timer: Timer!
private var taglineCharacterIndex: Int = 0
private let taglinesLabel: UITextView = {
let v = UITextView()
v.font = .systemFont(ofSize: 17.0, weight: .regular)
v.textColor = .white
v.backgroundColor = .black
v.isScrollEnabled = false
v.isEditable = false
return v
}()
override init(frame: CGRect) {
super.init(frame: frame)
commonInit()
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
commonInit()
}
func commonInit() {
backgroundColor = .black
taglinesLabel.translatesAutoresizingMaskIntoConstraints = false
addSubview(taglinesLabel)
NSLayoutConstraint.activate([
taglinesLabel.topAnchor.constraint(equalTo: topAnchor, constant: 0.0),
taglinesLabel.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 0.0),
taglinesLabel.trailingAnchor.constraint(equalTo: trailingAnchor, constant: 0.0),
taglinesLabel.bottomAnchor.constraint(equalTo: bottomAnchor, constant: 0.0),
])
}
func startTimer () {
guard timer == nil else { return }
timer = Timer.scheduledTimer(
timeInterval: TimeInterval(0.1),
target : self,
selector : #selector(onTimer),
userInfo : nil,
repeats : true)
}
#objc private func onTimer() {
guard taglineIndex < taglines.count else {
timer.invalidate()
timer = nil
return
}
let tagline = taglines[taglineIndex]
if taglineCharacterIndex < tagline.count + 1 {
let substring = tagline.prefix(taglineCharacterIndex)
taglinesLabel.text = String(substring)
taglineCharacterIndex += 1
} else if taglineCharacterIndex < tagline.count + 6 {
// this will provide a half-second "pause" before going to the next tagline
taglineCharacterIndex += 1
} else {
taglineIndex += 1
taglineCharacterIndex = 0
}
}
}
It will look like this (adding 1 character every 1/10th second):
and with enough text to wrap:
Edit - in response to comment...
To get the view to expand horizontally as the text gets longer, change the trailing constraint (in ViewController) from:
testView.trailingAnchor.constraint(equalTo: g.trailingAnchor, constant: -40.0),
to:
testView.trailingAnchor.constraint(lessThanOrEqualTo: g.trailingAnchor, constant: -40.0),
Now it will grow wider with each character, but only until it reaches 40-points from the right side.
You could also replace the trailing constraint with a width constraint if that would better suit your needs.
For example:
testView.widthAnchor.constraint(lessThanOrEqualToConstant: 240.0),
would limit its width to 240-points.