在日常开发中有时候我们需要在APP中做用户指导,比如第一次进入某个页面的时候显示遮罩覆盖, 但是又需要将遮罩下的某些区域暴露出来,便于文字说明,比如我们需要在视图上加个遮罩,并且遮罩上要显示 按钮2 :
期待的效果图:按钮1被盖住,而 按钮2显示出来
我们可以 在视图上加个遮罩,再往遮罩上画一个同样位置和样式的 按钮2 ,作为一个有追求的程序猿,我们是不能容忍这种 低效实现方式的。
我们可以通过iOS 的 Core Graphics 来实现,也很简单,只需要两句代码
重写 遮罩视图里面的 draw 方法:
override func draw(_ rect: CGRect) {
//利用 UIBezierPath 绘制出 按钮2 的外观路径,
let path = UIBezierPath.init(roundedRect: CGRect.init(x: 100, y: 300, width: 100.0, height: 40.0), cornerRadius: 20.0)
//设置 路径填充样式为 clear 清除样式, 就能 使设置的路径中的 绘图区域被擦除掉
path.fill(with: .clear, alpha: 0.1)
}
点击穿透:
如果我们需要在遮罩上点击按钮2 区域响应 按钮2的事件,点击其它区域响应遮罩上的点击事件,我们可以重写 遮罩上的 事件传递方法hitTest:
override func hitTest(_ point: CGPoint, with event: UIEvent?) -> UIView? {
//按钮2区域的路径
let path = UIBezierPath.init(roundedRect: CGRect.init(x: 100, y: 300, width: 100.0, height: 40.0), cornerRadius: 20.0)
//判断 点击事件在 按钮2区域则 返回nil
if path.contains(point) {
return nil
}else{
return super.hitTest(point, with: event)
}
}