How do I add a zoomable SVG to SwiftUI? - swift

I have a map that I want to put into my app, and I am currently learning SwiftUI. I want to put in an SVG where I can scroll, zoom, set initial x & y coordinates / initial zoom, max zoom, and tap on an element to open a page. I know I can do this with UIKit, but how do I do this with SwiftUI? If I am not able to do this with an SVG, how can I do this with a raster image that is interactive?
edit: here is my code:
struct ContentView: View {
#State private var currentPosition: CGSize = .zero
#State private var newPosition: CGSize = .zero
#State private var scale: CGFloat = 1.0
#State private var currentAmount: CGFloat = 0
#State private var finalAmount: CGFloat = 1
var body: some View {
Image("SVG")
.frame(width: 1100, height: 1100)
.offset(x: self.currentPosition.width, y: self.currentPosition.height)
.gesture(DragGesture()
.onChanged { value in
self.currentPosition = CGSize(width: value.translation.width + self.newPosition.width, height: value.translation.height + self.newPosition.height)
}
.onEnded { value in
self.currentPosition = CGSize(width: value.translation.width + self.newPosition.width, height: value.translation.height + self.newPosition.height)
print(self.newPosition.width)
print(self.newPosition.height)
self.newPosition = self.currentPosition
}
)
.scaleEffect(finalAmount + currentAmount)
.gesture(
MagnificationGesture()
.onChanged { amount in
self.currentAmount = amount - 1
}
.onEnded { amount in
self.finalAmount += self.currentAmount
self.currentAmount = 0
}
)
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}

Related

Determine UIScreen half in SwiftUI

I have a gesture applied to my text. Right now, it is sitting at the bottom of the screen and if I drag it to anywhere and let go, it goes back to the bottom. But if I drag it to the top half of my device screen, it should stay at the top.
The feature is almost ready to go, it just needs the correct function to split using UIScreen.main.bounds.
struct SwiftUIView: View {
#State var offset: CGSize = .zero
#State var isOnTop = false
var body: some View {
Text("Hello!")
.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: isOnTop == true ? .top : .bottom)
.offset(offset)
.gesture(
DragGesture()
.onChanged { value in
withAnimation(.spring()) {
offset = value.translation
}
}
.onEnded { value in
withAnimation(.spring()) {
offset = .zero
// if dragged to the top half of the screen, set true
//isOnTop = true
}
}
)
}
}
This is how I will do, I use GeometryReader to have the size of my screen and I will apply logic to my offset when my gesture is ended
struct SwiftUIView: View {
#State private var yOffset: CGFloat = 0.0
#State private var xOffset: CGFloat = 0.0
#State private var height: CGFloat = 0
#State private var lastXOffset: CGFloat = 0.0
#State private var lastYOffset : CGFloat = 0.0
var body: some View {
GeometryReader{ geo in
VStack{
Spacer()
Text("Hello!")
.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .bottom)
.offset(x: xOffset, y: yOffset >= 0 ? 0: yOffset)
.gesture(DragGesture().onChanged({ gesture in
self.xOffset = gesture.translation.width + lastXOffset
self.yOffset = gesture.translation.height + lastYOffset
}).onEnded({ _ in
withAnimation{
lastXOffset = xOffset
if yOffset <= -height/2 {
yOffset = -height + geo.safeAreaInsets.top
///save last offset
lastYOffset = yOffset
} else {
yOffset = 0
///save last offset
lastYOffset = yOffset
}
}
}))
}
.onAppear{
height = geo.size.height
}
}
}
}

How to show an overlay on swipe/drag gesture

I want to show an overlay that displays a different image depending on which side the card is dragged towards. I tried setting a default image but that way the image never updated, so I am trying with a string of the imageName instead. I implemented a tinder like swiping already:
class CardViewModel : ObservableObject {
#Published var offset = CGSize.zero
}
struct CardView: View {
#State var offset = CGSize.zero
#StateObject var cardVM = CardViewModel()
#State var imageName = ""
#State var isDragging = false
func swipeCard(width: CGFloat) {
switch width {
case -500...(-150):
offset = CGSize(width: -500, height: 0)
self.imageName = "nope"
case 150...500:
offset = CGSize(width: 500, height: 0)
self.imageName = "bid"
default:
offset = .zero
}
}
var body: some View {
VStack {
}.overlay(
isDragging ? Image(imageName) : Image("")
)
.offset(x: offset.width, y: offset.height * 0.4)
.rotationEffect(.degrees(Double(offset.width / 40)))
.animation(.spring())
.gesture(
DragGesture()
.onChanged { gesture in
offset = gesture.translation
isDragging = true
} .onEnded { _ in
withAnimation {
swipeCard(width: offset.width)
isDragging = false
}
}
).offset(x: cardVM.offset.width, y: cardVM.offset.height * 0.4)
.rotationEffect(.degrees(Double(cardVM.offset.width / 40)))
.animation(.spring())
}
}

SwiftUI: Adjust bounds of ScrollView

