I have a UICollectionView with alot of UICollectionViewCells inside it.
Searched alot, but couldn't find anything near this issue.
My goal is to drag one of the Pink squares (UICollectionViewCell) to the Gray view (UIView).
You can think of it like dragging a folder on your desktop to your trash can except that I dont want the Pink square to be deleted. Or dragging a icon from your dock (it snaps back).
When the pink area hits the gray area it should just go back to its original position and the same when dropping out anywhere else using some kind of easy statement.
Can anyone help me out or redirect me to some references or samples?
Much appreciated, if you would like more info. Let me know.
If i managed to understand you correctly, i did something very similar once before, i found its much better to use a fake image of the cell, instead of the cell itself.
So for example, cell number 2 is starting to be dragged, you immediately call "SetHidden=YES", and draw at the exact same place a fake one with a simple draw method:
UIGraphicsBeginImageContext(self.cell.bounds.size);
[self.cell.layer renderInContext:UIGraphicsGetCurrentContext()];
UIImage *viewImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
This one you can move as you like, and when it should go back, you do it the same way.
Hope this helps you..
this worked for me in swift 3:
class DragAndDropGestureManager: NSObject {
var originalPosition: CGPoint?
var draggedView: UIView?
var viewSize: CGSize?
var originalZIndex: CGFloat = 0
#objc func handleDrag(_ recognizer: UIPanGestureRecognizer) {
switch recognizer.state {
case .began:
if let view = recognizer.view {
draggedView = view
originalPosition = view.frame.origin
viewSize = view.frame.size
originalZIndex = view.layer.zPosition
view.layer.zPosition = 1
}
case .changed:
if let view = recognizer.view {
let currentPosition = recognizer.location(in: view.superview!)
let newPosition = CGPoint(x: currentPosition.x - (viewSize!.width / 2.0), y: currentPosition.y - (viewSize!.height / 2.0))
view.frame.origin = newPosition
} else {
self.finishDrag()
}
case .ended:
finishDrag()
default:
print("drag default \(recognizer.state.rawValue)")
}
}
func finishDrag() {
self.draggedView?.frame.origin = originalPosition!
self.draggedView?.layer.zPosition = originalZIndex
originalZIndex = 0
originalPosition = nil
draggedView = nil
}
}
i added a gesture recognizer in the function public func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell
like this:
if self.dragManager != nil && cell.gestureRecognizers == nil {
cell.addGestureRecognizer(UIPanGestureRecognizer(target: dragManager!, action: #selector(DragAndDropGestureManager.handleDrag)))
}
the if, is for not adding gesutre recognition more than once because the cell are being reused
don't forget to add collectioView.clipToBounds = false otherwise the dragged cell will be clipped when trying to move out of the collection view's bounds
Related
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
For an example if i have multiple images on views in random position. Images are selected by drawing lines on it and group images by using gestures. Right now i can able to show images randomly but not able group images by drawing line on it.
Here screenshot 1 is result which i have getting now:
screenshot 2 which is exactly what i want.
For what you are trying to do I would start by creating a custom view (a subclass) that is able to handle gestures and draw paths.
For gesture recognizer I would use UIPanGestureRecognizer. What you do is have an array of points where the gesture was handled which are then used to draw the path:
private var currentPathPoints: [CGPoint] = []
#objc private func onPan(_ sender: UIGestureRecognizer) {
switch sender.state {
case .began: currentPathPoints = [sender.location(in: self)] // Reset current array by only showing a current point. User just started his path
case .changed: currentPathPoints.append(sender.location(in: self)) // Just append a new point
case .cancelled, .ended: endPath() // Will need to report that user lifted his finger
default: break // These extra states are her just to annoy us
}
}
So if this method is used by pan gesture recognizer it should track points where user is dragging. Now these are best drawn in drawRect which needs to be overridden in your view like:
override func draw(_ rect: CGRect) {
super.draw(rect)
// Generate path
let path: UIBezierPath = {
let path = UIBezierPath()
var pointsToDistribute = currentPathPoints
if let first = pointsToDistribute.first {
path.move(to: first)
pointsToDistribute.remove(at: 0)
}
pointsToDistribute.forEach { point in
path.addLine(to: point)
}
return path
}()
let color = UIColor.red // TODO: user your true color
color.setStroke()
path.lineWidth = 3.0
path.stroke()
}
Now this method will be called when you invalidate drawing by calling setNeedsDisplay. In your case that is best done on setter of your path points:
private var currentPathPoints: [CGPoint] = [] {
didSet {
setNeedsDisplay()
}
}
Since this view should be as an overlay to your whole scene you need some way to reporting the events back. A delegate procedure should be created that implements methods like:
func endPath() {
delegate?.myLineView(self, finishedPath: currentPathPoints)
}
So now if view controller is a delegate it can check which image views were selected within the path. For first version it should be enough to just check if any of the points is within any of the image views:
func myLineView(sender: MyLineView, finishedPath pathPoints: [CGPoint]) {
let convertedPoints: [CGPoint] = pathPoints.map { sender.convert($0, to: viewThatContainsImages) }
let imageViewsHitByPath = allImageViews.filter { imageView in
return convertedPoints.contains(where: { imageView.frame.contains($0) })
}
// Use imageViewsHitByPath
}
Now after this basic implementation you can start playing by drawing a nicer line (curved) and with cases where you don't check if a point is inside image view but rather if a line between any 2 neighbor points intersects your image view.
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 am trying to create a custom TableViewController with a custom UITableViewCell class. I need to be able to drag and drop a photo inside the cell to a panel at the bottom of the view. I have tried a few ways to do this, but I am running into a couple of problems and haven't found a complete solution online:
First of all, after dragging and dropping I would like to return the UIImage view to the cell it came from.
Secondly, I am not able to cast a 'view' to my custom UITableViewClass outside the 'cellForRowAtIndexPath' method (so I will have access to the outlets I have set up.)
Here is my relevant code:
override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
let thisCell:MealPlanTableViewCell = tableView.dequeueReusableCellWithIdentifier("mealPlanCell", forIndexPath: indexPath) as! MealPlanTableViewCell
let meal = mealPlanElementArray[indexPath.row]
thisCell.postTextLabel.text = meal.2
thisCell.foodImageView.image = meal.4
let gesture = UIPanGestureRecognizer(target: self, action: Selector("wasDragged:"))
thisCell.foodImageView.addGestureRecognizer(gesture)
thisCell.foodImageView.userInteractionEnabled = true
return thisCell
}
func wasDragged(gesture: UIPanGestureRecognizer) {
if calendarIsUp == calendarIsUp {
let meal = gesture.view! as! UIImageView
let sview = gesture.view!.superview!.superview!
// CAN'T DO THE FOLLOWING -- CAN'T CAST TO CUSTOM CELL
let mptvc:MealPlanTableViewCell = gesture.view!.superview!.superview! as! MealPlanTableViewCell
if beginningDrag == true
{
beginningDrag = false
// Move
meal.superview?.superview?.superview?.superview?.superview?.superview?.superview?.addSubview(meal)
beforeDragX = (meal.center.x)
beforeDragY = (meal.bounds.maxY)
}
let translation = gesture.translationInView(self.view)
meal.center = CGPoint(x: beforeDragX + translation.x, y: beforeDragY + translation.y)
if gesture.state == UIGestureRecognizerState.Ended {
beginningDrag = true
// NEED TO ADD BACK TO custom UITableViewCell class.
sview.addSubview(meal)
meal.center = CGPoint(x: beforeDragX, y: beforeDragY)
}
}
Thanks for the help...
after dragging and dropping I would like to return the UIImage view to
the cell it came from.
Use the transform property to manipulate the position of the
foodImageView.
When the UIGestureRecognizer's state == UIGestureRecognizerState.Ended, instantiate a new UIImageView and assign the foodImageView image to the new UIImageView's image property.
Add the new UIImageView to the desired view.
Set the foodImageView's transform to CGAffineTransformIdentity and animate it.
I'll leave the coding up to you as a learning exercise. For reference, here's a good explanation on CGAffineTransform: Demystifying CGAffineTransform.
I am not able to cast a 'view' to my custom UITableViewClass outside
the 'cellForRowAtIndexPath' method (so I will have access to the
outlets I have set up.)
Instead of adding the UIPanGestureRecognizer to the foodImageView add it to the custom UITableViewCell. Then, in your wasDragged function, access the UIGestureRecognizer.view, which is the custom UITableViewCell, and then access foodImageView property. This will eliminate the need to access the superview property at all. Accessing the superview property on UI elements in the UIKit framework is never a good idea because Apple can decide to change the structure of the view hierarchy whenever they wish. Ultimately, you are essentially guessing at which view you're going to be using and causing your future self headaches.
Ex.
func wasDragged(gesture: UIPanGestureRecognizer)
{
if calendarIsUp == calendarIsUp
{
let cell = gesture.view! as! MealPlanTableViewCell
if beginningDrag
{
beginningDrag = false
beforeDragX = cell.foodImageView.center.x
beforeDragY = cell.foodImageView.bounds.maxY
// Move
/*
I have no idea what view this is so I don't know what to change it to.
*/
cell.foodImageView.superview?.superview?.superview?.superview?.superview?.superview?.superview?.addSubview(cell.foodImageView)
}
let translation = gesture.translationInView(self.view)
cell.foodImageView.center = CGPoint(x: beforeDragX + translation.x, y: beforeDragY + translation.y)
if gesture.state == UIGestureRecognizerState.Ended
{
beginningDrag = true
// NEED TO ADD BACK TO custom UITableViewCell class.
cell.contentView.addSubview(cell.foodImageView)
cell.foodImageView.center = CGPoint(x: beforeDragX, y: beforeDragY)
}
}
}
Good morning everyone,
I am a newbie Swift developer and I am facing the following problem implementing an exercise I am dealing with.
I have a collection view with collection cells displaying images I have imported in XCODE; when I tap with the finger on the screen I would like to replace the image currently being display with another one that i have also imported, and animate this replacement.
I am implementing the UITapLongPressureRecognizer method but i am getting confused on which state to implement for the recognizer, just to replace the first image view with the one I want to be shown when I tap the screen to scroll up-down.
As you can see from the code below the two recognizer I think should be more appropriate to be implemented are the "Begin" and "Ended".
My problem is that when the state .Begin starts I don't know how to animate the replacement of one image view with another and so when the state is .Ended I don't know how to replace the second image with the first one and animate the replacement (I want it to be like for example a Modal segue with "Cross Dissolve" transition).
Thank you in advance for your kindness and patience.
class MainViewController: UICollectionViewController {
var fashionArray = [Fashion]()
private var selectedIndexPath: NSIndexPath?
override func viewDidLoad() {
super.viewDidLoad()
selectedIndexPath = NSIndexPath()
//Register the cell
let collectionViewCellNIB = UINib(nibName: "CollectionViewCell", bundle: nil)
self.collectionView!.registerNib(collectionViewCellNIB, forCellWithReuseIdentifier: reuseIdentifier)
//Configure the size of the image according to the device size
let layout = collectionViewLayout as! UICollectionViewFlowLayout
let bounds = UIScreen.mainScreen().bounds
let width = bounds.size.width
let height = bounds.size.height
layout.itemSize = CGSize(width: width, height: height)
let longPressRecogn = UILongPressGestureRecognizer(target: self, action: "handleLongPress:")
collectionView!.addGestureRecognizer(longPressRecogn)
}
func handleLongPress(recognizer: UILongPressGestureRecognizer){
var cell: CollectionViewCell!
let location = recognizer.locationInView(collectionView)
let indexPath = collectionView!.indexPathForItemAtPoint(location)
if let indexPath = indexPath {
cell = collectionView!.cellForItemAtIndexPath(indexPath) as! CollectionViewCell
}
switch recognizer.state {
case .Began:
cell.screenTapped = false
case .Ended:
cell.screenTapped = false
default:
println("")
}
}
First of all, I suggest you to use UITapGestureRecognizer instead of long press. Because, as far as I understand, you only tap once instead of pressing for a time.
let tapRecognizer = UITapGestureRecognizer(target: self, action:Selector("tapped:"))
collectionView.addGestureRecognizer(tapRecognizer)
And when the user tapped, you can use UIView animations to change the image. You can check the Example II from the following link to get insight about animations.
http://www.appcoda.com/view-animation-in-swift/