【Xcode/SwiftUI】シンプルなチャットUIを作ってみる

Realmとかは使ってないのでチャット履歴はアプリ落としたら消えます。今回はUIを作ってみただけです。カスタムモディファイアとかにも分けずコードベタ貼りなので自由にリファクタしてください。

ChatMessage.swift

import Foundation

struct ChatMessage: Identifiable {
    var id = UUID()
    var content: String
    var isMe: Bool
}

ChatBubble.swift

import SwiftUI

struct ChatBubble: View {
    var message: ChatMessage

    var body: some View {
        Group {
            if message.isMe {
                HStack {
                    Spacer()
                    VStack(alignment: .trailing, spacing: 2) {
                        Text(message.content)
                            .padding(12)
                            .background(Color.blue)
                            .foregroundColor(.white)
                            .cornerRadius(10)
                        Text("Sent: \(getMessageSentTime())")
                            .font(.system(size: 8, weight: .medium))
                    }
                }
            } else {
                HStack {
                    VStack(alignment: .leading, spacing: 2) {
                        Text("John")
                            .font(.system(size: 12, weight: .medium))
                        Text(message.content)
                            .padding(12)
                            .background(Color.gray)
                            .foregroundColor(.white)
                            .cornerRadius(10)
                    }
                    Spacer()
                }
            }
        }
    }

    private func getMessageSentTime() -> String {
        let date = NSDate()
        let formatter = DateFormatter()
        formatter.dateFormat = "HH:mm"
        return formatter.string(from: date as Date)
    }

}

HomeView.swift (デフォルトだとContentView.swift)

import SwiftUI

struct HomeView: View {
    @State private var messages: [ChatMessage] = []
    @State private var myMessage: String = ""
    @State private var friendMessage: String = ""

    var body: some View {
        VStack {
            List(messages) { message in
                ChatBubble(message: message)
            }
            bottomView
        }
    }

    var bottomView: some View {
        VStack {
            HStack {
                TextField("iMessage", text: $friendMessage)
                    .textFieldStyle(RoundedBorderTextFieldStyle())
                    .padding()
                Button(action: { sendMessage(content: friendMessage, isMe: false) }) {
                    Text("FriendSend")
                        .frame(width: 100, height: 40)
                        .foregroundColor(.white)
                        .background(Color.gray)
                        .cornerRadius(8)
                }
                .disabled(!myMessage.isEmpty)
            }
            HStack {
                TextField("iMessage", text: $myMessage)
                    .textFieldStyle(RoundedBorderTextFieldStyle())
                    .padding()
                Button(action: { sendMessage(content: myMessage, isMe: true) }) {
                    Text("MySend")
                        .frame(width: 100, height: 40)
                        .foregroundColor(.white)
                        .background(Color.blue)
                        .cornerRadius(8)
                }
                .disabled(!friendMessage.isEmpty)
            }
        }
        .padding()
    }

    private func sendMessage(content: String, isMe: Bool) {
        let message = ChatMessage(content: content, isMe: isMe)
        messages.append(message)
        myMessage = ""
        friendMessage = ""
    }

}