时间戳

首页 > 解决方案 > Swift - 自定义文本输入视图

swift - Swift - 自定义文本输入视图

问题描述

我正在尝试实现自定义文本输入视图，类似于大多数消息传递应用程序中使用的视图，如下所示：

在此处输入图像描述

整个视图最初显示在屏幕底部，然后在选择时显示在键盘上方，文本框会根据内容重新调整大小，并包含一个上传文本的按钮。

我假设我需要创建一个包含所有这些元素的自定义 UIView，但不确定如何更改文本框大小并在按下时将视图移动到键盘上方。

有人能指出我正确的方向吗

标签： swift

解决方案

看一下MessageInputBar

https://github.com/MessageKit/MessageInputBar

它将使您的喜欢变得容易，并阻止您重新发明轮子以及它的高度可定制性，您可以运行该示例以查看它是如何工作的。

编辑

只是给你一个想法

import UIKit
import MessageInputBar

class CustomInputBar: MessageInputBar {

    override init(frame: CGRect) {
        super.init(frame: frame)
        configure()
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    func configure() {
        backgroundView.backgroundColor = UIColor(red: 245/255, green: 245/255, blue: 245/255, alpha: 1)
        let button = InputBarButtonItem()
        button.setSize(CGSize(width: 36, height: 36), animated: false)
        button.setImage(#imageLiteral(resourceName: "ic_up").withRenderingMode(.alwaysTemplate), for: .normal)
        button.imageView?.contentMode = .scaleAspectFit
        button.tintColor = UIColor(red: 0, green: 122/255, blue: 1, alpha: 1)
        inputTextView.backgroundColor = .white
        inputTextView.placeholderTextColor = UIColor(red: 0.6, green: 0.6, blue: 0.6, alpha: 1)
        inputTextView.textContainerInset = UIEdgeInsets(top: 8, left: 16, bottom: 8, right: 16)
        inputTextView.placeholderLabelInsets = UIEdgeInsets(top: 8, left: 20, bottom: 8, right: 20)
        inputTextView.layer.borderColor = UIColor(red: 200/255, green: 200/255, blue: 200/255, alpha: 1).cgColor
        inputTextView.layer.borderWidth = 1.0
        inputTextView.layer.cornerRadius = 4.0
        inputTextView.layer.masksToBounds = true
        inputTextView.scrollIndicatorInsets = UIEdgeInsets(top: 8, left: 0, bottom: 8, right: 0)
        setLeftStackViewWidthConstant(to: 36, animated: false)
        setStackViewItems([button], forStack: .left, animated: false)
        sendButton.setSize(CGSize(width: 52, height: 36), animated: false)
    }

}

看起来像这样：

在此处输入图像描述

拥有您想要的所有功能以及更多功能。

我对示例项目中的代码进行了一些编辑，使其看起来与您在问题中添加的完全一样。

而你ViewController将只是

import UIKit
import MessageInputBar

final class ExampleViewController: UITableViewController {

    // MARK: - Properties

    override var inputAccessoryView: UIView? {
        return messageInputBar
    }

    override var canBecomeFirstResponder: Bool {
        return true
    }

    // MARK: - MessageInputBar

    private let messageInputBar = CustomInputBar()

    // MARK: - View Life Cycle

    override func viewDidLoad() {
        super.viewDidLoad()

        view.backgroundColor = .white
        tableView.keyboardDismissMode = .interactive

        messageInputBar.delegate = self
    }
}

并听MessageInputBarDelegate简单地添加

extension ExampleViewController: MessageInputBarDelegate {

    func messageInputBar(_ inputBar: MessageInputBar, didPressSendButtonWith text: String) {
        // Use to send the message
        messageInputBar.inputTextView.text = String()
        messageInputBar.invalidatePlugins()
    }

    func messageInputBar(_ inputBar: MessageInputBar, textViewTextDidChangeTo text: String) {
        // Use to send a typing indicator
    }

    func messageInputBar(_ inputBar: MessageInputBar, didChangeIntrinsicContentTo size: CGSize) {
        // Use to change any other subview insets
    }

}

就那么简单 ：）

推荐阅读