A simple split-flap display for your Swift applications

Related tags

UI uikit splitflap
Overview

Splitflap

Supported Platforms Version Carthage compatible Swift Package Manager compatible Build status Code coverage status

🛫 Splitflap is a simple to use component to present changeable alphanumeric text like often used as a public transport timetable in airports or railway stations or with some flip clocks.

RequirementsUsageInstallationContributionContactLicense

Requirements

  • iOS 8.0+ / tvOS 9.0+
  • Xcode 9.0+
  • Swift 4.2+

Usage

Hello World

The first example is the simplest way to use the Splitflap component. Here how to display this "Hello" text:

Hello

import Splitflap

let splitflapView        = Splitflap(frame: CGRect(x: 0, y: 0, width: 370, height: 53))
splitflapView.datasource = self

// Set the text to display by animating the flaps
splitflapView.setText("Hello", animated: true)

// MARK: - Splitflap DataSource Methods

// Defines the number of flaps that will be used to display the text
func numberOfFlapsInSplitflap(_ splitflap: Splitflap) -> Int {
  return 5
}

Theming

Splitflap allows you to customize each flap individually by providing a splitflap:builderForFlapAtIndex: delegate method:

Theming

let splitflapView        = Splitflap(frame: CGRect(x: 0, y: 0, width: 370, height: 53))
splitflapView.delegate   = self
splitflapView.datasource = self

// Set the text with an emoji
splitflap.text = "Cat \u{1F63B}"

// MARK: - Splitflap Delegate Methods

// Configure the appearance for each flaps
func splitflap(_ splitflap: Splitflap, builderForFlapAtIndex index: Int) -> FlapViewBuilder {
  return FlapViewBuilder { builder in
    builder.backgroundColor = UIColor(red: 251/255, green: 249/255, blue: 243/255, alpha: 1)
    builder.cornerRadius    = 5
    builder.font            = UIFont(name: "Avenir-Black", size:45)
    builder.textAlignment   = .center
    builder.textColor       = UIColor(red: 0, green: 0, blue: 0, alpha: 0.5)
    builder.lineColor       = UIColor(red: 0, green: 0, blue: 0, alpha: 0.3)
  }
}

// MARK: - Splitflap DataSource Methods

func tokensInSplitflap(_ splitflap: Splitflap) -> [String] {
  return " Cat\u{1F63B}".characters.map { String($0) }
}

And many more...

To go further, take a look at the documentation and the example project.

Note: All contributions are welcome

Installation

CocoaPods

Install CocoaPods if not already available:

$ [sudo] gem install cocoapods
$ pod setup

Go to the directory of your Xcode project, and Create and Edit your Podfile and add Splitflap:

$ cd /path/to/MyProject
$ touch Podfile
$ edit Podfile
source 'https://github.com/CocoaPods/Specs.git'
platform :ios, '8.0'

use_frameworks!
pod 'Splitflap', '~> 4.1.0'

Install into your project:

$ pod install

Open your project in Xcode from the .xcworkspace file (not the usual project file):

$ open MyProject.xcworkspace

You can now import Splitflap framework into your files.

Carthage

Carthage is a decentralized dependency manager that automates the process of adding frameworks to your Cocoa application.

You can install Carthage with Homebrew using the following command:

$ brew update
$ brew install carthage

To integrate Splitflap into your Xcode project using Carthage, specify it in your Cartfile file:

github "yannickl/Splitflap" >= 4.1.0

Swift Package Manager

You can use The Swift Package Manager to install Splitflap by adding the proper description to your Package.swift file:

import PackageDescription

let package = Package(
    name: "YOUR_PROJECT_NAME",
    targets: [],
    dependencies: [
        .Package(url: "https://github.com/yannickl/Splitflap.git", versions: "4.1.0" ..< Version.max)
    ]
)

Note that the Swift Package Manager is still in early design and development, for more information checkout its GitHub Page.

Manually

Download the project and copy the Splitflap folder into your project to use it in.

Contribution

Contributions are welcomed and encouraged .

