一个带圆角、阴影和背景图案的UILabel

Question

我一直在尝试各种方法，但都没有成功。我只想做一个带有圆角、投影和背景图案的标签。如果我不想要圆角，阴影就能实现。但我无法同时实现它们！

这是我的代码，已经包含了投影：

label.text = msg;
label.textAlignment = UITextAlignmentCenter;
label.frame = CGRectMake(20,10,280,40);
label.backgroundColor 
    = [[UIColor alloc] initWithPatternImage:[UIImage imageNamed:@"msg_box_bg.png"]];

[label.layer setCornerRadius:10];
[label.layer setMasksToBounds:NO];

/* Shadow */
label.layer.shadowColor = [UIColor blackColor].CGColor;
label.layer.shadowOpacity = 0.6;
label.layer.shadowOffset = CGSizeMake(0,0);
label.layer.shadowRadius = 3;

这个代码可以为我提供没有圆角的阴影。但是如果我使用

[label.layer setMasksToBounds:YES];

这将给我圆角但没有阴影。我已经采用了使用阴影路径的建议，因此带有阴影路径的代码如下：

label.text = msg;
label.textAlignment = UITextAlignmentCenter;
label.frame = CGRectMake(20,10,280,40);
label.backgroundColor 
    = [[UIColor alloc] initWithPatternImage:[UIImage imageNamed:@"msg_box_bg.png"]];

[label.layer setCornerRadius:10];
[label.layer setMasksToBounds:YES];

/* Shadow */
label.layer.shadowColor = [UIColor blackColor].CGColor;
label.layer.shadowOpacity = 0.6;
label.layer.shadowOffset = CGSizeMake(0,0);
label.layer.shadowRadius = 3;
label.layer.shadowPath = [[UIBezierPath bezierPathWithRoundedRect:label.frame cornerRadius:10]CGPath];
label.layer.shouldRasterize = YES;

这段代码确实给我提供了圆角，但没有阴影。有什么建议吗？

谢谢！

- hsnm

---

https://dev59.com/THA65IYBdhLWcg3wrgoa - John Graziano

Answer 1

我使用以下代码来获得您想要的结果。

CGSize size = CGSizeMake(280, 40);

/** Shadow */
CALayer *shadowLayer = [CALayer new];
shadowLayer.frame = CGRectMake(20,100,size.width,size.height);
shadowLayer.cornerRadius = 10;

shadowLayer.backgroundColor = [UIColor clearColor].CGColor; 
shadowLayer.shadowColor = [UIColor blackColor].CGColor;
shadowLayer.shadowOpacity = 0.6;
shadowLayer.shadowOffset = CGSizeMake(0,0);
shadowLayer.shadowRadius = 3;

/** Label */
UILabel *label = [UILabel new];
label.text = @"Hello World";
label.textAlignment = UITextAlignmentCenter;
label.frame = CGRectMake(0, 0, size.width, size.height);
label.backgroundColor = [UIColor clearColor]; 
label.layer.cornerRadius = 10;
[label.layer setMasksToBounds:YES];
//  customLabel.backgroundColor = [UIColor whiteColor]; 
label.backgroundColor = [[UIColor alloc] initWithPatternImage:[UIImage imageNamed:@"options.png"]];

/** Add the Label to the shawdow layer */
[shadowLayer addSublayer:label.layer];

[self.view.layer addSublayer:shadowLayer];      

[shadowLayer release];

- haroldcampbell

---

这是正确的。问题在于，如果一个图层填充了一个图案图片，它不会尊重圆角半径，除非你使用maskToBounds，并且如果你使用maskToBounds，则阴影将无法绘制。因此需要一个单独的图层来绘制阴影。 - jrturton

我明白您的意思。但是，不幸的是，代码对我来说没有显示任何内容。我按照原样复制了代码，并使用名为“options.png”的背景文件，但我没有这个文件，它只显示了一个黑色框。当我输入我的背景文件名称时，它根本没有显示任何东西。我真的很困惑！我会尝试调整一下看看能做些什么。 - hsnm

@jrturton所说的是正确的，这就是我对代码所做的。关于你没有看到任何东西。让我们调试一下结果-尝试这个，注释掉label.backgroundColor = [[UIColor alloc] initWithPatternImage：[UIImage imageNamed：@“options.png”]];这一行。取消上面的行并将customLabel变量重命名为label。现在您应该会看到一个带有黑色阴影的白色圆角标签。你得到了那个结果吗？ - haroldcampbell

@haroldcampbell 实际上什么也没有出现。就像我说的，当我指定一个不存在的背景图片文件时，会出现一个黑色的圆形形状！没关系，我会尝试看看我的代码是否有其他问题。我将在一个新的ViewController上检查这段代码，看看会发生什么。 - hsnm