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.

Overview

image image

ButtonClickStyle

Platform Version Xcode Swift 5.0 Swift 5.2 License

  • 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

 Xcode Create Storyboard/Xib

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

image

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
  }
}  
  1. Also you can select specific subviews to animate / or just 1 specific one-view allSubviews

  2. Add animation duration animDuration

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

image

Author

[email protected] 📩 | mrustaa

License

ButtonClickStyle is released under the MIT license.

You might also like...
SwiftUI Animation Library. Useful SwiftUI animations including Loading/progress, Looping, On-off, Enter, Exit, Fade, Spin and Background animations that you can directly implement in your next iOS application or project. The library also contains huge examples of spring animations such as Inertial Bounce, Shake, Twirl, Jelly, Jiggle, Rubber Band, Kitchen Sink and Wobble effects. Browse, find and download the animation that fits your needs. MGFlipView allows to create flipping view in easy way without worrying about flipping animation and flipping logic.
MGFlipView allows to create flipping view in easy way without worrying about flipping animation and flipping logic.

MGFlipView About If you are looking for an easy way of implement 3D flipping view, you are in the right place. MGFlipView allows to create flipping vi

MotionBlur allows you to add motion blur effect to iOS animations.
MotionBlur allows you to add motion blur effect to iOS animations.

MotionBlur MotionBlur allows you to add motion blur effect to your animations (currently only position's change). See the accompanying blog post to le

Allows a swipe on any part of the screen to start an interruptible pop animation to the previous view
Allows a swipe on any part of the screen to start an interruptible pop animation to the previous view

Lazy Pop SwiftUI Swiping on any part of the screen starts an interruptible pop animation to the previous view. Forked from https://github.com/rishi420

CCMRadarView uses the IBDesignable tools to make an easy customizable radar view with animation
CCMRadarView uses the IBDesignable tools to make an easy customizable radar view with animation

CCMRadarView CCMRadarView is a simple to use view that uses the new IBDesignable and IBInspectable features of XCode6 to easily configure the icon in

Design and prototype customized UI, interaction, navigation, transition and animation for App Store ready Apps in Interface Builder with IBAnimatable.
Design and prototype customized UI, interaction, navigation, transition and animation for App Store ready Apps in Interface Builder with IBAnimatable.

Design and prototype customized UI, interaction, navigation, transition and animation for App Store ready Apps in Interface Builder with IBAnimatable.

Simple and powerful animated progress bar with dots

Example To run the example project, clone the repo, and run pod install from the Example directory first. Requirements iOS 8.0+ Swift 3.0+ Installatio

Appstore card animation transition. UICollectionView and UITableView card expand animated transition
Appstore card animation transition. UICollectionView and UITableView card expand animated transition

Appstore card animation transition. UICollectionView and UITableView card expand animated transition. This library tries to add the appstore transition to your own app. The goal is to be as simple as possible to integrate in an app while keeping the flexibility and customization alive.

A simple animated progress bar in Swift
A simple animated progress bar in Swift

DSGradientProgressView Introduction DSGradientProgressView is a simple and customizable animated progress bar written in Swift. Inspired by GradientPr

Releases(1.3.3)
Owner
Rustam
iOS developer
Rustam
Numbers animation allows you to click on different numbers and accordingly it will animate numbers in a cool way. It has a very attractive UI and is very easy to use.

Numbers Animation Cool Numbers Animation in iOS written in Swift. Preview Table of content :- Description How to add in your project Requirement Licen

MindInventory 31 Oct 4, 2022
Reading animation allows you to click on the different page numbers and accordingly it will animate page changes in a cool way. It has a very attractive UI and is very easy to use.

Reading Animation Cool Reading Animation in iOS written in Swift. Preview Table of content :- Description How to add in your project Requirement Licen

MindInventory 42 Oct 4, 2022
Inspired by Fabric - Answers animation. Allows to "build" given view with pieces. Allows to "destroy" given view into pieces

ADPuzzleAnimation Whats inside Custom animation for UIView inspired by Fabric - Answers animation. Easy to use To create your first animation you need

Anton 126 Dec 25, 2022
Various view's effects for iOS, written in Swift. Allows you to animate views nicely with easy to use extensions

Various view's effects for iOS, written in Swift. Allows you to animate views nicely with easy to use extensions. Every animation is randomized. Currently supported animations:

Artur Rymarz 23 Aug 23, 2022
Presentation helps you to make tutorials, release notes and animated pages.

Presentation helps you to make tutorials, release notes and animated pages.

HyperRedink 3k Dec 28, 2022
SwiftUI animated image view that works on iOS and layout just as SwiftUI.Image

SwiftUI.AnimatedImage SwiftUI animated image view that works on iOS and layout just as SwiftUI.Image Screen.Recording.2021-07-31.at.02.18.33.mov Insta

Marcin Krzyzanowski 50 Oct 14, 2022
Design-system-demo - This example code is bare-bones to show you what this framework can do

Basic Style Dictionary This example code is bare-bones to show you what this fra

Tylen St Hilaire 0 Feb 3, 2022
UIImageView subclass that allows you to display a looped video and dynamically switch it.

AKVideoImageView Motivation AKVideoImageView was created because I wasn't satisfied with the standard AVPlayer when I was implementing a video backgro

Oleksandr Kirichenko 125 Apr 5, 2022
🚀 It Makes easy to track your task 🔥 Beautiful & Animated UI👨🏻‍💻 . Contributions are always welcome 🤗

Taskey ?? What is Taskey ?? ? Taskey is an application build in SwiftUI to track your task with a beautiful animations and UI . Also used core data to

Mohd Yasir 36 Nov 20, 2022
🚀 It Makes easy to track your task 🔥 Beautiful & Animated UI👨🏻‍💻 . Contributions are always welcome 🤗

Taskey ?? What is Taskey ?? ? Taskey is an application build in SwiftUI to track your task with a beautiful animations and UI . Also used core data to

AppLobby 36 Nov 20, 2022