Giter Club home page Giter Club logo

kstokenview's Introduction

KSTokenView

KSTokenView is a control that displays a collection of tokens in an editable UITextField and sends messages to delegate object. It can also be used to input text from user and perform search operation asynchronously. UI can be fully custimized to look like part of your application.

Demo

Click here for Live Preview.

Vertical

gif1

Horizontal

gif2

Screenshots

iphone1 iphone2 iphone3 iphone4

Requirements

  • iOS 9 and above.
  • Xcode 8.1 and above
  • Swift 4 and above (For Swift 2.x use branch develop/swift2.3) (For Swift 3.x use branch develop/swift3)

Adding KSTokenView to your project

METHOD 1: (CocoaPods only for iOS 10.0 and above)

Add a pod entry for KSTokenView to your Podfile

source 'https://github.com/CocoaPods/Specs.git'
platform :ios, '9.0'
use_frameworks!

target '<Your Target Name>' do
    pod 'KSTokenView', '~> 5.0'
end

Then, run the following command:

$ pod install

MEHTOD 2: (Source files)

Alternatively, you can directly add all source files under KSTokenView to your project.

  1. Download the latest code version or add the repository as a git submodule to your git-tracked project.
  2. Open your Xcode project, then drag and drop KSTokenView directory onto your project. Make sure to select Copy items when asked if you extracted the code archive outside of your project.

Usage

Interface Builder

  • From interface builder, Drag and drop UIView onto your View.
  • In Identity inspector, set custom class KSTokenView.
  • Create an outlet in your source file.
  • Customize properties and implement delegates.
