I am trying to pan 'blockView' with UIPanGestureRecognizer. When the pan is 'Ended', want the 'blockView' to decelerate with inertia, just as a UIScrollView would end scrolling with inertia.
override func viewDidLoad() {
super.viewDidLoad()
self.dynamicAnimator = UIDynamicAnimator(referenceView: self.view)
let collider = UICollisionBehavior(items: [self.magnifiedView!])
collider.collisionDelegate = self
collider.collisionMode = .Boundaries
collider.translatesReferenceBoundsIntoBoundary = true
self.dynamicAnimator.addBehavior(collider)
self.dynamicProperties = UIDynamicItemBehavior(items: [self.magnifiedView!])
//self.dynamicProperties.elasticity = 1.0
//self.dynamicProperties.friction = 0.0
self.dynamicProperties.allowsRotation = false
//self.dynamicProperties.resistance = 10.0
self.dynamicAnimator.addBehavior(self.dynamicProperties)
}
func panBlockView (panGesture: UIPanGestureRecognizer) {
switch panGesture {
case .Began:
self.blockViewLocation = (self.blockView.center)!
case .Changed:
let translation = panGesture.translationInView(self.view)
self.blockView.center = CGPointMake(self.blockViewLocation.x + translation.x, self.self.blockViewLocation.y + translation.y)
case .Ended, .Cancelled:
self.dynamicAnimator.addLinearVelocity(panGesture.velocityInView(self.view), forItem: self.blockView)
}
}
Issue:
As I pan the view, 'blockView' tries to snap to the origin where the pan was originated from. When the pan 'Ends', it creates inertia, but it starts from the origin of the pan (after snapping to pan origin).
NOTE:
Above code works without issues just to PAN THE VIEW.
Adding a Snap Behavior and have it snap fixed the issue.
Related
I have a view in an iOS project that is meant to be dragged within the main view. The view. I've attached a pan gesture to that view (paletteView), and moving it around works fine.
But, the "glitches" when moves begin. This doesn't happen on the first move, but on subsequent ones. I think what is happening is related to the constraints on the paletteView. It starts located at 100,100 in the main view, but of course whenever a drag ends, unless I change that, it will snap back to that location. So whenever the pan begins, I grab location of the palette, and update the constraints. This also works, but it seems to produce a flash when the next pangesture begins. Here's the main code:
#objc func palettePan(_ sender: UIPanGestureRecognizer) {
let translation = sender.translation(in: view)
switch sender.state {
case .began:
paletteLeading?.constant = paletteView!.frame.origin.x
paletteTop?.constant = paletteView!.frame.origin.y
paletteView?.setNeedsUpdateConstraints()
case .changed:
paletteView!.transform = CGAffineTransform(translationX: translation.x, y: translation.y)
case .ended:
print("done \(paletteView!.frame)")
default:
_ = true
}
}
Again, this works fine, but for the brief "flash" of the palette, out of position. I don't know where this would be coming from.
You need to reset the transform at the same time as you update the constraints, at the moment you are updating the constraints to to the new position, but the view is still transformed by the final translation of the previous pan until the first changed pan gesture event comes through.
So your palettePan function would become:
#objc func palettePan(_ sender: UIPanGestureRecognizer) {
let translation = sender.translation(in: view)
switch sender.state {
case .began:
paletteLeading?.constant = paletteView!.frame.origin.x
paletteTop?.constant = paletteView!.frame.origin.y
paletteView?.setNeedsUpdateConstraints()
paletteView?.transform = .identity // Reset the transform
case .changed:
paletteView!.transform = CGAffineTransform(translationX: translation.x, y: translation.y)
case .ended:
print("done \(paletteView!.frame)")
default:
_ = true
}
}
Though I would actually update the constraints and transform when the pan gesture ends, rather than when a new one begins:
#objc func palettePan(_ sender: UIPanGestureRecognizer) {
let translation = sender.translation(in: view)
switch sender.state {
case .changed:
paletteView?.transform = CGAffineTransform(translationX: translation.x, y: translation.y)
case .ended, .cancelled, .failed:
paletteLeading?.constant = paletteView!.frame.origin.x
paletteTop?.constant = paletteView!.frame.origin.y
paletteView?.setNeedsUpdateConstraints()
paletteView?.transform = .identity // Reset the transform
default:
_ = true
}
}
I'm working on a game prototype in Swift using UIKit and SpriteKit. The inventory (at the bottom of this screenshot) is a UIView with UIImageView subviews for the individual items. In this example, a single acorn.
I have the acorn recognizing the "pan" gesture so I can drag it around. However, it renders it below the other views in the hierarchy. I want it to pop out of the inventory and be on top of everything (even above its parent view) so I can drop it onto other views elsewhere in the game.
This is what I have as my panHandler on the acorn view:
#objc func panHandler(gesture: UIPanGestureRecognizer){
switch (gesture.state) {
case .began:
removeFromSuperview()
controller.view.addSubview(self)
case .changed:
let translation = gesture.translation(in: controller.view)
if let v = gesture.view {
v.center = CGPoint(x: v.center.x + translation.x, y: v.center.y + translation.y)
}
gesture.setTranslation(CGPoint.zero, in: controller.view)
default:
return
}
}
The problem is in the .began case, when I remove it from the superview, the pan gesture immediately cancels. Is it possible to remove the view from a superview and add it as a subview elsewhere while maintaining the pan gesture?
Or, if my approach is completely wrong, could you give me pointers how to accomplish my goal with another method?
The small answer is you can keep the gesture working if you don't call removeFromSuperview() on your view and add it as a subview right away to your controller view, but that's not the right way to do this because if the user cancels the drag you will have to re add to your main view again and if that view your dragging is heavy somehow it gets laggy and messy quickly
The long answer, and in my opinion is the right way to do it and what apple actually does in all drag and drop apis is
you can actually make a snapshot of the view you want to drag and add it as a subview of the controller view that's holding all your views and then call bringSubviewToFront(_ view: UIView) to make sure it's the top most view in the hierarchy and pass in the snapshot you took of the dragging view
in the .began you can hide the original view and in the .ended you can show it again
and also on .ended you can either take that snapshot and add to the dropping view or do anything else with it's dropping coordinates
I made a sample project to apply this
Here is the storyboard design and view hierarchy
Here is the ViewController code
class ViewController: UIViewController {
#IBOutlet var topView: UIView!
#IBOutlet var bottomView: UIView!
#IBOutlet var smallView: UIView!
var snapshotView: UIView?
override func viewDidLoad() {
super.viewDidLoad()
let pan = UIPanGestureRecognizer(target: self, action: #selector(panning(_:)))
smallView.addGestureRecognizer(pan)
}
#objc private func panning(_ pan: UIPanGestureRecognizer) {
switch pan.state {
case .began:
smallView.backgroundColor = .systemYellow
snapshotView = smallView.snapshotView(afterScreenUpdates: true)
smallView.backgroundColor = .white
if let snapshotView = self.snapshotView {
self.snapshotView = snapshotView
view.addSubview(snapshotView)
view.bringSubviewToFront(snapshotView)
snapshotView.backgroundColor = .blue
snapshotView.center = bottomView.convert(smallView.center, to: view)
}
case .changed:
guard let snapshotView = snapshotView else {
fallthrough
}
smallView.alpha = 0
let translation = pan.translation(in: view)
snapshotView.center = CGPoint(x: snapshotView.center.x + translation.x, y: snapshotView.center.y + translation.y)
pan.setTranslation(.zero, in: view)
case .ended:
if let snapshotView = snapshotView {
let frame = view.convert(snapshotView.frame, to: topView)
if topView.frame.contains(frame) {
topView.addSubview(snapshotView)
snapshotView.frame = frame
smallView.alpha = 1
} else {
bottomView.addSubview(snapshotView)
let newFrame = view.convert(snapshotView.frame, to: bottomView)
snapshotView.frame = newFrame
UIView.animate(withDuration: 0.33, delay: 0, options: [.curveEaseInOut]) {
snapshotView.frame = self.smallView.frame
} completion: { _ in
self.snapshotView?.removeFromSuperview()
self.snapshotView = nil
self.smallView.alpha = 1
}
}
}
default: break
}
}
}
Here is how it ended up
ja a gesture that is on the view that vertical black in the photo.
I want to know its location at the level of the screen, because I want to execute a function if for example I slide the view to the right at more than half of the center of the screen
code:
#objc func detectPan(recognizer: UIPanGestureRecognizer) {
switch recognizer.state {
case .began:
self.startingConstant = self.centerConstraint.constant
case .changed:
let translation = recognizer.translation(in: self.view)
self.centerConstraint.constant = self.startingConstant - translation.x
default:
break
}
}
Fist image
Second image
You can convert coordinates (points and frames) between views as long as they are on the same hierarchy. You have two methods convert(:to:) and convert(:from:).
In your case you seem to want to convert location in your view to screen which is your key window UIApplication.shared.keyWindow.
So in general the point on screen is let pointOnScreen = myView.convert(pointInMyView, to: UIApplication.shared.keyWindow).
So in your case:
let myView = self.view
let pointInMyView = recognizer.locationInView(myView)
let pointOnScreen = myView.convert(pointInMyView, to: UIApplication.shared.keyWindow)
let isViewGestureOnRightSideOfTheScreen = pointOnScreen.x > UIApplication.shared.keyWindow!.frame.midX
you can get point via
func transform(for translation : CGPoint) -> CGAffineTransform {
let moveBy = CGAffineTransform(translationX: translation.x, y: translation.y)
return moveBy
}
#IBAction func setPanGesture(_ sender: UIPanGestureRecognizer) {
switch sender.state {
case .changed:
let translation = sender.translation(in: view)
let translationView = transform(for: translation)
print(translationView)
case .ended:
let translation = sender.translation(in: view)
let translationView = transform(for: translation)
print(translationView)
default:
break
}
}
I am rather new to iOS and swift 3 programming. At the moment I am working on a little learning project. I have the following problem.
On my screen I have 4 UIViews and 4 UIImageViews. The app allows to “drag and drop” an image onto one of the UIViews. This works pretty well so far. I use Pan Gesture Recognisers for the dragging of UIImages. But for some reason one of the UIViews seems to be in front of the image, meaning that I can drop the image to this area, but I cannot see it - it is layered under the UIView. The other three behave properly, the UIImageView is layered on top of the UIView. In the viewDidLoad() function of the view controller I set the background color of the UIViews to grey. If I don’t do that, the image will be displayed even on the fourth UIView.
I have checked for differences between the four UIView objects but cannot find any. I also tried to recreate the UIView by copying it from one of the the other three.
So my question is: Is there any property which defines that the UIView is layered on top or can be sent to back so that other objects are layered on top of it? Or is there anything else I am missing? Any hints would be very appreciated.
I was not quite sure which parts of the code are relevant, so I posted some of it (but still guess that this is rather a property of the UIView…)
This is where I set the background of the UIViews
override func viewDidLoad() {
super.viewDidLoad()
lbViewTitle.text = "\(viewTitle) \(level) - \(levelPage)"
if (level==0) {
print("invalid level => EXIT")
} else {
loadData(level: level)
originalPositionLetter1 = letter1.center
originalPositionLetter2 = letter2.center
originalPositionLetter3 = letter3.center
originalPositionLetter4 = letter4.center
dropArea1.layer.backgroundColor = UIColor.lightGray.cgColor
dropArea2.layer.backgroundColor = UIColor.lightGray.cgColor
dropArea3.layer.backgroundColor = UIColor.lightGray.cgColor
dropArea4.layer.backgroundColor = UIColor.lightGray.cgColor
}
}
This is the code that moves the image:
#IBAction func hadlePan1(_ sender: UIPanGestureRecognizer) {
moveLetter(sender: sender, dropArea: dropArea4, movedImage: letter1, originalPosition: originalPositionLetter1)
}
func moveLetter(sender: UIPanGestureRecognizer, dropArea : UIView, movedImage : UIImageView, originalPosition : CGPoint) {
let translation = sender.translation(in: self.view)
if let view = sender.view {
view.center = CGPoint(x:view.center.x + translation.x,
y:view.center.y + translation.y)
if sender.state == UIGestureRecognizerState.ended {
let here = sender.location(in: self.view)
if (dropArea.frame.contains(here)) {
movedImage.center = dropArea.center
} else {
movedImage.center = originalPosition
}
}
}
sender.setTranslation(CGPoint.zero, in: self.view)
}
There are two methods that may be useful to you: UIView.sendSubview(toBack:) and UIView.bringSubview(toFront:).
What I think you should do is to call bringSubview(toFront:) when you start dragging the image:
func moveLetter(sender: UIPanGestureRecognizer, dropArea : UIView, movedImage : UIImageView, originalPosition : CGPoint) {
self.view.bringSubview(toFront: movedImage) // <--- add this line!
let translation = sender.translation(in: self.view)
if let view = sender.view {
view.center = CGPoint(x:view.center.x + translation.x,
y:view.center.y + translation.y)
if sender.state == UIGestureRecognizerState.ended {
let here = sender.location(in: self.view)
if (dropArea.frame.contains(here)) {
movedImage.center = dropArea.center
} else {
movedImage.center = originalPosition
}
}
}
sender.setTranslation(CGPoint.zero, in: self.view)
}
I want to implement a view that stays at the bottom of the screen and can be expanded with a pan gesture just like in the Uber app for iOS?
Uber Home screen The view will be minimizable when dragged downwards
There are few third party libraries which makes your work easy. This is one of it. LNPopUpController.
Or else, if you want to customise the code and write: Take one view controller and add a UIView on top of it. Now add Pan Gesture to view like below.
func handlePan(pan : UIPanGestureRecognizer) {
let velocity = pan.velocityInView(self.superview).y //; print("Velocity : \(velocity)")
var location = pan.locationInView(self.superview!) //; print("Location : \(location)")
var movement = self.frame
movement.origin.x = 0
movement.origin.y = movement.origin.y + (velocity * 0.05) //; print("Frame.y : \(movement.origin.y)")
if pan.state == .Ended{
print("Gesture Ended")
panGestureEnded()
}else if pan.state == .Began { print("Gesture Began")
let center = self.center
offset.y = location.y - center.y //; print("Offset.y : \(offset.y)")
}else{ print("Gesture else")
animator.removeBehavior(snap)
// Apply the initial offset.
location.x -= offset.x
location.y -= offset.y
//print("location.y : \(location.y)")
// Bound the item position inside the reference view.
location.x = self.superview!.frame.width / 2
// Apply the resulting item center.
snap = UISnapBehavior(item: self, snapToPoint: location)
animator.addBehavior(snap)
}
}