Skip to content

An animate switch collection, Add Beautiful Customise Switch in your application to boost UI and UX

License

Notifications You must be signed in to change notification settings

jwd-ali/Switch-Animations

Repository files navigation

Switches Animations

An animated switch collection

CI Status Carthage Compatible Swift 5.1

Add Beautiful Customise Switch in your application to enhance your application UI and UX


Medium Article:

https://medium.com/@l060214/how-to-create-loading-uiswitch-with-calayers-and-caanimations-4667c1fa845


From time to time I browse Dribbble to get inspiration from UI/UX designers. You often see non-native control elements in these designs. Some, such as checkboxes, have no native counterpart in UIKit while others like switches are— except they’re nearly impossible to customize. You cannot even change the size of a UISwitch. What if you need to implement a completely custom designed switch for your app like this one

If you wanted to implement any of these designs it would be a poor choice to subclass UISwitch as you can hardly customize the colours — aside from the on/off tint. So I thought I would try to re-engineer the UISwitch so that I would have complete control over each aspect, making it easy to style in the future.Turns out its actually pretty easy (and a lot of fun!) to build these control elements from scratch. I even went so far as to add the ability to set on/off text or images. For those who don’t know, UISwitch has onImage and offImage which when set don’t do anything anymore.

So i take few of the Dribble switches Daily UI challenges as challenge and implemented them in this library.This library has cool and sophisticated animations,Designs and effects. Also, customizable properties can be tweaked behaviors and enhance your application UI cool. With this library, you can easily implement material design switch to your app.

You can play with the attributes and can customise them according to your UI demands. Below are the few examples

Usage example

Class Example
Switcher Dribble UI Challenge: https://dribbble.com/shots/4148855-Switcher-XXXIII
SwitcherFullStrtech Dribble UI Challenge:https://dribbble.com/shots/3844909-On-Off
SDSwitch Dribble UI Challenge:https://dribbble.com/shots/3545882-Switch-with-server-calls
YapDarkAndLightModeSwitch Dribble UI Challenge:https://dribbble.com/shots/2484722-Daily-Ui-Day-15-On-Off-Switch
YapAnimatedSwitch Dribble UI Challenge:https://dribbble.com/shots/2309834-Yet-another-toggle-animation
SDSwitch Dribble UI Challenge:https://dribbble.com/shots/5192899-Simple-toggle
YapFullTextSwitch Dribble UI Challenge:https://dribbble.com/shots/2330566-Morph-Switch
JDSwitch Dribble UI Challenge:https://dribbble.com/shots/2346044-Switch-on-off
YapSmileSwitch Dribble UI Challenge:https://dribbble.com/shots/2011284-Switcher-ll
YapLiquidSwitch Dribble UI Challenge:https://dribbble.com/shots/2028065-Switcher-lll
YapSwitchSlim Dribble UI Challenge:https://dribbble.com/shots/2158763-simple-toggle
YapGradientSwitch Dribble UI Challenge:https://dribbble.com/shots/2603107-toggle-switch-micro-interaction
YapHalfStretchSwitch
YapSwitch
YapFullStretchSwitch
YapSwitch

Requirements

  • iOS 10.0+ / Mac OS X 10.9+ / watchOS 2.0+ / tvOS 9.0+
  • Xcode 8.0+

Installation

To integrate Switches Animations into your Xcode project using CocoaPods, specify it in your Podfile:

use_frameworks!

pod 'Switches'

Then, run the following command:

$ pod install

Prerequisites

  • OSX

Update Package.swift

To integrate Switches Animations in your project, add the proper description to your Package.swift file:

// swift-tools-version:5.0
import PackageDescription

let package = Package(
    name: "YOUR_PROJECT_NAME",
    dependencies: [
        .package(url: "https://github.com/jwd-ali/Switch-Animations.git")
    ],
    targets: [
        .target(
            name: "YOUR_TARGET_NAME",
            dependencies: ["Switch-Animations"]
        ),
        ...
    ]
)

To integrate Switches Animations into your Xcode project using Carthage, specify it in your Cartfile:

github "jwd-ali/Switch-Animations"

Manually

If you prefer not to use a dependency manager, you can integrate Switches Animations into your project manually.

  • Add Sources folder into your project

Integration

See the Demo Xcode project its easy to understand with proper comments on properties .. write me if you didn't get anything [email protected]

Be careful!!!

Irreversible consequences are possible during long work with the framework.

Contributing

I’d love to have help on this project. For small changes please open a pull request, for larger changes please open an issue first to discuss what you’d like to see.

License

Switch-Animations is under MIT. See LICENSE file for more info.