Simple & Easy OTP View ☄️

Related tags

Layout EliteOTPField
Overview

SwiftyMenu

Cocoapod MIT License
LinkedIn: @MahmoudAllam

Objectives 🎯

Easy and simple way to bring an OTP view into your iOS application with many customizations in color , animations , fonts etc..

Table of Contents

Overview & ScreenShots 👀

You can achive many layouts with many animations based on your needs

Background Changes Bordercolor Changes Flexable slot count Up to 6x Changing placeHolder
Underline View

Sample Project

To run the example project, clone the repo, and run pod install from the Example directory first.

Integration 💻

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

pod 'EliteOTPField'

Then run this command in your terminal to fetch the latest version:

pod repo update

Usage 🧑‍💻

EliteOtpField is available to use with Code, however storyboard option will be added at the next version :-

Importing EliteOTPField

import EliteOTPField

Initializing the component

    lazy var otpField: EliteOTPField = {
        let field = EliteOTPField()
        field.slotCount = 4
        field.animationType = .flipFromLeft
        field.slotPlaceHolder = ""
        field.enableUnderLineViews = true
        field.filledSlotBackgroundColor = .clear
        field.slotCornerRaduis = 8
        field.filledSlotTextColor = .black
        field.isBorderEnabled = false
        field.emptySlotBorderWidth = 1
        field.filledSlotBorderWidth = 3
        field.filledSlotBorderColor = UIColor.black.cgColor
        field.build()
        return field
    }()

Don't forget to call build() method after finishing your customizations.

add the component as a subView

    self.view.addSubview(self.otpField)

layouting With NSLayoutConstraints

 self.otpField.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            self.otpField.centerYAnchor.constraint(equalTo: self.view.centerYAnchor),
            self.otpField.centerXAnchor.constraint(equalTo: self.view.centerXAnchor),
            self.otpField.widthAnchor.constraint(equalTo: self.view.widthAnchor, constant: -32),
            self.otpField.heightAnchor.constraint(equalToConstant: 70)
        ])

or with frame

   self.otpField.frame = CGRect(x: 16, y: self.view.frame.midY - 30, width: self.view.frame.width - 32, height: 70)

getting the digits by delegetion pattern in our case EliteOTPFieldDelegete

in your ViewDidLoad

 self.otpField.otpDelegete = self

Then

 extension ViewController : EliteOTPFieldDelegete {
    func didEnterLastDigit(otp: String) {
        print(otp) // Here's the Digits
    }
}

Customization

 //MARK:- Basic
    public var spacing:CGFloat 
    public var slotCount:UInt 
    public var slotCornerRaduis: CGFloat 
    public var slotPlaceHolder  
    
  //MARK:- Fonts
    public var slotFontType: UIFont 
    public var slotPlaceHolderFontType: UIFont  
    
  //MARK:- Coloring
    public var filledSlotTextColor: UIColor
    public var emptySlotTextColor: UIColor 
    public var emptySlotBackgroundColor
    public var filledSlotBackgroundColor
    
  //MARK:- Border
    public var isBorderEnabled: Bool 
    public var filledSlotBorderWidth: CGFloat 
    public var filledSlotBorderColor: CGColor 
    public var emptySlotBorderWidth: CGFloat 
    public var emptySlotBorderColor: CGColor 
    
  //MARK:- Vibration
    public var isVibrateEnabled: Bool 
    
  //MARK:- Animation
    public var isAnimationEnabledOnLastDigit: Bool 
    public var animationType: EliteOTPAnimationTypes = .none
    
  //MARK:- UnderlineViews
    public var enableUnderLineViews: Bool
    public var underlineViewWidthMultiplier:CGFloat 
    public var underlineViewHeight:CGFloat 
    public var underlineViewBottomSpace:CGFloat 
    
  //MARK:- Field Verified
    public var isFieldVerified:Bool 

Animations 🦋

You can change the animation like this

  field.animationType = .flipFromLeft

EliteOTPAnimationTypes enum got many animation types :-

 public enum EliteOTPAnimationTypes {
    case flipFromRight
    case flipFromLeft
    case flash
    case shake
    case rotate
    case expand
    case crossDissolve
    case curlDown
    case curlUp
    case none  
}

Below GIFS reflecting each type of EliteOTPAnimationTypes Enum :-

flipFromRight flipFromLeft flash shake
rotate expand crossDissolve curlDown
curlUp none

You can also enable animation on the last digit like this

field.isAnimationEnabledOnLastDigit = true
lastDigit Animation

References 🔙

