Customizing SDCAlertView

Question

I am using the SDCAlertView Cocoapod and am attempting to customize the alertview and actionsheet so that the cornerradius, actionViewSeparatorColor, default textcolor and .Destructive textcolor are changed as seen in these images:

• image of alertview
• image of actionsheet

I have tried creating a type as suggested in the github docs:

If you are looking for more customizations, create a type that conforms to VisualStyle and use visualStyle on the AlertController instance. You can also subclass DefaultVisualStyle for a set of default values that you can then override as needed.

But have not had any luck. I was hoping you good provide an example on how to do this?

These are the three things I wish to override in the pod:

  VisualStyle protocol extension:

   public var actionViewSeparatorColor: UIColor { return UIColor(red: 142/255.0, green: 54/255.0, blue: 65/255.0, alpha: 0.4) }


   public func textColor(forAction action: AlertAction?) -> UIColor {
        if action?.style == .Destructive {
            return Style.maincolor()
        } else {
            return Style.mainTextColor()
        }
    }

DefaultVisualStyle Class:

    public var cornerRadius: CGFloat {
        if #available(iOS 9, *) {
            return 6
        } else {
            return self.alertStyle == .Alert ? 6 : 4
        }
    }

To answer your question, in the comments, I have played around by attempting this:

import UIKit
import SDCAlertView

public class AlertViewStyle: VisualStyle {

        private let alertStyle: AlertControllerStyle
init(alertStyle: AlertControllerStyle) { self.alertStyle = alertStyle }

            public var width: CGFloat { return self.alertStyle == .Alert ? 270 : 1 }

            public var cornerRadius: CGFloat {
                if #available(iOS 9, *) {
                    return 6
                } else {
                    return self.alertStyle == .Alert ? 6 : 4
                }
            }

            public var margins: UIEdgeInsets {
                if self.alertStyle == .Alert {
                    if #available(iOS 9, *) {
                        return UIEdgeInsets(top: 10, left: 0, bottom: 10, right: 0)
                    } else {
                        return UIEdgeInsetsZero
                    }
                } else {
                    if #available(iOS 9, *) {
                        return UIEdgeInsets(top: 30, left: 10, bottom: -10, right: 10)
                    } else {
                        return UIEdgeInsets(top: 10, left: 10, bottom: -8, right: 10)
                    }
                }
            }

            public var actionViewSize: CGSize {
                if #available(iOS 9, *) {
                    return self.alertStyle == .Alert ? CGSize(width: 90, height: 44) : CGSize(width: 90, height: 57)
                } else {
                    return CGSize(width: 90, height: 44)
                }
            }

            public func font(forAction action: AlertAction?) -> UIFont {
                switch (self.alertStyle, action?.style) {
                case (.Alert, let style) where style == .Preferred:
                    return UIFont.boldSystemFontOfSize(17)

                case (.Alert, _):
                    return UIFont.systemFontOfSize(17)

                case (.ActionSheet, let style) where style == .Preferred:
                    return UIFont.boldSystemFontOfSize(20)

                case (.ActionSheet, _):
                    return UIFont.systemFontOfSize(20)
                }
            }



            public func textColor(forAction action: AlertAction?) -> UIColor {

                if action?.style == .Destructive {
                    return Style.mainColour
                } else {
                    return Style.mainTextColour
                }

            }


         public var actionViewSeparatorColor: UIColor { return UIColor(red: 142/255.0, green: 54/255.0, blue: 65/255.0, alpha: 0.4) }


        }

I then tried to bring it to life when creating an alert in a viewcontroller by:

 let alert = AlertController(title: title, message: message, preferredStyle: .Alert)

        let alertStyle: AlertControllerStyle = ???

        alert.visualStyle = AlertViewStyle(alertStyle)

I was just playing about. I tried a whole bunch of different things to try and get it to compile with no luck. I see from the SDCAlertView github issues someone has successfully customized the alert and action sheet views. Based on the above code, do you have any suggestions on how I should proceed.

Any insight would be greatly appreciated.

Thanks so much,

Alexis

Answer 1

I figured part of it out with the help from a colleague. Creating the AlertViewStyle class is correct.

Then when you are creating an alert in a viewcontroller, you do the following:

 //Create an alert
    let alert = AlertController(title: title, message: message, preferredStyle: .Alert)

 //And declare its style
        // for alertviews
        alert.visualStyle = AlertViewStyle(alertStyle: .Alert)

       // for actionsheets
        alert.visualStyle = AlertViewStyle(alertStyle: .ActionSheet)

 // Add actions and present...
        alert.addAction(AlertAction(title: "OK", style: .Default))

        alert.present()

This changed everything for action sheets, but for alert views I am still not able to change the title and message labels' font or color. If you have any advice on how to access and customize this - that would be great. Thanks.