0

I have an IBOutlet button dragged from Interface Builder (it's easier to play with it in auto layout )

I rotated it by 45° in code as learned here

var transform = CGAffineTransformMakeTranslation(0.5, 0.5)
var angle = CGFloat(M_PI / 3.9) // degress rotation 3.9
transform = CGAffineTransformRotate(transform, angle)
button.transform = transform
button.layer.rasterizationScale = UIScreen.mainScreen().scale
button.layer.shouldRasterize = true
button.setNeedsDisplay()

now, I have diamond, triangle, rectangle shaped images to put inside as many IBOutlets. this IBOutlets are required to be side by side. But there are margins of the button that I don't know how to cut off.

enter image description here

so, purple is good, yellow is bad. purple area will be "the button" image but I need to cut off the yellow margins area (now is set clear color, but is clickable anyway, and I don't want it to be)

I need to make a UI on iPhone made by many shapes, each of them will be side by side the other, and I don't want the unwanted area of the button to "cover" half the button next to it. any help?

thanks in advance

Community
  • 1
  • 1
biggreentree
  • 1,633
  • 3
  • 20
  • 35
  • How do you rotate button? It seems that you are rotating button contents only and not a button it self – Zell B. Jun 04 '15 at 11:26
  • updated the question! :) to me, I rotate the button itself, problem is, that the image is a diamond. I could put inside a pre-rotated image, but there are many other shapes, in general, I'm looking for a way to shape the rectangular area of the button, what if I had a star shaped image for example? – biggreentree Jun 04 '15 at 11:33
  • There is not such an easy way to achieve what you are looking for. A possible solution is to create a custom view and handle clicks based on color of pixel touched -> Not transparent, handle click ->Transparent, cancel click – Zell B. Jun 04 '15 at 11:38
  • http://stackoverflow.com/questions/7374937/uibutton-touchupinside-touch-location + Calculation to determine if the location is "right" (in the purple area or not). – Larme Jun 04 '15 at 11:56

1 Answers1

1

Button tapping is based on a rectangular, non-rotated area. You can't make a button's tappable area an irregular shape, and can't overlap the bounds rectangles.

You COULD rotate the coordinate system of the superview that contains all your buttons, so that they all were tilted 45 degrees. That way you could have rows and columns of square buttons that LOOK like diamonds, and did respond to taps in each region.

You could also create a custom view class that manages a grid of irregularly shaped objects that ACT like buttons, and detect taps based on the opaque parts of the images they contain, but that would be quite a bit of work, and involve some fairly advanced techniques that are beyond the scope of a SO post to explain.

Duncan C
  • 128,072
  • 22
  • 173
  • 272
  • thanks!, maybe a this link I solved that matter (if I'll be successful I'll update this question with the answer) but have problem with auto layout anyway, maybe you can help me again! [link] (http://stackoverflow.com/questions/30900125/still-studying-use-of-auto-layout-size-classes-how-to-place-button-outlets-vi) – biggreentree Jun 17 '15 at 19:05