UIScrollView subclass that allows to add a list of highly customizable tags.

Related tags

Tag AMTagListView
Overview

Build Status CocoaPods Coverage Status Carthage compatible Donate

UIScrollView subclass that allows to add a list of highly customizable tags. You can customize colors, border radius, and the tail of the tag. Tags can be added in bulk or dynamically one by one. The newly inserted tag will automatically arrange itself inside the scrollview.

Screenshot

AMTagListView

Setup with CocoaPods

Swift

pod 'AMTagListView'

When using a bridging header:

#import <AMTagListView.h>

When using dynamic frameworks:

@import AMTagListView

Usage

You can create a AMTagListView in your storyboard, or programmatically:

Objective-C

// Init
AMTagListView *tagListView = [[AMTagListView alloc] initWithFrame:frame];
[self.view addSubview:tagListView];

Swift

let tagListView = AMTagListView(frame: frame)
view.addSubview(tagListView)

Adding tags

Objective-C

// Add one tag
[self.tagListView addTag:@"my tag"];

// Add multiple tags
[self.tagListView addTags:@[@"my tag", @"some tag"]];

Swift

// Add one tag
tagListView.addTag("my tag")

// Add multiple tags
tagListView.addTags(["my tag", "some tag"])

Arranging tags

The tags are rearranged when you use the method calls listed above. You can also avoid the auto-rearrange by using the andRearrange: versions of such methods. This is useful when adding a big batch of tags. When you do so you must force the rearrange action manually:

[self.tagListView rearrangeTags];

You can also align the tags to the left or right by setting the tagAlignment property and calling rearrangeTags.

Appearance

Use the AMTagView's UIAppearance selectors to customize its appearance:

Objective-C

[[AMTagView appearance] setRadius:10];

Swift

AMTagView.appearance().radius = 10

Add a payload to a tag

You can add a payload to a single tag by using addTag:withUserInfo::

[self.tagListView addTag:@"hello" withUserInfo:@{ @"data": somePayload }];

Scroll direction

You can control the scroll direction with the scrollDirection property:

[self.tagListView setScrollDirection:AMScrollDirectionHorizontal];

Appearance properties

These are the properties that can be modified:

// Tag's corner radius
[[AMTagView appearance] setRadius:float]

// Tail's length
[[AMTagView appearance] setTagLength:float]

// Inner padding of the tag label
[[AMTagView appearance] setInnerTagPadding:float]

// Radius of the hole punched in the tail
[[AMTagView appearance] setHoleRadius:float]

// Text padding (x for horizontal padding, y for vertical)
[[AMTagView appearance] setTextPadding:CGPoint]

// Text font
[[AMTagView appearance] setTextFont:UIFont]

// The text color
[[AMTagView appearance] setTextColor:UIColor]

// Tag main color
[[AMTagView appearance] setTagColor:UIColor]

// Tag label background color
[[AMTagView appearance] setInnerTagColor:UIColor]

Delegate

This method asks his delegate if a given tag can be added. The method also shows the resulting content size.

- (BOOL)tagList:(AMTagListView *)tagListView shouldAddTagWithText:(NSString *)text resultingContentSize:(CGSize)size;

This method asks his delegate if a given batch of tags can be added. The method also shows the resulting content size.

- (BOOL)tagList:(AMTagListView *)tagListView shouldAddTagsWithText:(NSArray *)text resultingContentSize:(CGSize)size;

This is called when a tag is removed:

- (void)tagList:(AMTagListView *)tagListView didRemoveTag:(UIView<AMTag> *)tag;

Test

To run the test suite install xcpretty gem, launch pod install inside the Tests folder, and run the rake task in the root.

Author

Andrea Mazzini. I'm available for freelance work, feel free to contact me.

Want to support the development of these free libraries? Buy me a coffee ☕️ via Paypal.

Contributors

Thanks to Orta Therox and everyone kind enough to submit a pull request.

MIT License

