Feature/icon with label

Example/BetterSegmentedControl/Base.lproj/LaunchScreen.xib

@@ -1,8 +1,10 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="6214" systemVersion="14A314h" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" launchScreen="YES" useTraitCollections="YES">
+<?xml version="1.0" encoding="UTF-8"?>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="17701" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" launchScreen="YES" useTraitCollections="YES" colorMatched="YES">
+ <device id="retina6_1" orientation="portrait" appearance="light"/>
  <dependencies>
- <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="6207"/>
- <capability name="Constraints with non-1.0 multipliers" minToolsVersion="5.1"/>
+ <deployment identifier="iOS"/>
+ <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="17703"/>
+ <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
  </dependencies>
  <objects>
  <placeholder placeholderIdentifier="IBFilesOwner" id="-1" userLabel="File's Owner"/>
@@ -11,20 +13,20 @@
  <rect key="frame" x="0.0" y="0.0" width="480" height="480"/>
  <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
  <subviews>
- <label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text=" Copyright (c) 2015 CocoaPods. All rights reserved." textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" minimumFontSize="9" translatesAutoresizingMaskIntoConstraints="NO" id="8ie-xW-0ye">
+ <label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" misplaced="YES" text=" Copyright (c) 2015 CocoaPods. All rights reserved." textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" minimumFontSize="9" translatesAutoresizingMaskIntoConstraints="NO" id="8ie-xW-0ye">
  <rect key="frame" x="20" y="439" width="441" height="21"/>
  <fontDescription key="fontDescription" type="system" pointSize="17"/>
- <color key="textColor" cocoaTouchSystemColor="darkTextColor"/>
+ <color key="textColor" systemColor="darkTextColor"/>
  <nil key="highlightedColor"/>
  </label>
- <label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="BetterSegmentedControl" textAlignment="center" lineBreakMode="middleTruncation" baselineAdjustment="alignBaselines" minimumFontSize="18" translatesAutoresizingMaskIntoConstraints="NO" id="kId-c2-rCX">
+ <label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" misplaced="YES" text="BetterSegmentedControl" textAlignment="center" lineBreakMode="middleTruncation" baselineAdjustment="alignBaselines" minimumFontSize="18" translatesAutoresizingMaskIntoConstraints="NO" id="kId-c2-rCX">
  <rect key="frame" x="20" y="140" width="441" height="43"/>
  <fontDescription key="fontDescription" type="boldSystem" pointSize="36"/>
- <color key="textColor" cocoaTouchSystemColor="darkTextColor"/>
+ <color key="textColor" systemColor="darkTextColor"/>
  <nil key="highlightedColor"/>
  </label>
  </subviews>
- <color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="calibratedWhite"/>
+ <color key="backgroundColor" red="1" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
  <constraints>
  <constraint firstItem="kId-c2-rCX" firstAttribute="centerY" secondItem="iN0-l3-epB" secondAttribute="bottom" multiplier="1/3" constant="1" id="5cJ-9S-tgC"/>
  <constraint firstAttribute="centerX" secondItem="kId-c2-rCX" secondAttribute="centerX" id="Koa-jz-hwk"/>
@@ -38,4 +40,9 @@
  <point key="canvasLocation" x="548" y="455"/>
  </view>
  </objects>
+ <resources>
+ <systemColor name="darkTextColor">
+ <color white="0.0" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+ </systemColor>
+ </resources>
 </document>

Example/BetterSegmentedControl/ViewController.swift

