jazzedge
11/28/2017 - 8:42 PM

Swift - One Button click -> Three Buttons Appear

Source: Yippidoo

01. Include the Extension Class RoundButton.swift

import UIKit

@IBDesignable
class RoundButton: UIButton {
    
    @IBInspectable var cornerRadius: CGFloat = 0 {
        didSet {
            self.layer.cornerRadius = cornerRadius
        }
    }
    
    @IBInspectable var borderWidth: CGFloat = 0 {
        didSet {
            self.layer.borderWidth = borderWidth
        }
    }
    
    @IBInspectable var borderColor: UIColor = UIColor.clear {
        didSet {
            self.layer.borderColor = borderColor.cgColor
        }
    }
    
    @IBInspectable var shadowRadius: CGFloat = 0 {
        didSet {
            self.layer.shadowRadius = shadowRadius
        }
    }
    
    @IBInspectable var shadowColor: UIColor = UIColor.clear {
        didSet {
            self.layer.shadowColor = shadowColor.cgColor
        }
    }
    
    @IBInspectable var shadowOffset: CGSize = CGSize.zero {
        didSet {
            self.layer.shadowOffset = shadowOffset
        }
    }
    @IBInspectable var shadowOpacity: Float = 1.0 {
        didSet {
            self.layer.shadowOpacity = shadowOpacity
        }
    }
    
}

02. Add 4 buttons, one in the centre, three like a rose around the centre.
Set them with @IBOutlet RoundButton
Add images with Aspect Fit


03. Include the following code in your VC

import UIKit

class HomeViewController: UIViewController {

    @IBOutlet weak var logoutButton: UIBarButtonItem!
    @IBOutlet weak var optionsClickedBtn: RoundButton!
    @IBOutlet weak var friendlyClickedBtn: RoundButton!
    @IBOutlet weak var flirtyClickedBtn: RoundButton!
    @IBOutlet weak var friskyClickedBtn: RoundButton!
    
    var buttons_off:Bool = true
    var friendlyBtnCenter: CGPoint!
    var flirtyBtnCenter: CGPoint!
    var friskyBtnCenter: CGPoint!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        print ("Func: HomeViewController/viewDidLoad")
        
        friendlyBtnCenter = friendlyClickedBtn.center
        flirtyBtnCenter = flirtyClickedBtn.center
        friskyBtnCenter = friskyClickedBtn.center
        
        friendlyClickedBtn.center = optionsClickedBtn.center
        flirtyClickedBtn.center = optionsClickedBtn.center
        friskyClickedBtn.center = optionsClickedBtn.center
        
        //Stop button images stretching the button (bug fix)
//        optionsClickedBtn.imageView?.contentMode = .scaleAspectFit
//        friendlyClickedBtn.imageView?.contentMode = .scaleAspectFit
//        flirtyClickedBtn.imageView?.contentMode = .scaleAspectFit
//        friskyClickedBtn.imageView?.contentMode = .scaleAspectFit
//        optionsClickedBtn.imageView?.clipsToBounds = true
//        friendlyClickedBtn.imageView?.clipsToBounds = true
//        flirtyClickedBtn.imageView?.clipsToBounds = true
//        friskyClickedBtn.imageView?.clipsToBounds = true
        
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
    
    @IBAction func logoutAction(_ sender: UIBarButtonItem) {
        print ("Func: logoutAction")
        let mainStoryBoard: UIStoryboard = UIStoryboard(name: "Main", bundle: nil)
        let loginViewController: UIViewController = mainStoryBoard.instantiateViewController(withIdentifier: "LoginVC")
        self.present(loginViewController, animated: true, completion: nil)
    }
    
    @IBAction func optionsClicked(_ sender: RoundButton) {
        if buttons_off {
            print ("Animating...")
            UIView.animate(withDuration: 0.3, delay: 0.3, options: [], animations: {
                self.friendlyClickedBtn.center = self.friendlyBtnCenter
                self.flirtyClickedBtn.center = self.flirtyBtnCenter
                self.friskyClickedBtn.center = self.friskyBtnCenter
                //self.optionsClickedBtn.transform = CGAffineTransform(rotationAngle: self.radians(180))
            }, completion: nil)
        } else {
            UIView.animate(withDuration: 0.3, delay: 0.1, options: [], animations: {
                self.friendlyClickedBtn.center = self.optionsClickedBtn.center
                self.flirtyClickedBtn.center = self.optionsClickedBtn.center
                self.friskyClickedBtn.center = self.optionsClickedBtn.center
                //self.optionsClickedBtn.transform = CGAffineTransform(rotationAngle: self.radians(0))
             }, completion: nil)
        }
        buttons_off = !buttons_off
    }
    
    @IBAction func friendlyClicked(_ sender: RoundButton) {
        
    }
    
    @IBAction func flirtyClicked(_ sender: RoundButton) {
        
    }
    
    @IBAction func friskyClicked(_ sender: RoundButton) {
        
    }
    
    func radians(_ degrees: Double) -> CGFloat {
        return CGFloat(degrees * .pi / degrees)
    }
    
}