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来生成图层裁剪UILabellayerCAShapeLayer的优点这里就不细说了。

//处理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篇更新,多谢支持哈。

推荐阅读更多精彩内容