tokenView.delegate = self
tokenView.promptText = "Top 5: "
tokenView.placeholder = "Type to search"
tokenView.descriptionText = "Languages"
tokenView.maxTokenLimit = 5 //default is -1 for unlimited number of tokens
tokenView.style = .Squared`

Programmatically

Create KSTokenView object programmatically and add as subview.

let tokenView = KSTokenView(frame: CGRect(x: 10, y: 50, width: 300, height: 40))
tokenView.delegate = self
tokenView.promptText = "Top 5: "
tokenView.placeholder = "Type to search"
tokenView.descriptionText = "Languages"
tokenView.maxTokenLimit = 5
tokenView.style = .Squared
view.addSubview(tokenView)

Customization

Customize KSTokenView appearance as following

/// default is true. token can be deleted with keyboard 'x' button
tokenView.shouldDeleteTokenOnBackspace = true

/// Only works for iPhone now, not iPad devices. default is false. If true, search results are hidden when one of them is selected
tokenView.shouldHideSearchResultsOnSelect = false

/// default is false. If true, already added token still appears in search results
tokenView.shouldDisplayAlreadyTokenized = false

/// default is ture. Sorts the search results alphabatically according to title provided by tokenView(_:displayTitleForObject) delegate
tokenView.shouldSortResultsAlphabatically = true

/// default is true. If false, token can only be added from picking search results. All the text input would be ignored
tokenView.shouldAddTokenFromTextInput = true

/// default is 1
tokenView.minimumCharactersToSearch = 1

/// Default is (TokenViewWidth, 200)
tokenView.searchResultSize = CGSize(width: tokenView.frame.width, height: 120)

/// Default is whiteColor()
tokenView.searchResultBackgroundColor = UIColor.whiteColor()

/// default is UIColor.blueColor()
tokenView.activityIndicatorColor = UIColor.blueColor()

/// default is 120.0. After maximum limit is reached, tokens starts scrolling vertically
tokenView.maximumHeight = 120.0

/// default is UIColor.grayColor()
tokenView.cursorColor = UIColor.grayColor()

/// default is 10.0. Horizontal padding of title
tokenView.paddingX = 10.0

/// default is 2.0. Vertical padding of title
tokenView.paddingY = 2.0

/// default is 5.0. Horizontal margin between tokens
tokenView.marginX = 5.0

/// default is 5.0. Vertical margin between tokens
tokenView.marginY = 5.0

/// default is UIFont.systemFontOfSize(16)
tokenView.font = UIFont.systemFontOfSize(16)

/// default is 50.0. Caret moves to new line if input width is less than this value
tokenView.minWidthForInput = 100.0

/// default is ", ". Used to seperate titles when untoknized
tokenView.seperatorText = ", "

/// default is 0.25.
tokenView.animateDuration = 0.25

/// default is true. When resignFirstResponder is called tokens are removed and description is displayed.
tokenView.removesTokensOnEndEditing = true

/// Default is "selections"
tokenView.descriptionText = "Languages"

/// set -1 for unlimited.
tokenView.maxTokenLimit = 5

/// default is "To: "
tokenView.promptText = "Top 5: "

/// default is true. If false, cannot be edited
tokenView.editable = true

/// default is nil
tokenView.placeholder = "Type to search"

/// default is .Rounded, creates rounded corner
tokenView.style = .Squared

/// default is .Vertical, following creates horizontal scrolling direction
tokenView.direction = .Horizontal

/// An array of string values. Default values are "." and ",". Token is created with typed text, when user press any of the character mentioned in this Array
tokenView.tokenizingCharacters = [","]

See example projects for detail.

License

This code is distributed under the terms and conditions of the MIT license.

kstokenview's People

Contributors

khawars avatar khawarsys avatar richardbuckle avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

kstokenview's Issues

iOS10 infinite loop when dismissing list

There is a part where the loop never ends on iOS10, swift 2.2

for index in 0 ... self.constraints.count - 1 {
                        let constraint: NSLayoutConstraint = self.constraints[index] as NSLayoutConstraint

                        if (constraint.firstItem as! NSObject == self && constraint.firstAttribute == .Height) {
                            constraint.constant = height
                        }
                    }

on KSTokenView

any ideas?

autolayout on view

i follow example horizontal KSTokenView, if i change custom autolayout constraint, it not working well.. I need some advice,how the use of constraint on KSTokenView. thanks. Great project!

screen shot 2016-09-21 at 11 28 38 pm

i create KSToken in the middle between textfield like this
screen shot 2016-09-21 at 11 34 41 pm

and i add some autolayout contraint, then become

screen shot 2016-09-21 at 11 32 17 pm

HorizontalExample bug

Try to write this token : Hello how are you test
You will see that the test word is over the 'you' token until you press Done button.

And again, thanks for your effort !

how do I change the color (background/text) of the tokens

Once again - awesome control!

(I'm using an Obj-C project)
I see I have a @interface KSToken : UIControl
but I don't know how to access it. The object I actually have in hand is KSTokenView and it has no such interface

Thanks

unexpectedly found nil while unwrapping an optional value (using in table view cell)

private func _initPlaceholderLabel() {
let xPos = _marginX!
if (_placeholderLabel == nil) {
_placeholderLabel = UILabel(frame: CGRect(x: xPos, y: leftView!.frame.origin.y, width: _selfFrame!.width - xPos - _leftViewRect().size.width, height: _leftViewRect().size.height))
_placeholderLabel?.textColor = placeHolderColor
_placeholderLabel?.font = _font
_scrollView.addSubview(_placeholderLabel!)
} else {
_placeholderLabel?.frame.origin.x = xPos
}
}

token.title string equality not working

I am trying to implement below delegate method:

func tokenView(tokenView: KSTokenView, shouldAddToken token: KSToken) -> Bool {
        var shouldAddToken = true

        if token.title == "f" {
            shouldAddToken = false
        }

        print("~~ tokenTitle : \(token.title) , shouldAddToken : \(shouldAddToken)")

        return shouldAddToken
    }

Problem is - though I have entered 'f' in tokenView shouldAddToken is coming to be nil, i.e. equality check is failing :(

Here is output of print statement in console:

~~ tokenTitle : โ€‹f , shouldAddToken : true

Please suggest

Convert this to objective-c

This isn't an issue, but this is the only way I have to contact you. My question, can you please translate this to objective-c? I don't know swift, and I want to be able to read this.

Cannot build the project using Cocoapods

Hi there,
First of all thank you for open sourcing this component! ๐Ÿป

I added KSTokenView using Cocoapods to my project but it doesn't get compiled this way. I think the problem is that KSTokenView class is not visible to my app's target. To make sure of this, I changed the class's access identifier to be public (and made all other necessary changes) and then the project compiled.

Has anyone else experienced this issue before?

I have problems with AutoLayout

Hi,
I don't know why but when i set AutoLayout constraints left:0 top:0 right:0 height:30 for KSTokenView, the KSTokenView is larger than the superView :

capture d ecran 2015-03-26 a 17 20 46

Is there a bug or my fault ?

Placeholder and input text are not even

Hey,

I have problem because placeholder and input are not even (see attachment). Is there possibility to make them even? Maybe after accepting PR#48 and exposing paddingY property as public I could solve this problem.
image

Thanks in advance,

Auto Layout issue in UITableViewCell

Hi,

I've worked on this issue a lot myself and searched the whole StackOverFlow. Unfortunately I had no luck fixing it so I decided to ask the author @khawars .
I'm using self sizing cells using Auto Layout targeting iOS 8 and above. Since this control overrides Intrinsic Content Size, I believe it should not have any problems with this.
I've set up a custom UITableViewCell in Storyboard consisting a UiLabel pinned to top, leading and trailing edges and a KSTokenView pinned to the label, leading and trailing and bottom edges. Practically these constraints are enough if both elements could size themselves based on their content. For example I have another custom cell in the same UITableView replacing the Token View with another UILabel and it just works fine.
I then added an outlet to this Token View and when it got set, I set the desired properties for this control and added some tokens.
Here comes the problem: I launch the app and the table view comes on screen. Unfortunately the height has not be set automatically by auto layout yet and it will not until I scroll past this cell and come back to it. In another words, it only makes itself correct in size in the second pass of layout. I've already tried multiple combinations of setNeedsLayout and layoutIfNeeded on the cell, cell.contentView and the TokenView without any luck.
Do you know what is causing the problem?

Thanks in advance.

Autoresize UITableViewCell with TokenView

I have added KSTokenView as a subview of UITableViewCell. (Like in the behavior of UITextView)
But it won't resize the table view cell the way UITextView does.

Any solution for this?

[Improvement] Split text with space

Is it possible to tranform a text like this : Hello how are you. Into splited token ?
result : Hello,how,are,you (like the Pinterest app for iPad)

Retain cycle from KSTokenViewDelegate

Hi,

I think you forgot to make the KSTokenview delegate to weak on line 127 in KSTokenView.
This has make a retain cycle and now it's ok, by setting "weak var delegate: KSTokenViewDelegate?"

Thank for your lib by the way, it's great

check if token has some prefix

Hi,
I've a problem when added this beautiful library into my Obj-c project.
When checking if [aToken.title hasPrefix:@"somePrefix"], it enters anyway even if there is no prefix.
I read something about "optional string" using swift and after placed a breakpoint and check with lldb, I found that check returns .
How can i solve this?
thanks a lot!
Dario

Custom Font crash

Giving a custom font like UIFont("Helvetica-Neue", size:14) crashes at private function _updateTokenField. Could you please look into this?

Show all

Good morning and thank you for your work, I just started looking at it but it looks exactly what I would have made myself, if I were able to... :)

This isn't actually an issue, more like a feature request... I see that the list of possible results is shown after at least 1 character is typed; I would love to show all possible results, let's say "unfiltered", when the user selects the view and hasn't typed anything yet.

I tried to set .minimumCharactersToSearch = 0, but it didn't work, I still need to type at least one character before search occurs.

There's a way to show every possible value right when editing begins?

indentation on first token

  • build the Examples/SwiftExample/SwiftExample.xcodeproj project
  • add a few token to get into the second line of tokens
    There is a gap between the first token of the first line and the other first tokens of the other lines (see the added red line in attached screenshot)

Is this gap intented or a bug?
indent

(Build with Xcode 6.4 on iPhone 6 iOS 8.4 Simulator)

KSTokenView description text gets blank while start scrolling

It looks like a bug. Steps to reproduce:

  1. Add a proper number of tokens to make the scroll active.
  2. Hide keyboard to show description text or a list of tokens separated by commas.
  3. Start scrolling vertically/horizontally (depending on a direction setup) in KSTokenView (not clicking, just start scrolling) - as a result, the KSTokenView element gets completely empty.

I hope that I made myself clear :-).

autocomplete TableView hides KSTokenField when adding tokens programatically

When adding programatically - the autocomplete TableView is in a fixed y of 30 - it ignores the tokens that were inserted (the caret is in the correct location)

I tried to debug it a bit and got lost.

Steps to recreate:

  1. ProgramaticallyExample project.
  2. Do some add "Add Token Programmatically" clicks until you pass the first line of tokens.
  3. Try and add a token by typing

Thanks.

Search Table View is not scrollable and selectable

Hi! I've been using KSTokenView for a while, and I think it's great! Good work! I wanted to add keyword suggestion feature in my app, but for some reason the suggestions show up but the table view is not interactive. I can't scroll down or select a cell. I looked at the example project, and I don't see what I'm doing would cause this issue. I do have tap gesture recognizers on other views but even if I block the code responsible for that, it didn't work either. Do you have any idea what might be the issue? I'm using it in a table view cell btw, if that's helpful.

Autolayout: grow KSTokenView to include UITableView

When using Autolayout, is it possible to grow the height-constraint of the KSTokenView to include the table view and not just the tokens? I made an example to make clear what i mean: 4f289e3

The green UIView is below the KSTokenView and they are connected via a a "vertical space"-constraint. The green view moves down, when tokens are added, but it does not move below the tableview. Is there a way to include an option to do this or can you point me to the heigth-calculation?
vertical space constraint pushes green view down

KSTokenView-height does not include tableView

OBJ-C example not compiling

Didn't get into really knowing Swift yet, so I can't tell you why it fixes things, but in order for the ObjCExample successfully compile I changed
ln 898 in KSTokenView.swift to:
cell!.textLabel!.text = (title != nil) ? title : "No Title"

Problem with StackView example

When I try in my app (and I verified with your stack view example), the vertical size is wrong. Any idea what is going wrong?

screen shot 2016-10-09 at 12 09 26 pm

KSTokenView resign first responder issue

When resigning the first responder, text in the cell doesn't become tokenized. If I type in a word and then tap in another textField or textView, that text isn't tokenized.

I've tried setting removesTokensOnEndEditing to false but it did nothing

import data from external VC

If I have AViewController, and I put KSTokenView on BViewController. I need segue some data in a dataArray from A to B, when B get it, it should tokenise all data into several token. Unfortunately, I could not figure out how-to.

Trying to Use KSTokenView with Cocoapods, XCode 7, and Swift 2

I'm trying to use your project in my swift 2, xcode 7 project. I installed it in Cocoapods with

platform :ios, '8.0'
use_frameworks!
pod 'KSTokenView'

it installed KSTokenView 1.3.0. The 1.3.0 version has almost 200 errors right now in my workspace. When I look in the podspec file it says that the s.version is 2.0.0. When I have tried to use that version and install pod 'KSTokenView', '~> 2.0.0' I get an error during the pod install. Do you know what could be causing the error with the 2.0.0 version? I would really like to use this framework because it would really help me with my project.

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.