iOS 关于点图标签的那些小事

快两个月没写文章了，说是工作比较忙，归根结底还是懒，哈哈😁。
想开源一个点图标签的库，但其实没有必要，明白原理，大家都可以动手干的。文末附笔者自己思路下的Demo，满足要求的给个star，直接拿过去用哈。

点图标签的实现思路

首先将点图标签分为，圆，文本，以及控制的方向。如下图

tag_pic.png

先上效果

tagPic.gif

实现：

一、圆

在初始化时确定圆的大小，一般的点图标签就是圆点和和做动画的阴影圆，有的也会有大圆部分，其实就是在圆点下方加一个大圆，使其有圆环的效果。

- (void)creatCircleView
{   //circleLayer
    CGSize circleSize = self.circleSize;
    self.circleLayer =[CALayer new];
    self.circleLayer.position = CGPointMake(circleSize.width/2, circleSize.height/2);
    self.circleLayer.bounds = CGRectMake(0, 0, circleSize.width, circleSize.height);
    self.circleLayer.cornerRadius = circleSize.width/2;
    [self.layer addSublayer:self.circleLayer];
    //circleView
    self.circleView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, circleSize.width, circleSize.height)];
    self.circleView.layer.cornerRadius = self.circleView.frame.size.width / 2;
    self.circleView.layer.masksToBounds = YES;
    self.circleView.center = CGPointMake(10, CGRectGetHeight(self.frame)/2.0);
    self.circleLayer.position = self.circleView.center;
    //bigCircleView
    self.bigCircleView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, circleSize.width+2, circleSize.height+2)];
    self.bigCircleView.layer.cornerRadius = self.bigCircleView.frame.size.width / 2;
    self.bigCircleView.layer.masksToBounds = YES;
    self.bigCircleView.center = CGPointMake(10, CGRectGetHeight(self.frame)/2.0);

    [self addSubview:self.bigCircleView];
    [self addSubview:self.circleView];
   
    //添加动画
    [self circleAnimation:self.circleLayer];
} 

二、 文字

文字部分主要是根据方向画出对应形状的path（画 path其实是一件很有意思的事情，建立坐标系，画出形状然后标出关键点，用关键点生成path即可，有兴趣的可以动手试试哈），然后利用CAShapeLayer来生成图层裁剪UILabel的layer。CAShapeLayer的优点这里就不细说了。