Contact

Yannick Loriot

License (MIT)

Copyright (c) 2015-present - Yannick Loriot

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Comments
  • TwelveHourClock format

    TwelveHourClock format

    Hi!

    First of all thanks for this great component. This is exactly was I was looking for and I like that it has Swift 3 support already.

    I was looking at the pre defined tokens in SplitflapTokens. I think the TwelveHourClock token should have a 2 digits format just like the 24hour and minutes/seconds one.

    opened by deivuh 4
  • Swift Package Manager not resolving library

    Swift Package Manager not resolving library

    I'm attempting to add this package to my project via the Add Package Dependency feature in Xcode 11 and I get the following error:

    The package dependency graph can not be resolved; unable find any available tag for the following requirements:
    https://github.com/yannickl/Splitflap.git — 4.1.0..<5.0.0
    

    I believe this is because you've missed out the products and targets section in the Package.swift file. A simple example can be found in JGProgressHUD's Packages.swift

    opened by theoriginalbit 3
  • Does not handle numbers in strings well

    Does not handle numbers in strings well

    In the example application replace the first element of the words array with: "0:00:60" private let words = ["0:00:60", "Bonsoir", "12h15", "Arrival"]

    the result is that the left most character ONLY counts through the lower and upper case alphabet, then the numbers to 0. None of the right characters ever change from empty.

    I would expect all elements to animate to the string.

    opened by HasanEdain 3
  • Don't show lines when color is set to nil

    Don't show lines when color is set to nil

    When a user sets the line color to "nil", don't display any lines. The reason I did this is due to line removal. I can set the line color to clear, then I only see one line. But if I set it to nil, I see two. So I think the subviews shouldn't be added and it will remove those lines entirely. There is a very very faint line, but almost looks gone. Thanks, Mike

    opened by mdmack 2
  • Two problem :

    Two problem :

    Two problem : 1.I could not compile because in SplitflapTokens.swift :

    Cannot invoke 'map' with an argument list of type '((CVarArgType) -> String)'

    I use Xcode 7.0.1 , is that the reason I occur the problem? 2015-12-10 11 47 52

    1. after I delete the 'wrong' code, I run the demo ,but the animation is strange : sometime the low part was dismiss, why?

    2015-12-10 11 26 51

    Thanks!

    opened by ZsIsMe 1
  • Broken animation for transparent FlapViewBuilder background color

    Broken animation for transparent FlapViewBuilder background color

    After set backgrondColor for FlapViewBuilder == nil, or with alpha chanel < 1, animation is broken. We see front and back TileView on on top of the other. Is there a way to make a semi-transparent background?

    opened by OlionCompany 0
  • fatal error

    fatal error

    There is a fatal error here splitflapView.delegate = self Thread 1: Fatal error: Unexpectedly found nil while unwrapping an Optional value How can it be debugged?

    opened by samsoncsyu7777 0
  • Setting the text on init

    Setting the text on init

    For the moment if you set the text before the view is loaded nothing happens. It would be great to set the text during the init, to better, in storyboard!

    enhancement help wanted 
    opened by yannickl 0
Owner
Yannick Loriot
iOS developer and nodejs addict. Open-source lover and technology enthusiast.
Yannick Loriot
An easy to use UI component to help display a signal bar with an added customizable fill animation

TZSignalStrengthView for iOS Introduction TZSignalStrengthView is an easy to use UI component to help display a signal bar with an added customizable

TrianglZ LLC 22 May 14, 2022
A controller that uses a UIStackView and view controller composition to display content in a list

StackViewController Overview StackViewController is a Swift framework that simplifies the process of building forms and other static content using UIS

Seed 867 Dec 27, 2022
List tree data souce to display hierachical data structures in lists-like way. It's UI agnostic, just like view-model and doesn't depend on UI framework

SwiftListTreeDataSource List tree data souce to display hierachical data structures in lists-like way. It's UI agnostic, just like view-model, so can

Dzmitry Antonenka 26 Nov 26, 2022
⚡️ A library of widgets and helpers to build instant-search applications on iOS.