I am trying to scale a view horizontally using scaleEffect and MagnificationGesture.
It is almost working as I want with the exception that the ScrollView does not resize when its child view resizes.
Is there a fix for this? Any solution would be greatly appreciated.
To reproduce:
run the code below
scale up the image horizontally with the pinch gesture
notice that the ScrollView scrolls as if the image still has the same size.
struct ContentView: View {
#State private var currentAmount: CGFloat = 0
#State private var finalAmount: CGFloat = 1
var body: some View {
ScrollView(.horizontal) {
Image(systemName: "star")
.resizable()
.scaledToFit()
.scaleEffect(x: finalAmount + currentAmount, y: 1)
.gesture(
MagnificationGesture()
.onChanged { amount in
self.currentAmount = amount - 1
}
.onEnded { amount in
self.finalAmount += self.currentAmount
self.currentAmount = 0
}
)
}
.frame(maxHeight: 300)
}
}
This view does it.
struct HorizontalScaleView<Content: View>: View {
#ViewBuilder var content: Content
#State private var currentAmount: CGFloat = 0
#State private var finalAmount: CGFloat = 1
var body: some View {
GeometryReader { geo in
ScrollView(.horizontal) {
content
.scaledToFit()
.scaleEffect(x: finalAmount + currentAmount, y: 1)
.frame(width: (finalAmount + currentAmount) * geo.size.width, height: geo.size.width)
.gesture(
MagnificationGesture()
.onChanged { amount in
self.currentAmount = amount - 1
}
.onEnded { _ in
if self.finalAmount + self.currentAmount >= 1 {
self.finalAmount += self.currentAmount
} else {
self.finalAmount = 1
}
self.currentAmount = 0
}
)
}
}
}
}

shaky view when changing offset through a drag gesture

edit: it looks even worse on physical device, and simulator vs gif
I have a grid of rectangles. These are nested in HStacks and VStacks. This grid is put into a ZStack. I attatch the gesture to the nested Grid and see what happens when I drag with my implementation
import SwiftUI
import UIKit
struct ContentView: View {
#State var numCell: CGFloat = 20
#State var cellSize: CGFloat = 50
var body: some View {
return ZStack() {
Grid(numCell: $numCell, cellSize: $cellSize)
}.position(x: 0, y: 0).frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity).background(Color.blue)
}
}
struct Grid: View {
#Binding var numCell: CGFloat
#Binding var cellSize: CGFloat
#State var gridDraggedX: CGFloat = 0
#State var gridDraggedY: CGFloat = 0
#State var accumulatedGridDraggedX: CGFloat = 0
#State var accumulatedGridDraggedY: CGFloat = 0
var body: some View {
let drag = DragGesture().onChanged({ value in
self.gridDraggedX = value.translation.width + self.accumulatedGridDraggedX
self.gridDraggedY = value.translation.height + self.accumulatedGridDraggedY
}).onEnded({ value in
self.gridDraggedX = value.translation.width + self.accumulatedGridDraggedX
self.gridDraggedY = value.translation.height + self.accumulatedGridDraggedY
self.accumulatedGridDraggedX = self.gridDraggedX
self.accumulatedGridDraggedY = self.gridDraggedY
})
return HStack(spacing: 2) {
ForEach(0..<Int(numCell) - 1) { _ in
VStack(spacing: 2) {
ForEach(0..<Int(self.numCell) - 1) { _ in
Rectangle()
.fill(Color.red)
.frame(width: self.cellSize,
height: self.cellSize)
}
}
}
}.gesture(drag).background(Color.green).offset(x: gridDraggedX, y: gridDraggedY)
}
}
via GIPHY
DragGesture(coordinateSpace: .global)

How to drag a working slider using SwiftUI

I would like to drag a slider and of course have it slide as well.
I can do one or the other, but I cannot do both.
How can I drag and have a working slider?
I also tried to find a way to remove a gesture, but I could not find a way to do that.
Also tried the "Sequenced Gesture States" code from Apple "Composing SwiftUI Gestures" docs,
and introduce a flag to turn the dragging on/off with same results, drag or slide not both.
I also tried to put the slider in a Container (VStack) and attach the drag gesture to that,
but that did not work either.
import SwiftUI
struct ContentView: View {
#State var pos = CGSize.zero
#State var acc = CGSize.zero
#State var value = 0.0
var body: some View {
let drag = DragGesture()
.onChanged { value in
self.pos = CGSize(width: value.translation.width + self.acc.width, height: value.translation.height + self.acc.height)
}
.onEnded { value in
self.pos = CGSize(width: value.translation.width + self.acc.width, height: value.translation.height + self.acc.height)
self.acc = self.pos
}
return Slider(value: $value, in: 0...100, step: 1)
.frame(width: 250, height: 40, alignment: .center)
.overlay(RoundedRectangle(cornerRadius: 25).stroke(lineWidth: 2).foregroundColor(Color.black))
.offset(x: self.pos.width, y: self.pos.height)
.simultaneousGesture(drag, including: .all) // tried .none .gesture, .subviews
// also tried .gesture(flag ? nil : drag)
}
}
With "simultaneousGesture" I was expecting to have both gestures operating at the same time.
This is working. Basically I needed to set the flag in an outside observable object for it to update the view so that it could take effect. When the value changes the flag is set to false, but then after a tenth of a second it becomes draggable. Working pretty seamlessly.
struct ContentView: View {
#State var pos = CGSize.zero
#State var acc = CGSize.zero
#State var value = 0.0
#ObservedObject var model = Model()
var body: some View {
let drag = DragGesture()
.onChanged { value in
self.pos = CGSize(width: value.translation.width + self.acc.width, height: value.translation.height + self.acc.height)
}
.onEnded { value in
self.pos = CGSize(width: value.translation.width + self.acc.width, height: value.translation.height + self.acc.height)
self.acc = self.pos
}
return VStack {
Slider(value: $value, in: 0...100, step: 1) { _ in
self.model.flag = false
DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) {
self.model.flag = true
}
}
}
.frame(width: 250, height: 40, alignment: .center)
.overlay(RoundedRectangle(cornerRadius: 25).stroke(lineWidth: 2).foregroundColor(Color.black))
.offset(x: self.pos.width, y: self.pos.height)
.gesture(model.flag == true ? drag : nil)
}
}
class Model: ObservableObject {
#Published var flag = false
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}