Last active
June 16, 2021 17:00
-
-
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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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