https://github.com/nmilcoff/tagsview
Simple and highly customizable Xamarin.iOS tag list view. Originally inspired by https://github.com/ElaWorkshop/TagListView
https://github.com/nmilcoff/tagsview
ios mvvmcross ui widget xamarin
Last synced: 4 months ago
JSON representation
Simple and highly customizable Xamarin.iOS tag list view. Originally inspired by https://github.com/ElaWorkshop/TagListView
- Host: GitHub
- URL: https://github.com/nmilcoff/tagsview
- Owner: nmilcoff
- License: mit
- Created: 2017-09-24T22:42:26.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-11-05T00:09:14.000Z (about 7 years ago)
- Last Synced: 2025-08-24T08:14:48.387Z (4 months ago)
- Topics: ios, mvvmcross, ui, widget, xamarin
- Language: C#
- Homepage:
- Size: 436 KB
- Stars: 19
- Watchers: 1
- Forks: 6
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# TagsView
[](https://ci.appveyor.com/project/nmilcoff/tagsview)
|Package Name|Version|
| ------------------- | :------------------: |
|TagsView|[](https://www.nuget.org/packages/TagsView/)|
|MvxTagsView|[](https://www.nuget.org/packages/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](https://www.nuget.org/packages/TagsView/)
[MvxTagsView](https://www.nuget.org/packages/MvxTagsView/)
## Requirements
iOS 9+
## Features and usage
It's super simple to get started:
```c#
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!
```c#
public class ViewController : UIViewController
{
// declare a MvxTagListView using MyObject as items type
private MvxTagListView 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.Title)
{
// you can customize properties here!
};
this.View.AddSubview(this.mvxTagsView);
this.View.AddConstraints(
// Add your constraints!
);
var set = this.CreateBindingSet();
// In this case, YourSource should be an ObservableCollection
set.Bind(this.mvxTagsView).For(v => v.ItemsSource).To(vm => vm.YourSource);
// MyObjectTagSelectedCommand should be a IMvxCommand
set.Bind(this.mvxTagsView).For(v => v.TagSelectedCommand).To(vm => vm.MyObjectTagSelectedCommand);
// MyObjectTagButtonTappedCommand should be a IMvxCommand
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!
```c#
public class MvxSimpleTagListView : MvxTagListView
{
public MvxSimpleTagListView(bool enableTagButton = true)
: base(s => s, enableTagButton)
{
}
}
```
## Contribution
Pull requests (and issues) are welcome!
## License
MIT