The button bar will be a simple UIView with a backgroundColor matching the color of the selected segment’s font color. selected )Īlmost there! Now we have to add a bar below the selected segment. Add lines below the segmented control's tintColor segmentedControl. To bring back the labels, let’s change the font and text color of both the selected segment and non-selected segments. If you look at the live view, since we removed the tintColor the UISegmentControl has briefly “disappeared” since everything is now a clear color. Add lines below selectedSegmentIndex segmentedControl. When the tintColor is removed, the borders and the selected segment background color Next, let’s remove the backgroundColor and tintColor. Don’t forget to append the isActive property to each of the auto layoutĬonstraints with a value of true or they won’t work. The playground live view shows us our basic UISegmentedControl. isActive = true // Constraining the height of the segmented control to an arbitrarily chosen value segmentedControl. isActive = true // Constrain the segmented control width to be equal to the container view width segmentedControl. addSubview ( segmentedControl ) // Constrain the segmented control to the top of the container view segmentedControl. translatesAutoresizingMaskIntoConstraints = false // Add the segmented control to the container view view. selectedSegmentIndex = 0 // This needs to be false since we are using auto layout constraints segmentedControl. insertSegment ( withTitle : "Three", at : 2, animated : true ) // First segment is selected by default segmentedControl. insertSegment ( withTitle : "Two", at : 1, animated : true ) segmentedControl. insertSegment ( withTitle : "One", at : 0, animated : true ) segmentedControl. white let segmentedControl = UISegmentedControl () // Add segments segmentedControl. import UIKit import PlaygroundSupport // Container view let view = UIView ( frame : CGRect ( x : 0, y : 0, width : 400, height : 100 )) view. Not, the button bar at the bottom of the selected segment might end up being too wide or not wide enough for the segment it’s under. Also to note, the way I’m building out my constraints will assume all segments are of equal length. I’m doing this in a Swift playground, so let’s start with the basics by creating a new UIView and adding a UISegmentedControl The views programatically, and doing all of my theming inline for the purposes of simplicity. Just a disclaimer, this is one way of doing it I’m using auto layout constraints, building I found a couple of really good third-party projects that handled this, but I had some trouble with them and decided I’ve been working on a project and I wanted the neat “button bar-style” design for my UISegmentedControl, where thereĪre no borders around the segments and there’s a small bar below the selected segment which moves when you choose a new
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |