I'm trying to rotate an ImageView I have using CGAffineTransform. Basically, what I want to happen is that every time the x-coordinate increases, I want the ImageView to rotate a little more.
I did the math and I want the ImageView to rotate 1.6º every 1 x-coordinate. This is what I have so far in the gesture recognizer function:
#objc func personDragRecognizer(recognizer: UIPanGestureRecognizer) {
let rotationAngle: CGFloat = 1.6
let translation = recognizer.translation(in: rView)
if let view = recognizer.view {
view.center = CGPoint(x:view.center.x + translation.x, y:view.center.y + translation.y)
view.transform = CGAffineTransform(rotationAngle: rotationAngle)
}
recognizer.setTranslation(CGPoint.zero, in: rView)
if recognizer.view?.center == CGPoint(x: 197.5, y: 232.5) {
PlaygroundPage.current.liveView = eeView
}
The problem with this is that it rotates to 576º bc that's 1.6 times 360. And it doesn't keep on rotating it only does it once. I want it to continually rotate.
If anyone could help the help would be immensely appreciated. Thanks so so much in advance!!
Cheers,
Theo
I'm not sure if I fully understood the feature you're trying to implement. Here is a sample for UIView subclass responsible for image rotation.
class CustomView: UIView {
override init(frame: CGRect) {
super.init(frame: frame)
let panGR = UIPanGestureRecognizer(target: self, action: #selector(panGestureDetected(sender:)))
self.gestureRecognizers = [panGR]
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
var gestureBeginning: CGFloat = 0.0
func panGestureDetected(sender: UIPanGestureRecognizer) {
guard sender.numberOfTouches > 0 else { return }
let touchPoint = sender.location(ofTouch: 0, in: self)
switch sender.state {
case .began:
gestureBeginning = touchPoint.x
print("gestureBeginning: \(gestureBeginning)")
case .changed:
let progress = touchPoint.x - gestureBeginning
print("progress: \(progress)")
let rotationAngle: CGFloat = 1.6 * progress
let view = self.subviews[0]
let rads = rotationAngle * .pi / 180
view.transform = CGAffineTransform(rotationAngle: rads)
default:
break
}
}
}
To run it on a playground:
let imageView = UIImageView(image: #imageLiteral(resourceName: "image.png"))
imageView.frame = CGRect(origin: CGPoint(x: 50.0, y: 50.0), size: CGSize(width: 150.0, height: 150.0))
let containerView = CustomView(frame: CGRect(origin: .zero, size: CGSize(width: 250.0, height: 250.0)))
containerView.addSubview(imageView)
PlaygroundPage.current.liveView = containerView
PlaygroundPage.current.needsIndefiniteExecution = true
Related
I have mocked up a simple example of what I am trying to accomplish:
A ViewController contains 4 "drop zone" UIImageViews (e.g. dropZone1). A 5th UIImageView (playerCard) can be dragged and dropped onto any of the drop zones, but nowhere else.
I cannot figure out the way to determine which of the 4 drop zones is where the user has dragged and dropped the playerCard.
My thought was to set some sort of variable in dropInteraction canHandle and then use that in dropInteraction performDrop to take the appropriate action. But I can't figure out how to do it.
class ViewController: UIViewController {
let bounds = UIScreen.main.bounds
let imageViewWidth: CGFloat = 100
let imageViewHeight: CGFloat = 200
let inset: CGFloat = 40
var arrayDropZones = [DropZoneCard]()
var initialFrame: CGRect {
get {
return CGRect(x: bounds.width - imageViewWidth,
y: bounds.height - imageViewHeight,
width: imageViewWidth,
height: imageViewHeight
)
}
}
override func viewDidLoad() {
super.viewDidLoad()
addDropZones()
addNewCard()
}
}
extension ViewController {
func addDropZones() {
let dropZone1 = getDropZoneCard()
dropZone1.frame = CGRect(x: inset, y: inset, width: imageViewWidth, height: imageViewHeight)
let dropZone2 = getDropZoneCard()
let x = bounds.width - imageViewWidth - inset
dropZone2.frame = CGRect(x: x, y: inset, width: imageViewWidth, height: imageViewHeight)
let dropZone3 = getDropZoneCard()
let y = inset + imageViewHeight + inset
dropZone3.frame = CGRect(x: inset, y: y, width: imageViewWidth, height: imageViewHeight)
let dropZone4 = getDropZoneCard()
dropZone4.frame = CGRect(x: x, y: y, width: imageViewWidth, height: imageViewHeight)
[dropZone1, dropZone2, dropZone3, dropZone4].forEach {
view.addSubview($0)
self.arrayDropZones.append($0)
}
}
func getNewCard() -> UIImageView {
let imageView = UIImageView()
imageView.isUserInteractionEnabled = true
imageView.backgroundColor = .green
imageView.frame = initialFrame
let panGesture = UIPanGestureRecognizer(target: self, action:(#selector(handleGesture(_:))))
imageView.addGestureRecognizer(panGesture)
return imageView
}
func getDropZoneCard() -> DropZoneCard {
let dropZone = DropZoneCard()
dropZone.isUserInteractionEnabled = true
dropZone.backgroundColor = .yellow
return dropZone
}
func addNewCard() {
let imageView = getNewCard()
view.addSubview(imageView)
}
#objc func handleGesture(_ 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)
if recognizer.state == .ended {
let point = view.center
for dropZone in arrayDropZones {
if dropZone.frame.contains(point) {
dropZone.append(card: view)
addNewCard()
return
}
}
view.frame = initialFrame
}
}
recognizer.setTranslation(.zero, in: view)
}
}
class DropZoneCard: UIImageView {
private(set) var arrayCards = [UIView]()
func append(card: UIView) {
arrayCards.append(card)
card.isUserInteractionEnabled = false
card.frame = frame
}
}
Let's say that I have:
An UIImageView called fox
A parent ImageView called fence
Master UIView embedded in ViewControllers by default
Now in other words, I want the fox to move only inside it's fence
In my viewDidLoad():
override func viewDidLoad() {
super.viewDidLoad()
view.addSubview(fence)
fence.addSubview(fox)
}
Now this part works fine, I figured to move the fox by subclassing UIImageView with a little bit of modifications:
class DraggableImageView: UIImageView {
var dragStartPositionRelativeToCenter : CGPoint?
override init(image: UIImage!) {
super.init(image: image)
self.isUserInteractionEnabled = true
addGestureRecognizer(UIPanGestureRecognizer(target: self, action: #selector(handlePan(nizer:))))
layer.shadowColor = UIColor.black.cgColor
layer.shadowOffset = CGSize(width: 0, height: 3)
layer.shadowOpacity = 0.5
layer.shadowRadius = 2
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
#objc func handlePan(nizer: UIPanGestureRecognizer!) {
if nizer.state == UIGestureRecognizer.State.began {
let locationInView = nizer.location(in: superview)
dragStartPositionRelativeToCenter = CGPoint(x: locationInView.x - center.x, y: locationInView.y - center.y)
layer.shadowOffset = CGSize(width: 0, height: 20)
layer.shadowOpacity = 0.3
layer.shadowRadius = 6
return
}
if nizer.state == UIGestureRecognizer.State.ended {
dragStartPositionRelativeToCenter = nil
layer.shadowOffset = CGSize(width: 0, height: 3)
layer.shadowOpacity = 0.5
layer.shadowRadius = 2
return
}
let locationInView = nizer.location(in: superview)
UIView.animate(withDuration: 0.1) {
self.center = CGPoint(x: locationInView.x - self.dragStartPositionRelativeToCenter!.x,
y: locationInView.y - self.dragStartPositionRelativeToCenter!.y)
}
}}
Now I can drag the fox object anywhere i like, but; what if I wanted to only move the fox inside the fence object?, since it's a subview, I think it's possible.
In order to keep the image view inside its parent, I added a check before you update the center of the view that makes sure that the views frame will be in the parents frame. The center is only updated if the update would keep the view within its parent's frame.
I also updated the pan handler to use the translation (similar to the example in the pan gesture documentation) as opposed to the locationInView.
This makes the drag behave better.
I've tested this and I believe it behaves in the way you desire. Hope this helps:
#objc func handlePan(nizer: UIPanGestureRecognizer!) {
if nizer.state == UIGestureRecognizer.State.began {
dragStartPositionRelativeToCenter = self.center
layer.shadowOffset = CGSize(width: 0, height: 20)
layer.shadowOpacity = 0.3
layer.shadowRadius = 6
return
}
if nizer.state == UIGestureRecognizer.State.ended {
dragStartPositionRelativeToCenter = nil
layer.shadowOffset = CGSize(width: 0, height: 3)
layer.shadowOpacity = 0.5
layer.shadowRadius = 2
return
}
if let initialCenter = dragStartPositionRelativeToCenter {
let translation = nizer.translation(in: self.superview)
let newCenter = CGPoint(x: initialCenter.x + translation.x, y: initialCenter.y + translation.y)
if frameContainsFrameFromCenter(containingFrame: superview!.frame, containedFrame: self.frame, center: newCenter) {
UIView.animate(withDuration: 0.1) {
self.center = newCenter
}
}
}
}
func frameContainsFrameFromCenter(containingFrame: CGRect, containedFrame: CGRect, center: CGPoint) -> Bool {
let leftMargin = containedFrame.width / 2
let topMargin = containedFrame.height / 2
let testFrame = CGRect(
x: leftMargin,
y: topMargin,
width: containingFrame.width - (2*leftMargin),
height: containingFrame.height - (2*topMargin)
)
return testFrame.contains(center)
}
I have a View, inside that I am adding a Label then I tried to set boundary for moving Label using PanGesture. Below is my code:
#objc func handlePan(_ gestureRecognizer: UIPanGestureRecognizer) {
if gestureRecognizer.state == .began || gestureRecognizer.state == .changed {
let translation = gestureRecognizer.translation(in: self)
if let view = gestureRecognizer.view {
if (view.frame.origin.x + translation.x >= 0) && (view.frame.origin.y + translation.y >= 0) && (view.frame.origin.x + translation.x <= view.frame.width) && (view.frame.origin.y + translation.y <= view.frame.height)
{
view.center = CGPoint(x:view.center.x + translation.x,
y:view.center.y + translation.y)
}
}
gestureRecognizer.setTranslation(CGPoint.zero, in: self)
}
}
I took the reference of this answer : https://stackoverflow.com/a/49008808/9970928
But it does not work, can anyone tell what I am missing in the condition?
The code is not most intuitive but assuming everything else works the problem is that it only goes off the bounds on right and bottom. Look at your condition with:
(view.frame.origin.x + translation.x <= view.frame.width)
(view.frame.origin.y + translation.y <= view.frame.height)
So it says that the origin may not be greater than size of bounds what you want to do is check the maximum values of the inner view:
(view.frame.maxX + translation.x <= view.frame.width)
(view.frame.maxY + translation.y <= view.frame.height)
But this procedure in general may produce issues. Imagine that user swipes very quickly rightwards. And that the maximum center.x could be 100. Current center.x is 50 and user drags it in a single frame to 200. Your condition will fail and your label will stay at 50 instead of 100. I would go with clamping the frame to bounds.
Something like the following should do:
func clampFrame(_ frame: CGRect, inBounds bounds: CGRect) -> CGRect {
let center: CGPoint = CGPoint(x: max(bounds.minX + frame.width*0.5, min(frame.midX, bounds.maxX - frame.width*0.5)),
y: max(bounds.minY + frame.height*0.5, min(frame.midY, bounds.maxY - frame.height*0.5)))
return CGRect(x: center.x-frame.width*0.5, y: center.y-frame.height*0.5, width: frame.width, height: frame.height)
}
func moveFrame(_ frame: CGRect, by translation: CGPoint, constrainedTo bounds: CGRect) -> CGRect {
var newFrame = frame
newFrame.origin.x += translation.x
newFrame.origin.y += translation.y
return clampFrame(newFrame, inBounds: bounds)
}
There may be other issues as well using "translation" procedure. I would go with finding a location in view. Please see the following working example:
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
let myView = MyView(frame: CGRect(x: 100.0, y: 100.0, width: 200.0, height: 200.0))
myView.backgroundColor = UIColor.green
view.addSubview(myView)
let label = UILabel(frame: .zero)
label.backgroundColor = UIColor.blue.withAlphaComponent(0.2)
label.font = UIFont.systemFont(ofSize: 50.0)
label.text = "Hi!"
label.sizeToFit()
myView.addSubview(label)
label.addGestureRecognizer(UIPanGestureRecognizer(target: myView, action: #selector(MyView.handlePan)))
label.isUserInteractionEnabled = true
}
}
class MyView: UIView {
func clampFrame(_ frame: CGRect, inBounds bounds: CGRect) -> CGRect {
let center: CGPoint = CGPoint(x: max(bounds.minX + frame.width*0.5, min(frame.midX, bounds.maxX - frame.width*0.5)),
y: max(bounds.minY + frame.height*0.5, min(frame.midY, bounds.maxY - frame.height*0.5)))
return CGRect(x: center.x-frame.width*0.5, y: center.y-frame.height*0.5, width: frame.width, height: frame.height)
}
func moveFrame(_ frame: CGRect, by translation: CGPoint, constrainedTo bounds: CGRect) -> CGRect {
var newFrame = frame
newFrame.origin.x += translation.x
newFrame.origin.y += translation.y
return clampFrame(newFrame, inBounds: bounds)
}
private var startLocation: CGPoint = .zero
private var startFrame: CGRect = .zero
#objc func handlePan(_ gestureRecognizer: UIPanGestureRecognizer) {
guard let label = gestureRecognizer.view else { return }
if gestureRecognizer.state == .began {
startLocation = gestureRecognizer.location(in: self)
startFrame = label.frame
} else if gestureRecognizer.state == .changed {
let newLocation = gestureRecognizer.location(in: self)
let translation = CGPoint(x: newLocation.x-startLocation.x, y: newLocation.y-startLocation.y)
label.frame = moveFrame(startFrame, by: translation, constrainedTo: self.bounds)
}
}
}
I am trying to create some draggable UIViews that are connected by lines. See image below:
I can create the draggable circles by creating a class that is a subclass of UIView and overriding the draw function
override func draw(_ rect: CGRect) {
let path = UIBezierPath(ovalIn: rect)
let circleColor:UIColor
switch group {
case .forehead:
circleColor = UIColor.red
case .crowsFeetRightEye:
circleColor = UIColor.green
case .crowsFeetLeftEye:
circleColor = UIColor.blue
}
circleColor.setFill()
path.fill()
}
and then add a pan gesture recognizer for the dragging
func initGestureRecognizers() {
let panGR = UIPanGestureRecognizer(target: self, action: #selector(DragPoint.didPan(panGR:)))
addGestureRecognizer(panGR)
}
#objc func didPan(panGR: UIPanGestureRecognizer) {
if panGR.state == .changed {
self.superview!.bringSubview(toFront: self)
let translation = panGR.translation(in: self)
self.center.x += translation.x
self.center.y += translation.y
panGR.setTranslation(CGPoint.zero, in: self)
}
}
However, I am totally stuck on how to go about the connecting lines and parenting the start/end points to its corresponding circle when dragged. Is there anybody who can help or point me in the right direction please?
You want to use CAShapeLayers with UIBezier paths to draw the lines between the circles and then change the paths when the user moves the views.
Here is a playground showing an implementation. You can copy and paste this into a playground to see it in action.
//: A UIKit based Playground for presenting user interface
import UIKit
import PlaygroundSupport
class CircleView : UIView {
var outGoingLine : CAShapeLayer?
var inComingLine : CAShapeLayer?
var inComingCircle : CircleView?
var outGoingCircle : CircleView?
override init(frame: CGRect) {
super.init(frame: frame)
self.layer.cornerRadius = self.frame.size.width / 2
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
func lineTo(circle: CircleView) -> CAShapeLayer {
let path = UIBezierPath()
path.move(to: self.center)
path.addLine(to: circle.center)
let line = CAShapeLayer()
line.path = path.cgPath
line.lineWidth = 5
line.strokeColor = UIColor.red.cgColor
circle.inComingLine = line
outGoingLine = line
outGoingCircle = circle
circle.inComingCircle = self
return line
}
}
class MyViewController : UIViewController {
let circle1 = CircleView(frame: CGRect(x: 100, y: 100, width: 50, height: 50))
let circle2 = CircleView(frame: CGRect(x: 100, y: 200, width: 50, height: 50))
let circle3 = CircleView(frame: CGRect(x: 100, y: 300, width: 50, height: 50))
let circle4 = CircleView(frame: CGRect(x: 100, y: 400, width: 50, height: 50))
override func loadView() {
let view = UIView()
view.backgroundColor = .white
self.view = view
circle1.backgroundColor = .red
view.addSubview(circle1)
circle2.backgroundColor = .red
view.addSubview(circle2)
circle3.backgroundColor = .red
view.addSubview(circle3)
circle4.backgroundColor = .red
view.addSubview(circle4)
circle1.addGestureRecognizer(UIPanGestureRecognizer(target: self, action: #selector(didPan(gesture:))))
circle2.addGestureRecognizer(UIPanGestureRecognizer(target: self, action: #selector(didPan(gesture:))))
circle3.addGestureRecognizer(UIPanGestureRecognizer(target: self, action: #selector(didPan(gesture:))))
circle4.addGestureRecognizer(UIPanGestureRecognizer(target: self, action: #selector(didPan(gesture:))))
view.layer.addSublayer(circle1.lineTo(circle: circle2))
view.layer.addSublayer(circle2.lineTo(circle: circle3))
view.layer.addSublayer(circle3.lineTo(circle: circle4))
}
#objc func didPan(gesture: UIPanGestureRecognizer) {
guard let circle = gesture.view as? CircleView else {
return
}
if (gesture.state == .began) {
circle.center = gesture.location(in: self.view)
}
let newCenter: CGPoint = gesture.location(in: self.view)
let dX = newCenter.x - circle.center.x
let dY = newCenter.y - circle.center.y
circle.center = CGPoint(x: circle.center.x + dX, y: circle.center.y + dY)
if let outGoingCircle = circle.outGoingCircle, let line = circle.outGoingLine, let path = circle.outGoingLine?.path {
let newPath = UIBezierPath(cgPath: path)
newPath.removeAllPoints()
newPath.move(to: circle.center)
newPath.addLine(to: outGoingCircle.center)
line.path = newPath.cgPath
}
if let inComingCircle = circle.inComingCircle, let line = circle.inComingLine, let path = circle.inComingLine?.path {
let newPath = UIBezierPath(cgPath: path)
newPath.removeAllPoints()
newPath.move(to: inComingCircle.center)
newPath.addLine(to: circle.center)
line.path = newPath.cgPath
}
}
}
// Present the view controller in the Live View window
PlaygroundPage.current.liveView = MyViewController()
PlaygroundPage.current.needsIndefiniteExecution = true
I've been trying to create an animation that increases the height of a view without changing the origin (the top left and right edges stay in the same position)
import UIKit
class SampRect: UIView {
var res : CGRect?
override init(frame: CGRect) {
super.init(frame: frame)
self.backgroundColor = UIColor(red: 0.91796875, green: 0.91796875, blue: 0.91796875, alpha: 1)
self.layer.cornerRadius = 5
let recognizer = UITapGestureRecognizer(target: self, action:#selector(SampRect.handleTap(_:)))
self.addGestureRecognizer(recognizer)
}
func handleTap(recognizer : UITapGestureRecognizer) {
let increaseSize = CABasicAnimation(keyPath: "bounds")
increaseSize.delegate = self
increaseSize.duration = 0.4
increaseSize.fromValue = NSValue(CGRect: frame)
res = CGRect(x: self.frame.minX, y: self.frame.minY, width: frame.width, height: self.frame.height + 10)
increaseSize.toValue = NSValue(CGRect: res!)
increaseSize.fillMode = kCAFillModeForwards
increaseSize.removedOnCompletion = false
layer.addAnimation(increaseSize, forKey: "bounds")
}
override func animationDidStop(anim: CAAnimation, finished flag: Bool) {
self.frame = res!
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
}
but the animation increase the size from the middle (push the top edge up and the bottom edge down)
what am I missing?
You can Try this.
let newheight:CGFloat = 100.0
UIView.animateWithDuration(0.5) {
self.frame = CGRectMake(self.frame.origin.x, self.frame.origin.y, self.frame.size.width, newheight)
}