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.

Inverted bordered T

I think you might be approaching this the wrong way. Why do you want a T-shaped `UIView`? If you are trying to keep the view from obscuring something below it, why don't you just add the underlying views on top of this view? — James, Aug 21 '12 at 17:01

score 6 · Answer 1 · answered Aug 21 '12 at 15:46

6

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.

answered Aug 21 '12 at 15:46

Sergey Kalinichenko

714,442
84
1,110
1,523

@Ramshad Here is a [link](http://stackoverflow.com/a/12008687/335858) to an answer that shows how to do hit tests in a triangular views. – Sergey Kalinichenko Aug 21 '12 at 15:52
the main problem is , i have to display the boarder – Shamsudheen TK Aug 22 '12 at 12:04
@Ramshad This shouldn't be that much of a problem. Are you drawing your view in `drawRect`? – Sergey Kalinichenko Aug 22 '12 at 12:08

score 4 · Accepted Answer · edited Oct 28 '12 at 07:53

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:

Custom UiView

@Ramsad Nice Work ! .... :/ But these're two different view on one. And i was thinking you want to make a UIView in T-Shape. Then i was thinking that how is it possible to change its dim because the UIView is 2D.... But Your work is really Great !!! — TheTiger, Aug 23 '12 at 08:23
@VakulSaini: we can do it with one view though UIBezierPath but the issue is ,the view will be there with white background on left and right side of T shaped top view .. see the example here http://stackoverflow.com/questions/12008515/hit-testing-filled-area-of-uiview-subclass/12008687#12008687 — Shamsudheen TK, Aug 23 '12 at 09:47

score 3 · Answer 3 · answered Aug 21 '12 at 15:52

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];
}

Custom shaped (inverted T) bordered Uiview in iOS

3 Answers3

Linked