Swift gesture recognizer that accepts a func

2014-06-21 by mookid8000 Leave a comment

While doing iOS programming in Xamarin Studio, I’ve developed a pattern when working with gesture recognizers where I do something like this:

// in the parent view
someView.AddGestureRecognizer(CreateSomeParticularRecognizer(someParameter, anotherParameter));

// and then further down:
UIPanGestureRecognier CreateSomeParticularRecognizer(someParameter, anotherParameter) {
    var almostAlwaysSomeLocation = PointF.Empty;

    return new UIPanGestureRecognizer(nizer => {
        switch(nizer.State) {
            // and then 
        }
    });
}

// in the parent view

someView.AddGestureRecognizer(CreateSomeParticularRecognizer(someParameter, anotherParameter));

// and then further down:

UIPanGestureRecognier CreateSomeParticularRecognizer(someParameter, anotherParameter) {

var almostAlwaysSomeLocation = PointF.Empty;

return new UIPanGestureRecognizer(nizer => {

switch(nizer.State) {

// and then

}

});

}

i.e. my gesture recognizers almost always work with a factory method that returns a recognizer whose callback closes over some local variables – this way, I have the full power of a dedicated class instance, but without the hazzle of defining a new class every time I need a new kind of recognizer.

I’ve messed around with Swift only a few days now, and I’m beginning to miss my closure-based recognizer pattern… but Swift (or, actually, the way Objective C is bridged) has a problem: When you addTarget on a gesture recognizer, it stores the callback – not as a Swift (UIGestureRecognizer) -> () reference, but rather as an Objective C selector-based target. This makes for a very un-Swifty feeling when adding the target, especially because it forces you to point to a method by typing its name in a string suffixed by “:”.

My first attempt towards supporting my beloved recognizer pattern in Swift was an extension on UIGestureRecognizer that would take a (UIGestureRecognizer) -> () as argument, wrap it in a class instance with an invoke method, and then do the addTarget call with that class instance – but then I got hit by the fact that the recognizer stores its callback targets with weak references, which means that my func-wrapping target would be gone by the time it was supposed to be used.

My current implementation seems to work fine though – I’ve extended UIPanGestureRecognizer to be able to be initialized with a (UIPanGestureRecognizer) -> () as its only argument, which it stores and has invoked by adding the invokeTarget method as the recognizer’s target.

This is the full code for the recognizer:

class UIPanGestureRecognizzle : UIPanGestureRecognizer {
    var target : (UIPanGestureRecognizer) -> ()
    
    init(target: (UIPanGestureRecognizer) -> ()) {
        self.target = target

        super.init(target: self, action: "invokeTarget:")
    }
    
    func invokeTarget(nizer: UIPanGestureRecognizer!) {
        target(self)
    }
}

class UIPanGestureRecognizzle : UIPanGestureRecognizer {

var target : (UIPanGestureRecognizer) -> ()

init(target: (UIPanGestureRecognizer) -> ()) {

self.target = target

super.init(target: self, action: "invokeTarget:")

}

func invokeTarget(nizer: UIPanGestureRecognizer!) {

target(self)

}

This way, I can use the recognizer like this:

// in the parent view
someView.addGestureRecognizer(createSomeParticularRecognizer(someParameter, anotherParameter: anotherParameter))

// and then further down
func createSomeParticularRecognizer(someParameter : Int, anotherParameter: String) {
    var almostAlwaysSomeLocation : CGPoint?

    return UIPanGestureRecognizzle({
        (var nizer) -> () in
        switch nizer.state {
            // and then do stuff in here
        }
    })
}

// in the parent view

someView.addGestureRecognizer(createSomeParticularRecognizer(someParameter, anotherParameter: anotherParameter))

// and then further down

func createSomeParticularRecognizer(someParameter : Int, anotherParameter: String) {

var almostAlwaysSomeLocation : CGPoint?

return UIPanGestureRecognizzle({

(var nizer) -> () in

switch nizer.state {

// and then do stuff in here

}

})

}

which IMO makes for a pretty compact yet powerful way of creating focused and cohesive recognizers without a lot of boilerplate.

How to create a draggable cookie with Swift

2014-06-21 by mookid8000 Leave a comment

or: “How I learned about the default value of userInteractionEnabled on UIImageViews”…

So, today I set out to create an iPad app in which my four year old son can drag some cookies around and get to do some light math.

In order to have draggable cookies, I figured the way to go would be to derive a DraggableImageView off of UIImageView that would add to itself a UIPanGestureRecognizer that would make the cookies (or any image, really) draggable.

This was my first attempt:

class DraggableImageView : UIImageView
{
    var dragStartPositionRelativeToCenter : CGPoint?

