Skip to content

Instantly share code, notes, and snippets.

@navsing
Last active January 17, 2023 17:13
Show Gist options
  • Save navsing/ee7478be153be3826f8e78275a2c2e32 to your computer and use it in GitHub Desktop.
Save navsing/ee7478be153be3826f8e78275a2c2e32 to your computer and use it in GitHub Desktop.
Recreating the Messages App Part II (Conversation View) using SwiftUI and Swift Playgrounds on iPad
import SwiftUI
import PlaygroundSupport
struct Screen: View {
var body: some View {
VStack {
ChatTopView()
ConversationView()
ChatBottomBar().padding(.bottom, 10)
}
}
}
struct messageTail: Shape {
var myMessage: Bool
func path(in rect: CGRect) -> Path {
let path = UIBezierPath(roundedRect: rect, byRoundingCorners: [.topLeft, .topRight, myMessage ? .bottomLeft : .bottomRight], cornerRadii: CGSize(width: 25, height: 25))
return Path(path.cgPath)
}
}
struct ChatCell: View {
var data: Message
var body: some View {
HStack {
if data.myMessage {
Spacer()
Text(data.message).padding().background(Color(UIColor.systemBlue)).clipShape(messageTail(myMessage: data.myMessage)).foregroundColor(.white)
} else {
Text(data.message).padding().foregroundColor(.primary).background(Color.secondary.opacity(0.2)).clipShape(messageTail(myMessage: data.myMessage))
Spacer()
}
}.padding(data.myMessage ? .leading: .trailing, 55).padding(.vertical, 10)
}
}
struct ConversationView: View {
var body: some View {
ScrollView (.vertical, showsIndicators: false) {
VStack {
ForEach(AllMessages) { chat in
ChatCell(data: chat)
}
}
}.padding(.horizontal, 15)
}
}
struct Message: Identifiable {
var id: Int
var message: String
var myMessage: Bool
}
struct ChatBottomBar: View {
var body: some View {
HStack (spacing: 20) {
Image(systemName: "camera.fill").font(.headline).foregroundColor(.secondary)
HStack {
Text("iMessage").font(.subheadline).padding(.leading)
Spacer()
Image(systemName: "arrow.up.circle.fill").font(.headline).foregroundColor(.blue)
}.padding(EdgeInsets(top: 8, leading: 8, bottom: 8, trailing: 8)).foregroundColor(.secondary).background(Color.gray.opacity(0.1)).clipShape(Capsule()).shadow(radius: 1)
}.padding(.horizontal, 20)
}
}
struct ChatTopView: View {
var body: some View {
VStack {
HStack {
Image(systemName: "chevron.left").foregroundColor(.blue)
Spacer()
VStack {
Image(systemName: "person.crop.circle.fill").resizable().frame(width: 40, height: 40).foregroundColor(.secondary)
Text("Nav Singh").font(.footnote)
}
Spacer()
Image(systemName: "info.circle").foregroundColor(.blue)
}.padding()
}.frame(height: 120).background(Color.gray.opacity(0.1))
}
}
var AllMessages = [
Message(id: 0, message: "Here's to the crazy ones, the misfits, the rebels, the troublemakers, the round pegs in the square holes...", myMessage: false),
Message(id: 1, message: "Here's to the crazy ones, the misfits, the rebels, the troublemakers, the round pegs in the square holes...", myMessage: true),
Message(id: 2, message: "Here's to the crazy ones, the misfits, the rebels, the troublemakers, the round pegs in the square holes...", myMessage: false),
Message(id: 3, message: "Here's to the crazy ones, the misfits, the rebels, the troublemakers, the round pegs in the square holes...", myMessage: false),
Message(id: 4, message: "Here's to the crazy ones, the misfits, the rebels, the troublemakers, the round pegs in the square holes...", myMessage: true)
]
PlaygroundPage.current.setLiveView(Screen())
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment