iphone - How to add multiple imageView with different shapes?

Question

Currently I am working for a collage app. I want to draw collage frame and after that I need to add images from Camera roll or camera . I need the following type view

I have added 5 UIImageViews. To draw in shape I have added UIBezierPath like for imageview1

UIBezierPath *path1 = [[UIBezierPath alloc] init];

        [path1 moveToPoint:CGPointMake(0, 0)];
        [path1 addLineToPoint:CGPointMake(150, 0)];
        [path1 addLineToPoint:CGPointMake(0, 150)];
        [path1 addLineToPoint:CGPointMake(0, 0)];

 UIImageView *imgView1 = [[UIImageView alloc] initWithFrame:CGRectMake(140, 0, 160, 300)];
imgView1 . tag = 2;
imgView1 . userInteractionEnabled = YES;
imgView1. backgroundColor = [UIColor greenColor];
CGPathRef borderPathRef2 = [path1 CGPath];
CAShapeLayer *borderShapeLayer2 = [[CAShapeLayer alloc] init];
[borderShapeLayer2 setPath:borderPathRef2];
[[imgView1 layer] setMask:borderShapeLayer2];
imgView1.layer.masksToBounds = YES;
[borderShapeLayer2 release];

[view1 addSubview:imgView1];

Like this I have done for all 5. But after adding imageView5 touch is not detected on all other 4 views because its frame overlaping on the other four imageview.

So I am not getting how to design this . I need to add images to all imageviews by touch action.

Please help me. If someone have any idea about this then please share.

Thanks In Advance.

Following is the example 2 which is from Insta Collage app.

Answer 1

我已经通过覆盖 UIView 的 hitTest:withEvent: 方法解决了这个问题。

- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event
{
    //Getting View which is touched.
    UIView *testView = [super hitTest:point withEvent:event];

    //If this is self. and point hitted on Masked Layer(Which is hiding our UIView).
    if(testView == self && testView.layer.mask != nil && CGPathContainsPoint([(CAShapedLayer*)testView.layer.mask path], NULL, point, false))
    {
            //Then return nil. So Touch thinks that UIView has not clicked. and touch is passed to UIView which is behind this view. And again hitTest is performed on inner UIViews.
            testView = nil;
    }

    //Return nil. So touch thinks that UIView is not clicked.
    //Return self. So touch thinks self is clicked. and no more hitTest is performed.
    return testView;
}

现在我为这个问题实现了一个名为 IQIrregularView 的控件。检查这个。

https://github.com/hackiftekhar/IQIrregularView

Answer 2

You should try random shaped buttons

you can find your solution in this custom class found on GitHub

It worked for me and hope will work for you also....

Happy Coding...........

Answer 3

我还尝试UIBezierPath使用 Swift在 a 的路径中检测对 UIView 的触摸

我的情况是：

- UIView (Container)
  - UIImageView (masked with Triangle UIBezierPath)
  - UIImageView (masked with Triangle UIBezierPath)

在我的容器中，我覆盖hitTest并返回被触摸的子视图，如下所示：

override func hitTest(_ point: CGPoint, with event: UIEvent?) -> UIView? {        
    for subview in subviews.reversed() {

        // ** convert the touch to the subview space:
        let convertedPoint = subview.convert(point, from: self)

        // ** if the subview layer mask exists I know that it has a UIBezierPath:
        if let layerShape = subview.layer.mask as? CAShapeLayer {
            if let shapePath = layerShape.path, shapePath.contains(convertedPoint) {
                // ** return the subview with the path that contains the converted point
                return subview
            }
        }
    }

    return nil
}

希望有帮助！