ButtonClickStyle

This is a customizable/designable Button View,
with 15 animated click styles,
that allows you to design your own buttons from subviews,
in storyboard and xib right away.

Watch video with examples

▶️ Xcode Create in Storyboard/Xib

▶️ Styling Buttons TableList in iPhone

Requirements
Installation
- CocoaPods
- Swift Package Manager
Getting Started
Author
License

Requirements

Xcode 13+
iOS 9.0+
Swift 5.5+

Installation

CocoaPods

ContainerControllerSwift is available through CocoaPods. To install it, simply add the following line to your Podfile:

pod 'ButtonClickStyle'

Swift Package Manager

Select Xcode menu File > Add Packages... and paste in the repository URL, enter.

Follow this doc.

https://github.com/mrustaa/ButtonClickStyle

Getting Started

Usage `ButtonClickStyleView`

Designable Attributes Storyboard/Xib files

Create a UIView that inherits from ButtonClickStyleView
Inside this View, create design your own button from subviews
In Attributes Inspector of Interface Builder, you can immediately select the button click style animType
- IBDesignable ...... | animType ........ | Number Value | Init Interface Builder
- ButtonClick.State | animationType | Number Value | Init Programmatiсaly State
- ButtonClick.State | animationStyle | Style Value | Init Programmatiсaly State

extension ButtonClick {  
  //                          Number Value
  enum Style {                
    case alpha                //  0
    case flash                //  1
    case shadow               //  2
    case shadowColor          //  3
    case color                //  4
    case colorFlat            //  5
    case pulsateNew           //  6
    case pulsate              //  7
    case press                //  8
    case shake                //  9
    case shakeNew             // 10
    case androidClickable     // 11
    case androidClickableDark // 12
    case fave                 // 13
    case glare                // 14
  }
}

Also you can select specific subviews to animate / or just 1 specific one-view allSubviews
Add animation duration animDuration
Add animation value animValue - meaning means for some types - alpha or power

Hide
.Alpha / .Flash
Will change alpha for "self.view" from 0.0 to 1.0
Add
.Shadow / .Color / .ColorFlat
Will change alpha for "add.view" from 0.0 to 1.0
Move
.Pulsate / .Press / .Shake
Will change the strength of movement for "self.view" from 0.0 to 1.0
Tap Gesture
.Fave / .AndroidClickable
Will increase bubble radius for "add.view"
Loading
.Glare
No change for "add.view"

Addition `ButtonClickStyleDesignView`

Also you can use in special custom Designable ButtonClickStyleDesignView or ButtonClickStyleDesignLabel with bunch of options, adding

cornerRadius
figure type
gradient
shadows
borders
blur
etc

Init Programmatically

If initializing programmatically There is a property addViews - allows you to pass views / layers which you definitely want to use in the click animation only

Usage `ButtonClick.State`

Or initialize through a struct ButtonClick.State

import ButtonClickStyle
import UIKit

class ViewController: UIViewController {
  
  //MARK: Init Xib/Storyboards
  
  @IBOutlet var xibButtonClickStyleView: ButtonClickStyleView?
  
  //MARK: Init Programmaticaly
  
  var prgmButtonClickStyleView: ButtonClickStyleView?
  var prgmFigureView: UIView!
  var prgmRectangleView: UIView!
  
  override func viewDidLoad() {
    super.viewDidLoad()
    
    let figureView = UIView(frame: .init(x: 50, y: 10, width: 80, height: 40))
    figureView.backgroundColor = .systemIndigo
    figureView.layer.cornerRadius = 20
    self.prgmFigureView = figureView
    
    let rectangleView = UIView(frame: .init(x: 15, y: 50, width: 50, height: 60))
    rectangleView.backgroundColor = .systemPurple
    self.prgmRectangleView = rectangleView
    
    let state = ButtonClick.State(
      titleText: "Hello",       // debug text button
      allSubviews: true,        // click animation all subviews 
      animationType: 2,         // style 15 
      animationTypeValue: 0.5,  // value - alpha/power move
      animationDuration: nil,   // anim duration
      new: false,               // same styles one of them new 
      color: UIColor.green,     // value color for styles shadowColor/color/colorFlat 
      startClick: true,         // animate on creation
      debugButtonShow: false,   // debug highlight the real button inside
      addBackgrondColor: true   // debug add background color/view
    )
    
    let btnView = ButtonClickStyleView(
      state: state,
      frame: .init(x: 0, y: 300, width: 240, height: 128),
      radius: 20,
      addViews: [figureView],    // addViews - allows you to pass views / layers which you definitely want to use in the click animation only
      click: { event in
        
      }
    )
    btnView.backgroundColor = .yellow.withAlphaComponent(0.5)
    
    btnView.updateSubviews()
    self.prgmButtonClickStyleView = btnView
    
    btnView.addSubview(figureView)
    btnView.addSubview(rectangleView)
    self.view.addSubview(btnView)
  }
}

For an already created ButtonView to update the animation type

 self.prgmButtonClickStyleView?.update(animationType: type, allSubviews: true)

Button Click/Action Closure

Add at init programmatically Button Action-Closure event

 let btnView = ButtonClickStyleView(
      state: state, 
      frame: frame,
      click: { event in
          ... 
      }
    )

Or define Action-Closure after

 self.prgmButtonClickStyleView?.click = { event in
    ...  
 }

Author

motionrustam@gmail.com 📩| mrustaa APRIL 2022

License

ButtonClickStyle is released under the MIT license.

mrustaa/ButtonClickStyle