SwiftUI Image showing gap at top? - ios

Question

I have the following code I am testing out for the sake of learning about MatchedGeometry and more.
struct ContentView: View {
#State var match = false
#Namespace var namespace
#State var snapshot:UIImage?
var body: some View {
ZStack {
if !match {
AView { img in
snapshot = img
withAnimation {
match.toggle()
}
}
.frame(width: 300, height: 300)
.matchedGeometryEffect(id: "1", in: namespace, properties: .frame)
}
if match && snapshot != nil {
Color.clear.ignoresSafeArea().overlay(
BView(image: snapshot!)
.matchedGeometryEffect(id: "1", in: namespace, properties: .frame)
.frame(width: 600, height: 600)
.transition(.scale)
.onTapGesture {
withAnimation {
match.toggle()
}
}
)
}
}
// .statusBar(hidden: true) // <-- THIS REMOVES THE RED GAP IN BView, but I want to keep the status bar. I want BView to work regadless.
}
}
struct AView: View {
var didTap:(_ img:UIImage)->()
var body: some View {
GeometryReader { geo in
ZStack(alignment: .center) {
Image("island")
.resizable()
.scaledToFill()
}
// .frame(width: geo.size.width, height: geo.size.height)
.border(.purple)
.onTapGesture {
didTap(snapshot(size: geo.size))
}
}
.border(.yellow)
}
}
struct BView: View {
#State var image:UIImage
var body: some View {
ZStack {
Color.red.ignoresSafeArea()
Image(uiImage: image)
.resizable()
.aspectRatio(contentMode: .fill)
}
}
}
extension View {
func snapshot(origin: CGPoint = .zero, size: CGSize = .zero) -> UIImage {
let controller = UIHostingController(rootView: self)
let view = controller.view
let targetSize = size == .zero ? controller.view.intrinsicContentSize : size
view?.backgroundColor = .clear
view?.bounds = CGRect(origin: origin, size: targetSize)
let renderer = UIGraphicsImageRenderer(size: targetSize)
return renderer.image { _ in
view?.drawHierarchy(in: controller.view.bounds, afterScreenUpdates: true)
}
}
}
It shows this:
There are two things I am not sure why they work the way they do:
Why am I getting a gap in the BView (shown in red)? I was expecting the image to fill BView and not have that top gap. I tried ignoring save area etc... but no luck.
Why is the image in the AView not centered horizontally?
How can I fix both, meaning, I want the image to be centered and fill BView (aspect fill), and I want the image in AView to be horizontally centered.
Image comes from assets, file I found at:
https://cruisewhitsundays.imgix.net/2019/05/DayDream_Dec2018_03_0395.jpg

Answer 1

I think you're over-using ZStack in your AView and BView ...
Take a look at this, and see if you get the desired results:
struct ContentView: View {
#State var match = false
#Namespace var namespace
#State var snapshot:UIImage?
var body: some View {
ZStack {
if !match {
AView { img in
snapshot = img
withAnimation {
match.toggle()
}
}
.frame(width: 300, height: 300)
.clipped()
.matchedGeometryEffect(id: "1", in: namespace, properties: .frame)
}
if match && snapshot != nil {
Color.clear.ignoresSafeArea().overlay(
BView(image: snapshot!)
.matchedGeometryEffect(id: "1", in: namespace, properties: .frame)
.frame(width: 600, height: 600)
.clipped()
.transition(.scale)
.onTapGesture {
withAnimation {
match.toggle()
}
}
)
}
}
}
}
struct AView: View {
var didTap:(_ img:UIImage)->()
var body: some View {
GeometryReader { geo in
Image("island")
.resizable()
.scaledToFill()
.border(.purple)
.onTapGesture {
didTap(snapshot(size: geo.size))
}
}
.border(.yellow)
}
}
struct BView: View {
#State var image:UIImage
var body: some View {
Image(uiImage: image)
.resizable()
.aspectRatio(contentMode: .fill)
}
}
extension View {
func snapshot(origin: CGPoint = .zero, size: CGSize = .zero) -> UIImage {
let controller = UIHostingController(rootView: self)
let view = controller.view
let targetSize = size == .zero ? controller.view.intrinsicContentSize : size
view?.backgroundColor = .clear
view?.bounds = CGRect(origin: origin, size: targetSize)
let renderer = UIGraphicsImageRenderer(size: targetSize)
return renderer.image { _ in
view?.drawHierarchy(in: controller.view.bounds, afterScreenUpdates: true)
}
}
}