I am following the Guidebook tutorial and seem to be having an issue with text in the AttractionDetailView overflow the bounds of the device. It is only visible when traversing navigation whether that is in the live preview or simulator.
If I am using live preview in the AttractionDetailView everything is correctly laid out. But, one of the attractions is displayed correctly in the simulator and live preview when navigating from the CityListView.
I also want to highlight that during Lesson 04: Building the Guidebook UI, Chris clicks on Tsukiji Market & Ghibli Museum, both of which are correctly displayed. The other two attractions are having issues horizontal padding.
Hi Jason,
Iām noticing that too with my version though I am pretty sure that it was fine ages ago when I followed the course. I was just messing about with the detail view and the only way I could get it to behave (Iām sure there is a better way than what I have used) was setting a constant for the screen size and using that in a .frame() modifier. See the attached DetailView from my project:
struct DetailView: View {
var attraction: Attraction
let size = UIScreen.main.bounds.size
var body: some View {
VStack(spacing: 20) {
Image(attraction.imageName)
.resizable()
.aspectRatio(contentMode: .fill)
.frame(height: 300)
// SlantShape is a rectangle with the bottom left corner
// slanting down from left to right.
.clipShape(SlantShape())
// Alternative method is to cover the corner with the shape using
// overlay
// .overlay (
// EdgeSlantShape()
// .fill(Color("slantColor"))
// )
ScrollView(showsIndicators: false) {
VStack(alignment: .leading, spacing: 20){
Text(attraction.name)
.font(.title)
.bold()
Text(attraction.longDescription)
.multilineTextAlignment(.leading)
Spacer()
}
.frame(maxWidth: size.width - 20)
}
// Create URL instance based on URL Scheme
if let url = URL(string: "maps://?q=\(cleanName(name: attraction.name))&sll=\(cleanCoord(latLong: attraction.latLong))") {
//&z=10&t=s
// Test if URL can be opened
if UIApplication.shared.canOpenURL(url) {
Button {
// Open the URL
UIApplication.shared.open(url)
} label: {
ZStack {
RoundedRectangle(cornerRadius: 15)
.foregroundColor(.blue)
.frame(height: 40)
Text("Get Directions")
.foregroundColor(.white)
}
}
.frame(maxWidth: size.width - 20)
.padding(.bottom, 30)
}
}
}
.padding(.horizontal, 10)
.ignoresSafeArea()
}
func cleanName(name: String) -> String {
name.replacingOccurrences(of: " ", with: "+").folding(options: .diacriticInsensitive, locale: .current)
}
func cleanCoord(latLong: String) -> String {
latLong.replacingOccurrences(of: " ", with: "")
}
}
struct DetailView_Previews: PreviewProvider {
static var previews: some View {
DetailView(attraction: Attraction(name: "Pantheon",
summary: "The Pantheon is a former Roman temple and, since 609 AD, a Catholic church in Rome, Italy, on the site of an earlier temple commissioned by Marcus Agrippa during the reign of Augustus.",
longDescription: """
The Pantheon from Greek is a former Roman temple and, since 609 AD, a Catholic church (Basilica di Santa Maria ad Martyres or Basilica of St. Mary and the Martyrs) in Rome, Italy, on the site of an earlier temple commissioned by Marcus Agrippa during the reign of Augustus (27 BC ā 14 AD). It was rebuilt by the emperor Hadrian and probably dedicated c. 126 AD. Its date of construction is uncertain, because Hadrian chose not to inscribe the new temple but rather to retain the inscription of Agrippa's older temple, which had burned down.
""",
imageName: "pantheon", latLong: "41.898762500696236, 12.476915812472798"))
.preferredColorScheme(.dark)
}
}