AIFlatSwitch
Nicely animated flat design switch alternative to UISwitch
Install / Use
/learn @cocoatoucher/AIFlatSwitchREADME
AIFlatSwitch
A smooth, nice looking and IBDesignable flat design switch for iOS. Can be used instead of UISwitch.
Inspired by Creativedash's Dribbble post here
<p align="center"> <a target="_blank" rel="noopener noreferrer" href="http://dribbble.com/shots/1631598-On-Off"> <img src="https://s3.amazonaws.com/f.cl.ly/items/1p0w3B0E3m2I2k3e0z1Q/onoff.gif" width="200" max-width="80%" alt="Flat switch animation"> </a> </p> <p align="center"> <img src="https://img.shields.io/badge/Swift-5.0-orange.svg"/> <a href="https://cocoapods.org/pods/AIFlatSwitch"> <img src="https://img.shields.io/cocoapods/v/AIFlatSwitch.svg" alt="cocoapods"/> </a> </p> <p align="center"> <img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square"/> </p>Requirements
- iOS 8.0+, tvOS 12.0+
- Xcode 11.0+
- Swift 5
Usage
Creating the flat switch
- Either programmatically
var flatSwitch = AIFlatSwitch(frame: CGRectMake(0, 0, 50, 50))
- Or in Interface Builder
Methods
To change its selected state:
flatSwitch.isSelected = true
- [x] IBInspectable
or:
flatSwitch.setSelected(true, animated: true)
To listen to its state changes:
@IBAction func handleSwitchValueChange(sender: AnyObject) {
if let flatSwitch = sender as? AIFlatSwitch {
print(flatSwitch.isSelected)
}
}
Animation observer callbacks:
flatSwitch.selectionAnimationDidStart = { isSelected in
print("New state: \(isSelected)")
}
flatSwitch.selectionAnimationDidStop = { isSelected in
print("State when animation stopped: \(isSelected)")
}
Styling the switch:
flatSwitch.lineWidth = 2.0
flatSwitch.strokeColor = UIColor.blue
flatSwitch.trailStrokeColor = UIColor.red
flatSwitch.backgroundLayerColor = UIColor.red
flatSwitch.animatesOnTouch = false
- [x] IBInspectable
Contribution guidelines
- Make your changes in your branch
- Bump the pod version in AIFlatSwitch.podspec file (e.g. 1.0.1 to 1.0.2)
- Make sure the Example project compiles and works fine in the Simulator
- Find references to your source code changes in README.md and update them (e.g. method names, changed features)
- Create a pull request
License
AIFlatSwitch is released under the MIT license. See LICENSE for details.
animated check button, checkmark
Related Skills
claude-opus-4-5-migration
96.8kMigrate prompts and code from Claude Sonnet 4.0, Sonnet 4.5, or Opus 4.1 to Opus 4.5
frontend-design
96.8kCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
Agent Development
96.8kThis skill should be used when the user asks to "create an agent", "add an agent", "write a subagent", "agent frontmatter", "when to use description", "agent examples", "agent tools", "agent colors", "autonomous agent", or needs guidance on agent structure, system prompts, triggering conditions, or agent development best practices for Claude Code plugins.
Command Development
96.8kThis skill should be used when the user asks to "create a slash command", "add a command", "write a custom command", "define command arguments", "use command frontmatter", "organize commands", "create command with file references", "interactive command", "use AskUserQuestion in command", or needs guidance on slash command structure, YAML frontmatter fields, dynamic arguments, bash execution in commands, user interaction patterns, or command development best practices for Claude Code.
