Gradient Buttons and Masked Layers
Tinder Firestore Swipe and Match
I wanted to spend a quick lesson here to describe how we create these buttons with custom gradient colors. To do this in a clean way, the best approach is to subclass UIButton and draw our custom gradient directly into the layer component. Let's go and head and do just that.

Comments (4)
4 years ago
does this course covers when you send a message to other user and other user can send back a message? aka: chat rooms
4 years ago
Applying the simpler solution from Stack Overflow is: let maskLayer = CAShapeLayer() let cornerRadius = rect.height / 2 maskLayer.lineWidth = 2 maskLayer.path = UIBezierPath(roundedRect: rect, cornerRadius: cornerRadius).cgPath maskLayer.strokeColor = maskLayer.fillColor = UIColor.clear.cgColor gradientLayer.mask = maskLayer gradientLayer.frame = rect layer.cornerRadius = cornerRadius clipsToBounds = true self.layer.addSublayer(gradientLayer)
3 years ago
This solution makes a lot more sense to me, thanks!
4 years ago
Hi Brian! Is it correct to use method draw(), for adding sublayers? And using argument rect to specify the frame of the layer. If the view will be redrawn we will get 2 and more gradient layers. Or if it possibly redrew only the part of view we will get second gradient layer with not correct size. Please explain, why we do this in draw method?
Brian Voong
4 years ago
4 years ago
That video was lit Brian. Do you still have that meetup group in San Francisco