I have the folling UIView with a gesture recognizer that calls a function like so:
let cardView: UIView = {
let cv = UIView()
cv.backgroundColor = .red
cv.translatesAutoresizingMaskIntoConstraints = false
cv.layer.cornerRadius = 5
cv.layer.masksToBounds = true
cv.isUserInteractionEnabled = true
cv.addGestureRecognizer(UIPanGestureRecognizer(target: self, action: #selector(handlePan)))
return cv
}()
and the implementation of the gesture recognizer like this:
// pan functionality
func handlePan(gesture: UIPanGestureRecognizer) {
let translation = gesture.translation(in: self.view)
if let card = gesture.view {
card.center = CGPoint(x: card.center.x + translation.x, y: card.center.y + translation.y)
}
}
However, when I try to move the card in the view controller nothing happens.
Any and all help is greatly appreciated.
Related
I am trying to implement circles attached to each other like in Apple's Music App via UIDynamicAnimator. I need to attach circles to each other and to view center. I was trying to implement this via UIAttachmentBehavior, but seems to it's not supporting multiple attachments. In result, circles overlaps on each other :)
let attachment = UIAttachmentBehavior(item: circle, attachedToAnchor: CGPoint(x: view.center.x, y: view.center.y))
attachment.length = 10
animator?.addBehavior(attachment)
let push = UIPushBehavior(items: [circle], mode: .continuous)
collision.addItem(circle)
animator?.addBehavior(push)
What I am doing wrong?
I don't think the apple music genre picker thing uses UIAttachmentBehavior which is closer to attaching two views with a pole or a rope. But, it seems like the problem you're experiencing might be that all of the views are added at the same location which has the effect of placing them on top of each other and with the collision behavior causes them to be essentially be stuck together. One thing to do is to turn on UIDynamicAnimator debugging by calling animator.setValue(true, forKey: "debugEnabled").
For recreating the above circle picker design, I would look into using UIFieldBehavior.springField().
For example:
class ViewController: UIViewController {
lazy var animator: UIDynamicAnimator = {
let animator = UIDynamicAnimator(referenceView: view)
return animator
}()
lazy var collision: UICollisionBehavior = {
let collision = UICollisionBehavior()
collision.collisionMode = .items
return collision
}()
lazy var behavior: UIDynamicItemBehavior = {
let behavior = UIDynamicItemBehavior()
behavior.allowsRotation = false
behavior.elasticity = 0.5
behavior.resistance = 5.0
behavior.density = 0.01
return behavior
}()
lazy var gravity: UIFieldBehavior = {
let gravity = UIFieldBehavior.springField()
gravity.strength = 0.008
return gravity
}()
lazy var panGesture: UIPanGestureRecognizer = {
let panGesture = UIPanGestureRecognizer(target: self, action: #selector(self.didPan(_:)))
return panGesture
}()
var snaps = [UISnapBehavior]()
var circles = [CircleView]()
override func viewDidLoad() {
super.viewDidLoad()
view.addGestureRecognizer(panGesture)
animator.setValue(true, forKey: "debugEnabled")
addCircles()
addBehaviors()
}
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
gravity.position = view.center
snaps.forEach {
$0.snapPoint = view.center
}
}
func addCircles() {
(1...30).forEach { index in
let xIndex = index % 2
let yIndex: Int = index / 3
let circle = CircleView(frame: CGRect(origin: CGPoint(x: xIndex == 0 ? CGFloat.random(in: (-300.0 ... -100)) : CGFloat.random(in: (500 ... 800)), y: CGFloat(yIndex) * 200.0), size: CGSize(width: 100, height: 100)))
circle.backgroundColor = .red
circle.text = "\(index)"
circle.textAlignment = .center
view.addSubview(circle)
gravity.addItem(circle)
collision.addItem(circle)
behavior.addItem(circle)
circles.append(circle)
}
}
func addBehaviors() {
animator.addBehavior(collision)
animator.addBehavior(behavior)
animator.addBehavior(gravity)
}
#objc
private func didPan(_ sender: UIPanGestureRecognizer) {
let translation = sender.translation(in: sender.view)
switch sender.state {
case .began:
animator.removeAllBehaviors()
fallthrough
case .changed:
circles.forEach { $0.center = CGPoint(x: $0.center.x + translation.x, y: $0.center.y + translation.y)}
case .possible, .cancelled, .failed:
break
case .ended:
circles.forEach { $0.center = CGPoint(x: $0.center.x + translation.x, y: $0.center.y + translation.y)}
addBehaviors()
#unknown default:
break
}
sender.setTranslation(.zero, in: sender.view)
}
}
final class CircleView: UILabel {
override var collisionBoundsType: UIDynamicItemCollisionBoundsType {
return .ellipse
}
override func layoutSubviews() {
super.layoutSubviews()
layer.cornerRadius = bounds.height * 0.5
layer.masksToBounds = true
}
}
For more information I would watch What's New in UIKit Dynamics and Visual Effects from WWDC 2015
I am trying to collide two UIViews each other for using pan gesture. Now i can able to drag one view but when dragging view to next view its collide each other. It goes behind other view.
Here is the screenshot result:
Here is the code I used to drag, pan and collide of physics property.
import UIKit
class ViewController: UIViewController {
var greenSquare: UIView?
var redSquare: UIView?
var animator: UIDynamicAnimator?
var snap: UISnapBehavior!
var panGesture = UIPanGestureRecognizer()
#IBAction func pan(_ sender: UIPanGestureRecognizer) {
let tapPoint: CGPoint = sender.location(in: view)
if (snap != nil) {
animator?.removeBehavior(snap)
}
snap = UISnapBehavior(item: greenSquare!, snapTo: tapPoint)
animator?.addBehavior(snap)
}
override func viewDidLoad() {
super.viewDidLoad()
var dimen = CGRect(x: 25, y: 25, width: 120, height: 120)
greenSquare = UIView(frame: dimen)
greenSquare?.backgroundColor = UIColor.green
dimen = CGRect(x: 130, y: 25, width: 100, height: 100)
redSquare = UIView(frame: dimen)
redSquare?.backgroundColor = UIColor.red
self.view.addSubview(greenSquare!)
self.view.addSubview(redSquare!)
animator = UIDynamicAnimator(referenceView: self.view)
let gravity = UIGravityBehavior(items: [greenSquare!, redSquare!])
let direction = CGVector(dx: 0.0, dy: 1.0)
gravity.gravityDirection = direction
let boundries = UICollisionBehavior(items: [greenSquare!, redSquare!])
boundries.translatesReferenceBoundsIntoBoundary = true
let bounce = UIDynamicItemBehavior(items: [greenSquare!, redSquare!])
bounce.elasticity = 0.5
animator?.addBehavior(bounce)
animator?.addBehavior(boundries)
animator?.addBehavior(gravity)
panGesture = UIPanGestureRecognizer(target: self, action:#selector(draggedView(sender:)))
greenSquare?.isUserInteractionEnabled = true
greenSquare?.addGestureRecognizer(panGesture)
}
#objc func draggedView(sender:UIPanGestureRecognizer){
let translation = sender.translation(in: self.view)
greenSquare?.center = CGPoint(x: (greenSquare?.center.x)! + translation.x, y: (greenSquare?.center.y)! + translation.y)
sender.setTranslation(CGPoint.zero, in: self.view)
}
}//class`
Anyone can help me out this.
The issue is that the animator only recognizes the collision at the origin of the greenSquare. In this case it is at the top of the screen. You can update the collision location on the animator after you move the greenSquare. Add animator?.updateItem(usingCurrentState: greenSquare!)
to the end of the draggedView method. You do not need to use UISnapBehavior for this so you can remove the IBAction func pan method at the top of your code. The updateItem(usingCurrentState:) call will reset where the collision barrier is when you are moving the view manually and it is not being done by the physics engine.
I am trying to add gesture on a dynamically created label but its not working this the code but its not working.
what am i doing wrong ?
let label = UILabel(frame: CGRect(x: 0, y: 0, width: 200, height: 21))
label.center = CGPoint(x: 160, y: 285)
label.textAlignment = .center
label.text = field.text
label.isZoomEnabled = true;
label.minFontSize = 10;
label.maxFontSize = 80;
label.adjustsFontSizeToFitWidth = true;
label.setNeedsLayout()
label.isUserInteractionEnabled = true
let panRecognizer = UITapGestureRecognizer(target: self, action:Selector(("handlePan:")))
let rotateRecognizer = UITapGestureRecognizer(target: self, action:Selector(("handleRotate:")))
panRecognizer.delegate = self
rotateRecognizer.delegate = self
label.addGestureRecognizer(panRecognizer)
label.addGestureRecognizer(rotateRecognizer)
self.view.addSubview(label);
self.imagePicked.addSubview(label)
#IBAction func handlePan(recognizer:UIPanGestureRecognizer) {
let translation = recognizer.translation(in: self.view)
if let view = recognizer.view {
view.center = CGPoint(x:view.center.x + translation.x,
y:view.center.y + translation.y)
}
recognizer.setTranslation(CGPoint(x:0,y:0), in: self.view)
}
#IBAction func handleRotate(recognizer : UIRotationGestureRecognizer) {
if let view = recognizer.view {
view.transform = view.transform.rotated(by: recognizer.rotation)
recognizer.rotation = 0
}
}
Thanks In Advance.
You are creating UITapGestureRecognizer but the methods were taking UIPanGestureRecognizer and UIRotationGestureRecognizer. Also changed the selector so the methods are called properly and changed IBActions to methods.
Replace your code with this and it will work fine,
let label = UILabel(frame: CGRect(x: 0, y: 0, width: 200, height: 21))
label.center = CGPoint(x: 160, y: 285)
label.textAlignment = .center
label.text = field.text
label.isZoomEnabled = true;
label.minFontSize = 10;
label.maxFontSize = 80;
label.adjustsFontSizeToFitWidth = true;
label.setNeedsLayout()
label.isUserInteractionEnabled = true
let panRecognizer = UIPanGestureRecognizer(target: self, action:#selector(self.handlePan))
let rotateRecognizer = UIRotationGestureRecognizer(target: self, action:#selector(self.handleRotate))
panRecognizer.delegate = self
rotateRecognizer.delegate = self
label.addGestureRecognizer(panRecognizer)
label.addGestureRecognizer(rotateRecognizer)
self.view.addSubview(label);
self.imagePicked.addSubview(label)
func handlePan(recognizer:UIPanGestureRecognizer) {
let translation = recognizer.translation(in: self.view)
if let view = recognizer.view {
view.center = CGPoint(x:view.center.x + translation.x,
y:view.center.y + translation.y)
}
recognizer.setTranslation(CGPoint(x:0,y:0), in: self.view)
}
func handleRotate(recognizer : UIRotationGestureRecognizer) {
if let view = recognizer.view {
view.transform = view.transform.rotated(by: recognizer.rotation)
recognizer.rotation = 0
}
}
It's the problem of UIlabel's superView.
I assume the imagePicked is an instance of UIImageView, and the default value of UIImageView's isUserInteractionEnabled is flase.
So the imagePicked and all of it's subviews cannot receive touch events.
To fix this problem, enbale the isUserInteractionEnabled property of UIImageView:
self.imagePicked.isUserInteractionEnabled = true;
I have the code below, and need to drag the views so they can be repositioned. However, on drag, the view simply disappears. How can I make the views draggable while on top of the stack view?
Stack View:
let sView = UIStackView()
sView.axis = UILayoutConstraintAxis.Vertical
sView.distribution = .FillEqually
sView.alignment = UIStackViewAlignment.Center
sView.spacing = 15
sView.backgroundColor = UIColor.redColor()
sView.addArrangedSubview(view1)
sView.addArrangedSubview(view2)
sView.addArrangedSubview(view3)
sView.layoutMarginsRelativeArrangement = true
sView.translatesAutoresizingMaskIntoConstraints = false
self.view.addSubview(sView)
sView.centerXAnchor.constraintEqualToAnchor(self.view.centerXAnchor).active = true
sView.centerYAnchor.constraintEqualToAnchor(self.view.centerYAnchor).active = true
The views; view1, view2, and view3 have similar code as below:
let view1 = UIView()
view1.frame = CGRectMake(30, 50, 50, 80)
view1.backgroundColor = UIColor.blueColor()
view1.layer.cornerRadius = 6
let gesture = UIPanGestureRecognizer(target: self, action: Selector("draggedView:"))
view1.addGestureRecognizer(gesture)
view1.userInteractionEnabled = true
view1.tag = 1
view1.heightAnchor.constraintEqualToConstant(85).active = true
view1.widthAnchor.constraintEqualToConstant(55).active = true
The draggedView function:
func draggedView(gesture: UIPanGestureRecognizer){
let loc = gesture.locationInView(self.view)
let gesturedView = gesture.view
gesturedView!.center = loc
}
Brian,
This code does what I think your looking to do. Obviously you need to go thru it carefully and change variable names, but I sure you up to it!
func draggedView(sender: UIPanGestureRecognizer) {
if (sender.state == UIGestureRecognizerState.Began) {
self.source = editorSVB!.arrangedSubviews.indexOf(sender.view!)! as Int
}
if (sender.state == UIGestureRecognizerState.Changed) {
center = sender.view?.center
let translation = sender.translationInView(sender.view)
center = CGPointMake(center!.x + translation.x, center!.y + translation.y)
sender.view?.center = center!
sender .setTranslation(CGPointZero, inView: sender.view)
}
for blah in self.editorSVB!.arrangedSubviews {
let no = blah.frame.intersect((sender.view?.frame)!)
if (!no.origin.x.isInfinite) {
self.object = editorSVB!.arrangedSubviews.indexOf(blah)! as Int
if (self.object != self.source) {
print("self,object, self.object",self,object, self.source)
self.executable = self.object
}
}
}
}
I am trying to move a UIView on slide up gesture from its initial position to a fixed final position. The image should move with the hand gesture, and not animate independently.
I haven't tried anything as I have no clue where to start, which gesture class to use.
Finally did it like below.
let gesture = UIPanGestureRecognizer(target: self, action: Selector("wasDragged:"))
slideUpView.addGestureRecognizer(gesture)
slideUpView.userInteractionEnabled = true
gesture.delegate = self
The following function is called when the gesture is detected, (here I am restricting the view to have a maximum centre.y of 555, & I'm resetting back to 554 when the view moves past this point)
func wasDragged(gestureRecognizer: UIPanGestureRecognizer) {
if gestureRecognizer.state == UIGestureRecognizerState.Began || gestureRecognizer.state == UIGestureRecognizerState.Changed {
let translation = gestureRecognizer.translationInView(self.view)
print(gestureRecognizer.view!.center.y)
if(gestureRecognizer.view!.center.y < 555) {
gestureRecognizer.view!.center = CGPointMake(gestureRecognizer.view!.center.x, gestureRecognizer.view!.center.y + translation.y)
}else {
gestureRecognizer.view!.center = CGPointMake(gestureRecognizer.view!.center.x, 554)
}
gestureRecognizer.setTranslation(CGPointMake(0,0), inView: self.view)
}
}
You probably want to use a UIPanGestureRecognizer.
let gesture = UIPanGestureRecognizer(target: self, action: Selector("wasDragged:"))
customView.addGestureRecognizer(gesture)
gesture.delegate = self
And to drag the object only along the y-axis:
func wasDragged(gesture: UIPanGestureRecognizer) {
let translation = gesture.translationInView(self.view)
// Use translation.y to change the position of your customView, e.g.
customView.center.y = translation.y // Customize this.
}
Swift 4:
#objc func wasDragged(_ gestureRecognizer: UIPanGestureRecognizer) {
if gestureRecognizer.state == UIGestureRecognizer.State.began || gestureRecognizer.state == UIGestureRecognizer.State.changed {
let translation = gestureRecognizer.translation(in: self.view)
print(gestureRecognizer.view!.center.y)
if(gestureRecognizer.view!.center.y < 555) {
gestureRecognizer.view!.center = CGPoint(x: gestureRecognizer.view!.center.x, y: gestureRecognizer.view!.center.y + translation.y)
}else {
gestureRecognizer.view!.center = CGPoint(x:gestureRecognizer.view!.center.x, y:554)
}
gestureRecognizer.setTranslation(CGPoint(x: 0, y: 0), in: self.view)
}
}
Call
let gesture = UIPanGestureRecognizer(target: self, action: self.wasDragged(gestureRecognizer:))
customView.addGestureRecognizer(gesture)
gesture.delegate = self
Update for Swift 3.x
When assigning the selector, the syntax has changed and now requires #selector
let gesture = UIPanGestureRecognizer(target: self, action: #selector(navViewDragged(gesture:)))
self.navLayoutView.addGestureRecognizer(gesture)
self.navLayoutView.isUserInteractionEnabled = true
gesture.delegate = self
Function implementation:
func navViewDragged(gesture: UIPanGestureRecognizer){
//Code here
}
Move view anywhere in Swift 3
let panGesture = UIPanGestureRecognizer(target: self, action: #selector(dragged(gestureRecognizer:)))
demoView.isUserInteractionEnabled = true
demoView.addGestureRecognizer(panGesture)
Function
#objc func dragged(gestureRecognizer: UIPanGestureRecognizer) {
if gestureRecognizer.state == UIGestureRecognizerState.began || gestureRecognizer.state == UIGestureRecognizerState.changed {
let translation = gestureRecognizer.translation(in: self.view)
gestureRecognizer.view!.center = CGPoint(x: gestureRecognizer.view!.center.x + translation.x, y: gestureRecognizer.view!.center.y + translation.y)
gestureRecognizer.setTranslation(CGPoint(x: 0, y: 0), in: self.view)
}
}
This is how you really do it like the news view in the Stocks app
First add 2 constraints in Storyboard to the sliding view, one for it's state when it's fully opened and one for when it's closed. Don't forget to leave one of the constraints disabled / not installed so that your view will look opened or closed when the scene is reached.
Reference them in your code
#IBOutlet weak var optionsOpenedConstraint: NSLayoutConstraint!
#IBOutlet weak var optionsVisiableConstraint: NSLayoutConstraint!
now add the UIPanGestureRecognizer to your view in the viewDidLoad function.
let gesture = UIPanGestureRecognizer(target: self, action: #selector(type(of: self).wasDragged(gestureRecognizer:)))
optionsView.addGestureRecognizer(gesture)
finally add this callback and 2 functions:
#objc func wasDragged(gestureRecognizer: UIPanGestureRecognizer) {
let distanceFromBottom = screenHeight - gestureRecognizer.view!.center.y
if gestureRecognizer.state == UIGestureRecognizer.State.began || gestureRecognizer.state == UIGestureRecognizer.State.changed {
optionsOpenedConstraint.isActive = false
optionsVisiableConstraint.isActive = false
let translation = gestureRecognizer.translation(in: self.view)
if((distanceFromBottom - translation.y) < 100) {
gestureRecognizer.view!.center = CGPoint(x: gestureRecognizer.view!.center.x, y: gestureRecognizer.view!.center.y + translation.y)
gestureRecognizer.setTranslation(CGPoint(x: 0, y: 0), in: self.view)
}
}
if gestureRecognizer.state == UIGestureRecognizer.State.ended{
if distanceFromBottom > 6{
openOptionsPanel()
}else{
closeOptionsPanel()
}
}
}
func openOptionsPanel(){
optionsOpenedConstraint.isActive = true
optionsVisiableConstraint.isActive = false
UIView.animate(withDuration: 0.5) {
self.view.layoutIfNeeded()
}
}
func closeOptionsPanel(){
optionsOpenedConstraint.isActive = false
optionsVisiableConstraint.isActive = true
UIView.animate(withDuration: 0.5) {
self.view.layoutIfNeeded()
}
}
and voalá
#IBAction func handlePanGesture(_ recognizer: UIPanGestureRecognizer) {
if MainView.bounds.contains(mainImage.frame) {
let recognizerCenter = recognizer.location(in: MainView)
mainImage.center = recognizerCenter
}
if MainView.bounds.intersection(mainImage.frame).width > 50 && MainView.bounds.intersection(mainImage.frame).height > 0 {
let recognizerCenter = recognizer.location(in: MainView)
print(recognizerCenter)
mainImage.center = recognizerCenter
}
}
#IBAction func handlePinchGesture(_ recognizer: UIPinchGestureRecognizer) {
mainImage.transform = mainImage.transform.scaledBy(x: recognizer.scale, y: recognizer.scale)
recognizer.scale = 1.0
}
#IBAction func handleRotateGesture(_ recognizer: UIRotationGestureRecognizer) {
mainImage.transform = mainImage.transform.rotated(by: recognizer.rotation)
recognizer.rotation = 0.0
}