nmilcoff/tagsview

Simple and highly customizable Xamarin.iOS tag list view. Originally inspired by https://github.com/ElaWorkshop/TagListView

TagsView

Package Name	Version
TagsView
MvxTagsView

Simple and highly customizable Xamarin.iOS tag list view. Originally inspired by https://github.com/ElaWorkshop/TagListView

Customizable features:

• Left/Center/Right alignment
• Font
• X/Y Margins
• X/Y Paddings
• Text color
• Background text color
• Tag corner radius
• Tag border color
• Tag border width
• Tag border color
• Tag controls distance
• Tag icon
• Tag icon size
• Tag icon color
• Tag selected event
• Tag button tapped event

Download & Install

Get it on Nuget!

TagsView

MvxTagsView

Requirements

iOS 9+

Features and usage

It's super simple to get started:

public class ViewController : UIViewController
{
    private TagListView tagsView;

    public override void ViewDidLoad()
    {
        // code
        this.tagsView = new TagListView()
        {
            // you can customize properties here!
        };

        this.View.AddSubview(this.tagsView);

        this.View.AddConstraints(        
            // Add your constraints!
        );

        // you can attach a source object to each tag
        var myObject = new MyModel { Title = "I'm a MyModel!" };
        this.tagsView.AddTag(myObject.Title, myObject); 

        // but, if none is provided, it will be the text string 
        this.tagsView.AddTag("I'm a simple tag!"); 
    }
}

By default, TagsView will display a button next to the text of the tag. To prevent this, you can pass the value false for the parameter enableTagButton in its constructor.

As explained in the code snippet, each tag can contain a source object. These will be available for you on the events the control exposes:

• TagSelected: User tapped a tag.
• TagButtonTapped: User tapped a tag button.

There are also a lot of properties available for you to customize the look & feel:

Feature	Property	Type
Alignment	Alignment	TagsAlignment
Text color	TagTextColor	UIColor
Tag background color	TagBackgroundColor	UIColor
Font	TextFont	UIFont
Tag corner radius	CornerRadius	float
Tag border width	BorderWidth	float
Tag border color	BorderColor	UIColor
Padding Y	PaddingY	float
Padding X	PaddingX	float
Margin Y	Margin Y	float
Margin X	Margin X	float
Distance between text and button	ControlsDistance	float
Button size	TagButtonSize	float
Button color	TagButtonColor	UIColor
Button icon	ButtonIcon	UIImage

MvvmCross version

If you are using MvvmCross, you can take advantage of MvxTagListView!

public class ViewController : UIViewController
{
    // declare a MvxTagListView using MyObject as items type
    private MvxTagListView<MyObject> mvxTagsView;

    public override void ViewDidLoad()
    {
        // You need to specify how MyObject can be translated to a string in the ctor!
        this.mvxTagsView = new MvxTagListView<MyObject>(
            myObject => myObject.Title)
        {
            // you can customize properties here!
        };

        this.View.AddSubview(this.mvxTagsView);

        this.View.AddConstraints(        
            // Add your constraints!
        );

        var set = this.CreateBindingSet<FirstView, FirstViewModel>();
        // In this case, YourSource should be an ObservableCollection<MyObject>
        set.Bind(this.mvxTagsView).For(v => v.ItemsSource).To(vm => vm.YourSource); 
        // MyObjectTagSelectedCommand should be a IMvxCommand<MyObject>
        set.Bind(this.mvxTagsView).For(v => v.TagSelectedCommand).To(vm => vm.MyObjectTagSelectedCommand);
        // MyObjectTagButtonTappedCommand should be a IMvxCommand<MyObject>
        set.Bind(this.mvxTagsView).For(v => v.TagButtonTappedCommand).To(vm => vm.MyObjectTagButtonTappedCommand);
        set.Apply();
    }
}

As you can see from the code snippet, the control allows you to bind ItemsSource and two commands: TagSelectedCommand, TagButtonTappedCommand.

Using a collection of strings as items source

If your source is just a collection of strings, you should consider using MvxSimpleTagListView, super handy!

