Closed anonrig closed 5 years ago
Hi there. Really simple. Access to the stack view of alertVC and change the axis (vertical or horizontal) 👍
I think you misunderstood my problem.
Since buttons and the textfield are on the same stack view, if you change the axis to horizontal every element will be in the same line. That's not the desired outcome. Textfield should be in a single line and buttons should be horizontal.
Sorry, I had not noticed that you also have a text field inside. In this case, you can't change the alignment for single components, because every component (text fields and buttons) is inside the same stack view.
Hi there !
Maybe it's a little late for you, but I was facing the same problem so I create an extension to make this possible :-)
extension PMAlertController {
static func initWithTextFieldValidation(title: String,
description: String,
textField: UITextField,
confirmButtonTitle: String,
cancelButtonTitle: String,
confirmButtonAction: ((PMAlertController) -> Void)? = nil,
cancelButtonAction: ((PMAlertController) -> Void)? = nil) -> PMAlertController {
// Init the alert
let passwordAlert = PMAlertController(title: title, description: description, image: nil, style: .alert)
passwordAlert.gravityDismissAnimation = false
// Create the first fieldStack with the textField and set some insets on side
let fieldStack = UIStackView(arrangedSubviews: [textField])
fieldStack.layoutMargins = UIEdgeInsets(top: 0, left: 8, bottom: 0, right: 8)
// Init actions
let cancelAction = PMAlertAction(title: cancelButtonTitle, style: .cancel, action: { () -> Void in
if let action = cancelButtonAction {
action(passwordAlert)
} else {
passwordAlert.dismiss(animated: true, completion: nil)
}
})
let confirmAction = PMAlertAction(title: confirmButtonTitle, style: .default, action: { () in
confirmButtonAction?(passwordAlert)
})
// Create second Stack with actions and set his axis to horizontal
let buttonsStack = UIStackView(arrangedSubviews: [cancelAction, confirmAction])
buttonsStack.axis = .horizontal
// Add constraint to be sure two buttons have the same width
buttonsStack.addConstraint(NSLayoutConstraint(item: cancelAction, attribute: .width, relatedBy: .equal, toItem: confirmAction, attribute: .width, multiplier: 1, constant: 0))
// set the alert's StackView axis to vertical and add stacks
passwordAlert.alertActionStackView.axis = .vertical
passwordAlert.alertActionStackView.addArrangedSubview(fieldStack)
passwordAlert.alertActionStackView.addArrangedSubview(buttonsStack)
passwordAlert.alertActionStackViewHeightConstraint.constant = 62 * CGFloat(passwordAlert.alertActionStackView.arrangedSubviews.count)
return passwordAlert
}
}
And here is the way to use it
let passwordField = UITextField()
passwordField.font = UIFont.preferredFont(forTextStyle: .body)
passwordField.isSecureTextEntry = true
passwordField.textColor = UIColor.bodyGray
passwordField.placeholder = "Mot de passe"
passwordField.textAlignment = .center
let fieldAlert = PMAlertController.initWithTextFieldValidation(title: "Connexion", description: "Entrez votre mot de passe", textField: passwordField, confirmButtonTitle: "Confirmer", cancelButtonTitle: "Annuler",
confirmButtonAction: { alert in
//TODO CONFIRM BUTTON
},
cancelButtonAction: { alert in
alert.dismiss(animated: true, completion: nil)
})
self.present(fieldAlert, animated: true, completion: nil)
Hope this can help !
And thank for this very nice lib ! It's just missing this case ! :-)
You could also add the textfield as subview of the contentStackView
let textField = TextField(frame: CGRect(x: 0, y: 0, width: 230, height: 40))
textField.placeholder = "Enter your email address"
textField.backgroundColor = ColorCompatibility.lightBackground
textField.layer.cornerRadius = 8
textField.font = UIFont.systemFont(ofSize: 15)
textField.keyboardType = UIKeyboardType.emailAddress
textField.autocapitalizationType = .none
textField.accessibilityIdentifier = "forgotPasswordInput"
textField.addTarget(self, action: #selector(self.alertTextFieldDidChange(field:)), for: UIControl.Event.editingChanged)
alert.alertContentStackView.addArrangedSubview(textField)
Hey!
I'm trying to setup the buttons in a horizontal manner. Since I've 2 buttons. But I couldn't make them horizontally aligned. Any suggestions?