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
2
You can use UIBarButtonItem with customView init.
private var backBtnBarButtonItem: UIBarButtonItem { let btn = UIBarButtonItem(customView: *you coustom view with button*) return btn }()
You need to create your custom view and use it to create UIBarButtonItem. Your custom view may look like that:
UIBarButtonItem
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)
Click here to cancel reply.
2
Answers
You can use UIBarButtonItem with customView init.
You need to create your custom view and use it to create
UIBarButtonItem
.Your custom view may look like that:
And then you can use it like that: