Skip to content

Instantly share code, notes, and snippets.

@joshuapekera
Forked from navsing/MessagesPart-II.swift
Created July 8, 2020 00:38
Show Gist options
  • Save joshuapekera/e1fad3e2540f678a3cba8761c320c823 to your computer and use it in GitHub Desktop.
Save joshuapekera/e1fad3e2540f678a3cba8761c320c823 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