Introducing SMWheelControl

Posted on June 10, 2013

Today I am proud to announce the availability of a new Pod for iOS which will be included in my forthcoming app.

SMWheelControl

an iOS control allowing the selection of an item from a 360° spinning wheel with a smooth inertial rotation.

The code, released under the BSD 3-clause license, is loosely based on the tutorial “How To Create a Rotating Wheel Control with UIKit” published on this Ray Wenderlich’s post by Cesare Rocchi

As usual, you can insert it into your podfile by adding

pod "SMWheelControl", "0.1.1"

Some howto follows.

Usage

Initialization and data source

Instantiate the control with a classical - (id)initWithFrame:(CGRect)rect and add a target as you usually do with a control, e.g.:

SMWheelControl *wheel = [[SMWheelControl alloc] initWithFrame:CGRectMake(0, 0, 320, 320)];
[wheel addTarget:self action:@selector(wheelDidChangeValue:) forControlEvents:UIControlEventValueChanged];

Then add a dataSource:

wheel.dataSource = self;
[wheel reloadData];

and implement the following methods (the dataSource should conform to the SMWheelControlDataSource):

- (UIView *)wheel:(SMWheelControl *)wheel viewForSliceAtIndex:(NSUInteger)index;
- (NSUInteger)numberOfSlicesInWheel:(SMWheelControl *)wheel;

For instance:

- (NSUInteger)numberOfSlicesInWheel:(SMWheelControl *)wheel
{
    return 10;
}

- (UIView *)wheel:(SMWheelControl *)wheel viewForSliceAtIndex:(NSUInteger)index
{
    UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 150, 30)];
    label.backgroundColor = [UIColor whiteColor];
    label.text = [NSString stringWithFormat:@" %d", index];
    return label;
}

When the wheel ends snapping to the closest slice, if you added a target, then it will receive the event UIControlEventValueChanged, and the selector you specified will be executed.

- (void)wheelDidChangeValue:(id)sender
{
    self.valueLabel.text = [NSString stringWithFormat:@"%d", self.wheel.selectedIndex];
}