During module 4 (guidebook app) Chris mentions learning how to apply diagonal border to image on detail view in a later video, but this wasn’t covered. Has it been covered in a different module/any pointers on how to do it?
Hi Andy,
Welcome to the community.
I remember following that course but I can’t remember Chris Ching talking about applying a diagonal border around an image. That said, this is a way you can add a border.
The image is one that I added to the assets catalogue to demonstrate the process.
You can use the .overlay modifier or you can use the .border modifier:
struct ContentView: View {
var body: some View {
VStack {
Image("CloudySky")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 300)
.overlay(
Rectangle()
.stroke(lineWidth: 2)
)
Image("CloudySky")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 300)
.border(Color.black, width: 4)
}
.padding()
}
…and this is how it looks
Note that the result is different. The .overlay adds to the outside edge of the image via the lineWidth value and .border encroaches in from the edges of the image by the width value.
I’m glad you brought this up. I remember that also and remember looking forward to learning how to do it, but it never came up again.