On first screenshot i have my back button, but i don't understand how to make it filled like on second screenshot from Telegram.
p.s. I have navigation controller
CodePudding user response:
You can use UIBarButtonItem with customView init.
private var backBtnBarButtonItem: UIBarButtonItem {
let btn = UIBarButtonItem(customView: *you coustom view with button*)
return btn
}()
CodePudding user response:
You need to create your custom view and use it to create UIBarButtonItem
.
Your custom view may look like that:
class CustomBackButton: UIButton {
// MARK: - Subviews
private lazy var countView: UIView = {
let countView = UIView()
countView.translatesAutoresizingMaskIntoConstraints = false
countView.layer.cornerRadius = 10
countView.backgroundColor = UIColor.systemBlue
countView.isUserInteractionEnabled = false
return countView
}()
private lazy var countLabel: UILabel = {
let countLabel = UILabel()
countLabel.translatesAutoresizingMaskIntoConstraints = false
countLabel.textColor = .white
countLabel.font = UIFont.systemFont(ofSize: 10)
countLabel.textAlignment = .center
return countLabel
}()
private lazy var arrowView: UIImageView = {
let arrowView = UIImageView()
arrowView.translatesAutoresizingMaskIntoConstraints = false
arrowView.image = UIImage(systemName: "chevron.left")
arrowView.tintColor = UIColor.systemBlue
arrowView.contentMode = .scaleAspectFill
arrowView.isUserInteractionEnabled = false
return arrowView
}()
// MARK: - Public properties
var count: Int? = nil {
didSet {
countView.isHidden = count == nil
guard let count = count else { return }
let formatter = NumberFormatter()
formatter.maximumFractionDigits = 1
switch count {
case ..<1_000:
countLabel.text = formatter.string(for: count)!
case 1_000..<1_000_000:
countLabel.text = formatter.string(for: Float(count) / 1_000)! "k"
case 1_000_000..<1_000_000_000:
countLabel.text = formatter.string(for: Float(count) / 1_000_000)! "m"
default:
countLabel.text = formatter.string(for: Float(count) / 1_000_000_000)! "b"
}
}
}
// MARK: - Lifecycle
init() {
super.init(frame: .zero)
setupLayout()
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
// MARK: - Private methods
private func setupLayout() {
addSubview(arrowView)
addSubview(countView)
countView.addSubview(countLabel)
NSLayoutConstraint.activate([
arrowView.leadingAnchor.constraint(equalTo: leadingAnchor),
arrowView.topAnchor.constraint(equalTo: topAnchor),
arrowView.bottomAnchor.constraint(equalTo: bottomAnchor),
arrowView.heightAnchor.constraint(equalToConstant: 25),
countView.centerYAnchor.constraint(equalTo: centerYAnchor),
countView.leadingAnchor.constraint(equalTo: arrowView.trailingAnchor, constant: 2),
countView.heightAnchor.constraint(equalToConstant: 20),
countView.trailingAnchor.constraint(equalTo: trailingAnchor),
countLabel.leadingAnchor.constraint(equalTo: countView.leadingAnchor, constant: 5),
countLabel.trailingAnchor.constraint(equalTo: countView.trailingAnchor, constant: -5),
countLabel.bottomAnchor.constraint(equalTo: countView.bottomAnchor, constant: -3),
countLabel.topAnchor.constraint(equalTo: countView.topAnchor, constant: 3)
])
}
}
And then you can use it like that:
let backView = CustomBackButton()
backView.addAction(
UIAction(handler: { [weak self] _ in
self?.navigationController?.popViewController(animated: true)
}),
for: .touchUpInside
)
backView.count = 1984
navigationItem.leftBarButtonItem = UIBarButtonItem(customView: backView)