Copyright (c) 2017 Andrea Mazzini. All rights reserved.

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
  • How can I increase the height of each tag view?

    How can I increase the height of each tag view?

    I would like to increase the height of each tag in the taglistview..

    one way would be to increase the font size, but I would like to keep the font size at 12points but have the height be 30points.. any idea?

    opened by goelv 12
  • Is there a way to detect when user removed a tag?

    Is there a way to detect when user removed a tag?

    I'm trying to notify some app class when a tag was deleted by user. I didn't find any event triggered when this happens so don't see you can detect it.

    I could do the change and create a pull request in case it's not implemented and you think it could help other people.

    Thanks

    opened by claudioredi 10
  • [__NSArrayM insertObject:atIndex:]: object cannot be nil

    [__NSArrayM insertObject:atIndex:]: object cannot be nil

    Hi ! I have an issue in rearrangeTags on this line : [self addSubview:obj];

    Sometimes I got this exception : *** Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: '*** -[__NSArrayM insertObject:atIndex:]: object cannot be nil'

    But when I do this to debug :

    if (obj != nil) {
                NSLog(@"add %@", obj.tagText);
                [self addSubview:obj];
            }
    

    the NSLog print the good tagText and I got the same error so I don't understand... Thanks for your help !

    opened by gautierdelorme 6
  • Custom cell not selected

    Custom cell not selected

    hi i used Tags insde view inside table cell, but i can't select cell from table to get details (push to another view). and if i tap on cell (outSide of tagsView) work fine.

    opened by malkabani 6
  • Fix broken headings in Markdown files

    Fix broken headings in Markdown files

    GitHub changed the way Markdown headings are parsed, so this change fixes it.

    See bryant1410/readmesfix for more information.

    Tackles bryant1410/readmesfix#1

    opened by bryant1410 5
  • Height before creating the view

    Height before creating the view

    #3 This issue's solution tells that you can get the content size after you've created the tag list view, but I have a situation where I need it before. Can you please write a method which calculates that? I tried to look into your files, but there are a couple of interesting lines over there.

    opened by paulrberg 5
  • exposed ui elements

    exposed ui elements

    I know you probably wouldn't agree, but in my case I found it's pretty frustrated that I couldn't change the text of a single tag without reloading the whole thing. For example, my tags are displayed as "TagIsCool +31", and I would like to allow the user to tap it to increase the count. To do this, I can use tag.labelTextalong with tag.button to implement my logic.

    Comparing with some design pattern and principle, I'd like to get things done really quick.

    opened by superarts 5
  • Improve Test Coverage, and add Coveralls

    Improve Test Coverage, and add Coveralls

    • @lazerwalker

    We've improved the overal test coverage by adding tests for most of the public API. We're waiting on travis/coveralls to see the actual results, you would have to turn on coveralls yourself as we don't have admin rights to your repo.

    https://coveralls.io/

    We deleted your test project, and moved the tests on to the demo, you can check out our notes here: https://docs.google.com/document/d/1nyDmDxIH9tAUxA18NIfLw6V6HIYRH-4j2md6rZf2lEU/edit#

    opened by orta 5
  • AMTagListView removeTag problem

    AMTagListView removeTag problem

    Hi, I was trying to use two AMTagListView, for example ,AMTagListView1 and AMTagListView2,

    when I click one AMTagListView1 , removeTag on AMTagListView1, and add this tag to AMTagListView2, but it's not working properly, can you have a check with this issue?

    Thanks

    opened by etamity 5
  • iOS6 compatibility

    iOS6 compatibility

    I just have implemented your awesome lib into our project. However, it's supporting only iOS7. Can you please add the support of iOS6 as well. Thank you very much. Looking forward your response.

    opened by alaaghribi 5
  • Custom tag view

    Custom tag view

    Developer should be able to use custom tag view, built from scratch, without subclassing AMTagView. This feature could bring much more flexibility to the library.

    enhancement 
    opened by ghost 4
  • Any idea about how to manage dynamic height of AMTagListView?

    Any idea about how to manage dynamic height of AMTagListView?

     AMTagView.appearance().tagLength = 10
        AMTagView.appearance().textPadding = 14
        AMTagView.appearance().textFont = UIFont(name: "Futura", size: 14)
        AMTagView.appearance().tagColor = UIColor(red:0.12, green:0.55, blue:0.84, alpha:1)
    
    opened by ihs-Sharma 1
  • Setting text with setupText or setTagText (after adding the tag to tag list) changes the size of the tag

    Setting text with setupText or setTagText (after adding the tag to tag list) changes the size of the tag

    Lets say I have a below setup:

    • An AMTagListView named as tagListView.
    • An AMTagView named as tag1. The text for the tag is "Custom" and it has an accessory image. Below is the code for tag creation and adding it to tagListView:
    AMTagView *tag1 = [[AMTagView alloc] initWithFrame:CGRectZero];
    [tag1 setAccessoryImage:[UIImage imageNamed:@"close"]];
    [tag1 setupWithText:@"Custom"];
    [self.tagListView addTagView:tag1];
    

    So when the tag list view shows up on screen, the frame of the tag1: {{10, 39}, {82, 29}}

    I wrote a tap handler which does nothing but just resets the text to same text. Code below:

    [self.tagListView setTapHandler:^(AMTagView *view) {
         [view setTagText:[NSString stringWithFormat:@"%@", view.tagText]];
    }];
    

    If I check the frame after setTagText, it shows up as {{211, 0}, {106, 30}}

    This happens because when we use addTagView to add tag to the tagListView, the addTagView method recalculates the width of the tag as shown below:

    - (UIView<AMTag> *)addTagView:(UIView<AMTag> *)tagView andRearrange:(BOOL)rearrange {
        if ([tagView isKindOfClass:[AMTagView class]]) {
            UIFont *font = [[[tagView class] appearance] textFont];
            CGSize size = [((AMTagView *)tagView).tagText sizeWithAttributes:@{NSFontAttributeName: font}];
            CGPoint padding = [[[tagView class] appearance] textPadding];
            float tagLength = [[[tagView class] appearance] tagLength];
            size.width = (int)size.width + padding.x * 2 + tagLength;
            size.height = (int)size.height + padding.y;
            size.width = MIN(size.width, self.frame.size.width - self.marginX * 2);
            tagView.frame = (CGRect){{0, 0}, {size.width, size.height}};`
        }
    [self.tags addObject:tagView];
    

    We use setupText: or setTagText: to modify the text for the tag that has already been added. Since the tag has already been added, we don't use addTagView: method and hence the above calculation doesn't happen.

    As a workaround, I am adding and removing the tag after modifying the text so that it maintains the same padding.

    Is this the expected behavior?

    opened by bbhagat 4
  • setting accessoryImage on an AMTagView and then setting the tag with addTagView truncates the text label on the tag

    setting accessoryImage on an AMTagView and then setting the tag with addTagView truncates the text label on the tag

    If I create an AMTagView, set the accessoryImage, set the text with setupWithText, and then add the tag to the tag list view, the frame of the tag gets shortened so that the text label is truncated.

    The problem is in addTagView, where it recalculates the frame size for the tag. This recalculation doesn't take into account a possible accessory image.

    opened by nsolter 0
  • Arrange tags from bottoms up instead top to bottom

    Arrange tags from bottoms up instead top to bottom

    Hi I start using your library in one of our project. I checked the API but could not find if we can arrange tags from bottom to top inside tag view. any help will be appreciated!

    opened by machelix 1
Releases(1.3.0)
Owner
Andrea Mazzini
💻 Software Engineer 🌲 Woodworker
Andrea Mazzini
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 Dec 28, 2022
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 Dec 31, 2022
TagsGridView: A simple view for your tags

TagsGridView: A simple view for your tags. Requirements Installation Contents License Support Credits Requirements iOS 14, macOS 10.15 Swift 5.5 Xcode

Alex 5 Nov 4, 2021
This pod provides a view controller for choosing and creating tags in the style of wordpress or tumblr.

PARTagPicker This pod provides a view controller for choosing and creating tags in the style of wordpress or tumblr. This tag picker was originally us

Paul Rolfe 370 Nov 17, 2022
Useful for showing text or custom view tags in a vertical or horizontal scrollable view and support Autolayout at the same time

Useful for showing text or custom view tags in a vertical or horizontal scrollable view and support Autolayout at the same time. It is highly customizable that most features of the text tag can be configured.

zekunyan 1.8k Dec 30, 2022
An iOS text field that represents tags, hashtags, tokens in general.

WSTagsField An iOS text field that represents tags, hashtags, tokens in general. Usage let tagsField = WSTagsField() tagsField.layoutMargins = UIEdgeI

Whitesmith 1.2k Jan 9, 2023
Swift plugin which allow add mask to input field

AKMaskField AKMaskField is UITextField subclass which allows enter data in the fixed quantity and in the certain format (credit cards, telephone numbe

Artem Krachulov 347 Jul 19, 2022
Highly customizable iOS tags view [input, edit, dynamic, tag, token, field, NSTokenField]

RKTagsView Highly customizable iOS tags view (like NSTokenField). Supports horizontal and vertical direction, editing, multiple selection, Auto Layout

Roman Kulesha 450 Oct 2, 2022
Easily add vertical and horizontal pull to refresh to any UIScrollView. Can also add multiple pull-to-refesh views at once.

This is a fork from the famous SVPullToRefresh pod with 2 additional functionalities: Can add multiple pull-to-refresh views into one single UIScrollV

Hoang Tran 42 Dec 28, 2022
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
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 Dec 28, 2022
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 Dec 31, 2022
AutoKeyboardScrollView is an UIScrollView subclass which makes showing and dismissing keyboard for UITextFields much easier. So called keyboard avoidance.

AutoKeyboardScrollView AutoKeyboardScrollView is a smart UIScrollView which can: Scroll to proper position and make sure the active textField is visib

HongHao Zhang 120 Jul 31, 2022
FlaneurImagePicker is an iOS image picker that allows users to pick images from different sources (ex: user's library, user's camera, Instagram...). It's highly customizable.

FlaneurImagePicker is a highly customizable iOS image picker that allows users to pick images from different sources (ex: device's library, device's c

FlaneurApp 17 Feb 2, 2020
Add to-do List - a mobile application where you can add your to-dos and follow them

This project, is a mobile application where you can add your to-dos and follow them. You can add your to-do's.

Cem 4 Apr 1, 2022
Simple way to add parallax header to UIScrollView/UITableView written in Swift.

ParallaxHeader Simple way to add parallax header to UIScrollView or it's subclasses. One image view Slider with images Blur vibrant text Blur round ic

Roman Sorochak 998 Dec 11, 2022
CarListing app allows user to see list of cars on map as well as in the list

Car Listing CarListing app allows user to see list of cars on map as well as in the list. Features See List of cars on map in the home screen. User ca

Niraj Kumar Jha 0 Oct 13, 2021
An iOS drop-in UITableView, UICollectionView and UIScrollView superclass category for showing a customizable floating button on top of it.

MEVFloatingButton An iOS drop-in UITableView, UICollectionView, UIScrollView superclass category for showing a customizable floating button on top of

Manuel Escrig 298 Jul 17, 2022
UITextField subclass with autocompletion suggestions list

SearchTextField Overview SearchTextField is a subclass of UITextField, written in Swift that makes really easy the ability to show an autocomplete sug

Alejandro Pasccon 1.1k Dec 28, 2022
It is a highly configurable iOS library which allows easy styling with built in styles as well as extra header and footer views so that you can make extremely unique alerts and action sheets.

 CFAlertViewController CFAlertViewController is a library that helps you display and customise Alerts, Action Sheets, and Notifications on iPad and i

Crowdfire Inc. 1.1k Dec 18, 2022