https://www.youtube.com/watch?v=mHxAvSs914g&t=749s&ab_channel=KiloLoco

Author

Mahmoud3allam, https://github.com/Mahmoud3allam , [email protected]

License

EliteOTPField is available under the MIT license. See the LICENSE file for more info.

You might also like...
UIView category which makes it easy to create layout constraints in code

FLKAutoLayout FLKAutoLayout is a collection of categories on UIView which makes it easy to setup layout constraints in code. FLKAutoLayout creates sim

✂ Easy to use and flexible library for manually laying out views and layers for iOS and tvOS. Supports AsyncDisplayKit.

ManualLayout Table of Contents Installation Usage API Cheat Sheet Installation Carthage Add the following line to your Cartfile. github "isair/ManualL

FlightLayout is a light weight, and easy to learn layout framework as an extension of the UIView.
FlightLayout is a light weight, and easy to learn layout framework as an extension of the UIView.

FlightLayout Introduction FlightLayout is a light weight, and easy to learn layout framework as an extension of the UIView. Functionally, it lives som

Easy Auto Layout

RKAutoLayout Easy AutoLayout TL;DR let view1: UIView = UIView() let view2: UIView = UIView() view1.addSubview(view2) /// Add all view1.rk_alAdd(

Makes building HTTP URLs and requests easy.

ModestProposal 2.0 Makes building HTTP URLs and requests easy. Can be used with any networking library that accepts NSURLRequest as a parameter. Featu

FrameLayoutKit is a super fast and easy to use autolayout kit
FrameLayoutKit is a super fast and easy to use autolayout kit

FrameLayoutKit FrameLayout is a super fast and easy to use layout library for iOS and tvOS. For Objective-C version: NKFrameLayoutKit (Deprecated, not

Auto Layout made easy with the Custom Layout.
Auto Layout made easy with the Custom Layout.

Auto Layout made easy with the Custom Layout. Getting started CocoaPods CocoaPods is a dependency manager for Cocoa projects. You can install it with

A Swift utility to make updating table views/collection views trivially easy and reliable.

ArrayDiff An efficient Swift utility to compute the difference between two arrays. Get the removedIndexes and insertedIndexes and pass them directly a

Library that makes it easy to create multiple environments within a single app. You can switch environments without deleting the application.

AppContainer Library that makes it easy to create multiple environments within a single app. You can switch environments without deleting the applicat

Releases(0.1.3)
Owner
null
Easy to create & custom segmented view

TCSegmentedView Easy to create & custom segmented view Usage Examples An Objective-C example project demonstrating customization options is included i

Chuong Tran 22 Dec 4, 2022
Modern-collection-view - Modern collection view for swift

Modern collection view Sample application demonstrating the use of collection vi

Nitanta Adhikari 1 Jan 24, 2022
Written in pure Swift, QuickLayout offers a simple and easy way to manage Auto Layout in code.

QuickLayout QuickLayout offers an additional way, to easily manage the Auto Layout using only code. You can harness the power of QuickLayout to align

Daniel Huri 243 Oct 28, 2022
Breezz: an application with which it is easy and simple to practice breathing exercises and meditation

breezz will help you relax Breezz is an application with which it is easy and si

dumojo 1 Jan 18, 2022
Swift-picker-views - inline single and multi picker views for UIKit. Without tableview! Easy and simple

swift-picker-views Inline single and multiple picker views for UIKit. No tablevi

IBRAHIM YILMAZ 2 Jan 31, 2022
iOS simple project to create half-screen modal view controller with pan

Simple Half-screen view controller, draggable and less code (learning purpose)

Mohd Hafiz 123 Dec 17, 2022
An easy way to create and layout UI components for iOS (Swift version).

Introduction Cupcake is a framework that allow you to easily create and layout UI components for iOS 8.0+. It use chaining syntax and provides some fr

nerdycat 288 Oct 9, 2022
Auto Layout made easy

EasyPeasy is a Swift framework that lets you create Auto Layout constraints programmatically without headaches and never ending boilerplate code. Besi

Carlos Vidal 1.9k Dec 23, 2022
Auto Layout In Swift Made Easy

Swiftstraints Swiftstraints can turn verbose auto-layout code: let constraint = NSLayoutConstraint(item: blueView, attr

null 119 Jan 29, 2022
An flexbox layout aimed at easy to use, which depend on Yoga.

DDFlexbox A flexbox framework for easy using. Install pod 'DDFlexbox' Template install Recommend using templates to create flexbox views. cd Script/

Daniel 12 Mar 23, 2022