CODEWITHSUNDEEP
swiftxcodeswift3
Thomas L
Thomas L

Reputation: 330

Vertically align bar buttons inside toolbar

I am currently using the following code to display a datepicker when a user clicks on a UITextfield. This works fine, but the problem is there left and right button are not properly vertically center aligned. Is there any way to accomplish this? I tried using UIOffset on the buttons but without result.

private func setupDatePicker() {
    let toolBar = UIToolbar(frame: CGRect(x: 0, y: self.view.frame.size.height/6,
                                          width:  self.view.frame.size.width, height: 40.0))
    toolBar.layer.position = CGPoint(x: self.view.frame.size.width/2, y: self.view.frame.size.height-20.0)
    toolBar.barStyle = UIBarStyle.blackTranslucent
    toolBar.tintColor = UIColor.white
    toolBar.backgroundColor = UIColor.black
    let cancelBtn = UIBarButtonItem(title: "cancel".localized(lang: Localize.currentLanguage()), style: UIBarButtonItemStyle.plain, target: self,
                                    action: #selector(tapppedToolBarBtn))


    let okBarBtn = UIBarButtonItem(barButtonSystemItem: UIBarButtonSystemItem.done, target: self,
                                   action: #selector(donePressed))
    let flexSpace = UIBarButtonItem(barButtonSystemItem: UIBarButtonSystemItem.flexibleSpace,
                                    target: self, action: nil)
    let label = UILabel(frame: CGRect(x: 0, y: 0, width: self.view.frame.size.width / 3,
                                      height: self.view.frame.size.height))
    label.font = UIFont(name: "Roboto-Regular", size: 12)
    label.backgroundColor = UIColor.clear
    label.textColor = UIColor.white
    label.text = "selectdate".localized(lang: Localize.currentLanguage())
    label.textAlignment = NSTextAlignment.center
    let textBtn = UIBarButtonItem(customView: label)
    toolBar.setItems([cancelBtn, flexSpace, textBtn, flexSpace, okBarBtn], animated: true)
    startDateTxf.inputAccessoryView = toolBar
}

The result : Result of the datepicker toolbar

Upvotes: 0

Views: 996

Answers (1)

Thomas L
Thomas L

Reputation: 330

I managed to fix this alignment issue by using the following code :

let toolBar = UIToolbar(frame: CGRect(x: 0, y: self.view.frame.size.height/6,
                                          width:  self.view.frame.size.width, height: 40.0))
    toolBar.layer.position = CGPoint(x: self.view.frame.size.width/2, y: self.view.frame.size.height-20.0)
    toolBar.barStyle = UIBarStyle.blackTranslucent
    toolBar.tintColor = UIColor.white
    toolBar.backgroundColor = UIColor.black
    let cancelBtn1 = UIButton(frame: CGRect(x: 0, y: 0, width: self.view.frame.size.width / 4,
                                            height: self.view.frame.size.height))
    cancelBtn1.setTitle("cancel".localized(lang: Localize.currentLanguage()), for: .normal)
    cancelBtn1.addTarget(self, action: #selector(tapppedToolBarBtn), for: .touchUpInside)
    let cancelBtn = UIBarButtonItem(customView: cancelBtn1)

    let okBarBtn1 = UIButton(frame: CGRect(x: 0, y: 0, width: self.view.frame.size.width / 4,
                                            height: self.view.frame.size.height))
    okBarBtn1.setTitle("Done", for: .normal)
    okBarBtn1.addTarget(self, action: #selector(donePressed(sender:)), for: .touchUpInside)
    let okBarBtn = UIBarButtonItem(customView: okBarBtn1)
    let flexSpace = UIBarButtonItem(barButtonSystemItem: UIBarButtonSystemItem.flexibleSpace,
                                    target: self, action: nil)
    let label = UILabel(frame: CGRect(x: 0, y: 0, width: self.view.frame.size.width / 3,
                                      height: self.view.frame.size.height))
    label.font = UIFont(name: "Roboto-Regular", size: 12)
    label.backgroundColor = UIColor.clear
    label.textColor = UIColor.white
    label.text = "selectdate".localized(lang: Localize.currentLanguage())
    label.textAlignment = NSTextAlignment.center
    let textBtn = UIBarButtonItem(customView: label)
    toolBar.setItems([cancelBtn, flexSpace, textBtn, flexSpace, okBarBtn], animated: true)
    startDateTxf.inputAccessoryView = toolBar

The result is : result in simulator

Upvotes: 1

Related Questions