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
Post a Comment