Convert Figma logo to code with AI

Ramotion logopaper-switch

:octocat: 🎚 RAMPaperSwitch is a Swift material design UI module which paints over the parent view when the switch is turned on. iOS library by @Ramotion

2,936
232
2,936
6
View on GitHub

Top Related Projects

Yalantis's avatar

Segmentio

2,524

Animated top/bottom segmented control written in Swift.

Quick Overview

Ramotion/paper-switch is a custom iOS UISwitch control that mimics the appearance of a paper switch. It provides a unique and visually appealing alternative to the standard UISwitch, offering a smooth animation when toggled. This library is designed to enhance the user interface of iOS applications with a more stylish and engaging switch control.

Pros

  • Visually appealing design that stands out from the standard UISwitch
  • Smooth and customizable animations
  • Easy integration with existing iOS projects
  • Customizable colors and properties

Cons

  • Limited to iOS platform only
  • May not fit all design aesthetics or app styles
  • Requires additional setup compared to using the standard UISwitch
  • Potential performance impact for apps with many switches

Code Examples

  1. Basic usage of PaperSwitch:
let paperSwitch = PaperSwitch(frame: CGRect(x: 0, y: 0, width: 100, height: 100))
view.addSubview(paperSwitch)
  1. Customizing colors:
paperSwitch.backgroundColor = .white
paperSwitch.tintColor = .blue
paperSwitch.thumbTintColor = .red
  1. Adding a target action:
paperSwitch.addTarget(self, action: #selector(switchValueChanged(_:)), for: .valueChanged)

@objc func switchValueChanged(_ sender: PaperSwitch) {
    print("Switch is now \(sender.isOn ? "ON" : "OFF")")
}

Getting Started

To use PaperSwitch in your project:

  1. Add the following to your Podfile:

    pod 'paper-switch'

  2. Run pod install in your terminal.

  3. Import the module in your Swift file:

    import paper_switch

  4. Create and add a PaperSwitch to your view:

    let paperSwitch = PaperSwitch(frame: CGRect(x: 50, y: 50, width: 100, height: 100))
view.addSubview(paperSwitch)

Competitor Comparisons

Yalantis logo

Segmentio

2,524

Animated top/bottom segmented control written in Swift.

Pros of Segmentio

  • More customizable appearance with various styles and animations
  • Supports both Swift and Objective-C
  • Includes additional features like badges and custom content

Cons of Segmentio

  • Larger codebase, potentially more complex to implement
  • Less focused on a specific UI element (switch) compared to paper-switch
  • May require more setup and configuration

Code Comparison

Segmentio implementation:

let segmentioView = Segmentio(frame: CGRect(x: 0, y: 0, width: 300, height: 50))
segmentioView.setup(
    content: [SegmentioItem(title: "First", image: nil)],
    style: .onlyLabel,
    options: SegmentioOptions()
)

paper-switch implementation:

let switchView = RAMPaperSwitch(frame: CGRect(x: 0, y: 0, width: 50, height: 30))
switchView.animationDidStartClosure = { (onAnimation: Bool) in
    print("Animation did start")
}

Both repositories offer unique UI components for iOS applications. Segmentio provides a more versatile segmented control with various customization options, while paper-switch focuses on delivering a visually appealing switch component with paper-like animations. The choice between the two depends on the specific needs of your project and the desired user interface elements.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

PAPER SWITCH

A Swift material design UI module which paints over the parent view when the switch is on.

We specialize in the designing and coding of custom UI for Mobile Apps and Websites.

Stay tuned for the latest updates:


CocoaPods CocoaPods CocoaPods Carthage compatible Twitter Travis Donate

Requirements

  • iOS 8.0+
  • Xcode 9.0+

Installation

Just add the RAMPaperSwitch folder to your project.

or use CocoaPods with Podfile:

pod 'RAMPaperSwitch'

or Carthage users can simply add to their Cartfile:

github "Ramotion/paper-switch"

Usage

RAMPaperSwitch is a drop-in replacement of UISwitch. You just need to set the onTintColor property of the switch, and it will automatically paint over its superview with the selected color. You have ability to set duration of animation instead of default value.

  1. Create a new UISwitch in your storyboard or nib.

  2. Set the class of the UISwitch to RAMPaperSwitch in your Storyboard or nib.

  3. Set onTintColor for the switch

  4. Set duration property programmatically if You want to change animation duration.

  5. Add animation for other views near the switch if need.

Animate views

You can animate other views near the switch. For example, you can change color to views or labels that are inside the same superview. Duration of animation can be gotten from the RAMPaperSwitch's property duration. You can animate CoreAnimation properties like this:

self.paperSwitch.animationDidStartClosure = {(onAnimation: Bool) in
    UIView.transitionWithView(self.label, duration: self.paperSwitch.duration, options: UIViewAnimationOptions.TransitionCrossDissolve, animations: {
        self.label.textColor = onAnimation ? UIColor.whiteColor() : UIColor.blueColor()
    }, completion:nil)
}

📄 License

Paper Switch is released under the MIT license. See LICENSE for details.

This library is a part of a selection of our best UI open-source projects.

If you use the open-source library in your project, please make sure to credit and backlink to www.ramotion.com

📱 Get the Showroom App for iOS to give it a try

Try this UI component and more like this in our iOS app. Contact us if interested.