How to Save User Settings (iOS, Xcode 8, Swift 3)

Learn how to use UserDefaults to save data in your app.

How to make an Onboarding Screen (iOS, Xcode 8, Swift 3)

Show an onboarding (intro) screen the first time the user uses your app. Keep track if they saw it or not so you know if it should come first.

How to Animate a Button Menu (iOS, Xcode 8, Swift 3)

Animate this cool button menu using UIView.animate function.

How to Customize the UISlider (iOS, Xcode 8, Swift 3)

There is a lot you can do to improve how the default UISlider looks! Watch this video to learn how.

Radial Gradients on a UIView (iOS, Xcode 8, Swift 3)

Radial gradients were a lot harder in iOS (Swift) than just normal gradients. 

Gradients

Below is a simple gradient from black to dark gray. You can add many colors to the colors array.

 
let newLayer = CAGradientLayer()
newLayer.colors = [UIColor.black.cgColor, UIColor.darkGray.cgColor]
newLayer.frame = view.frame
view.layers.insertSublayer(newLayer, at: 0)
 

You can manually set the startPoint and endPoint properties for the CAGradientLayer to change the default gradient direction from top to bottom.

These are of a type CGPoint which is basically just and x and y value. BUT, the max value for x or y is only 1.

You have to think of the values as a percentages, like:

•  0 = 0% 
•  .25 = 25% 
•  .5 = 50% 
•  .75 = 75% 
•  1 = 100% 

Here are the default values for top to bottom:

 
newLayer.startPoint = CGPoint(x: 0, y: 0) // Upper left corner

newLayer.endPoint = CGPoint(x: 0, y: 1) // Lower left corner

 

If you wanted to make it HORIZONTAL, then you could start from upper left to upper right.

It would look like this:

 
newLayer.startPoint = CGPoint(x: 0, y: 0) // Upper left corner

newLayer.endPoint = CGPoint(x: 1, y: 0) // Upper right corner

 

Now, can you guess what a 45 degree angle would look like?

It would look like this:

 
newLayer.startPoint = CGPoint(x: 0, y: 0) // Upper left corner

newLayer.endPoint = CGPoint(x: 1, y: 1) // Lower right corner

 

Here's a diagram which might clear up how these CGPoints work:

CGPoint X,Y Scale in iOS

(Swift 3)

Adding images to UITextFields

I created an @IBDesignable to allow developers to add an image to UITextFields on the Storyboard. You just have to add this file to your project:

 
@IBDesignable
class DesignableUITextField: UITextField {
    
    // Provides left padding for images
    override func leftViewRect(forBounds bounds: CGRect) -> CGRect {
        var textRect = super.leftViewRect(forBounds: bounds)
        textRect.origin.x += leftPadding
        return textRect
    }
    
    @IBInspectable var leftImage: UIImage? {
        didSet {
            updateView()
        }
    }
    
    @IBInspectable var leftPadding: CGFloat = 0
    
    @IBInspectable var color: UIColor = UIColor.lightGray {
        didSet {
            updateView()
        }
    }
    
    func updateView() {
        if let image = leftImage {
            leftViewMode = UITextFieldViewMode.always
            let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 20, height: 20))
            imageView.image = image
            // Note: In order for your image to use the tint color, you have to select 
            // the image in the Assets.xcassets and change the "Render As" property to 
            // "Template Image".
            imageView.tintColor = color
            leftView = imageView
        } else {
            leftViewMode = UITextFieldViewMode.never
            leftView = nil
        }
        
        // Placeholder text color
        attributedPlaceholder = NSAttributedString(string: 
                placeholder != nil ?  
                placeholder! : "", 
                attributes:[NSForegroundColorAttributeName: color])
    }
}
 

Then add a UITextField to your view and set the custom class name for it:

You now have 3 properties open for you to add an image, padding and color. Color affects the image and placeholder text so they match. Note: The color of the image won't take effect until you run your project.

At runtime the color of the image will change: