Custom shaped (inverted T) bordered Uiview in iOS

Question

I have to create a custom shaped (inverted T) bordered Uiview on iOS. I am attaching the screenshot below. I have researched a lot and I found a way using UIBezierPath from here.

But I didn't get any idea to shape my view as inverted T shaped.

Answer 1

It should be possible to create a view with a CAShapeLayer as layer.

Make a subclass of UIView and override the layerClass method:

+ (Class)layerClass {
    return [CAShapeLayer class];
}

Then in the viewDidLoad you can specify the bezierPath to the shapeLayer:

- (void)viewDidLoad {
     [(CAShapeLayer *)self.layer setPath:someBezierPath.CGPath];
     [self.layer setBackgroundColor:[UIColor redColor].CGColor];
}

Answer 2

Phew.. Finally I have done it. I have used two UiViews subclasses (top & bottom).

The main challenge I faced was about the border, because if I set the border to my two views (top & bottom), it will not show as a single container item. :)

Steps that I done:

Created two UiView subclasses. Lets call topView and bottomView.

    TopView *topView = [[TopView alloc] initWithFrame:CGRectMake(220, 60, 200, 200)];
    [topView setBackgroundColor:[UIColor yellowColor]]; 
    [self.view addSubview:topView]; 

    BottomView *bottomView = [[BottomView alloc] initWithFrame:CGRectMake(130, 260, 380, 200)];
    [bottomView setBackgroundColor:[UIColor yellowColor]];
    bottomView.customShape = topView; //Set the custom shape as TopView to frame to draw the border.    
    [self.view addSubview:topView];

I have drawn three borders (top,right,left) for TopView and two full borders (bottom, right), two partial borders (top left, top right) for BottomView through overriding the drawRect method.

See my TopView class here.

See my BottomView class here.

Thanks to all.

Output:

Answer 3

UIViews are always rectangular. From the documentation:

The UIView class defines a rectangular area on the screen and the interfaces for managing the content in that area.

Even though the view is limited to being rectangular, you can shape your active area in any way that you like. By combining that with a transparent background, you can imitate a view of any shape that you can draw.

When your rectangular view receives touches and other events, your event handlers should first check if the activity has happened in the inverted-T area. If the activity is outside, the event should be ignored.