Swift:具有居中按钮的自定义导航栏

时间:2018-08-27 07:08:27

标签: ios swift uikit uinavigationbar

我已经编写了一个自定义导航栏,但有一个问题,就是按钮内的文本未完全对齐。例如,查看+按钮。

enter image description here

有什么想法可以改善这一点吗?

import UIKit

class DashboardNavbar: UINavigationBar {

    var titleLabel: UILabel?

    private var plusButton: UIButton?
    private var editButton: UIButton?

    var tap: UIGestureRecognizer?

    override init(frame: CGRect) {
        super.init(frame: frame)
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)

        isTranslucent = false
        addTitleLabel()
        addPlusButton()
        addEditButton()
    }



    private func addTitleLabel() {
        titleLabel = UILabel()
        titleLabel?.textColor = Styling.navigationbarTintColor
        titleLabel?.translatesAutoresizingMaskIntoConstraints = false
        titleLabel?.font = UIFont(name: "DIN Alternate", size: 17)

        if let titleLabel = titleLabel{

            addSubview(titleLabel)

            let leadingConstraint = NSLayoutConstraint(item: titleLabel, attribute: .leading, relatedBy: .equal, toItem: self, attribute: .leading, multiplier: 1.0, constant: 15)
            addConstraint(leadingConstraint)
            let centerYConstraint = NSLayoutConstraint(item: titleLabel, attribute: .centerY, relatedBy: .equal, toItem: self, attribute: .centerY, multiplier: 1.0, constant: 0)
            addConstraint(centerYConstraint)
        }
    }

    private func addPlusButton(){


        plusButton = UIButton(type: .custom)
        plusButton?.setTitle("+", for: .normal)
        plusButton?.layer.backgroundColor = Styling.navigationbarTintColor.cgColor
        plusButton?.layer.cornerRadius = 15
        plusButton?.setTitleColor(.black, for: .normal)
        plusButton?.titleLabel?.font = UIFont(name: "DIN Alternate", size: 20)
        plusButton?.contentVerticalAlignment = .center
        plusButton?.contentHorizontalAlignment = .center
        plusButton?.titleLabel?.baselineAdjustment = .alignCenters


        if let plusButton = plusButton{
            addSubview(plusButton)
            plusButton.translatesAutoresizingMaskIntoConstraints = false

            let trailingConstraint = NSLayoutConstraint(item: plusButton, attribute: .trailing, relatedBy: .equal, toItem: self, attribute: .trailing, multiplier: 1.0, constant: -15)
            addConstraint(trailingConstraint)

            let centerYConstraint = NSLayoutConstraint(item: plusButton, attribute: .centerY, relatedBy: .equal, toItem: self, attribute: .centerY, multiplier: 1.0, constant: 0)
            addConstraint(centerYConstraint)

            let widthC = NSLayoutConstraint(item: plusButton, attribute: .width, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1.0, constant: 30)
            addConstraint(widthC)

            let heightC = NSLayoutConstraint(item: plusButton, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1.0, constant: 30)
            addConstraint(heightC)
        }

    }

    private func addEditButton(){

        editButton = UIButton(type: .custom)
        editButton?.setTitle(LocalizedString("EDIT"), for: .normal)
        editButton?.layer.backgroundColor = Styling.navigationbarTintColor.cgColor
        editButton?.layer.cornerRadius = 15
        editButton?.setTitleColor(.black, for: .normal)
        editButton?.titleLabel?.font = UIFont(name: "DIN Alternate", size: 16)
        editButton?.contentVerticalAlignment = .center
        editButton?.contentHorizontalAlignment = .center
        editButton?.titleLabel?.baselineAdjustment = .alignCenters

        if let editButton = editButton{
            addSubview(editButton)
            editButton.translatesAutoresizingMaskIntoConstraints = false
            let trailingConstraint = NSLayoutConstraint(item: editButton, attribute: .trailing, relatedBy: .equal, toItem: plusButton!, attribute: .leading, multiplier: 1.0, constant: -15)
            addConstraint(trailingConstraint)
            let centerYConstraint = NSLayoutConstraint(item: editButton, attribute: .centerY, relatedBy: .equal, toItem: self, attribute: .centerY, multiplier: 1.0, constant: 0)
            addConstraint(centerYConstraint)

            let widthC = NSLayoutConstraint(item: editButton, attribute: .width, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1.0, constant: 80)
            addConstraint(widthC)
            let heightC = NSLayoutConstraint(item: editButton, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1.0, constant: 30)
            addConstraint(heightC)
        }
    }






    func setTitle(title: String){
        titleLabel?.text = title
    }
}

1 个答案:

答案 0 :(得分:0)

有几种方法可以纠正此问题:

  1. 使用+图片,图片将正确位于UIButton的中心。

  2. 更改UIButton的标题插图,从底部和左边再添加一些插图,UIButton具有titleInsets属性;

  3. 更改字体o_O既愚蠢又可行,您可以编辑该字体并使“ +”号位于绘图区域的中心。

希望这会有所帮助!祝你好运!