//处理label的形状
- (void)triangle:(UILabel *)label
{
    CGFloat angleWidth = 10;
    CGFloat labelCornerRadius = 4;
    CGFloat lineCornerRadius = 2;
    CGFloat arrowCornerRadious = 1;
    UIBezierPath  * path =  [UIBezierPath  new];
    switch (self.direction)
    {
        case YLTagDirectionRight:
            [path moveToPoint:( CGPoint ) { labelCornerRadius, 0}];
            [path addQuadCurveToPoint:( CGPoint ) {0, labelCornerRadius}  controlPoint:( CGPoint ) { 0,0}];
            [path addLineToPoint :( CGPoint ) { 0, CGRectGetHeight(label.frame)-labelCornerRadius}];
            [path addQuadCurveToPoint:( CGPoint ) {labelCornerRadius, CGRectGetHeight(label.frame)}  controlPoint:( CGPoint ) { 0, CGRectGetHeight(label.frame)}];
            [path addLineToPoint :( CGPoint ) { CGRectGetWidth(label.frame) - angleWidth-lineCornerRadius, CGRectGetHeight(label.frame)}];
            [path addQuadCurveToPoint:( CGPoint ) {CGRectGetWidth(label.frame) - angleWidth+lineCornerRadius, CGRectGetHeight(label.frame)-lineCornerRadius}  controlPoint:( CGPoint ) { CGRectGetWidth(label.frame)-angleWidth, CGRectGetHeight(label.frame)}];
            [path addLineToPoint :( CGPoint ) { CGRectGetWidth(label.frame)-arrowCornerRadious, CGRectGetHeight(label.frame)/2.0+arrowCornerRadious}];
            [path addQuadCurveToPoint:( CGPoint ) {CGRectGetWidth(label.frame)-arrowCornerRadious,CGRectGetHeight(label.frame)/2.0-arrowCornerRadious}  controlPoint:( CGPoint ) { CGRectGetWidth(label.frame), CGRectGetHeight(label.frame)/2.0}];
            [path addLineToPoint :( CGPoint ) { CGRectGetWidth(label.frame) - angleWidth+lineCornerRadius, lineCornerRadius}];
            [path addQuadCurveToPoint:( CGPoint ) {CGRectGetWidth(label.frame) - angleWidth-lineCornerRadius, 0}  controlPoint:( CGPoint ) { CGRectGetWidth(label.frame)-angleWidth,0}];
            [path addLineToPoint :( CGPoint ) { labelCornerRadius, 0}];
            break;
        case YLTagDirectionLeft:
        default:
            [path moveToPoint :( CGPoint ) { angleWidth+lineCornerRadius ,  0 }];
            [path addQuadCurveToPoint:( CGPoint ) { angleWidth-lineCornerRadius,lineCornerRadius}  controlPoint:( CGPoint ) {angleWidth , 0}];
            [path addLineToPoint :( CGPoint ) { arrowCornerRadious, CGRectGetHeight(label.frame)/2.0-arrowCornerRadious}];
            [path addQuadCurveToPoint:( CGPoint ) {arrowCornerRadious, CGRectGetHeight(label.frame)/2.0+arrowCornerRadious}  controlPoint:( CGPoint ) { 0, CGRectGetHeight(label.frame)/2.0}];
            [path addLineToPoint :( CGPoint ) { angleWidth-lineCornerRadius, CGRectGetHeight(label.frame)-lineCornerRadius}];
            [path addQuadCurveToPoint:( CGPoint ) { angleWidth+lineCornerRadius, CGRectGetHeight(label.frame)}  controlPoint:( CGPoint ) { angleWidth, CGRectGetHeight(label.frame)}];
            [path addLineToPoint :( CGPoint ) { CGRectGetWidth(label.frame)-labelCornerRadius, CGRectGetHeight(label.frame)}];
            [path addQuadCurveToPoint:( CGPoint ) { CGRectGetWidth(label.frame), CGRectGetHeight(label.frame)-labelCornerRadius}  controlPoint:( CGPoint ) { CGRectGetWidth(label.frame), CGRectGetHeight(label.frame)}];
            [path addLineToPoint :( CGPoint ) { CGRectGetWidth(label.frame), labelCornerRadius}];
            [path addQuadCurveToPoint:( CGPoint ) { CGRectGetWidth(label.frame)-labelCornerRadius, 0}  controlPoint:( CGPoint ) { CGRectGetWidth(label.frame),0}];
            [path addLineToPoint :( CGPoint ) { angleWidth, 0}];
            break;
    }
    CAShapeLayer* mask = [CAShapeLayer layer];
    mask.path = path.CGPath ;
    label.layer.mask = mask;
}

上面的绘制会引发一个小问题，由于UILabel被裁剪的形状不规则，一边是三角形，一边是矩形，所以就导致了文字在被裁剪的UILabel中看起来不是居中的，为了解决这个问题就自定了一个UILabel改变了它的Insets。

三、 方向（边缘处理）

在点击屏幕边缘时需要处理🏷的方向，比如，默认方向为左，但当点击屏幕右边缘时，此时的🏷是不能默认为左的，此时方向为右，才能保证🏷不会超出屏幕，在拿到 text之后计算方向即可。其实就是父视图边缘的特殊处理，此Demo种父视图与屏幕等宽。当然除此以外还要处理标签移动时，标签不会超出屏幕。

 //处理完判断边界fram，赋值方向
        CGFloat selfW = rect.size.width + CGRectGetWidth(self.bigCircleView.frame) + kSpace;

        if (CGRectGetWidth(self.superview.frame)>0)
        {
            if (self.direction == YLTagDirectionLeft)
            {
                CGFloat maxX = self.circlePoint.x - CGRectGetWidth(_bigCircleView.frame)/2 + selfW;
                if (maxX>self.superview.frame.size.width)
                {
                    self.direction = YLTagDirectionRight;
                }
                
            }else
            {
                CGFloat minX = self.circlePoint.x + CGRectGetWidth(_bigCircleView.frame) - selfW;
                if (minX<0)
                {
                    self.direction = YLTagDirectionLeft;
                }
                
            }
        }

详细代码见Demo

点图标签的核心就是处理圆点，文字和方向三者之间的关系。其实所有的问题都大同小异，学会拆分问题，然后解决问题。题外话，哈哈😁。

照例放Demo，仅供参考，如有问题请留言
Demo地址：
https://github.com/yongliangP/YLTagView 用心良苦请 star
如果你觉得对你有帮助请点 喜欢 哦，也可以关注 我，每周至少一篇技术（虽然现在不能保证更新量了，但会一直更😁）。
或者关注 我的专题 每周至少5篇更新，多谢支持哈。