UIAlertAction Button Text Alignment Left

Question

I want to align UIAlertAction text alignment to Left and add the icon as in image shown. I spent lot of time on google to get the solution but not found the right answer. Every body post for the alert title not for the alert action title.

Please suggest me the right way for swift.

Thanks!!

Knead

There's no public API to do this with UIAlertController. – Flavone

Answer 1

You can do that with bellow example code. Easy and Simple.

Swift 5

let actionSheetAlertController: UIAlertController = UIAlertController(title: nil, message: nil, preferredStyle: .actionSheet)
    
let cancelActionButton = UIAlertAction(title: "Cancel", style: .cancel, handler: nil)
actionSheetAlertController.addAction(cancelActionButton)
    
    
let documentsActionButton = UIAlertAction(title: "Documents", style: .default, handler: nil)
actionSheetAlertController.addAction(documentsActionButton)
documentsActionButton.setValue(#imageLiteral(resourceName: "doccument"), forKey: "image")
documentsActionButton.setValue(CATextLayerAlignmentMode.left, forKey: "titleTextAlignment")
    
let cameraActionButton = UIAlertAction(title: "Camera", style: .default, handler: nil)
actionSheetAlertController.addAction(cameraActionButton)
cameraActionButton.setValue(#imageLiteral(resourceName: "camera"), forKey: "image")
cameraActionButton.setValue(CATextLayerAlignmentMode.left, forKey: "titleTextAlignment")
    
let galleryActionButton = UIAlertAction(title: "Gallery", style: .default, handler: nil)
actionSheetAlertController.addAction(galleryActionButton)
galleryActionButton.setValue(#imageLiteral(resourceName: "gallery"), forKey: "image")
galleryActionButton.setValue(CATextLayerAlignmentMode.left, forKey: "titleTextAlignment")
    
actionSheetAlertController.view.tintColor = kTHEME_COLOR
self.present(actionSheetAlertController, animated: true, completion: nil)

Michaeline

Just Single line Code actionButton.setValue(kCAAlignmentLeft, forKey: "titleTextAlignment") – Michaeline

'kCAAlignmentLeft' has been renamed to 'CATextLayerAlignmentMode.left' from swift 5 – Marji

Answer 2

An updated version to swift 5.0 of kCAAlignmentLeft (as answered by @Niraj Solanki here) is CATextLayerAlignmentMode.left So the code should be as below:

Swift 5.0

documentsActionButton.setValue(CATextLayerAlignmentMode.left, forKey: "titleTextAlignment")

Plea

It works for left, but doesn't work for right alignment! – Sherylsheryle

See https://mcmap.net/q/903120/-uialertaction-list-of-values for more customization options – Middy

Answer 3

You can do that with bellow example code. Replace image name with your image

Swift 3

 let actionSheet = UIAlertController(title: nil, message: nil, preferredStyle: .actionSheet)
 let camera = UIAlertAction(title: "Camera", style: .default) { (action) in
  // Do something
 }
 let cameraImage = UIImage(named: "icon_camera")
 camera.setValue(cameraImage, forKey: "image")
 camera.setValue(0, forKey: "titleTextAlignment")
 actionSheet.addAction(camera)

Aeronaut

Answer 4

fastest and simplest implementation for this case:

extension UIAlertAction {
    func addImage(_ image: UIImage){
        setValue(image, forKey: "image")
        setValue(0, forKey: "titleTextAlignment")
    }
}

using:

let editAction = UIAlertAction(title: "Edit", style: .default, handler: nil)
editAction.addImage(UIImage(systemName: "square.and.pencil")!)
alertSheet.addAction(editAction)

NOTE: CATextLayerAlignmentMode — is not what you need. Because right alignment doesn't work with it! Better use numeric literals:

• 0 - left
• 1 - center
• 2 - right

for universal use i would create this enum:

enum AlertActionAlignment:Int {
    case left, center, right
}

...
setValue(align.rawValue, forKey: "titleTextAlignment")

Porterfield

Answer 5

As already said in comments, UIAlertController do not provide customization of its view. However, you can build your own action sheet view or use some third parties, like https://github.com/xmartlabs/XLActionController.

Circumscissile

Answer 6

For alert action, you can use this code,

let actionSheet = UIAlertController(title: "", message: "",  preferredStyle: .actionSheet)    

let camera = UIAlertAction(title: "Camera", style: .default) { action in
            //add alert action
        }

camera.setValue(CATextLayerAlignmentMode.left, forKey: "titleTextAlignment")
let icon = UIImage.(named: "your image file name")

camera.setValue(icon, forKey: "image")

actionSheet.addAction(camera)

present(actionSheet, animated: true)

Using this code, you can achieve an alert action sheet with image and left aligned alert action text.

Sophrosyne