iOS开发之微信聊天工具栏的封装

iOS开发之微信聊天工具栏的封装攻略

简介

在iOS开发中，设计友好、交互流畅、体验优秀的聊天工具栏是一项非常重要的任务。本文将分享一个针对微信聊天工具栏的封装方案，让你轻松实现高质量的聊天界面。

步骤

步骤1：创建工程

在Xcode中创建一个新的工程，并在项目中添加一个消息界面。

步骤2：设计界面

在消息界面中，创建聊天输入框。这里我们将使用开源框架TPKeyboardAvoiding实现输入框自动上移。

实现代码如下：

let chatInputView = ChatInputView(frame: CGRect(x: 0, y: view.bounds.height - 50, width: view.bounds.width, height: 50))
chatInputView.delegate = self
chatInputView.backgroundColor = UIColor(white: 0.97, alpha: 1)
chatInputView.autoresizingMask = .flexibleHeight
view.addSubview(chatInputView)

步骤3：实现聊天功能

实现聊天功能并将消息显示在视图中。此处可以使用开源框架JSQMessagesViewController，在GitHub上有很多示例代码。

步骤4：封装工具栏

在实现了基本的聊天功能后，我们需要将聊天工具栏进行封装，这样可以提高代码的重用性，使聊天功能更加模块化。

以下是示例：封装了文本、语音两个功能的聊天工具栏。

ChatInputView

class ChatInputView: UIView, UITextViewDelegate, VoiceButtonDelegate {

    var textView: ChatTextView! // 消息文本框
    var voiceButton: VoiceButton! // 按住说话按钮
    var faceButton: UIButton! // 表情按钮
    var moreButton: UIButton! // 更多按钮
    var bottomLine: UIView! // 工具栏底部的线

    weak var delegate: ChatInputViewDelegate?

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

        backgroundColor = UIColor.white

        bottomLine = UIView(frame: CGRect(x: 0, y: 0, width: bounds.width, height: 0.5))
        bottomLine.autoresizingMask = .flexibleWidth
        bottomLine.backgroundColor = UIColor(white: 0.85, alpha: 1)
        addSubview(bottomLine)

        textView = ChatTextView(frame: CGRect(x: 8, y: 8, width: bounds.width - 16 - 40 - 36 - 8, height: bounds.height - 8 - 8))
        textView.delegate = self
        addSubview(textView)

        faceButton = UIButton(type: .custom)
        faceButton.frame = CGRect(x: bounds.width - 8 - 36 * 3 - 4 * 2, y: bounds.height - 8 - 36, width: 36, height: 36)
        faceButton.autoresizingMask = [.flexibleLeftMargin, .flexibleTopMargin]
        faceButton.setImage(#imageLiteral(resourceName: "chat_bottom_smile_normal"), for: .normal)
        faceButton.setImage(#imageLiteral(resourceName: "chat_bottom_smile_highlight"), for: .highlighted)
        addSubview(faceButton)

        moreButton = UIButton(type: .custom)
        moreButton.frame = CGRect(x: bounds.width - 8 - 36 * 2 - 4 * 1, y: bounds.height - 8 - 36, width: 36, height: 36)
        moreButton.autoresizingMask = [.flexibleLeftMargin, .flexibleTopMargin]
        moreButton.setImage(#imageLiteral(resourceName: "chat_bottom_more_normal"), for: .normal)
        moreButton.setImage(#imageLiteral(resourceName: "chat_bottom_more_highlight"), for: .highlighted)
        addSubview(moreButton)

        voiceButton = VoiceButton(frame: CGRect(x: bounds.width - 8 - 36 - 40, y: bounds.height - 8 - 36, width: 40, height: 36))
        voiceButton.autoresizingMask = [.flexibleLeftMargin, .flexibleTopMargin]
        voiceButton.delegate = self
        addSubview(voiceButton)
    }

...

}

VoiceButton

protocol VoiceButtonDelegate: class {
    func voiceButtonDidBeginRecord(_ button: VoiceButton, completion: ((Bool) -> Void)?)
    func voiceButtonDidEndRecord(_ button: VoiceButton, completion: ((Bool) -> Void)?)
    func voiceButtonDidCancelRecord(_ button: VoiceButton)
    func voiceButtonDidDragInside(_ button: VoiceButton)
    func voiceButtonDidDragOutside(_ button: VoiceButton)
}

class VoiceButton: UIButton {

    weak var delegate: VoiceButtonDelegate?
    var shouldStopRecording = false

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

        backgroundColor = UIColor.white
        layer.cornerRadius = 10
        layer.borderWidth = 0.5
        layer.borderColor = UIColor.lightGray.cgColor
        setImage(#imageLiteral(resourceName: "chat_bottom_voice_normal"), for: .normal)
        setImage(#imageLiteral(resourceName: "chat_bottom_voice_highlight"), for: .highlighted)
        addTarget(self, action: #selector(handleTouchDown), for: .touchDown)
        addTarget(self, action: #selector(handleTouchUpOutside), for: .touchUpOutside)
        addTarget(self, action: #selector(handleTouchUpInside), for: .touchUpInside)
        addTarget(self, action: #selector(handleTouchDragInside), for: .touchDragInside)
        addTarget(self, action: #selector(handleTouchDragOutside), for: .touchDragOutside)
    }

...

}

步骤5：完善界面

在聊天界面中，通过实例化ChatInputView并添加到视图中，即可完成聊天工具栏的展示。

let chatInputView = ChatInputView(frame: CGRect(x: 0, y: view.bounds.height - 50, width: view.bounds.width, height: 50))
chatInputView.delegate = self
chatInputView.backgroundColor = UIColor(white: 0.97, alpha: 1)
chatInputView.autoresizingMask = .flexibleHeight
view.addSubview(chatInputView)

结语

以上是封装微信聊天工具栏的完整攻略，在本文中，我们使用了开源框架等多种技术手段，希望对你在实现聊天界面上有所帮助。若仍有疑问，欢迎在评论区留言。