{"id":13696392,"url":"https://github.com/alberdev/AnimatedField","last_synced_at":"2025-05-03T17:31:07.274Z","repository":{"id":47794142,"uuid":"179276265","full_name":"alberdev/AnimatedField","owner":"alberdev","description":"Animated UITextField with check \u0026 filter for default types (email, url, password, price, date...) for iOS written in Swift 5","archived":false,"fork":false,"pushed_at":"2021-06-16T08:12:58.000Z","size":4256,"stargazers_count":313,"open_issues_count":16,"forks_count":47,"subscribers_count":11,"default_branch":"master","last_synced_at":"2024-04-13T10:21:25.812Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"Swift","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/alberdev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-04-03T11:31:04.000Z","updated_at":"2024-03-14T20:49:01.000Z","dependencies_parsed_at":"2022-09-03T06:24:05.823Z","dependency_job_id":null,"html_url":"https://github.com/alberdev/AnimatedField","commit_stats":null,"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alberdev%2FAnimatedField","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alberdev%2FAnimatedField/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alberdev%2FAnimatedField/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alberdev%2FAnimatedField/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alberdev","download_url":"https://codeload.github.com/alberdev/AnimatedField/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224369506,"owners_count":17299913,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-02T18:00:39.192Z","updated_at":"2024-11-13T00:30:26.739Z","avatar_url":"https://github.com/alberdev.png","language":"Swift","funding_links":[],"categories":["UI Components"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n   \u003cimg width=\"500\" src=\"https://raw.githubusercontent.com/alberdev/AnimatedField/master/Images/header_AnimatedField.png\" alt=\"AnimatedField  Logo\"\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n   \u003ca href=\"https://cocoapods.org/pods/AnimatedField\"\u003e\n      \u003cimg src=\"https://img.shields.io/cocoapods/v/AnimatedField.svg?style=flat\u0026colorB=008B60\" alt=\"Version\"\u003e\n   \u003c/a\u003e\n   \u003c!--\n   \u003ca href=\"https://github.com/Carthage/Carthage\"\u003e\n      \u003cimg src=\"https://img.shields.io/badge/Carthage-compatible-4BC51D.svg?style=flat\" alt=\"Carthage Compatible\"\u003e\n   \u003c/a\u003e\n   --\u003e\n   \u003ca href=\"https://cocoapods.org/pods/AnimatedField\"\u003e\n      \u003cimg src=\"https://img.shields.io/cocoapods/l/AnimatedField.svg?style=flat)\" alt=\"License\"\u003e\n   \u003c/a\u003e\n   \u003ca href=\"https://developer.apple.com/swift/\"\u003e\n      \u003cimg src=\"https://img.shields.io/badge/Swift-5.0-blue.svg?style=flat\u0026colorB=008B60\" alt=\"Swift 5.0\"\u003e\n   \u003c/a\u003e\n   \u003ca href=\"https://cocoapods.org/pods/AnimatedField\"\u003e\n      \u003cimg src=\"https://img.shields.io/cocoapods/p/AnimatedField.svg?style=flat\u0026colorB=008B60\" alt=\"Platform\"\u003e\n   \u003c/a\u003e\n   \u003c!--\n   \u003ca href=\"https://alberdev.github.io/AnimatedField\"\u003e\n      \u003cimg src=\"https://github.com/alberdev/AnimatedField/blob/gh-pages/badge.svg\" alt=\"Documentation\"\u003e\n   \u003c/a\u003e\n   --\u003e\n   \u003ca href=\"https://twitter.com/alberdev/\"\u003e\n      \u003cimg src=\"https://img.shields.io/badge/Twitter-@alberdev-blue.svg?style=flat\u0026colorB=30CEF2\" alt=\"Twitter\"\u003e\n   \u003c/a\u003e\n   \n\u003c/p\u003e\n\n\u003cbr/\u003e\n\n\u003cp align=\"center\"\u003e\n   Use \u003cb\u003eAnimatedField\u003c/b\u003e as an iOS UITextField/UITextView component. You can check fields with your custom regular expressions or use default ones ordered by types (email, username, password, url, price...). Also can check the field while user is typing in a dynamic way. Limit the text lenght and format fields in your way. Replace your old and bored textfields and textviews with these fancy animated fields. You only need to follow some simple steps to implement it. AnimatedField is customizable and easy to use.\n\u003c/p\u003e\n\n\u003cbr/\u003e\n\n\u003cp align=\"center\" \u003e\n\u003cimg src=\"https://raw.githubusercontent.com/alberdev/AnimatedField/master/Images/video.gif\" alt=\"AnimatedField\" title=\"AnimatedField demo\"\u003e\n\u003c/p\u003e\n\n# AnimatedField\n\n- [x] Awesome animations on begin editing field\n- [x] Totally customizable\n- [x] Check \u0026 filter with regular expressions\n- [x] Limit text length\n- [x] Easy usage\n- [x] Supports iOS, developed in Swift 5\n\n## Table of Contents\n\n- [Installation](#installation)\n- [Usage](#usage)\n  - [UIView in your xib / storyboard](#uiviewinyourxib/storyboard)\n  - [Format](#format)\n  - [Other field properties](#otherfieldproperties)\n  - [DataSource](#datasource)\n  - [Delegates](#delegates)\n  - [Extra](#extra)\n- [Field Types](#fieldtypes)\n\t- [Email](#email)\n\t- [Username](#username)\n\t- [Password](#password)\n\t- [Price](#price)\n\t- [Url](#url)\n\t- [Date picker](#datepicker)\n\t- [Number picker](#numberpicker)\n\t- [Multiline](#multiline)\n- [Apps using AnimatedField](#apps-using-animatedfield)\n- [Author](#author)\n- [Contributing](#contributing)\n- [License](#license)\n\n\n## Installation\n\nAnimatedField is available through [CocoaPods](https://cocoapods.org). To install\nit, simply add the following line to your Podfile and run `pod install`:\n\n```ruby\npod 'AnimatedField'\n```\n\nThen you can import it when you need\n\n```swift\nimport AnimatedField\n```\n\n## Usage\n\nIn the example you will see some animated fields that can be used in your project. Once you've installed the pod, follow next steps. It's really simple:\n\n### UIView in your xib / storyboard\n\nAdd a `UIView` in the xib where you want to place Animated Field. Then you have to input the class name in the view, you can change this in the identity inspector of the interface builder. Remember to input `AnimatedField` in both (Class \u0026 Module)\n\n\u003cimg src=\"https://github.com/alberdev/AnimatedField/blob/master/Images/screenshot_1.png?raw=true\" alt=\"Screenshot 1\" style=\"margin: auto\" /\u003e\n\nThen, connect the IBOutlet in your UIViewController\n\n```swift\n@IBOutlet weak var animatedField: AnimatedField!\n```\n\n### Format\n\nYou can format `AnimatedField` with your own parameters. Use it in all fields to get the same style. See default values:\n \n```swift\nvar format = AnimatedFieldFormat()\n\n/// Title always visible\nformat.titleAlwaysVisible = false\n\n/// Font for title label\nformat.titleFont = UIFont.systemFont(ofSize: 13, weight: .regular)\n    \n/// Font for text field\nformat.textFont = UIFont.systemFont(ofSize: 16, weight: .regular)\n    \n/// Font for counter\nformat.counterFont = UIFont.systemFont(ofSize: 13, weight: .regular)\n    \n/// Line color\nformat.lineColor = UIColor.lightGray\n    \n/// Title label text color\nformat.titleColor = UIColor.lightGray\n    \n/// TextField text color\nformat.textColor = UIColor.darkGray\n    \n/// Counter text color\nformat.counterColor = UIColor.darkGray\n    \n/// Enable alert\nformat.alertEnabled = true\n\n/// Font for alert label    \nformat.alertFont = UIFont.systemFont(ofSize: 13, weight: .regular)\n\n/// Alert status color\nformat.alertColor = UIColor.red\n    \n/// Colored alert field text\nformat.alertFieldActive = true\n    \n/// Colored alert line\nformat.alertLineActive = true\n    \n/// Colored alert title\nformat. alertTitleActive = true\n\n/// Alert position\nformat.alertPosition = .top\n    \n/// Secure icon image (On status)\nformat.visibleOnImage = IconsLibrary.imageOfEye(color: .red)\n    \n/// Secure icon image (Off status)\nformat.visibleOffImage = IconsLibrary.imageOfEyeoff(color: .red)\n    \n/// Enable counter label\nformat.counterEnabled = false\n    \n/// Set count down if counter is enabled\nformat.countDown = false\n\n/// Enable counter animation on change\nformat.counterAnimation = false\n    \n/// Highlight color when becomes active\nformat.highlightColor: UIColor? = UIColor(displayP3Red: 0, green: 139/255, blue: 96/255, alpha: 1.0)\n\n/// Secure image (nil for default eye image)\nformat.secureImage: UIImage? = nil\n```\n\nIs important to finally assign format to `AnimatedField`\n\n```swift\nanimatedField.format = format\n```\n\n### Other field properties\n\nThere are other some animated field properties you can use in your implementation:\n\n```swift\n/// Object that configure `AnimatedField` view. You can setup `AnimatedField` with\n/// your own parameters. See also `AnimatedFieldFormat` implementation.\nanimatedField.format = AnimatedFieldFormat()\n\n/// Field type (default values)\nanimatedField.type = AnimatedFieldType.none\n\n/// Field text\nanimatedField.text = \"\" \n\n/// Placeholder\nanimatedField.placeholder = \"\" \n\n/// Attributed Placeholder\nanimatedField.attributedPlaceholder = NSAttributedString(string: \"Placeholder\", \n                                                         attributes:[.foregroundColor: UIColor.white])\n\n/// Uppercased field format\nanimatedField.uppercased = false\n    \n/// Lowercased field format\nanimatedField.lowercased = false\n    \n/// Keyboard type\nanimatedFieldkeyboardType = UIKeyboardType.alphabet \n    \n/// Secure field (dot format)\nanimatedField.isSecure = false\n    \n/// Show visible button to make field unsecure\nanimatedField.showVisibleButton = false\n\n/// Result of regular expression validation\nlet isValid = animatedField.isValid\n```\n\n### Implement datasource and delegate\n\nThe first way to customize this `AnimatedField` is implementing delegate and datasource methods. These methods handle the most common use cases. Both of them are optional. \n\n```swift\nanimatedField.dataSource = self\nanimatedField.delegate = self\n```\n\n### DataSource\n\nIs used to provide data for the field view. The data source must adopt the `AnimatedFieldDataSource` protocol\n\n```swift\n// Returns boolean to check if field can be changed. This will override custom implementation.\nfunc animatedField(_ animatedField: AnimatedField, shouldChangeCharactersIn range: NSRange, replacementString string: String) -\u003e Bool? \n\n// Returns boolean to check if field can return\nfunc animatedFieldShouldReturn(_ animatedField: AnimatedField) -\u003e Bool \n\n// Needed for limit characters when user fills the field. Returns characters limit\nfunc animatedFieldLimit(_ animatedField: AnimatedField) -\u003e Int?\n\n// Needed for validation when user is filling the field. Returns regular expression to filter characters when user is typing\nfunc animatedFieldTypingMatches(_ animatedField: AnimatedField) -\u003e String? \n\n// Needed for validation when user ends editing field. Returns regular expression to filter field when user ends editing\nfunc animatedFieldValidationMatches(_ animatedField: AnimatedField) -\u003e String? \n\n// Returns alert message when validation fails\nfunc animatedFieldValidationError(_ animatedField: AnimatedField) -\u003e String?\n\n// Returns alert message when price exceeded limits (only for price type)\nfunc animatedFieldPriceExceededError(_ animatedField: AnimatedField) -\u003e String? \n```\n\n### Delegates\n\nIn order to add more functionality in your app, you must implement `AnimatedFieldDelegate `. Is the responsible for managing selection behavior and interactions with fields.\n\n```swift\n// Called when text field begin editing \nfunc animatedFieldDidBeginEditing(_ animatedField: AnimatedField)\n\n// Called when text field end editing\nfunc animatedFieldDidEndEditing(_ animatedField: AnimatedField)\n\n// Called when field (multiline) is resized\nfunc animatedField(_ animatedField: AnimatedField, didResizeHeight height: CGFloat)\n\n// Called when secure button is pressed. \n// Example: Use it if you like to secure/unsecure other field when this is secured/unsecured (like repeat password field)\nfunc animatedField(_ animatedField: AnimatedField, didSecureText secure: Bool)\n\n// Called when picker value is changed\nfunc animatedField(_ animatedField: AnimatedField, didChangePickerValue value: String)\n\n// Called when alert message is shown. \n// Example: If you have disabled alert messages in field and want to show other kind of message in other view. This will use your own alert messages if you implemented datasource method or default ones if you used default types.\nfunc animatedField(_ animatedField: AnimatedField, didShowAlertMessage text: String)\n\n// Called when text field changed\nfunc animatedFieldDidChange(_ animatedField: AnimatedField)\n```\n\n### Extra\n\nYou can also use next methods for restarting field, showing / hidding alert and secure / unsecure fields.\n\n```swift\n// Restart field (empty field)\nfunc restart()\n\n// Show alert message\nfunc showAlert(_ message: String?)\n\n// Hide alert message\nfunc hideAlert()\n\n// Secure / unsecure field with dots (no visible)\nfunc secureField(_ secure: Bool)\n```\n\n## Field Types\n\n### Email\n\nThis type will show `.emailAddress` keyboard\n\n```swift\nAnimatedFieldType.email\n```\n\u003eTyping regular expression: \"[A-Z0-9a-z@_\\\\.]\" \n\n\u003eValidation regular expression: \"[A-Z0-9a-z._%+-]+@[A-Za-z0-9.-]+\\\\.[A-Za-z]{2,4}\"\n\n### Username\n\nFill it with `min` \u0026 `max` limits for regular expression validation when user ends editing.\n\n```swift\nAnimatedFieldType.username(Int, Int)\n```\n\n\u003eTyping regular expression: \"[A-Za-z0-9_.]\"\n\n\u003eValidation regular expression: \"[A-Za-z0-9_.]{\\(min),\\(max)}\"\n\n### Password\n\nFill it with `min` \u0026 `max` limits for regular expression validation when user ends editing.\n\n```swift\nAnimatedFieldType.password(Int, Int)\n```\n\n\u003eTyping regular expression: \".*\" \n\n\u003eValidation regular expression: \".{\\(min),\\(max)}\"\n\n### Price\n\nFill it with `max price` \u0026 `max decimals`. First, will limit result number. `max decimals` will limit decimals. This type will show `.decimalPad` keyboard.\n\n```swift\nAnimatedFieldType.price(Double, Int)\n```\n\u003eTyping regular expression: \"[0-9\\(decimal)]\"  \n\n\u003eValidation regular expression: \"^(?=.\\*[1-9])([1-9]\\\\d*(?:\\(decimal)\\\\d{1,\\(max decimals)})?|(?:0\\(decimal)\\\\d{1,\\(max decimals)}))$\"\n\n- `decimal` depends on locale decimal separator\n\n### Url\n\nThis type will show `.URL` keyboard.\n\n```swift\nAnimatedFieldType.url\n```\n\u003eTyping regular expression: \".*\" \n\n\u003eValidation regular expression: \"https?:\\\\/\\\\/(?:www\\\\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\\\\.[^\\\\s]{2,}|www\\\\.[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\\\\.[^\\\\s]{2,}|https?:\\\\/\\\\/(?:www\\\\.|(?!www))[a-zA-Z0-9]+\\\\.[^\\\\s]{2,}|www\\\\.[a-zA-Z0-9]+\\\\.[^\\\\s]{2,}\"\n\n### Date picker\n\nThis type will show date picker view. Fill it with  `mode`, `default date`, `min date`, `max date`, `done label text`, `date format` (Example: \"dd / MM / yyyy\").\n\n```swift\nAnimatedFieldType.datepicker(UIDatePicker.Mode?, Date?, Date?, Date?, String?, String?)\n```\n\u003eTyping regular expression: \".*\" \n\n\u003eValidation regular expression: \".*\" \n\n### Number picker\n\nThis type will show number picker view. Fill it with `default number`, `min number`, `max number`, `done label text`\n\n```swift\nAnimatedFieldType.numberpicker(Int, Int, Int, String?)\n```\n\n\u003eTyping regular expression: \".*\" \n\n\u003eValidation regular expression: \".*\" \n\n### Multiline\n\nThis type will use multiline text and will resize dynamically when user fills the field. When user completes a new line delegate method `didResizeHeight` is called with updated field height. Use this to offset your scroll view.\n\n```swift\nAnimatedFieldType.multiline\n```\n\n\u003eTyping regular expression: \".*\" \n\n\u003eValidation regular expression: \".*\" \n\n## Apps using AnimatedField\n\nIf you use `AnimatedField` I'd love to hear about it and feature your app here!\n\n\u003cimg src=\"Images/Apps/fashtime.png\" width=\"50\" height=\"50\" valign=\"middle\"\u003e [FashTime](https://itunes.apple.com/app/fashtime-the-new-way/id1126538070?mt=8)\n\n\u003cimg src=\"Images/Apps/checkin.png\" width=\"50\" height=\"50\" valign=\"middle\"\u003e [Check In Event Manager](https://itunes.apple.com/us/app/check-in-event-manager/id1430740368?ls=1\u0026mt=8)\n\n## Author\n\nAlberto Aznar, info@alberdev.com\n\n## Contributing\n\nFeel free to collaborate with ideas 💭, issues ⁉️ and/or pull requests 🔃.\n\n1. Fork it!\n2. Create your feature branch: `git checkout -b my-new-feature`\n3. Commit your changes: `git commit -am 'Add some feature'`\n4. Push to the branch: `git push origin my-new-feature`\n5. Submit a pull request :D\n\n## License\n\nAnimatedField is available under the MIT license. See the LICENSE file for more info.\n\n## Libraries by @alberdev\n\n\u003ca href=\"https://github.com/alberdev/AnimatedField\"\u003e\u003cimg align=\"left\" width=\"100\" src=\"https://raw.githubusercontent.com/alberdev/AnimatedField/master/Images/Pods/AnimatedField.png\" alt=\"AnimatedField  Logo\" vspace=\"10\"\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/alberdev/ContentLoader\"\u003e\u003cimg align=\"left\" width=\"100\" src=\"https://raw.githubusercontent.com/alberdev/AnimatedField/master/Images/Pods/ContentLoader.png\" alt=\"ContentLoader  Logo\" vspace=\"10\"\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/alberdev/CiaoTransitions\"\u003e\u003cimg align=\"left\" width=\"100\" src=\"https://raw.githubusercontent.com/alberdev/AnimatedField/master/Images/Pods/CiaoTransitions.png\" alt=\"CiaoTransitions  Logo\" vspace=\"10\"\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/alberdev/DateScrollPicker\"\u003e\u003cimg align=\"left\" width=\"100\" src=\"https://raw.githubusercontent.com/alberdev/AnimatedField/master/Images/Pods/DateScrollPicker.png\" alt=\"DateScrollPicker  Logo\" vspace=\"10\"\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/alberdev/EmptyStateKit\"\u003e\u003cimg align=\"left\" width=\"100\" src=\"https://raw.githubusercontent.com/alberdev/AnimatedField/master/Images/Pods/EmptyStateKit.png\" alt=\"EmptyStateKit  Logo\" vspace=\"10\"\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/alberdev/GridTimerView\"\u003e\u003cimg align=\"left\" width=\"100\" src=\"https://raw.githubusercontent.com/alberdev/AnimatedField/master/Images/Pods/GridTimerView.png\" alt=\"GridTimerView  Logo\" vspace=\"10\"\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/alberdev/PaintCodeKit\"\u003e\u003cimg align=\"left\" width=\"100\" src=\"https://raw.githubusercontent.com/alberdev/AnimatedField/master/Images/Pods/PaintCodeKit.png\" alt=\"PaintCodeKit  Logo\" vspace=\"10\"\u003e\u003c/a\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falberdev%2FAnimatedField","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falberdev%2FAnimatedField","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falberdev%2FAnimatedField/lists"}