iOS中自定义形状（倒T形）带边框的UIView

Question

我需要在iOS上创建一个自定义形状（倒置的T形）带边框的UIView。 我在下面附上截图。 我进行了大量研究，并找到了一种使用UIBezierPath的方法，链接如下here。

但我没有任何想法将我的视图形状变成倒置的T形。

- Shamsudheen TK

---

我认为你可能是在错误的方向上接近这个问题。你为什么想要一个T形的UIView？如果你试图防止视图遮挡下面的内容，为什么不在这个视图上面添加底层视图呢？ - James

主要问题是，我必须显示边框。 - Shamsudheen TK

Answer 1

UIView 一直是矩形的，从文档中可以看出：

UIView 类定义了一个矩形区域以及管理该区域内容的接口。

虽然视图被限制为矩形，但您可以按任何喜欢的方式塑造您的活动区域。通过将其与透明背景相结合，您可以模仿您可以绘制的任何形状的视图。
当您的矩形视图接收到触摸和其他事件时，您的事件处理程序应首先检查活动是否发生在倒T区域内。如果活动在外部，则应忽略该事件。

- Sergey Kalinichenko

---

@Ramshad 这里有一个链接，展示了如何在三角形视图中进行命中测试的答案：https://dev59.com/lmfWa4cB1Zd3GeqPgmV5#12008687。 - Sergey Kalinichenko

主要问题是，我必须显示边框。 - Shamsudheen TK

@Ramshad 这应该不是什么大问题。你是在drawRect中绘制你的视图吗？ - Sergey Kalinichenko

Answer 2

哎呀，终于搞定了。我使用了两个UIView子类（顶部和底部）。

我面临的主要挑战是关于边框的问题，因为如果我将边框设置为我的两个视图（顶部和底部），它将不会显示为单个容器项。 :)

我所做的步骤：

创建了两个UIView子类。让我们称之为topView和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];

我通过重写 drawRect 方法，为 TopView 绘制了三个边框（上、右、左），并为 BottomView 绘制了两个完整边框（下、右）和两个部分边框（左上、右上）。

可以在这里查看我的 TopView 类代码。

可以在这里查看我的 BottomView 类代码。

感谢大家。

输出结果：

- Shamsudheen TK

---

@Ramsad，干得好！... :/ 但这是同一个视图的两个不同视角。我想你想要制作一个T形状的UIView。然后我在想如何改变它的尺寸，因为UIView是2D的...但你的工作真的很棒！！！ - TheTiger

@VakulSaini：虽然我们可以使用一个视图来完成，但问题是，在T形顶部视图的左右两侧会有白色背景的视图存在。请参见此处的示例https://dev59.com/lmfWa4cB1Zd3GeqPgmV5#12008687 - Shamsudheen TK

Answer 3

可以使用CAShapeLayer作为图层创建一个视图。

创建UIView的子类并重写layerClass方法：

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

然后在viewDidLoad中，您可以将bezierPath指定给shapeLayer：

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

- Robin van Dijke