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