    init(image: UIImage!) {
        super.init(image: image)

        addGestureRecognizer(UIPanGestureRecognizer(target: self, action: "handlePan:"))
    }
    
    func handlePan(nizer: UIPanGestureRecognizer!) {
        if nizer.state == UIGestureRecognizerState.Began {
            let locationInView = nizer.locationInView(superview)
            dragStartPositionRelativeToCenter = CGPoint(x: locationInView.x - center.x, y: locationInView.y - center.y)
            return
        }
            
        if nizer.state == UIGestureRecognizerState.Ended {
            dragStartPositionRelativeToCenter = nil
            return
        }
            
        let locationInView = nizer.locationInView(superview)
            
        UIView.animateWithDuration(0.1) {
            self.center = CGPoint(x: locationInView.x - self.dragStartPositionRelativeToCenter!.x,
                y: locationInView.y - self.dragStartPositionRelativeToCenter!.y)
        }
    }
}

class DraggableImageView : UIImageView

{

var dragStartPositionRelativeToCenter : CGPoint?

init(image: UIImage!) {

super.init(image: image)

addGestureRecognizer(UIPanGestureRecognizer(target: self, action: "handlePan:"))

}

func handlePan(nizer: UIPanGestureRecognizer!) {

if nizer.state == UIGestureRecognizerState.Began {

let locationInView = nizer.locationInView(superview)

dragStartPositionRelativeToCenter = CGPoint(x: locationInView.x - center.x, y: locationInView.y - center.y)

return

}

if nizer.state == UIGestureRecognizerState.Ended {

dragStartPositionRelativeToCenter = nil

return

}

let locationInView = nizer.locationInView(superview)

UIView.animateWithDuration(0.1) {

self.center = CGPoint(x: locationInView.x - self.dragStartPositionRelativeToCenter!.x,

y: locationInView.y - self.dragStartPositionRelativeToCenter!.y)

}

but for some reason I could not get it to recognize my dragging gestures! So I messed around with the code, coding various (failed) attempts at adding UIButtons and whatnot to my DraggableImageView in order to be able to do at least one single successful addTarget, but I simply could not make it work!

I loaded up some other Swift projects where my buttons worked fine, went back to the failing DraggableImageView, messed around with platform settings and other good stuff, suspecting that it was due to a bug – it is called XCode Beta, after all – and then it hit me:

“New image view objects are configured to disregard user events by default. If you want to handle events in a custom subclass of UIImageView, you must explicitly change the value of the userInteractionEnabled property to YES after initializing the object.”
Source: UIImageView documentation, emphasis mine.

Right! So I went and added self.userInteractionEnabled = true in the middle, which resulted in the full code reading (with nifty hover shadow effect added)

class DraggableImageView : UIImageView
{
    var dragStartPositionRelativeToCenter : CGPoint?

    init(image: UIImage!) {
        super.init(image: image)

        self.userInteractionEnabled = true   //< w00000t!!!1

        addGestureRecognizer(UIPanGestureRecognizer(target: self, action: "handlePan:"))
        
        layer.shadowColor = UIColor.blackColor().CGColor
        layer.shadowOffset = CGSize(width: 0, height: 3)
        layer.shadowOpacity = 0.5
        layer.shadowRadius = 2
    }
    
    func handlePan(nizer: UIPanGestureRecognizer!) {
        if nizer.state == UIGestureRecognizerState.Began {
            let locationInView = nizer.locationInView(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 == UIGestureRecognizerState.Ended {
            dragStartPositionRelativeToCenter = nil

            layer.shadowOffset = CGSize(width: 0, height: 3)
            layer.shadowOpacity = 0.5
            layer.shadowRadius = 2
            
            return
        }
            
        let locationInView = nizer.locationInView(superview)
            
        UIView.animateWithDuration(0.1) {
            self.center = CGPoint(x: locationInView.x - self.dragStartPositionRelativeToCenter!.x,
                y: locationInView.y - self.dragStartPositionRelativeToCenter!.y)
        }
    }
}

class DraggableImageView : UIImageView

{

var dragStartPositionRelativeToCenter : CGPoint?

init(image: UIImage!) {

super.init(image: image)

self.userInteractionEnabled = true //< w00000t!!!1

addGestureRecognizer(UIPanGestureRecognizer(target: self, action: "handlePan:"))

layer.shadowColor = UIColor.blackColor().CGColor

layer.shadowOffset = CGSize(width: 0, height: 3)

layer.shadowOpacity = 0.5

layer.shadowRadius = 2

}

func handlePan(nizer: UIPanGestureRecognizer!) {

if nizer.state == UIGestureRecognizerState.Began {

let locationInView = nizer.locationInView(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 == UIGestureRecognizerState.Ended {

dragStartPositionRelativeToCenter = nil

layer.shadowOffset = CGSize(width: 0, height: 3)

layer.shadowOpacity = 0.5

layer.shadowRadius = 2

return

}

let locationInView = nizer.locationInView(superview)

UIView.animateWithDuration(0.1) {

self.center = CGPoint(x: locationInView.x - self.dragStartPositionRelativeToCenter!.x,

y: locationInView.y - self.dragStartPositionRelativeToCenter!.y)

}

which in turn gave me these delicious draggable cookies…. Yummy!

Playing with UIView shadows in Swift

2014-06-16 by mookid8000 Leave a comment

I saw a demo somewhere, where some dude created different nifty shadow effects by tweaking the shadowPath property of UIView’s CALayer. Being pretty new to Swift and iOS development, I figured it would be fun to play around with it – here’s the result (screenshot from the iPhone simulator):

four different shadow effects

Here’s how I did it – first, I installed this simple UIViewController to display the four images:

class ShadowPathsController : UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        
        var bare = createView(CGPoint(x: 40, y: 50), label: "bare")
        
        var plain = createView(CGPoint(x: 180, y: 50), label: "plain")
        applyPlainShadow(plain);
        
        var curved = createView(CGPoint(x: 40, y: 200), label: "curved")
        applyCurvedShadow(curved)

        var hover = createView(CGPoint(x: 180, y: 200), label: "hover")
        applyHoverShadow(hover)
    }
    
    func createView(position: CGPoint, label: String) -> UIView {
        var imageView = UIImageView(image: UIImage(named: "yoda"))

        imageView.frame = CGRect(origin: position, size: CGSize(width: 100, height: 100))

        var labelView = UILabel(frame: CGRect(x: 0, y: 0, width: 100, height: 20))
        labelView.textAlignment = NSTextAlignment.Center
        labelView.text = label
        labelView.textColor = UIColor.whiteColor()
        imageView.addSubview(labelView)
        
        view!.addSubview(imageView);

        return imageView
    }

    // apply* methods are down here
}

class ShadowPathsController : UIViewController {

override func viewDidLoad() {

super.viewDidLoad()

var bare = createView(CGPoint(x: 40, y: 50), label: "bare")

var plain = createView(CGPoint(x: 180, y: 50), label: "plain")

applyPlainShadow(plain);

var curved = createView(CGPoint(x: 40, y: 200), label: "curved")

applyCurvedShadow(curved)

var hover = createView(CGPoint(x: 180, y: 200), label: "hover")

applyHoverShadow(hover)

}

func createView(position: CGPoint, label: String) -> UIView {

var imageView = UIImageView(image: UIImage(named: "yoda"))

imageView.frame = CGRect(origin: position, size: CGSize(width: 100, height: 100))

var labelView = UILabel(frame: CGRect(x: 0, y: 0, width: 100, height: 20))

labelView.textAlignment = NSTextAlignment.Center

labelView.text = label

labelView.textColor = UIColor.whiteColor()

imageView.addSubview(labelView)

view!.addSubview(imageView);

return imageView

}

// apply* methods are down here

}

and then I created the applyPlainShadow method (which is basically the shadow example you’ll find everywhere when you Google for “UIView drop shadow”):

    func applyPlainShadow(view: UIView) {
        var layer = view.layer!
        
        layer.shadowColor = UIColor.blackColor().CGColor
        layer.shadowOffset = CGSize(width: 0, height: 10)
        layer.shadowOpacity = 0.4
        layer.shadowRadius = 5
    }

func applyPlainShadow(view: UIView) {

var layer = view.layer!

layer.shadowColor = UIColor.blackColor().CGColor

layer.shadowOffset = CGSize(width: 0, height: 10)

layer.shadowOpacity = 0.4

layer.shadowRadius = 5

}

Simple and neat… – but now the fun begins – let’s create that convex-piece-of-paper-on-a-surface-effect that you’ll see in many places on the web – it’s created by simply using a UIBezierPath to draw the outline of the shadow, and then setting the layer’s shadowPath to the path’s CGRect:

    func applyCurvedShadow(view: UIView) {
        let size = view.bounds.size
        let width = size.width
        let height = size.height
        let depth = CGFloat(11.0)
        let lessDepth = 0.8 * depth
        let curvyness = CGFloat(5)
        let radius = CGFloat(1)
        
        var path = UIBezierPath()
        
        // top left
        path.moveToPoint(CGPoint(x: radius, y: height))
        
        // top right
        path.addLineToPoint(CGPoint(x: width - 2*radius, y: height))
        
        // bottom right + a little extra
        path.addLineToPoint(CGPoint(x: width - 2*radius, y: height + depth))

        // path to bottom left via curve
        path.addCurveToPoint(CGPoint(x: radius, y: height + depth),
            controlPoint1: CGPoint(x: width - curvyness, y: height + lessDepth - curvyness),
            controlPoint2: CGPoint(x: curvyness, y: height + lessDepth - curvyness))

        var layer = view.layer!
        layer.shadowPath = path.CGPath
        layer.shadowColor = UIColor.blackColor().CGColor
        layer.shadowOpacity = 0.3
        layer.shadowRadius = radius
        layer.shadowOffset = CGSize(width: 0, height: -3)
    }

func applyCurvedShadow(view: UIView) {

let size = view.bounds.size

let width = size.width

let height = size.height

let depth = CGFloat(11.0)

let lessDepth = 0.8 * depth

let curvyness = CGFloat(5)

let radius = CGFloat(1)

var path = UIBezierPath()

// top left

path.moveToPoint(CGPoint(x: radius, y: height))

// top right

path.addLineToPoint(CGPoint(x: width - 2*radius, y: height))

// bottom right + a little extra

path.addLineToPoint(CGPoint(x: width - 2*radius, y: height + depth))

// path to bottom left via curve

path.addCurveToPoint(CGPoint(x: radius, y: height + depth),

controlPoint1: CGPoint(x: width - curvyness, y: height + lessDepth - curvyness),

controlPoint2: CGPoint(x: curvyness, y: height + lessDepth - curvyness))

var layer = view.layer!

layer.shadowPath = path.CGPath

layer.shadowColor = UIColor.blackColor().CGColor

layer.shadowOpacity = 0.3

layer.shadowRadius = radius

layer.shadowOffset = CGSize(width: 0, height: -3)

}

Neat! Lastly, let’s create a blurry oval drop shadow, as if the view was hovering high over some low surface that expands into the screen… again, I’m using the shadowPath property, initializing the UIBezierPath with the overload that creates an oval shape from a rectangle:

    func applyHoverShadow(view: UIView) {
        let size = view.bounds.size
        let width = size.width
        let height = size.height
        
        var ovalRect = CGRect(x: 5, y: height + 5, width: width - 10, height: 15)
        var path = UIBezierPath(roundedRect: ovalRect, cornerRadius: 10)
        
        var layer = view.layer!
        layer.shadowPath = path.CGPath
        layer.shadowColor = UIColor.blackColor().CGColor
        layer.shadowOpacity = 0.2
        layer.shadowRadius = 5
        layer.shadowOffset = CGSize(width: 0, height: 0)
    }

func applyHoverShadow(view: UIView) {

let size = view.bounds.size

let width = size.width

let height = size.height

var ovalRect = CGRect(x: 5, y: height + 5, width: width - 10, height: 15)

var path = UIBezierPath(roundedRect: ovalRect, cornerRadius: 10)

var layer = view.layer!

layer.shadowPath = path.CGPath

layer.shadowColor = UIColor.blackColor().CGColor

layer.shadowOpacity = 0.2

layer.shadowRadius = 5

layer.shadowOffset = CGSize(width: 0, height: 0)

}

Nice!