Awesome

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:

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