Coder Social home page Coder Social logo

verificationcode's Introduction

VerificationCode

依赖于SnapKit

工具类

工具类.jpg

依赖的方法、可以使用自己项目的方法替换

依赖类.jpg

效果:

验证码输入Demo.gif

思路:

视图层级:

  • 最底层一个隐藏的UITextView,上面铺的Label

  • 输入焦点在UITextView,监听UITextView的输入,给Label赋值

  • 通过Label显示输入的文字使用CAShapeLayer绘制光标

  • 通过光标的显示隐藏来控制光标的移动

  • 基础动画控制光标闪动

使用:

      // 初始化验证码输入框数量
    let codeView = TDWVerifyCodeView.init(inputTextNum: 6)

     // 监听验证码输入的过程
    codeView.textValueChange = { [weak self] str in
        // 要做的事情
    }
    
    // 监听验证码输入完成
    codeView.inputFinish = { [weak self] str in
        // 要做的事情
    }

简书链接:

喜欢的点个star,谢谢老铁们

verificationcode's People

Contributors

zjfupupup avatar zhongjianfeipqy avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.