@@ -79,6 +79,24 @@ class ViewController: UIViewController {
  index: -1)
  noSelectedSegmentControl.addTarget(self, action: #selector(segmentedControl1ValueChanged(_:)), for: .valueChanged)
  view.addSubview(noSelectedSegmentControl)
+
+ // Control 8: Icons with labels
+ let iconWithLabelSegmentControl = BetterSegmentedControl(
+ frame: CGRect(x: 0, y: 560, width: 200, height: 40),
+ segments: IconWithLabelSegment.segments(withIconsAndLabels: [IconWithLabel(icon: UIImage(named: "facebook")!, title: "Facebook"), IconWithLabel(icon: UIImage(named: "twitter")!, title: "Twitter")],
+ iconSize: CGSize(width: 20.0, height: 20.0),
+ normalIconTintColor: .systemTeal,
+ normalFont: .systemFont(ofSize: 10),
+ normalTextColor: .systemTeal,
+ selectedIconTintColor: #colorLiteral(red: 0.2117647059, green: 0.2705882353, blue: 0.3098039216, alpha: 1),
+ selectedFont: .systemFont(ofSize: 10)),
+ index: 1)
+ iconWithLabelSegmentControl.center.x = view.center.x
+ iconWithLabelSegmentControl.backgroundColor = #colorLiteral(red: 0.2117647059, green: 0.2705882353, blue: 0.3098039216, alpha: 1)
+ iconWithLabelSegmentControl.cornerRadius = 10
+ iconWithLabelSegmentControl.indicatorView.backgroundColor = .systemTeal
+ iconWithLabelSegmentControl.addTarget(self, action: #selector(segmentedControl1ValueChanged(_:)), for: .valueChanged)
+ view.addSubview(iconWithLabelSegmentControl)
  }
 
  // MARK: - Action handlers

Example/Podfile.lock

@@ -1,5 +1,5 @@
 PODS:
- - BetterSegmentedControl (2.0)
+ - BetterSegmentedControl (2.0.1)
  - iOSSnapshotTestCase (5.0.2):
  - iOSSnapshotTestCase/SwiftSupport (= 5.0.2)
  - iOSSnapshotTestCase/Core (5.0.2)
@@ -31,12 +31,12 @@ EXTERNAL SOURCES:
  :path: "../"
 
 SPEC CHECKSUMS:
- BetterSegmentedControl: ce9b68b81c963991211c561026ed2cf711f9ac63
+ BetterSegmentedControl: 09607b27861d49cbce48b7673b74f9150a3d371a
  iOSSnapshotTestCase: 2d51aa06775e95cecb0a1fb9c5c159ccd1dd4596
  Nimble: 051e3d8912d40138fa5591c78594f95fb172af37
  Nimble-Snapshots: bbd1ab264bacc24a9ce24a8363bc05aac783aeb0
  Quick: 7fb19e13be07b5dfb3b90d4f9824c855a11af40e
 
 PODFILE CHECKSUM: 609c5442f2ad21fe0424eaab055f9caa5c2944a1
 
-COCOAPODS: 1.9.3
+COCOAPODS: 1.10.1

Pod/Classes/Segments/IconWithLabel/IconWithLabel.swift

@@ -0,0 +1,18 @@
+//
+// IconWithLabel.swift
+// BetterSegmentedControl
+//
+// Created by Arman Zoghi on 2/15/21.
+//
+
+import Foundation
+import UIKit
+
+public class IconWithLabel {
+ let icon: UIImage
+ let title: String
+ public init(icon: UIImage, title: String) {
+ self.icon = icon
+ self.title = title
+ }
+}

Pod/Classes/Segments/IconWithLabel/IconWithLabelSegment.swift

@@ -0,0 +1,148 @@
+//
+// IconWithLabelSegment.swift
+// BetterSegmentedControl
+//
+// Created by Arman Zoghi on 2/14/21.
+//
+
+#if canImport(UIKit)
+
+import UIKit
+
+open class IconWithLabelSegment: BetterSegmentedControlSegment {
+ // MARK: Constants
+ private struct DefaultValues {
+ static let normalBackgroundColor: UIColor = .clear
+ static let normalTextColor: UIColor = .black
+ static let normalFont: UIFont = .systemFont(ofSize: 13)
+ static let selectedBackgroundColor: UIColor = .clear
+ static let selectedTextColor: UIColor = .black
+ static let selectedFont: UIFont = .systemFont(ofSize: 13, weight: .medium)
+ }
+
+ // MARK: Properties
+ public var icon: UIImage
+ public var iconSize: CGSize
+ public let text: String?
+
+ public var normalIconTintColor: UIColor
+ public let normalFont: UIFont
+ public let normalTextColor: UIColor
+ public var normalBackgroundColor: UIColor
+
+ public var selectedIconTintColor: UIColor
+ public let selectedFont: UIFont
+ public let selectedTextColor: UIColor
+ public var selectedBackgroundColor: UIColor
+
+ private let numberOfLines: Int
+ private let accessibilityIdentifier: String?
+
+ // MARK: Lifecycle
+ public init(icon: UIImage,
+ text: String? = nil,
+ iconSize: CGSize,
+ numberOfLines: Int = 1,
+ normalBackgroundColor: UIColor? = nil,
+ normalIconTintColor: UIColor,
+ normalFont: UIFont? = nil,
+ normalTextColor: UIColor? = nil,
+ selectedBackgroundColor: UIColor? = nil,
+ selectedIconTintColor: UIColor,
+ selectedFont: UIFont? = nil,
+ selectedTextColor: UIColor? = nil,
+ accessibilityIdentifier: String? = nil) {
+ self.icon = icon.withRenderingMode(.alwaysTemplate)
+ self.text = text
+ self.iconSize = iconSize
+ self.numberOfLines = numberOfLines
+ self.normalBackgroundColor = normalBackgroundColor ?? DefaultValues.normalBackgroundColor
+ self.normalIconTintColor = normalIconTintColor
+ self.normalFont = normalFont ?? DefaultValues.normalFont
+ self.normalTextColor = normalTextColor ?? DefaultValues.normalTextColor
+ self.selectedBackgroundColor = selectedBackgroundColor ?? DefaultValues.selectedBackgroundColor
+ self.selectedFont = selectedFont ?? DefaultValues.selectedFont
+ self.selectedTextColor = selectedTextColor ?? DefaultValues.selectedTextColor
+ self.selectedIconTintColor = selectedIconTintColor
+ self.accessibilityIdentifier = accessibilityIdentifier
+ }
+
+ // MARK: BetterSegmentedControlSegment
+ public var intrinsicContentSize: CGSize? { nil }
+
+ public lazy var normalView: UIView = {
+ return createView(withIcon: icon,
+ iconSize: iconSize,
+ backgroundColor: normalBackgroundColor,
+ iconTintColor: normalIconTintColor,
+ withText: text,
+ font: normalFont,
+ textColor: normalTextColor,
+ accessibilityIdentifier: accessibilityIdentifier)
+ }()
+ public lazy var selectedView: UIView = {
+ return createView(withIcon: icon,
+ iconSize: iconSize,
+ backgroundColor: selectedBackgroundColor,
+ iconTintColor: selectedIconTintColor,
+ withText: text,
+ font: selectedFont,
+ textColor: selectedTextColor,
+ accessibilityIdentifier: accessibilityIdentifier)
+ }()
+ private func createView(withIcon icon: UIImage,
+ iconSize: CGSize,
+ backgroundColor: UIColor,
+ iconTintColor: UIColor,
+ withText text: String?,
+ font: UIFont?,
+ textColor: UIColor?,
+ accessibilityIdentifier: String?) -> UIView {
+ let view = IconWithLabelView()
+ view.backgroundColor = backgroundColor
+ view.imageViewConfig(icon: icon,
+ width: iconSize.width,
+ height: iconSize.height,
+ contentMode: .scaleAspectFit,
+ tintColor: iconTintColor)
+ view.labelConfig(text: text,
+ numberOfLines: numberOfLines,
+ font: font,
+ textColor: textColor,
+ lineBreakMode: .byTruncatingTail,
+ textAlignment: .center,
+ accessibilityIdentifier: accessibilityIdentifier)
+ return view
+ }
+}
+
+public extension IconWithLabelSegment {
+ class func segments(withIconsAndLabels iconsAndLabelS: [IconWithLabel],
+ iconSize: CGSize,
+ numberOfLines: Int = 1,
+ normalBackgroundColor: UIColor? = nil,
+ normalIconTintColor: UIColor,
+ normalFont: UIFont? = nil,
+ normalTextColor: UIColor? = nil,
+ selectedBackgroundColor: UIColor? = nil,
+ selectedIconTintColor: UIColor,
+ selectedFont: UIFont? = nil,
+ selectedTextColor: UIColor? = nil) -> [BetterSegmentedControlSegment] {
+ return iconsAndLabelS.map {
+ IconWithLabelSegment(icon: $0.icon,
+ text: $0.title,
+ iconSize: iconSize,
+ numberOfLines: numberOfLines,
+ normalBackgroundColor: normalBackgroundColor,
+ normalIconTintColor: normalIconTintColor,
+ normalFont: normalFont,
+ normalTextColor: normalTextColor,
+ selectedBackgroundColor: selectedBackgroundColor,
+ selectedIconTintColor: selectedIconTintColor,
+ selectedFont: selectedFont,
+ selectedTextColor: selectedTextColor)
+ }
+ }
+}
+
+#endif

Pod/Classes/Segments/IconWithLabel/IconWithLabelView.swift

@@ -0,0 +1,64 @@
+//
+// IconWithLabelView.swift
+// BetterSegmentedControl
+//
+// Created by Arman Zoghi on 2/14/21.
+//
+
+import UIKit
+
+class IconWithLabelView: UIView {
+ // MARK: Subviews
+ public var imageView: UIImageView?
+ public var label: UILabel?
+
+ // MARK: Lifecycle
+ override init(frame: CGRect) {
+ super.init(frame: frame)
+ }
+
+ public required init?(coder: NSCoder) {
+ super.init(coder: coder)
+ }
+
+ // MARK: Image View
+ //config
+ public func imageViewConfig(icon: UIImage, width: CGFloat, height: CGFloat, contentMode: UIView.ContentMode, tintColor: UIColor) {
+ self.imageView = UIImageView(image: icon)
+ self.imageView?.tintColor = tintColor
+ self.addSubview(self.imageView!)
+ self.imageViewConstraints(width: width, height: height)
+ }
+ //constraints
+ fileprivate func imageViewConstraints(width: CGFloat, height: CGFloat) {
+ self.imageView!.translatesAutoresizingMaskIntoConstraints = false
+ NSLayoutConstraint(item: self.imageView!, attribute: .centerY, relatedBy: .equal, toItem: self, attribute: .centerY, multiplier: 0.65, constant: 0).isActive = true
+ NSLayoutConstraint(item: self.imageView!, attribute: .centerX, relatedBy: .equal, toItem: self, attribute: .centerX, multiplier: 1, constant: 0).isActive = true
+ NSLayoutConstraint(item: self.imageView!, attribute: .width, relatedBy: .equal, toItem: self, attribute: .width, multiplier: 0, constant: width).isActive = true
+ NSLayoutConstraint(item: self.imageView!, attribute: .height, relatedBy: .equal, toItem: self, attribute: .height, multiplier: 0, constant: height).isActive = true
+ }
+
+ // MARK: Label
+ //config
+ func labelConfig(text: String?, numberOfLines: Int?, font: UIFont?, textColor: UIColor?, lineBreakMode: NSLineBreakMode, textAlignment: NSTextAlignment, accessibilityIdentifier: String?) {
+ self.label = UILabel()
+ self.addSubview(self.label!)
+ self.labelConstraints()
+ self.label?.sizeToFit()
+ self.label?.text = text
+ self.label?.numberOfLines = numberOfLines ?? 1
+ self.label?.font = font
+ self.label?.textColor = textColor
+ self.label?.lineBreakMode = lineBreakMode
+ self.label?.textAlignment = textAlignment
+ self.label?.accessibilityIdentifier = accessibilityIdentifier
+ }
+ //constraints
+ fileprivate func labelConstraints() {
+ self.label!.translatesAutoresizingMaskIntoConstraints = false
+ NSLayoutConstraint(item: self.label!, attribute: .centerY, relatedBy: .equal, toItem: self, attribute: .centerY, multiplier: 1.65, constant: 0).isActive = true
+ NSLayoutConstraint(item: self.label!, attribute: .centerX, relatedBy: .equal, toItem: self, attribute: .centerX, multiplier: 1, constant: 0).isActive = true
+ NSLayoutConstraint(item: self.label!, attribute: .width, relatedBy: .equal, toItem: self, attribute: .width, multiplier: 1, constant: 0).isActive = true
+ }
+
+}