【SwiftUI】UIViewRepresentableでTextViewを作る

import UIKit

/// String extension for convenient of substring
extension String {

    /// Index with using position of Int type
    func index(at position: Int) -> String.Index {
        return index((position.signum() >= 0 ? startIndex : endIndex), offsetBy: position)
    }

    /// Subscript for using like a "string[start..<end]"
    subscript (bounds: CountableRange<Int>) -> String {
        let start = index(at: bounds.lowerBound)
        let end = index(at: bounds.upperBound)
        return String(self[start..<end])
    }
}

extension UIColor {

    /// Convenience initializer
    /// - Parameter rgba: Hexadecimal-String
    convenience init(rgba: String) {
        let r = Int(rgba[0..<2], radix: 16)!
        let g = Int(rgba[2..<4], radix: 16)!
        let b = Int(rgba[4..<6], radix: 16)!
        let a = CGFloat(rgba.count >= 8 ? Int(rgba[6..<8], radix: 16)! : 255) / 255.0
        self.init(r: r, g: g, b: b, a: a)
    }

    /// Convenience initializer
    /// - Parameters:
    ///   - r: Red color (0...255)
    ///   - g: Green color (0...255)
    ///   - b: Blue color (0...255)
    ///   - a: Alpha (0.0...1.0)
    convenience init(r: Int, g: Int, b: Int, a: CGFloat = 1.0) {
        self.init(red: CGFloat(r) / 255.0, green: CGFloat(g) / 255.0, blue: CGFloat(b) / 255.0, alpha: a)
    }
}

extension UIFont {
    
    static let inputText = UIFont(name: "AvenirNext-Regular", size: 17)!
    
    static let placeholderText = UIFont.inputText

    static let toolbarButtonTitle = UIFont(name: "AvenirNext-Medium", size: 16)!
}

extension UIColor {
    
    static let placeholderText = UIColor(rgba: "7d7c7a80")

    static let doneButton = UIColor(rgba: "246eb9a0")
    
    static let clearButton = UIColor(rgba: "7d7c7a80")
}

import UIKit

/// InputAccessoryView
/// A container for putting custom buttons on the inputAccessoryView of UITextView or UITextField.
class InputAccessoryView: UIView {

    /// The height of internal toolbar
    private static let ToolbarHeight: CGFloat = 44.0

    /// Toolbar
    private(set) var toolbar: UIToolbar!

    /// Layout constraints
    private var leftConstraint: NSLayoutConstraint? = nil
    private var rightConstraint: NSLayoutConstraint? = nil

    /// The size that need for appearing subviews.
    override var intrinsicContentSize: CGSize {
        var size = bounds.size
        size.height = InputAccessoryView.ToolbarHeight + safeAreaInsets.bottom
        return size
    }

    /// Required Initializer
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        initialize()
    }

    /// Initializer
    init() {
        super.init(frame: .zero)
        initialize()
    }

    /// Initializer
    override init(frame: CGRect) {
        super.init(frame: frame)
        initialize()
    }

    /// Common Initializer
    private func initialize() {

        // Create a UIToolbar.
        toolbar = UIToolbar()

        // Set layout constraints to the toolbar to fit my own bounds.
        addSubview(toolbar)
        toolbar.translatesAutoresizingMaskIntoConstraints = false
        toolbar.topAnchor.constraint(equalTo: self.topAnchor).isActive = true
        toolbar.leftAnchor.constraint(equalTo: self.leftAnchor).isActive = true
        toolbar.rightAnchor.constraint(equalTo: self.rightAnchor).isActive = true
        toolbar.heightAnchor.constraint(equalToConstant: InputAccessoryView.ToolbarHeight).isActive = true

        // Turn off the autoresizing ability.
        translatesAutoresizingMaskIntoConstraints = false
    }

    /// Called when the safe area insets changes.
    override func safeAreaInsetsDidChange() {
        super.safeAreaInsetsDidChange()

        // Call following two functions to make the view's size recalculate.
        invalidateIntrinsicContentSize()
        setNeedsUpdateConstraints()
    }

    /// Called when its own is removed from its superview.
    override func removeFromSuperview() {
        super.removeFromSuperview()

        // Clear layout constraints.
        leftConstraint?.isActive = false
        leftConstraint = nil

        rightConstraint?.isActive = false
        rightConstraint = nil
    }

    /// Called when its own is moved to other superview.
    override func didMoveToSuperview() {
        super.didMoveToSuperview()

        if let superview = superview {
            // Reset layout constraints to fit new superview's bounds.
            leftConstraint?.isActive = false
            leftConstraint = self.leftAnchor.constraint(equalTo: superview.leftAnchor)
            leftConstraint!.isActive = true

            rightConstraint?.isActive = false
            rightConstraint = self.rightAnchor.constraint(equalTo: superview.rightAnchor)
            rightConstraint!.isActive = true
        }
    }
}

