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
- Requirements
- Installation
- CocoaPods
- Swift Package Manager
- Getting Started
- Usage
ButtonClickStyleView- Designable Attributes Storyboard/Xib files
- Init Programmatically
- Addition
ButtonClickStyleDesignView
- Addition
- Button Click/Action Closure
- Usage
- 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:
Swift Package Manager
Select Xcode menu File > Add Packages... and paste in the repository URL, enter.
Follow this doc.
Getting Started
Usage ButtonClickStyleView
Designable Attributes Storyboard/Xib files
-
Create a
UIViewthat inherits fromButtonClickStyleView -
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 Programmatisaly State - ButtonClick.State |
animationStyle| Style Value | Init Programmatisaly State
- IBDesignable ...... |
// 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 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
Button Click/Action Closure
Add at init programmatically Button Action-Closure event
state: state,
frame: frame,
click: { event in
...
}
)
Or define Action-Closure after
...
}
Author
motionrustam@gmail.com | mrustaa APRIL 2022
License
ButtonClickStyle is released under the MIT license.