多方法实现圆角

作者: 一剑孤城 | 来源:发表于2017-08-03 15:18 被阅读72次

    一个圆角 + 右上角删除按钮引发的血案!!!

    1.一般方法实现圆角

    UILabel *label = [UILabel new];
    label.clipsToBounds = YES;
    label.layer.cornerRadius = 5;
    

    这样实现圆角的方式有一个弊端,就是把一切超出父控件的部分剪切掉。一般情况下,这也不算什么,但是,当你添加的子控件需要显示超出父控件的部分的时候,就显示不出来,比如:添加一个右上角的删除控件。

    2.尝试在当前控件上添加圆角layer

    UILabel *label = [[UILabel alloc] initWithFrame: CGRectMake(40, 120, 80, 30)];
    label.font = [UIFont systemFontOfSize: 20];
    label.textColor = [UIColor blackColor];
    label.text = @"Jashion";
    [self.view addSubview: label];
        
    UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect: label.bounds cornerRadius: 5];
    CAShapeLayer *bgLayer = [CAShapeLayer layer];
    bgLayer.frame = label.bounds;
    bgLayer.path = path.CGPath;
    bgLayer.fillColor = [UIColor orangeColor].CGColor;
    [label.layer insertSublayer: bgLayer above: 0];
    

    这样会导致中文显示正常,英文被覆盖的问题:


    Label

    什么原因导致的呢?猜测是中文和英文的显示有点区别,具体打印一下它们的图层结构,如下:

    2个Label的图层结构
    问题比较明了了,纯英文和数字,符号在label里显示都是一个图层显示,而包含中文字符的会新生成一个UILabelContentLayer来承载内容,所以,中文可以显示,而英文被覆盖的原因在于,英文被子图层直接覆盖了,而中文添加的子图层是在内容显示图层的下面,所以不会被覆盖。
    ps:
    1.UIButton和UILabel显示中文和英文是一样的
    2.UILayerContentLayer永远都是在子图层数组里最前面

    3.换个思路,一路死磕

    既然直接添加图层会覆盖原有的图层,设置图层的zPosition也不行(因为没有中文符号的label只有一个图层,没有子图层,添加一个新的图层还是需要父图层承载),这时候注意到设置原有图层的背景颜色是不会覆盖内容显示的,嘿嘿。
    直接上代码:

    UIImage *backgroundImage;
    UIGraphicsBeginImageContextWithOptions(self.frame.size, NO, [UIScreen mainScreen].scale);
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSetFillColorWithColor(context, backgroundColor.CGColor);
        
    UIBezierPath *fillPath = [UIBezierPath bezierPathWithRoundedRect: CGRectMake(borderWidth, borderWidth, self.frame.size.width - borderWidth, self.frame.size.height - borderWidth) cornerRadius: radius];
    CGContextAddPath(context, fillPath.CGPath);
    CGContextFillPath(context);
    
    backgroundImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
        if (!backgroundImage) {
            return;
        }
    self.layer.backgroundColor = [UIColor colorWithPatternImage: backgroundImage].CGColor;    //注意这里不能直接设置self.backgroundColor,显示会有问题???
    

    完成的效果如下:


    效果图

    总结:

    生活总是充满惊喜,嘿嘿,如果不是当时公司项目需要实现这个效果,我现在都还不知道这些事情。意料之外,情理之中,挺好玩的。

    相关文章

      网友评论

        本文标题:多方法实现圆角

        本文链接:https://www.haomeiwen.com/subject/hkpllxtx.html