public class MvxSimpleTagListView : MvxTagListView<string>
    {
        public MvxSimpleTagListView(bool enableTagButton = true)
            : base(s => s, enableTagButton)
        {
        }
    }

Contribution

Pull requests (and issues) are welcome!

License

MIT

tagsview's Issues

Incorrect placement into TagsView

Hello,

You have done a great job with this tagView package !
I am trying to use it but I am encountering an issue that I can solve.

The list is randomly incorrectly displayed into my view.
Sometimes the list is correctly displayed when I add a tag and sometimes not...
The RowQuantity property is correct.

Here I joined my code and 3 photos to explain my case :
`this._tagsView = new TagListView(true)
{
MarginX = 8f,
MarginY = 8f,
PaddingY = 8f,
PaddingX = 8f,
TextFont = FontHelper.GetFont(FontsEnum.Medium, 14f),
TagTextColor = ColorHelper.GreyishBrown,
Alignment = TagsAlignment.Left,
Frame = new CGRect(24, 16, _tagView.Frame.Width, _tagView.Frame.Height),
TagButtonSize = 16f,
TagButtonColor = ColorHelper.Black,
TagBackgroundColor = ColorHelper.paleGrey
};

        this._tagsView.TagButtonTapped += (sender, e) =>
        {
            this._tagsView.RemoveTag(e);
        };

        //_tagView is the view where I placed my TagListView
        this._tagView.AddSubview(_tagsView);

        this._tagView.AddConstraints(
            this._tagsView.Below(this._limitForTagView, 16f)
        );

        _tagsView.AddTags(list);`

Tag not added :

Tag correctly added :

Tag incorrectly added :

Any idea on how I can fix this issue please?

PS : Sorry the first part of my code can not be added as I wished.

TagsView breaks the view after two lines

Hi, I have been looking into solving this but I just cannot figure out the solution. You might be able to help in this.

My code is the following

 this.tagsView = new TagListView(false)
            {
                PaddingY = 15f,
                PaddingX = 15f,
                TextFont = UIFont.SystemFontOfSize(16f),
                TagBackgroundColor = UIColor.FromRGB(71, 84, 205),
                BorderColor = UIColor.Blue,
                Alignment = TagsAlignment.Left,
                BorderWidth = 1f,
                CornerRadius = 20f,
                Frame = new CGRect(20, 30, ScrollViewTags.Frame.Width, ScrollViewTags.Frame.Height)

 };

and I am adding tags like this

foreach (Tag T in GlobalTags)
 {                
 try
    {
      this.tagsView.AddTag(T.TagName, T);
      }
  catch (Exception X)
   {

     }              
 }

AND

MyScrollView.ContentSize = new CGSize(this.View.Bounds.Width, this.View.Bounds.Height);
MyScrollView.Add(this.tagsView);

Simple enough and it works but the results are something like this.

https://imgur.com/a/SpIW9na

After two Rows, it creates a huge gap for next row of tags - I am not sure what the issue is, if I am not adding Constrains properly or something?

Cheers

Using TagsView causes Asset Catalog override

Hey @nmilcoff,

I've been attempting to use the MvxTagsView in my MVVMCross 5.7 project, but if I when I add the package, implement the MvxTagListView and build, my compiled binary is missing my assets from my Asset Catalog, and is instead replaced with the 'ic_removetag' asset from the Asset Catalog of this project (You can check this by inspecting the compiled Assets.car). I've tried to add an Asset Catalog in one of your samples and saw similar results.

Strangely, if I make some changes to my Asset Catalog (rename it, open it in Xcode, etc), it appears to bring all my assets back, but remove the ic_removetag asset. This means that whenever you set show 'enableTagButton' to true, we get an Mvx error because the button is initialised with that asset first, even if we set our own custom ButtonIcon.

I'll keep investigating with the hope of submitting a PR but wanted to submit an issue as you may have some other ideas. Cheers!

EDIT: I've been playing around trying to fix the TagsView and have found that deleting the Asset Catalog and the SetImage line in the Initialize method of the TagButtonView allows me to set my own ButtonIcon and everything works. I'll work on a more elegant solution so we can keep the default icon (probably FFImageLoading or a bitmap) and submit a PR when I get the chance 😎