user interface - Circular rotary/dial UIView for iOS? -



user interface - Circular rotary/dial UIView for iOS? -

i have need create circular dial/rotary style component utilize in ios application. it's circular menu allows users select items ringed around it, , can click button in center activate selected item. however, i've never created custom uiview of type, , don't know begin. can give me pointers how draw view , rotate user drags finger? know how intercept touch events, etc. i'm not sure how go manipulating ui appropriately. tips or pointers great! or, if know of similar component open-sourced great, too!

i needed similar thought app company working on, however, project turned different direction , decided open-source our code.

here's code illustration usage of library:

@implementation wsqviewcontroller - (void)viewdidload { [super viewdidload]; uicolor *backgroundcolor = [uicolor colorwithhue:1.0 saturation:0.33 brightness:0.75 alpha:1]; uicolor *selectedcolor = [uicolor colorwithhue:0.66 saturation:0.33 brightness:0.75 alpha:1]; uicolor *textcolor = [uicolor blackcolor]; uicolor *bordercolor = [uicolor blackcolor]; uifont *font = [uifont systemfontofsize:15]; // set-up rotary view's segments self.rotaryview.segments = @[ [[wsqrotarysegment alloc] initwithtitle:@"facebook" icon:[uiimage imagenamed:@"segment_facebook"] font:font background:backgroundcolor selected:selectedcolor textcolor:textcolor bordercolor:bordercolor borderwidth:2], [[wsqrotarysegment alloc] initwithtitle:@"twitter" icon:[uiimage imagenamed:@"segment_twitter"] font:font background:backgroundcolor selected:selectedcolor textcolor:textcolor bordercolor:bordercolor borderwidth:2], [[wsqrotarysegment alloc] initwithtitle:@"email" icon:[uiimage imagenamed:@"segment_email"] font:font background:backgroundcolor selected:selectedcolor textcolor:textcolor bordercolor:bordercolor borderwidth:2], [[wsqrotarysegment alloc] initwithtitle:@"phone" icon:[uiimage imagenamed:@"segment_phone"] font:font background:backgroundcolor selected:selectedcolor textcolor:textcolor bordercolor:bordercolor borderwidth:2], ]; self.rotaryview.textcolor = textcolor; self.rotaryview.font = font; self.rotaryview.innergradientnormalcolor = backgroundcolor; self.rotaryview.outergradientnormalcolor = selectedcolor; self.rotaryview.innergradientselectedcolor = selectedcolor; self.rotaryview.outergradientselectedcolor = [uicolor colorwithhue:1.0 saturation:0.33 brightness:0.85 alpha:1]; } #pragma mark - wsqrotaryviewdelegate -(void) rotaryview:(wsqrotaryview *)rotaryview didselectsegment:(wsqrotarysegment *)segment { rotaryview.text = [nsstring stringwithformat:@"tap %@", segment.title]; } -(void) rotaryviewdidtapcenterbutton:(wsqrotaryview *)rotaryview { nsstring *message = [nsstring stringwithformat:@"you selected %@ button!", rotaryview.selectedsegment.title]; uialertview *alertview = [[uialertview alloc] initwithtitle:rotaryview.selectedsegment.title message:message delegate:nil cancelbuttontitle:@"ok" otherbuttontitles:nil]; [alertview show]; } @end

here's screenshot of code looks in-action:

as can see, supports varying number of segments, text/button in center perform action.

i hope find useful, , wasn't spammy!

the library resides here: http://github.com/wsq/rotaryview

ios user-interface uiview apple components

Comments

Popular posts from this blog

iphone - Dismissing a UIAlertView -

c# - Can ProtoBuf-Net deserialize to a flat class? -

javascript - Change element in each JQuery tab to dynamically generated colors -