Home > Back-end >  How to make filled button in navigation bar
How to make filled button in navigation bar

Time:10-20

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

enter image description here

enter image description here

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)
  • Related