{"id":96,"date":"2013-07-27T16:10:23","date_gmt":"2013-07-27T20:10:23","guid":{"rendered":"http:\/\/www.kevin-ferrell.com\/?p=96"},"modified":"2013-07-27T16:25:03","modified_gmt":"2013-07-27T20:25:03","slug":"implementing-a-stylized-uisegmentedcontrol","status":"publish","type":"post","link":"http:\/\/www.kevin-ferrell.com\/?p=96","title":{"rendered":"Implementing A Stylized UISegmentedControl"},"content":{"rendered":"

I\u2019m currently in the process of implementing a new UI theme for the iPad application that I\u2019m working on. Several of the mockups sent over by the designer include a stylized UISegmented control:<\/p>\n

\"UISegmented

UISegmented Control Mockup<\/p><\/div>\n

The custom green and gold backgrounds are simple to implement if you\u2019re targeting iOS 5 or newer. Starting in iOS 5, Apple implemented several new methods to customize the appearance of UISegmentedControls. You can a list of the appearance methods in Apple’s Documentation<\/a>.<\/p>\n

The tricky part was how to display the gold arrow indicator below the selected segment. I needed to be able to use this UI style in several places within the app so I couldn\u2019t simply include the arrow within a fixed width background image. The solution I came up with was to add a method that fires when the selected segment index changes. In the method I move the arrow graphic from the previously selected segment to the new one and then center it.<\/p>\n

\r\n- (void)selectedSegmentChanged:(id)sender\r\n{\r\n    \/\/ Remove the arrow from its current view\r\n    [self.segmentArrow removeFromSuperview];\r\n\r\n    \/\/ The segment items are added in reverse order of their index so we need to flip the selected index\r\n    NSInteger viewIndex = self.numberOfSegments - 1 - self.selectedSegmentIndex;\r\n\r\n    \/\/ Get a reference to the segment and position the arrow outside of its frame\r\n    UIView *segmentView = [self.subviews objectAtIndex:viewIndex];\r\n    [segmentView addSubview:self.segmentArrow];\r\n    self.segmentArrow.center = CGPointMake(segmentView.frame.size.width \/ 2, kStyledSegmentedControlHeight + self.segmentArrow.frame.size.height \/ 2);\r\n}\r\n<\/pre>\n
One thing to note here is that when you get a reference to an individual segment from the UISegmentedControl\u2019s subviews is that the segments are stored in reverse order.<\/p>\n
I encapsulated all of the UI customizations into a subclass of UISegmentedControl so that I could easily reuse them across my application. I\u2019ve put together a simple example project on Github to demonstrate how to use the subclass: KFSegmentedControlExample<\/a><\/p>\n
Hopefully someone else will find this useful in their own project!<\/p>\n","protected":false},"excerpt":{"rendered":"
I\u2019m currently in the process of implementing a new UI theme for the iPad application that I\u2019m working on. Several of the mockups sent over by the designer include a stylized UISegmented control: The custom green and gold backgrounds are simple to implement if you\u2019re targeting iOS 5 or newer. Starting in iOS 5, Apple […]<\/p>\n","protected":false},"author":1,"featured_media":103,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[5,6],"tags":[12,22,23],"class_list":["post-96","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-code-examples","category-mobile-apps-in-government","tag-apps-in-government","tag-design","tag-ui"],"_links":{"self":[{"href":"http:\/\/www.kevin-ferrell.com\/index.php?rest_route=\/wp\/v2\/posts\/96","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.kevin-ferrell.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.kevin-ferrell.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.kevin-ferrell.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.kevin-ferrell.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=96"}],"version-history":[{"count":6,"href":"http:\/\/www.kevin-ferrell.com\/index.php?rest_route=\/wp\/v2\/posts\/96\/revisions"}],"predecessor-version":[{"id":102,"href":"http:\/\/www.kevin-ferrell.com\/index.php?rest_route=\/wp\/v2\/posts\/96\/revisions\/102"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/www.kevin-ferrell.com\/index.php?rest_route=\/wp\/v2\/media\/103"}],"wp:attachment":[{"href":"http:\/\/www.kevin-ferrell.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=96"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.kevin-ferrell.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=96"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.kevin-ferrell.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=96"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}