How to add multiple imageView with different shapes? - iphone

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

I have solved this problem by overriding hitTest:withEvent: method of UIView.
- (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;
}
Now i implemented a control called IQIrregularView for this problem.
Check this.
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

I was also trying to detect a touch on a UIView within the path of a UIBezierPath, using Swift
My scenario is:
- UIView (Container)
- UIImageView (masked with Triangle UIBezierPath)
- UIImageView (masked with Triangle UIBezierPath)
In my container, I override hitTest and return the subview that was touched like so:
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
}
Hope that helps!