ios 聊天气泡

原创

mob64ca12d4650e 2024-02-29 06:26:23 ©著作权

©著作权归作者所有：来自51CTO博客作者mob64ca12d4650e的原创作品，请联系作者获取转载授权，否则将追究法律责任

iOS 聊天气泡制作及使用

在 iOS 应用的聊天界面中，常常会见到各种不同风格的聊天气泡，它们可以展示文本、图片、语音等消息，并且具有丰富的样式效果。本文将介绍如何制作一个简单的 iOS 聊天气泡，并在应用中使用它。

制作聊天气泡

首先，我们需要创建一个自定义的 UIView 类来表示聊天气泡。这个 UIView 类需要根据消息内容和发送者来显示不同的样式。

import UIKit

class ChatBubbleView: UIView {
    
    var message: String?
    var isMe: Bool = false
    
    override func draw(_ rect: CGRect) {
        super.draw(rect)
        
        // 绘制聊天气泡的背景颜色和边框
        let bubbleColor = isMe ? UIColor.systemBlue : UIColor.systemGray
        let bubbleRect = CGRect(x: 0, y: 0, width: rect.width, height: rect.height)
        let bubblePath = UIBezierPath(roundedRect: bubbleRect, cornerRadius: 10)
        bubbleColor.setFill()
        bubblePath.fill()
        bubblePath.stroke()
        
        // 绘制消息内容
        if let message = message {
            let messageRect = CGRect(x: 10, y: 5, width: rect.width - 20, height: rect.height - 10)
            let messageFont = UIFont.systemFont(ofSize: 16)
            let messageAttributes = [NSAttributedString.Key.font: messageFont, NSAttributedString.Key.foregroundColor: UIColor.white]
            (message as NSString).draw(in: messageRect, withAttributes: messageAttributes)
        }
    }
}

在上面的代码中，我们创建了一个名为 ChatBubbleView 的 UIView 子类，它包含了消息内容和发送者的信息，并根据发送者的不同显示不同的样式。我们通过 draw(_ rect:) 方法来绘制聊天气泡的背景和消息内容。

使用聊天气泡

接下来，我们可以在应用中使用这个自定义的聊天气泡 View。假设我们有一个简单的 ViewController，可以通过以下代码在界面上显示聊天气泡：

import UIKit

class ChatViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let bubbleView = ChatBubbleView(frame: CGRect(x: 50, y: 100, width: 200, height: 50))
        bubbleView.message = "Hello, World!"
        bubbleView.isMe = true
        view.addSubview(bubbleView)
        
        let otherBubbleView = ChatBubbleView(frame: CGRect(x: 50, y: 200, width: 200, height: 50))
        otherBubbleView.message = "Hi there!"
        otherBubbleView.isMe = false
        view.addSubview(otherBubbleView)
    }
}

在上面的代码中，我们在 ChatViewController 中创建了两个 ChatBubbleView 实例，并设置了不同的消息内容和发送者。通过将这两个 View 添加到 ViewController 的视图中，我们可以在界面上看到两个不同风格的聊天气泡。