How to make a custom design button in Swift IOS app - ios

Question

I want to ask you, is there any way to make a swift button has the design like this when clicked, and this when not. I want to give me some proposal or anything to do it.

Answer 1

Create a Custom UIView Class and copy the below code and try it :)
Don't forget to change a couple of values for customizations
class TestView: UIView {
private let selectorView: UIView = UIView()
private let trackView: UIView = UIView()
private var selectorViewLeadingConstraint: NSLayoutConstraint!
private var selectorViewTrailingConstraint: NSLayoutConstraint!
private var tapGesture: UITapGestureRecognizer!
public var isSelected: Bool = false {
didSet {
self.setIsSelected(isSelected)
}
}
override init(frame: CGRect) {
super.init(frame: frame)
initialize()
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
initialize()
}
private func initialize() {
addTrackView()
addSelectorView()
addTapGestures()
}
private func addTapGestures() {
tapGesture = UITapGestureRecognizer(target: self, action: #selector(tapHandler))
addGestureRecognizer(tapGesture)
}
private func addTrackView() {
addSubview(trackView)
trackView.translatesAutoresizingMaskIntoConstraints = false
trackView.layer.cornerRadius = 5
trackView.backgroundColor = .gray
NSLayoutConstraint.activate([
trackView.leadingAnchor.constraint(equalTo: leadingAnchor),
trackView.trailingAnchor.constraint(equalTo: trailingAnchor),
trackView.heightAnchor.constraint(equalToConstant: 10),
trackView.centerYAnchor.constraint(equalTo: centerYAnchor)
])
}
private func addSelectorView(){
addSubview(selectorView)
selectorView.translatesAutoresizingMaskIntoConstraints = false
selectorView.backgroundColor = .green
selectorViewLeadingConstraint = selectorView.leadingAnchor.constraint(equalTo: leadingAnchor)
selectorViewLeadingConstraint.priority = UILayoutPriority(500)
selectorViewTrailingConstraint = selectorView.trailingAnchor.constraint(equalTo: trailingAnchor)
selectorViewTrailingConstraint.priority = .defaultLow
NSLayoutConstraint.activate([
selectorViewLeadingConstraint,
selectorViewTrailingConstraint,
selectorView.topAnchor.constraint(equalTo: topAnchor),
selectorView.bottomAnchor.constraint(equalTo: bottomAnchor),
selectorView.widthAnchor.constraint(equalTo: widthAnchor, multiplier: 0.5),
])
}
override func layoutSubviews() {
super.layoutSubviews()
selectorView.layer.cornerRadius = selectorView.frame.height/2
}
#objc func tapHandler() {
isSelected = !isSelected
}
private func setIsSelected(_ isSelected: Bool) {
selectorViewTrailingConstraint.priority = isSelected ? .defaultHigh : .defaultLow
UIView.animate(withDuration: 0.3) {
self.layoutIfNeeded()
self.selectorView.backgroundColor = isSelected ? .green : .green
}
}
}