swift 如何制作导航栏中的填充按钮

xe55xuns  于 2022-10-31  发布在  Swift
关注(0)|答案(2)|浏览(255)

在第一个屏幕截图我有我的后退按钮,但我不明白如何使它像第二个屏幕截图从电报填充。
另外,我有导航控制器

bgtovc5b

bgtovc5b1#

您需要创建自定义视图并使用它来创建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)
        ])
    }

}

然后您可以这样使用它:

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)
yks3o0rb

yks3o0rb2#

您可以将UIBarButtonItem与customView初始化一起使用。

private var backBtnBarButtonItem: UIBarButtonItem {
    let btn = UIBarButtonItem(customView: *you coustom view with button*)
    return btn
}()

相关问题