Skip to content

Instantly share code, notes, and snippets.

@runys
Last active June 16, 2021 17:00
Show Gist options
  • Save runys/c631b7dbab09183196ef927c0f144c6c to your computer and use it in GitHub Desktop.
Save runys/c631b7dbab09183196ef927c0f144c6c to your computer and use it in GitHub Desktop.
Using the new view GroupBox from SwiftUI 3 released for iOS 15 on WWDC 2021 to replicate the interface of a Detailed Contact Card View from the CareKit framework. You can see the reference view at: https://developer.apple.com/design/human-interface-guidelines/carekit/overview/views/#contacts
// Xcode 13 + iOS 15
struct CareKitDetailedCardView: View {
var body: some View {
VStack(alignment: .leading) {
// The header of the card
// - Photo, Full Name and Professional Title
HStack {
Circle()
.frame(width: 40, height: 40)
.foregroundColor(.gray)
VStack(alignment: .leading, spacing: 3) {
Text("Jane Daniels")
.font(.headline)
.fontWeight(.semibold)
Text("Family Practice Doctor")
.font(.caption)
}
Spacer()
}
Divider()
.foregroundColor(Color(uiColor: UIColor.systemGray6))
.padding([.top, .bottom], 8)
// The description of the contact in a few lines
Text("Dr. Daniels is a family practice doctor with 8 years of experience.")
.font(.body)
// Buttons to call, message or email the contact
HStack {
GroupBox {
VStack(spacing: 5) {
Image(systemName: "phone")
.font(.headline)
Text("Call")
.font(.caption)
}
.foregroundColor(.red)
.frame(maxWidth: .infinity)
}.onTapGesture {
print("Calling...")
}
GroupBox {
VStack(spacing: 5) {
Image(systemName: "message")
.font(.headline)
Text("Message")
.font(.caption)
}
.foregroundColor(.red)
.frame(maxWidth: .infinity)
}.onTapGesture {
print("Sending SMS...")
}
GroupBox {
VStack(spacing: 5) {
Image(systemName: "envelope")
.font(.headline)
Text("E-mail")
.font(.caption)
}
.foregroundColor(.red)
.frame(maxWidth: .infinity)
}.onTapGesture {
print("Opening email...")
}
}
// Address of the contact
GroupBox {
VStack(alignment: .leading) {
HStack {
Text("Address")
.font(.caption)
.fontWeight(.semibold)
Spacer()
Image(systemName: "location")
.font(.headline)
}
.foregroundColor(.red)
.padding([.bottom], 1)
Text("2598 Reposa Way")
.font(.caption)
Text("San Francisco CA 94127")
.font(.caption)
}.frame(maxWidth: .infinity)
}.onTapGesture {
print("Opening Maps...")
}
}
.padding()
.background(Color.white)
.cornerRadius(10)
}
}
// Testing the CareKitDetailedCardView adding navigation and shadow
struct ContentView: View {
var body: some View {
NavigationView {
ScrollView {
CareKitDetailedCardView()
Spacer()
}
.padding()
.background(Color(UIColor.systemGray6))
.navigationTitle("Care Team")
.shadow(color: Color(.sRGB, red: 0, green: 0, blue: 0, opacity: 0.25), radius: 10, x: 0, y: 0)
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView().previewInterfaceOrientation(.portraitUpsideDown)
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment