[iOS 带三角弹出框的绘制]

原帖我没找到 找到了原帖的git https://github.com/maltsugar/CustomPopoverView.git 可以看源码
我自己吧源码拆出来了

这里写图片描述

总结一下带三角的弹出框的绘制

1.整个弹出框的层级为

底层view 为一个容器containerView 在整个view的layer上,我们首先绘制出带三角的矩形弹出框layer

    //贝塞尔路径
    /*
     贝塞尔路径如下图 起点P0为三角的顶点  逆时针 P0->P6

     ___/\___
     |      |   逆时针绘制 : 起点为三角的顶点
     |______|

     */

将这个containerView作为底层的View, 再在其中创建如Tableview或者View 来作为操作view

几个注意点

1.containerView的layer 其实是不断在被重绘的 这里通过KVO监控containerView的 frame属性变化 来不断调整带三角Layer的 大小

/**
 初始化  这里的self ==> containerView

 @param config 配置信息
 @return PopOverVieConfiguration实例
 */
- (instancetype)initWithConfig:(SDPopViewConfig *)config
{
    self = [super init];
    if (self) {
        // kvo 监控自己的 frame 属性变化
        [self addObserver:self forKeyPath:@"frame" options:0 context:NULL];
        _config = config;
    }
    return self;
}

- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context {
    if([keyPath isEqualToString:@"frame"]) {
        CGRect newFrame = CGRectNull;
        if([object valueForKeyPath:keyPath] != [NSNull null]) {
            newFrame = [[object valueForKeyPath:keyPath] CGRectValue];
            //根据监控到的frame 来调整 带三角layer
            [self setLayerFrame:newFrame];

        }
    }
}

2.三角尖角Style样式的代码思路
由于是通过贝塞尔线段来绘制的,所以 可以通过三角顶点的x值 来判断 通过不同的样式, 复制给三角顶点x左边
具体见代码

我自己拆的代码就不放出来了,看看原帖的GitHub就可以

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值