Giter Club home page Giter Club logo

taggerkit's Introduction

TaggerKit

Version License Platform

TaggerKit helps you quickly integrate tags into your iOS projects. It provides a collection view for displaying tags and a text field for adding them to another collection view. The custom layout used by TaggerKit is based on TagCellLayout by Ritesh Gupta.

Example

To run the example project, clone the repo, and run pod install from the Example directory first.

Requirements

TaggerKit runs on Swift 4.2 and iOS 12.

Installation

TaggerKit is available through CocoaPods. To install it, just add the following line to your Podfile:

pod 'TaggerKit'

Setup

Static tags

Tags can be implemented in a couple of ways. Let's start simple: you have a bunch of tags (Strings) that you want to show to the user. A static collection view is just what we need.

  1. In Interface Builder, create a container view in your ViewController and then delete its child from the storyboard:

Interface Builder container view

  1. Import TaggerKit into your view controller and create an outlet for the container view

    import TaggerKit
    
    	class ViewController: UIViewController {
    
    		@IBOutlet var containerView: UIView!
    
    
  2. Instantiate and a TKCollectionView() and give it to the container with:

    var tagCollection: TKCollectionView()
    
    override func viewDidLoad() {
    	super.viewDidLoad()
    
    	add(tagCollection, toView: containerView)
  3. Give the collection view some tags:

    	tagCollection.tags = ["Some", "Tag", "For", "You"]
  4. Done!

Dynamic tags

Do this if you want what you saw in the preview GIF.

  1. Follow the instructions above and create two collection views, putting them into two different containers

  2. For both collection views set their .action property accordingly. For example: if you are in a view displaying a product to which your user has already added some tags, these tags should be removable, hence that collection's action should be .removeAction (more on how to be notified of tags events later).

    productTagsCollection.action 	= .removeTag
  3. Create a Text Field outlet and set its custom class to TKTextField

  4. Set the text field's .sender and .receiver properties. This enables the text field to add tags to a collection. The sender is a collection view that is displaying tags from the textfield (tags that should be filtered), while the receiver is the collection receiving the tags:

    textField.sender = allTagsCollection
    textField.receiver = productTagsCollection
  5. If you want the "filter" collection to be able to add tags, set these properties:

    allTagsCollection.action = .addTag
    allTagsCollection.receiver = productTagsCollection
  6. Lastly, you probably want to be notified and act upon tags being added or removed from a collection. For this purpose, TaggerKit lets you override these two methods in order to add your functionality (your controller must the delegate of the collections):

    allTagsCollection.delegate 	= self
    productTagsCollection.delegate 	= self
    
    
    override func tagIsBeingAdded(name: String?) {
    	// Example: save testCollection.tags to UserDefault
    	print("added \(name!)")
    }
    
    override func tagIsBeingRemoved(name: String?) {
    	print("removed \(name!)")
    }

Customisation

TKCollectionView has some properties you can set to modify the tag's appearance:

// Custom font
	tagCollection.customFont = UIFont.boldSystemFont(ofSize: 14)
// Corner radius of tags	
	tagCollection.customCornerRadius = 14.0		
// Spacing between cells					
	tagCollection.customSpacing = 20.0	
// Background of cells						
	tagCollection.customBackgroundColor = UIColor.red	

taggerkit's People

Contributors

nekonora avatar

Watchers

Carabineiro avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.