Update accessory bar appearance

Author: danielinoa

Classes/TextFieldsTraversalAccessoryView.swift

@@ -8,9 +8,9 @@
 
 import UIKit
 
-/// A toolbar intended to be used as an inputAccessoryView when traversing through a collection of text fields.
+/// An input accessory view used when traversing through a collection of text fields.
 /// This view contains 3 bar button items: a `previous`, a `next`, and a `done` bar button item.
-open class TextFieldsTraversalAccessoryView: UIToolbar {
+open class TextFieldsTraversalAccessoryView: UIView {
 
     // MARK: - Orientation
 
@@ -27,9 +27,29 @@ open class TextFieldsTraversalAccessoryView: UIToolbar {
 
     // MARK: - Items
 
-    public let previousItem = UIBarButtonItem()
-    public let nextItem = UIBarButtonItem()
-    public let doneItem = UIBarButtonItem(barButtonSystemItem: .done, target: nil, action: nil)
+    public let previousItem: UIBarButtonItem = TextFieldsTraversalBarButtonItem()
+    public let nextItem: UIBarButtonItem = TextFieldsTraversalBarButtonItem()
+    public let doneItem: UIBarButtonItem = TextFieldsTraversalBarButtonItem()
+
+    // MARK: - Views
+
+    private let backgroundView: UIVisualEffectView = {
+        let view = UIVisualEffectView(effect: UIBlurEffect(style: .systemMaterial))
+        view.clipsToBounds = true
+        return view
+    }()
+
+    private let previousButton = UIButton(type: .system)
+    private let nextButton = UIButton(type: .system)
+    private let doneButton = UIButton(type: .system)
+
+    private enum Layout {
+        static let accessoryHeight: CGFloat = 72
+        static let barInsets = UIEdgeInsets(top: 8, left: 16, bottom: 8, right: 16)
+        static let barContentInset: CGFloat = 18
+        static let buttonSize = CGSize(width: 44, height: 44)
+        static let buttonSpacing: CGFloat = 12
+    }
 
     // MARK: - Lifecycle
 
@@ -46,74 +66,136 @@ open class TextFieldsTraversalAccessoryView: UIToolbar {
     // MARK: - Configuration
 
     private func configure() {
-        let flexible = UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: nil, action: nil)
-        let fixed = UIBarButtonItem(barButtonSystemItem: .fixedSpace, target: nil, action: nil)
-        fixed.width = 20
-        setItems([previousItem, fixed, nextItem, flexible, doneItem], animated: false)
+        backgroundColor = .clear
+        addSubview(backgroundView)
+        backgroundView.contentView.addSubview(previousButton)
+        backgroundView.contentView.addSubview(nextButton)
+        backgroundView.contentView.addSubview(doneButton)
+
+        [previousButton, nextButton, doneButton].forEach(configure)
+        previousButton.addTarget(self, action: #selector(tappedPrevious), for: .touchUpInside)
+        nextButton.addTarget(self, action: #selector(tappedNext), for: .touchUpInside)
+        doneButton.addTarget(self, action: #selector(tappedDone), for: .touchUpInside)
+
+        bind(previousItem, to: previousButton)
+        bind(nextItem, to: nextButton)
+        bind(doneItem, to: doneButton)
         applyOrientation()
+        doneItem.image = image(forSystemName: "checkmark", pointSize: 26, weight: .medium)
+    }
+
+    private func configure(_ button: UIButton) {
+        button.tintColor = .label
+    }
+
+    private func bind(_ item: UIBarButtonItem, to button: UIButton) {
+        guard let item = item as? TextFieldsTraversalBarButtonItem else {
+            return
+        }
+
+        item.onImageChanged = { [weak button] image in
+            button?.setImage(image, for: .normal)
+        }
+        item.onEnabledChanged = { [weak button] isEnabled in
+            button?.isEnabled = isEnabled
+        }
+        button.setImage(item.image, for: .normal)
+        button.isEnabled = item.isEnabled
     }
 
     private func applyOrientation() {
         switch orientation {
         case .horizontal:
-            previousItem.image = image(forDirection: .left)
-            nextItem.image = image(forDirection: .right)
+            previousItem.image = image(forSystemName: "chevron.left", pointSize: 26, weight: .medium)
+            nextItem.image = image(forSystemName: "chevron.right", pointSize: 26, weight: .medium)
         case .vertical:
-            previousItem.image = image(forDirection: .up)
-            nextItem.image = image(forDirection: .down)
+            previousItem.image = image(forSystemName: "chevron.up", pointSize: 26, weight: .medium)
+            nextItem.image = image(forSystemName: "chevron.down", pointSize: 26, weight: .medium)
         }
     }
+
+    open override var intrinsicContentSize: CGSize {
+        CGSize(width: UIView.noIntrinsicMetric, height: Layout.accessoryHeight)
+    }
+
+    open override func sizeThatFits(_ size: CGSize) -> CGSize {
+        CGSize(width: size.width, height: intrinsicContentSize.height)
+    }
+
+    open override func layoutSubviews() {
+        super.layoutSubviews()
+
+        backgroundView.frame = bounds.inset(by: Layout.barInsets)
+        backgroundView.layer.cornerRadius = backgroundView.bounds.height / 2
+
+        let contentBounds = backgroundView.contentView.bounds.insetBy(dx: Layout.barContentInset, dy: 0)
+        let buttonY = contentBounds.midY - Layout.buttonSize.height / 2
+        previousButton.frame = CGRect(
+            x: contentBounds.minX,
+            y: buttonY,
+            width: Layout.buttonSize.width,
+            height: Layout.buttonSize.height
+        )
+        nextButton.frame = CGRect(
+            x: previousButton.frame.maxX + Layout.buttonSpacing,
+            y: buttonY,
+            width: Layout.buttonSize.width,
+            height: Layout.buttonSize.height
+        )
+        doneButton.frame = CGRect(
+            x: contentBounds.maxX - Layout.buttonSize.width,
+            y: buttonY,
+            width: Layout.buttonSize.width,
+            height: Layout.buttonSize.height
+        )
+    }
 
     // MARK: - Image
 
-    private func image(forDirection direction: Direction) -> UIImage {
-        let upArrowImage = imageForUpArrow()
-        guard let cgImage = upArrowImage.cgImage else {
-            return upArrowImage
+    private func image(forSystemName systemName: String, pointSize: CGFloat, weight: UIImage.SymbolWeight) -> UIImage? {
+        let configuration = UIImage.SymbolConfiguration(pointSize: pointSize, weight: weight)
+        return UIImage(systemName: systemName, withConfiguration: configuration)
+    }
+
+    // MARK: Actions
+
+    @objc private func tappedPrevious() {
+        sendAction(for: previousItem)
+    }
+
+    @objc private func tappedNext() {
+        sendAction(for: nextItem)
+    }
+
+    @objc private func tappedDone() {
+        sendAction(for: doneItem)
+    }
+
+    private func sendAction(for item: UIBarButtonItem) {
+        guard item.isEnabled,
+              let target = item.target,
+              let action = item.action else {
+            return
         }
 
-        return UIImage(
-            cgImage: cgImage,
-            scale: upArrowImage.scale,
-            orientation: direction.imageOrientation
-        ).withRenderingMode(.alwaysTemplate)
+        UIApplication.shared.sendAction(action, to: target, from: item, for: nil)
     }
-    
-    private func imageForUpArrow() -> UIImage {
-        let lineWidth: CGFloat = 1.5
-        let ratio: CGFloat = 5.0 / 9.0
-        let dimension: CGFloat = 20
-        let size = CGSize(width: dimension, height: dimension * ratio)
-        let bounds = CGRect(origin: .zero, size: size).insetBy(dx: lineWidth / 2, dy: lineWidth / 2)
-        
-        let path = UIBezierPath()
-        path.lineWidth = lineWidth
-        path.lineCapStyle = .round
-        path.move(to: CGPoint(x: bounds.minX, y: bounds.maxY))
-        path.addLine(to: CGPoint(x: bounds.midX, y: bounds.minY))
-        path.addLine(to: CGPoint(x: bounds.maxX, y: bounds.maxY))
-        
-        let renderer = UIGraphicsImageRenderer(size: size)
-        return renderer.image { _ in
-            UIColor.black.setStroke()
-            path.stroke()
+}
+
+private final class TextFieldsTraversalBarButtonItem: UIBarButtonItem {
+
+    var onImageChanged: ((UIImage?) -> Void)?
+    var onEnabledChanged: ((Bool) -> Void)?
+
+    override var image: UIImage? {
+        didSet {
+            onImageChanged?(image)
         }
     }
-    
-    // MARK: Direction
-    
-    private enum Direction {
-        case left
-        case right
-        case up
-        case down
-        var imageOrientation: UIImage.Orientation {
-            switch self {
-            case .up: return .up
-            case .down: return .down
-            case .left: return .left
-            case .right: return .right
-            }
+
+    override var isEnabled: Bool {
+        didSet {
+            onEnabledChanged?(isEnabled)
         }
     }
 }

README.md

@@ -35,6 +35,15 @@ textFieldsTraversalController.accessoryView.orientation = .vertical
 
 ![image](https://github.com/danielinoa/TextFieldsTraversalController/blob/master/Screenshots/vertical.png)
 
+The arrow buttons are disabled automatically at the first and last enabled text fields.
+
+<img src="https://github.com/danielinoa/TextFieldsTraversalController/blob/master/Screenshots/previous-disabled-full.png" height="640"></a>
+<img src="https://github.com/danielinoa/TextFieldsTraversalController/blob/master/Screenshots/next-disabled-full.png" height="640"></a>
+
+![previous disabled](https://github.com/danielinoa/TextFieldsTraversalController/blob/master/Screenshots/previous-disabled.png)
+
+![next disabled](https://github.com/danielinoa/TextFieldsTraversalController/blob/master/Screenshots/next-disabled.png)
+
 
 ## Requirements