Last active
November 22, 2016 17:57
-
-
Save theCrab/b689388b897ffabe553fb978840b7837 to your computer and use it in GitHub Desktop.
Customise UISegmentedCotrol. This code is translated from Swift 3 to Objective-C
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // | |
| // SpotaSegmentedController.m | |
| // Spota | |
| // | |
| // Created by The Crab on 19/11/2016. | |
| // Use this code as you please. This is a port from Swift 2. | |
| // Original by: http://www.appdesignvault.com/custom-segmented-control-swift-tutorial/ | |
| // Copyright © 2016 The Crab. All rights reserved. | |
| // | |
| import <UIKit/UIkit> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // | |
| // SpotaSegmentedController.swift | |
| // Spota | |
| // | |
| // Created by The Crab on 19/11/2016. | |
| // Use this code as you please. This is a port from Swift 2. | |
| // Original by: http://www.appdesignvault.com/custom-segmented-control-swift-tutorial/ | |
| // Copyright © 2016 The Crab. All rights reserved. | |
| // | |
| import UIKit | |
| @IBDesignable class CustomSegmentedControl: UIControl { | |
| private var labels = [UILabel]() | |
| var thumbView = UIView() | |
| var items: [String] = ["FOTA", "SITA", "EITA"] { | |
| didSet { | |
| setupLabels() | |
| } | |
| } | |
| var selectedIndex : Int = 0 { | |
| didSet { | |
| displayNewSelectedIndex() | |
| } | |
| } | |
| @IBInspectable var selectedLabelColor : UIColor = .black { | |
| didSet { | |
| setSelectedColors() | |
| } | |
| } | |
| @IBInspectable var unselectedLabelColor : UIColor = .white { | |
| didSet { | |
| setSelectedColors() | |
| } | |
| } | |
| @IBInspectable var thumbColor : UIColor = .white { | |
| didSet { | |
| setSelectedColors() | |
| } | |
| } | |
| @IBInspectable var borderColor : UIColor = .white { | |
| didSet { | |
| layer.borderColor = borderColor.cgColor | |
| } | |
| } | |
| @IBInspectable var font : UIFont! = UIFont.systemFont(ofSize: 12) { | |
| didSet { | |
| setFont() | |
| } | |
| } | |
| override init(frame: CGRect) { | |
| super.init(frame: frame) | |
| setupView() | |
| } | |
| required init(coder: NSCoder) { | |
| super.init(coder: coder)! | |
| setupView() | |
| } | |
| func setupView(){ | |
| layer.cornerRadius = frame.height / 2 | |
| layer.borderColor = UIColor(white: 1.0, alpha: 0.5).cgColor | |
| layer.borderWidth = 2 | |
| backgroundColor = .clear | |
| setupLabels() | |
| addIndividualItemConstraints(items: labels, mainView: self, padding: 0) | |
| insertSubview(thumbView, at: 0) | |
| } | |
| func setupLabels(){ | |
| for label in labels { | |
| label.removeFromSuperview() | |
| } | |
| labels.removeAll(keepingCapacity: true) | |
| for index in 1...items.count { | |
| let label = UILabel(frame: CGRect(x: 0, y: 0, width: 70, height: 40)) | |
| label.text = items[index - 1] | |
| label.backgroundColor = .clear | |
| label.textAlignment = .center | |
| label.font = UIFont(name: "Avenir-Black", size: 15) | |
| label.textColor = index == 1 ? selectedLabelColor : unselectedLabelColor | |
| label.translatesAutoresizingMaskIntoConstraints = false | |
| self.addSubview(label) | |
| labels.append(label) | |
| } | |
| addIndividualItemConstraints(items: labels, mainView: self, padding: 0) | |
| } | |
| override func layoutSubviews() { | |
| super.layoutSubviews() | |
| var selectFrame = self.bounds | |
| let newWidth = selectFrame.width / CGFloat(items.count) | |
| selectFrame.size.width = newWidth | |
| thumbView.frame = selectFrame | |
| thumbView.backgroundColor = thumbColor | |
| thumbView.layer.cornerRadius = thumbView.frame.height / 2 | |
| displayNewSelectedIndex() | |
| } | |
| override func beginTracking(_ touch: UITouch, with event: UIEvent?) -> Bool { | |
| let location = touch.location(in: self) | |
| var calculatedIndex : Int? | |
| for (index, item) in labels.enumerated() { | |
| if item.frame.contains(location) { | |
| calculatedIndex = index | |
| } | |
| } | |
| if calculatedIndex != nil { | |
| selectedIndex = calculatedIndex! | |
| sendActions(for: .valueChanged) | |
| } | |
| return false | |
| } | |
| func displayNewSelectedIndex(){ | |
| for (_, item) in labels.enumerated() { | |
| item.textColor = unselectedLabelColor | |
| } | |
| let label = labels[selectedIndex] | |
| label.textColor = selectedLabelColor | |
| UIView.animate(withDuration: 0.5, delay: 0.0, usingSpringWithDamping: 0.5, initialSpringVelocity: 0.8, options: .curveLinear, animations: { | |
| self.thumbView.frame = label.frame | |
| }, completion: nil) | |
| } | |
| func addIndividualItemConstraints(items: [UIView], mainView: UIView, padding: CGFloat) { | |
| _ = mainView.constraints | |
| for (index, button) in items.enumerated() { | |
| let topConstraint = NSLayoutConstraint(item: button, attribute: NSLayoutAttribute.top, relatedBy: NSLayoutRelation.equal, toItem: mainView, attribute: NSLayoutAttribute.top, multiplier: 1.0, constant: 0) | |
| let bottomConstraint = NSLayoutConstraint(item: button, attribute: NSLayoutAttribute.bottom, relatedBy: NSLayoutRelation.equal, toItem: mainView, attribute: NSLayoutAttribute.bottom, multiplier: 1.0, constant: 0) | |
| var rightConstraint : NSLayoutConstraint! | |
| if index == items.count - 1 { | |
| rightConstraint = NSLayoutConstraint(item: button, attribute: NSLayoutAttribute.right, relatedBy: NSLayoutRelation.equal, toItem: mainView, attribute: NSLayoutAttribute.right, multiplier: 1.0, constant: -padding) | |
| }else{ | |
| let nextButton = items[index+1] | |
| rightConstraint = NSLayoutConstraint(item: button, attribute: NSLayoutAttribute.right, relatedBy: NSLayoutRelation.equal, toItem: nextButton, attribute: NSLayoutAttribute.left, multiplier: 1.0, constant: -padding) | |
| } | |
| var leftConstraint : NSLayoutConstraint! | |
| if index == 0 { | |
| leftConstraint = NSLayoutConstraint(item: button, attribute: NSLayoutAttribute.left, relatedBy: NSLayoutRelation.equal, toItem: mainView, attribute: NSLayoutAttribute.left, multiplier: 1.0, constant: padding) | |
| }else{ | |
| let prevButton = items[index-1] | |
| leftConstraint = NSLayoutConstraint(item: button, attribute: NSLayoutAttribute.left, relatedBy: NSLayoutRelation.equal, toItem: prevButton, attribute: NSLayoutAttribute.right, multiplier: 1.0, constant: padding) | |
| let firstItem = items[0] | |
| let widthConstraint = NSLayoutConstraint(item: button, attribute: .width, relatedBy: NSLayoutRelation.equal, toItem: firstItem, attribute: .width, multiplier: 1.0 , constant: 0) | |
| mainView.addConstraint(widthConstraint) | |
| } | |
| mainView.addConstraints([topConstraint, bottomConstraint, rightConstraint, leftConstraint]) | |
| } | |
| } | |
| func setSelectedColors(){ | |
| for item in labels { | |
| item.textColor = unselectedLabelColor | |
| } | |
| if labels.count > 0 { | |
| labels[0].textColor = selectedLabelColor | |
| } | |
| thumbView.backgroundColor = thumbColor | |
| } | |
| func setFont(){ | |
| for item in labels { | |
| item.font = font | |
| } | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment