I have designed a view in swift which goes as follows.
import UIKit
import SnapKit
@IBDesignable class FlightStopsView: UIView {
var startPoint: UILabel!
var endPoint: UILabel!
var line: UIView!
var stopsStack: UIStackView!
var stopCount: UILabel!
var stops: [Stop]! {
didSet {
addStops()
setNeedsLayout()
setNeedsDisplay()
}
}
@IBInspectable var lineColor: UIColor! {
didSet{
line?.backgroundColor = UIColor.lightGray
layoutIfNeeded()
}
}
override init(frame: CGRect) {
super.init(frame: frame)
setUpView()
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
}
func setUpView() {
startPoint = UILabel()
startPoint.attributedText = "o"
self.addSubview(startPoint)
startPoint.snp.makeConstraints { make in
make.width.equalTo(10)
make.height.equalTo(10)
make.leading.equalToSuperview()
make.centerY.equalToSuperview()
}
endPoint = UILabel()
endPoint.attributedText = "o"
self.addSubview(endPoint)
endPoint.snp.makeConstraints { make in
make.width.equalTo(10)
make.height.equalTo(10)
make.trailing.equalToSuperview()
make.centerY.equalToSuperview()
}
line = UIView()
line.backgroundColor = UIColor.lightGray
self.addSubview(line)
line.snp.makeConstraints { make in
make.height.equalTo(1)
make.centerY.equalToSuperview()
make.leading.equalTo(startPoint.snp.trailing).offset(-1)
make.trailing.equalTo(endPoint.snp.leading).offset(1)
}
stopCount = UILabel()
stopCount.textColor = UIColor.lightGray
stopCount.font = UIFont.regularFont(Dimens.FontSize.SMALL)
stopCount.adjustsFontSizeToFitWidth = true
stopCount.text = "Non Stop"
self.addSubview(stopCount)
stopCount.snp.makeConstraints { make in
make.centerX.equalToSuperview()
make.top.equalTo(line.snp.bottom).offset(4)
make.bottom.equalToSuperview()
}
stopsStack = UIStackView()
stopsStack.backgroundColor = .clear
stopsStack.alignment = .center
stopsStack.distribution = .fill
stopsStack.contentMode = .center
stopsStack.spacing = 30
self.addSubview(stopsStack)
stopsStack.snp.makeConstraints{ make in
make.centerX.equalToSuperview()
make.top.equalToSuperview()
make.bottom.equalTo(line.snp.bottom).offset(4.5)
}
addStops()
}
func addStops() {
guard stopCount != nil && stopsStack != nil else {
return
}
guard stops != nil else {
stopCount.text = "Non stop"
return
}
stopCount.text = "\(stops.count) stops"
for stop in stops {
let stackChild = UIView()
let stackChildLabel = UILabel()
let stackChildPointer = UILabel()
stackChildLabel.text = stop.stopName
stackChildLabel.textAlignment = .center
stackChildLabel.textColor = UIColor.lightGray
stackChildLabel.font = UIFont.regularFont(Dimens.FontSize.SMALL)
stackChildLabel.adjustsFontSizeToFitWidth = true
stackChildLabel.numberOfLines = 2
stackChildPointer.attributedText = “o”
stackChild.addSubview(stackChildLabel)
stackChild.addSubview(stackChildPointer)
stackChild.snp.makeConstraints { make in
make.width.equalTo(24)
make.height.equalToSuperview()
}
stackChildPointer.snp.makeConstraints { make in
make.width.equalTo(10)
make.height.equalTo(10)
make.bottom.equalToSuperview()
make.centerX.equalToSuperview()
}
stackChildLabel.snp.makeConstraints{ make in
make.width.equalTo(20)
make.top.equalToSuperview()
make.bottom.equalTo(stackChildPointer.snp.top)
make.centerX.equalToSuperview()
}
stopsStack.addArrangedSubview(stackChild)
}
}
}
The views main purpose is that it shows stops between two travelling points. ie, from destination to source how many stops are there if a bus is used as transport mean. However this view does not show in the view when running it on simulator. I would be glad if anyone can point what I am doing wrong here.
The problem was you didn't your stackChild to the stopStacks and the other thing was initialization which is necessary under init?(coder aDecoder: NSCoder) method because while adding UIView from UIStoryboard init(frame: CGRect) won't be called.
Below you can find them modified code:
import UIKit
import SnapKit
@IBDesignable class FlightStopsView: UIView {
var startPoint: UILabel!
var endPoint: UILabel!
var line: UIView!
var stopsStack: UIStackView!
var stopCount: UILabel!
var stops: [Stop]! {
didSet {
addStops()
setNeedsLayout()
setNeedsDisplay()
}
}
@IBInspectable var lineColor: UIColor! {
didSet{
line?.backgroundColor = UIColor.lightGray
layoutIfNeeded()
}
}
override init(frame: CGRect) {
super.init(frame: frame)
setUpView()
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
//Here is the change: Make sure you setupview in case of you are calling it from Storyboard
setUpView()
}
func setUpView() {
startPoint = UILabel()
startPoint.text = "0"
self.addSubview(startPoint)
startPoint.snp.makeConstraints { make in
make.width.equalTo(10)
make.height.equalTo(10)
make.leading.equalToSuperview()
make.centerY.equalToSuperview()
}
endPoint = UILabel()
endPoint.text = "0"
self.addSubview(endPoint)
endPoint.snp.makeConstraints { make in
make.width.equalTo(10)
make.height.equalTo(10)
make.trailing.equalToSuperview()
make.centerY.equalToSuperview()
}
line = UIView()
line.backgroundColor = UIColor.lightGray
self.addSubview(line)
line.snp.makeConstraints { make in
make.height.equalTo(1)
make.centerY.equalToSuperview()
make.leading.equalTo(startPoint.snp.trailing).offset(-1)
make.trailing.equalTo(endPoint.snp.leading).offset(1)
}
stopCount = UILabel()
stopCount.textColor = UIColor.lightGray
stopCount.font = UIFont.regularFont(Dimens.FontSize.SMALL)
stopCount.adjustsFontSizeToFitWidth = true
stopCount.text = "Non Stop"
self.addSubview(stopCount)
stopCount.snp.makeConstraints { make in
make.centerX.equalToSuperview()
make.top.equalTo(line.snp.bottom).offset(4)
make.bottom.equalToSuperview()
}
stopsStack = UIStackView()
stopsStack.backgroundColor = .clear
stopsStack.alignment = .center
stopsStack.distribution = .fill
stopsStack.contentMode = .center
stopsStack.spacing = 30
self.addSubview(stopsStack)
stopsStack.snp.makeConstraints{ make in
make.centerX.equalToSuperview()
make.top.equalToSuperview()
make.bottom.equalTo(line.snp.bottom).offset(4.5)
}
addStops()
}
func addStops() {
guard stopCount != nil && stopsStack != nil else {
return
}
guard stops != nil else {
stopCount.text = "Non stop"
return
}
stopCount.text = "\(stops.count) stops"
for stop in stops {
let stackChild = UIView()
let stackChildLabel = UILabel()
let stackChildPointer = UILabel()
stackChildLabel.text = stop.name
stackChildLabel.textAlignment = .center
stackChildLabel.textColor = UIColor.lightGray
stackChildLabel.font = UIFont.regularFont(Dimens.FontSize.SMALL)
stackChildLabel.adjustsFontSizeToFitWidth = true
stackChildLabel.numberOfLines = 2
stackChildPointer.text = "0"
stackChild.addSubview(stackChildLabel)
stackChild.addSubview(stackChildPointer)
//Here is the change: Although you haven't added your `stackChild` to your main `stopsStack`
stopsStack.addSubview(stackChild)
stackChild.snp.makeConstraints { make in
make.width.equalTo(24)
make.height.equalToSuperview()
}
stackChildPointer.snp.makeConstraints { make in
make.width.equalTo(10)
make.height.equalTo(10)
make.bottom.equalToSuperview()
make.centerX.equalToSuperview()
}
stackChildLabel.snp.makeConstraints{ make in
make.width.equalTo(20)
make.top.equalToSuperview()
make.bottom.equalTo(stackChildPointer.snp.top)
make.centerX.equalToSuperview()
}
stopsStack.addArrangedSubview(stackChild)
}
}
}
Do let me know if this helps or not!