How to create programatically Hexagon UIButton or Clickable ImageView with Swift

Question

I want to create programatically Hexagon UIButtons with Swift. I have hexagon images as you can see green picture. The edges are transparent, so you shouldn't click that areas. By using default UIButton with "custom" option, these areas are still clickable.

Then add them like image below on UIScrollView. The main thing is that when user clicks one button I should get the correct button's id.

So, can you help me with creating hexagon UIButton or clickable image view? Thanks.

Answer 1

You can extend the UIButton class to not detect touch events at the parts of image that are transparent.

We detect the alpha component of the image at the touch point.

If the alpha component is 0, the hit test will fail.
If the alpha is non zero, hit test will succeed.
The hit test will also fail if the touch is outside the button bounds.

extension UIButton {

    func getColourFromPoint(point:CGPoint) -> UIColor {
            let colorSpace:CGColorSpace = CGColorSpaceCreateDeviceRGB()
            let bitmapInfo = CGBitmapInfo(CGImageAlphaInfo.PremultipliedLast.rawValue)

            var pixelData:[UInt8] = [0, 0, 0, 0]

            let context = CGBitmapContextCreate(&pixelData, 1, 1, 8, 4, colorSpace, bitmapInfo)
            CGContextTranslateCTM(context, -point.x, -point.y);
            self.layer.renderInContext(context)

            var red:CGFloat = CGFloat(pixelData[0])/CGFloat(255.0)
            var green:CGFloat = CGFloat(pixelData[1])/CGFloat(255.0)
            var blue:CGFloat = CGFloat(pixelData[2])/CGFloat(255.0)
            var alpha:CGFloat = CGFloat(pixelData[3])/CGFloat(255.0)

            var color:UIColor = UIColor(red: red, green: green, blue: blue, alpha: alpha)
            return color
    }

    public override func hitTest(point: CGPoint, withEvent event: UIEvent?) -> UIView? {
        if (!CGRectContainsPoint(self.bounds, point)) {
            return nil
        }
        else {
            let color : UIColor = self.getColourFromPoint(point)
            let alpha = CGColorGetAlpha(color.CGColor);
            if alpha <= 0.0 {
                return nil
            }
            return self
        }
    }
}