skip to Main Content

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

2

Answers


  1. You can use UIBarButtonItem with customView init.

    private var backBtnBarButtonItem: UIBarButtonItem {
        let btn = UIBarButtonItem(customView: *you coustom view with button*)
        return btn
    }()
    
    Login or Signup to reply.
  2. 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)
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search