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
  • Usage ButtonClickStyleView
    • Designable Attributes Storyboard/Xib files
  • Init Programmatically
    • Addition ButtonClickStyleDesignView
  • Button Click/Action Closure
• 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

1. Create a UIView that inherits from ButtonClickStyleView

2. Inside this View, create design your own button from subviews

3. 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

extensionButtonClick{ // Number Value
enumStyle{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
}}

4. Also you can select specific subviews to animate / or just 1 specific one-view allSubviews

5. Add animation duration animDuration

6. 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
classViewController:UIViewController{
//MARK: Init Xib/Storyboards
@IBOutletvarxibButtonClickStyleView:ButtonClickStyleView?
//MARK: Init Programmaticaly
varprgmButtonClickStyleView:ButtonClickStyleView?varprgmFigureView:UIView!varprgmRectangleView:UIView!overridefunc viewDidLoad(){
super.viewDidLoad()letfigureView=UIView(frame:.init(x:50, y:10, width:80, height:40))
figureView.backgroundColor =.systemIndigo
figureView.layer.cornerRadius =20self.prgmFigureView = figureView
letrectangleView=UIView(frame:.init(x:15, y:50, width:50, height:60))
rectangleView.backgroundColor =.systemPurple
self.prgmRectangleView = rectangleView
letstate=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
)letbtnView=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

letbtnView=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.