Recently I created a simple rating control, which basically shows the rating value according to the value selected (Poor/Fair/Good/Good/Excellent). Basically, after tapping an element it shows a label/image with the user satisfaction.
After creating it I realized that a big thing was missing, which was being able to swipe since most of the rating controls we see in popular applications allows you to swipe between elements.
So decided to create my own rating swipe control.
Here’s what I did
1-Create a new control class
This control will have some main properties:
- SelectedPosition: Indicates the actual selected position
- ItemSpacing: Set the spacing between elements
- NumberOfItems: Set the number of items that will appear
- ItemHeight: The height of each item
- ItemSelectedColor: The color of the item selected
- ItemUnSeletedColor: The color of all the items
With this control I will basically represent each element with a BoxView, changing the color
In order to provide swipe support, I created custom renderers for each platform to listen to touch events and calculate the rating position based on where the user is touching.
2-Create a custom renderer in Android
3-Create a custom renderer in iOS
4-Use the control
Future Improvements
- Allows decimal numbers
- Orientation support
- Allows custom views (Images, etc)
Full code here.
Happy rating!