import UIKit

/// PlaceholderTextView
/// Wrapped UITextView to be able to show Placeholder.
class PlaceholderTextView: UITextView {

    /// Placeholder Label
    private(set) var placeholderLabel: UILabel!

    /// Placeholder text
    var placeholder: String = "" {
        willSet {
            self.placeholderLabel.text = newValue
            self.placeholderLabel.sizeToFit()
        }
    }

    /// Initializer
    override init(frame: CGRect, textContainer: NSTextContainer?) {
        super.init(frame: frame, textContainer: textContainer)
        initialize()
    }

    /// Required Initializer
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        initialize()
    }

    /// Common Initializer
    private func initialize() {

        // Adjust the content area.
        textContainerInset = UIEdgeInsets(top: 2, left: 0, bottom: 8, right: 0)
        textContainer.lineFragmentPadding = 0

        // Create a UILabel for showing the placeholder.
        placeholderLabel = UILabel(frame: CGRect(x: 0, y: 2, width: 0, height: 0))
        addSubview(placeholderLabel)

        // Add an observer for getting notifications when the input text changes.
        NotificationCenter.default.addObserver(self, selector: #selector(textChanged(notification:)), name: UITextView.textDidChangeNotification, object: nil)
    }

    /// Deinitializer
    deinit {
        // Remove added observers.
        NotificationCenter.default.removeObserver(self)
    }

    /// Called when the text changes.
    @objc private func textChanged(notification: NSNotification) {
        updateView()
    }

    /// Update the view appearance.
    func updateView() {

        // The placeholder label is showing as long as input text is empty.
        // Or, also if the placeholder text itself is empty, make the label hidden.
        self.placeholderLabel.isHidden = (placeholder.isEmpty || !text.isEmpty)
    }
}

extension PlaceholderTextView {

    // Set custom buttons to my own InputAccessoryView.
    func setInputAccessoryView() {

        /// Clear Button
        let clearButton = UIButton(type: .custom)
        clearButton.frame = CGRect(x: 0, y: 0, width: 100, height: 36)
        clearButton.layer.cornerRadius = 8.0
        clearButton.titleLabel?.font = .toolbarButtonTitle
        clearButton.setTitle("Clear", for: .normal)
        clearButton.setTitleColor(.white, for: .normal)
        clearButton.backgroundColor = .clearButton
        clearButton.addTarget(self, action: #selector(tapClearButton(sender:)), for: .touchUpInside)

        /// Done Button
        let doneButton = UIButton(type: .custom)
        doneButton.frame = CGRect(x: 0, y: 0, width: 100, height: 36)
        doneButton.layer.cornerRadius = 8.0
        doneButton.titleLabel?.font = .toolbarButtonTitle
        doneButton.setTitle("Done", for: .normal)
        doneButton.setTitleColor(.white, for: .normal)
        doneButton.backgroundColor = .doneButton
        doneButton.addTarget(self, action: #selector(tapDoneButton(sender:)), for: .touchUpInside)

        /// InputAccessoryView made with UIToolbar. (Refer to the InputAccessoryView.swift file)
        let inputAccessoryView = InputAccessoryView()
        inputAccessoryView.toolbar.setItems([
            UIBarButtonItem(customView: clearButton),
            UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: nil, action: nil),
            UIBarButtonItem(customView: doneButton),
        ], animated: false)
        inputAccessoryView.toolbar.updateConstraintsIfNeeded()

        self.inputAccessoryView = inputAccessoryView
    }

    /// Called when the clear button is tapped.
    @objc private func tapClearButton(sender: UIButton) {

        // Clear inputted text and update view appearances.
        self.text = ""
        self.updateView()
    }

    /// Called when the done button is tapped.
    @objc private func tapDoneButton(sender: UIButton) {

        // Call endEditing function to hide the keyboard.
        self.endEditing(true)
    }
}

import UIKit
import SwiftUI
import Combine

struct TextView: UIViewRepresentable {
    
