
This video is only available to subscribers. Start a subscription today to get access to this and 470 other videos.
Making a Custom Subscribe Button
This episode is part of a series: Making a Podcast App From Scratch.
Custom Subscribe Button
In this episode, we will create a custom @IBDesignable
button, this time for the subscribe button. We will set some custom properties and override intrinsicContentSize
. We will also work on the highlighted and selected states of the subscribe button.
Creating a custom UIButton
We will start by creating a custom UIButton
to define our settings. To view the custom button in Interface Builder, we will mark the class as @IBDesignable
.
import UIKit
@IBDesignable
class SubscribeButton : UIButton {
override func awakeFromNib() {
super.awakeFromNib()
commonSetup()
}
override func prepareForInterfaceBuilder() {
super.prepareForInterfaceBuilder()
commonSetup()
}
}
Now we will set properties to customize our button. We will set cornerRadius
and borderWidth
, to see the effect of these setting we will set masksToBounds
. We will also define intrinsicContentSize
to give our button a lot of padding.
private func commonSetup() {
tintColor = Theme.Colors.purple
layer.cornerRadius = 12
layer.borderWidth = 3
layer.borderColor = borderColor.cgColor
layer.masksToBounds = true
}
override var intrinsicContentSize: CGSize {
return CGSize(width: 170, height: 46)
}
Setting the highlighted state of a button
Now we will set the highlighted color for subscribe button.
let highlightColor = Theme.Colors.purple.withAlphaComponent(0.85)
setBackgroundImage(UIImage.with(color: highlightColor), for: .highlighted)
To have a background color for the selected state on a button, we will create a 1px background image using UIGraphicsImageRenderer
and use that image for the .highlighted
state of the button.
import UIKit
extension UIImage {
static func with(color: UIColor) -> UIImage {
let size = CGSize(width: 1, height: 1)
let renderer = UIGraphicsImageRenderer(size: size)
return renderer.image { context in
color.setFill()
context.fill(CGRect(origin: .zero, size: size))
}
}
}
Setting the selected state of a button
To set the selected state of the subscribe button, we need to have a few settings listed below.
1) We need to add purple bright color to struct Colors
in the color section of Theme.
static var purpleBright = UIColor(red: 0.63, green: 0.06, blue: 1.00, alpha: 1.00)
2) Next, we will add check icon with rendering mode set as "Template Image". Note that we're declaring the bundle specifically using the class instead of using Bundle.main
or just UIImage(named:..)
without passing a bundle. We do this because our code will run in Xcode as well (which will have a different main bundle). By passing the bundle explicitly our code works in both design time and run time.
let selectedColor = Theme.Colors.purpleBright
setBackgroundImage(UIImage.with(color: selectedColor), for: .selected)
let bundle = Bundle(for: SubscribeButton.self)
let checkIcon = UIImage(named: "icon-check", in: bundle, compatibleWith: nil)
setImage(checkIcon, for: .selected)
setTitleColor(.white, for: .selected)
3) To have a similar color for border and button during its selected state, we will set borderColor
.
override var isSelected: Bool {
didSet {
layer.borderColor = borderColor.cgColor
}
}
private var borderColor: UIColor {
return isSelected ? Theme.Colors.purpleBright : Theme.Colors.purple
}
4) To reposition the check icon, we will set imageEdgeInsets
of the button.
imageEdgeInsets.left = -20