By Algolia. InstantSearch family: InstantSearch iOS | InstantSearch Android | React InstantSearch | InstantSearch.js | Angular InstantSearch | Vue Ins

Algolia 567 Dec 20, 2022
A draggable modal for iOS Applications.

Mantle Modal Draggable Modal, PopUp or Menu written in Swift. Description A simple modal resource that uses a UIScrollView to allow the user to close

Ricardo Canales 89 Feb 25, 2022
Material, a UI/UX framework for creating beautiful iOS applications

Material Welcome to Material, a UI/UX framework for creating beautiful applications. Material's animation system has been completely reworked to take

Cosmicmind 12k Jan 2, 2023
Full configurable spreadsheet view user interfaces for iOS applications. With this framework, you can easily create complex layouts like schedule, gantt chart or timetable as if you are using Excel.

kishikawakatsumi/SpreadsheetView has moved! It is being actively maintained at bannzai/SpreadsheetView. This fork was created when the project was mov

Kishikawa Katsumi 34 Sep 26, 2022
UI framework that allows developers to integrate an amazing selection interface into their applications

UI framework that allows developers to integrate an amazing selection interface into their applications! Each bubble has a set of parameters, which could be configured individually.

AJIJIi 5 Jul 12, 2022
Creating a simple selectable tag view in SwiftUI is quite a challenge. here is a simple & elegant example of it.

SwiftUI TagView Creating a simple selectable tag view in SwiftUI is quite a challenge. here is a simple & elegant example of it. Usage: Just copy the

Ahmadreza 16 Dec 28, 2022
Lightweight touch visualization library in Swift. A single line of code and visualize your touches!

TouchVisualizer is a lightweight pure Swift implementation for visualising touches on the screen. Features Works with just a single line of code! Supp

Morita Naoki 851 Dec 17, 2022
Twinkle is a Swift and easy way to make any UIView in your iOS or tvOS app twinkle.

Twinkle ✨ Twinkle is a Swift and easy way to make any UIView in your iOS or tvOS app twinkle. This library creates several CAEmitterLayers and animate

patrick piemonte 600 Nov 24, 2022
Swift based simple information view with pointed arrow.

InfoView View to show small text information blocks with arrow pointed to another view.In most cases it will be a button that was pressed. Example To

Anatoliy Voropay 60 Feb 4, 2022
Simple PhotoBrowser/Viewer inspired by facebook, twitter photo browsers written by swift

SKPhotoBrowser Simple PhotoBrowser/Viewer inspired by facebook, twitter photo browsers written by swift features Display one or more images by providi

keishi suzuki 2.4k Jan 6, 2023
Simple and highly customizable iOS tag list view, in Swift.

TagListView Simple and highly customizable iOS tag list view, in Swift. Supports Storyboard, Auto Layout, and @IBDesignable. Usage The most convenient

Ela Workshop 2.5k Jan 5, 2023
🍞 Toast for Swift - Toaster Android-like toast with very simple interface

Toaster Android-like toast with very simple interface. (formerly JLToast) Screenshots Features Queueing: Centralized toast center manages the toast qu

Suyeol Jeon 1.6k Jan 3, 2023
Stencil is a simple and powerful template language for Swift.

Stencil Stencil is a simple and powerful template language for Swift. It provides a syntax similar to Django and Mustache. If you're familiar with the

Stencil Project 2.2k Jan 4, 2023
TSnackBarView is a simple and flexible UI component fully written in Swift

TSnackBarView is a simple and flexible UI component fully written in Swift. TSnackBarView helps you to show snackbar easily with 3 styles: normal, successful and error

Nguyen Duc Thinh 3 Aug 22, 2022
TDetailBoxView is a simple and flexible UI component fully written in Swift

TDetailBoxView is a simple and flexible UI component fully written in Swift. TDetailBoxView is developed to help users quickly display the detail screen without having to develop from scratch.

Nguyen Duc Thinh 2 Aug 18, 2022