    @Binding private var text: String
    
    private(set) var placeholder: String

    fileprivate let didEndSubject = PassthroughSubject<Void, Never>()
    fileprivate let didChangeSubject = PassthroughSubject<Void, Never>()

    /// Initializer
    init(_ placeholder: String, text: Binding<String>) {
        self.placeholder = placeholder
        self._text = text
    }

    /// Create a coordinator to coordinate the UIView.
    func makeCoordinator() -> TextView.Coordinator {
        return Coordinator(self)
    }

    /// Create a UIView that actually displayed.
    func makeUIView(context: UIViewRepresentableContext<TextView>) -> PlaceholderTextView {

        // Create a PlaceholderTextView
        let textView = PlaceholderTextView()
        textView.delegate = context.coordinator
        textView.font = .inputText
        textView.placeholderLabel.font = .placeholderText
        textView.placeholderLabel.textColor = .placeholderText
        textView.setInputAccessoryView()

        return textView
    }

    /// Update the UIView states.
    func updateUIView(_ uiView: PlaceholderTextView, context: UIViewRepresentableContext<TextView>) {

        uiView.text = text
        uiView.placeholder = placeholder
        uiView.updateView()

        // Update the textview value which the coordinator has.
        context.coordinator.textView = self
    }

    /// Call actions when each events occur.
    func onEvent(onChanged: (() -> Void)? = nil, onEnded: (() -> Void)? = nil) -> some View {
        return onReceive(didChangeSubject) {
            onChanged?()
        }
        .onReceive(didEndSubject) {
            onEnded?()
        }
    }
}

extension TextView {
    final class Coordinator: NSObject, UITextViewDelegate {
        
        fileprivate var textView: TextView

        /// Initializer
        init(_ textView: TextView) {
            self.textView = textView
        }

        /// Called when text has changed.
        func textViewDidChange(_ textView: UITextView) {

            // Feed back to the binding text.
            self.textView.text = textView.text

            // Send to the subscriber.
            self.textView.didChangeSubject.send()
        }

        /// Called when editing has ended.
        func textViewDidEndEditing(_ textView: UITextView) {

            // Feed back to the binding text.
            self.textView.text = textView.text

            // Send to the subscriber.
            self.textView.didEndSubject.send()
        }
    }
}

import SwiftUI

struct ContentView: View {

    @State private var text: String = ""
    @State private var isEditing: Bool = false
    @State private var version: Int = 0

    var body: some View {
        VStack(alignment: .center, spacing: 16) {

            Text("Hello, TextView!")

            HStack(alignment: .center, spacing: 8) {
                InputLamp(isEditing: self.$isEditing)
                    .frame(width: 16, height: 16)

                Text("Count: \(self.text.count)")
            }

            Text("Version: \(self.version)")

            TextView("Input text", text: self.$text)
                .onEvent(onChanged: {

                    self.isEditing = true

                    withAnimation(.linear(duration: 0.5)) {
                        self.isEditing = false
                    }

                }, onEnded: {
                    self.version += 1
                })
        }
        .padding(16)
    }
}

struct InputLamp: View {

    @Binding var isEditing: Bool

    var body: some View {
        Circle()
            .overlay(Circle().stroke(Color(UIColor(rgba: "e0e0e0")), lineWidth: 1))
            .foregroundColor(self.isEditing ? Color.red : Color.white)
    }
}