Outer padding/margin

#1

Hi!

I noticed with the Word Magnet App that sometimes the words disappear off the screen a bit, making them hard to “get a hold of”. Is there any way to put some padding around the edge to keep the words from spilling over?

Thank you!

Teri

#2

You could limit where objects can move by adding some if statements in the touch code for the pan gesture. Don’t move a label outside if it’s x position is less than 20. Something along these lines. Let me know if that helps.

// limit the x coordinate
if panGesture.view.frame.origin.x < 20  { 

panGesture.view.frame.origin.x = 20

}
#3

Thanks Paul,

I think I have the problem solved. However, I did not state my problem accurately, my problem was the position of the labels upon loading the view. Your information put me on the right track (I think) in that I had to “monkey” with the x and y coordinates. So I did this;

 var x = Int ( arc4random_uniform ( 280 ) + 20 ) //random x from 20 - 300
        var y = Int( arc4random_uniform( 380) + 20) //random y from 20 - 425

Now I notice that when I rotate from portrait to landscape mode I lose some of the labels off screen. The reason according to what I’ve read so far is that the x/y coordinates shift when the device is rotated. I have found some documentation about using a SpriteKit that might speak to this problem.

However, what I’ve found is for objective C. Is this something that is used in Swift, could it be a solution to keeping all the labels on the screen, and if so how is it done in Swift? Or is there an easier way to do this…

Thank you again for all the suggestions and help!
Teri

#4

@teripenski Three solutions you could try.

  1. Disable rotation and only support a specific orientation. Much easier and less code.
  2. Use a square “canvas” and position labels within the canvas using X/Y positions that are relative to the smaller square area. i.e. you would add UILabel objects to this UIView.
  3. Translate the coordinates into relative coordinates when you rotate and shift all the labels on the screen. This requires more code. You basically figure out a proportion of the current X and Y coordinates and then multiple that by the new height or width. You will have to loop over all the labels and adjust them with each rotation.

Example Screen Size 480x320 (points)

// Portrait starting orientation
// label1 (X, Y) = (200, 140)
let relativeX = X / oldScreenWidth  // 200.0 / 320
let relativeY = Y / oldScreenHeight   // 140.0 / 480

let newX = relativeX * newScreenWidth  // (200.0 / 320) * 480
let newY = relativeY * newScreenHeight // (140.0 / 480) * 320