iOS Walkthrough的实现

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u014084081/article/details/80885829

iOS Walkthrough的实现

UIBezierPath的一些应用一文中,讲到了透明的新手引导图的实现,后来在看二维码扫描的overlay实现时,又想到了这个问题,即如何如何实现中间一圈是透明的这种效果?

效果

其中一种方式就是直接使用透明的图片来做覆盖,如:

图片做覆盖

另一种方式就是绘制了,然后填充(注意填充规则),在iOS二维码一文中也讲过

下面讲讲其它的形式

1.使用CAShapeLayer

这种方式可参考:UIView fill with color and leave a empty square in center

整个页面的结构如下:

页面的结构

自定义ContainerView下有三个子view:

  • dog - UIImageView
  • name - UITextField
  • Transparet View - 自定义的overlay view

TransparentView中添加如下的代码:

 - (instancetype)initWithCoder:(NSCoder *)aDecoder {
    self = [super initWithCoder:aDecoder];
    if (self) {

        self.backgroundColor = [UIColor clearColor];

        UIBezierPath *overlayPath = [UIBezierPath bezierPathWithRect:self.bounds];
        UIBezierPath *transparentPath = [UIBezierPath bezierPathWithRect:CGRectMake(100, 150, 200, 200)];
        [overlayPath appendPath:transparentPath];
        //[overlayPath setUsesEvenOddFillRule:YES];

        CAShapeLayer *fillLayer = [CAShapeLayer layer];
        fillLayer.path = overlayPath.CGPath;
        fillLayer.fillRule = kCAFillRuleEvenOdd;
        fillLayer.fillColor = [UIColor colorWithRed:15/255.0 green:15/255.0 blue:15/255.0 alpha:0.5].CGColor;

        [self.layer addSublayer:fillLayer];

    }
    return self;
}

其原理是:

  • 创建路径,使用奇偶填充规则来填充

效果如下:

效果

另外一种情况是,在点击未填充区域时,希望可以响应UITextField的事件,即键盘可以弹出来,可以重写TransparentView类的hitTest:withEvent:方法,如下:

- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event
{
    NSLog(@"TransparentView - hitTest");
    UIView *view = [super hitTest:point withEvent:event];
    if(view == self) {
        return nil;
    }
    return view;
}

如下:

响应键盘事件

阅读更多

没有更多推荐了,返回首页