仅在 uilabel 周围绘制顶部、右侧和底部边框

Posted 2023-03-11

【中文标题】仅在 uilabel 周围绘制顶部、右侧和底部边框

【英文标题】：draw only top, right, and bottom border around a uilabel

【发布时间】：2014-02-05 18:57:50

【问题描述】：

我尝试为 uilabel 添加边框，但我只想拥有top, right, and bottom 边框。

喜欢这个

           ----------------
                          |
            I am a label  |
                          |
           ----------------

我尝试使用这些代码，但默认情况下它会添加所有 4 个面

    myLabel.layer.borderWidth = 1;
    myLabel.layer.borderColor = [UIColor blackColor];

那是不是我只能添加 3 面，甚至 1 或 2 面？

谢谢！

【问题讨论】：

老实说，添加三个薄的黑色 UIView 并没有什么问题 - 使用自动布局非常容易。

【参考方案1】：

您可以使用面具。这是我用来测试理论的代码，效果很好：

// Define the border width in a variable, we'll be using it elsewhere
CGFloat borderWidth = 1.0;

// This creates a testing view to test the theory, in your case this will be your UILabel
UIView* view = [[UIView alloc] initWithFrame:CGRectMake(20, 60, 250, 100)];
view.layer.borderColor = [UIColor blackColor].CGColor;
view.layer.borderWidth = borderWidth;
[self.view addSubview:view];

// Create the mask to cover the area of the view you want to **show**
// Here, we create a mask that covers most of the view, except the left edge
// The mask needs to be coloured in black, as black acts as transparent, whereas white is opaque in mask parlance
UIView* mask = [[UIView alloc] initWithFrame:CGRectMake(borderWidth, 0, view.frame.size.width - borderWidth, view.frame.size.height)];
mask.backgroundColor = [UIColor blackColor];
view.layer.mask = mask.layer;

您可以调整蒙版的大小和位置（给定borderWidth）以显示/隐藏您感兴趣的边框边缘。上面的示例隐藏了左边缘。

【讨论】：

这对我来说看起来很棒，谢谢。如果我有 15 个声望，我很乐意投票给你。

@user3276557 它比列出的其他解决方案要好，因为它将边框绘制留给 CoreGraphics 框架，并且不会用其他视图污染您的视图层次结构。掩码已优化，因此将获得更好的性能。 （所以不知道为什么不再被接受的答案......）

哦，我很抱歉，我对 *** 很陌生，我想我可以接受你的回答和 Mikael 的回答。你的答案更好。如果我有足够的声誉，也许我应该投票......

如何在 Swift 中实现这个？

在 Swift 中使用这个： let view = UIView(frame: CGRectMake(20,60 , 250, 100)) view.layer.borderColor = UIColor.blueColor().CGColor; view.layer.borderWidth = 边框宽度； self.view.addSubview(view) let mask = UIView(frame: CGRectMake(borderWidth, 0, view.frame.size.width - borderWidth, view.frame.size.height)) // mask.backgroundColor = UIColor.blackColor( ) view.layer.mask = mask.layer;

【参考方案2】：

您必须调整尺寸，但这是要点。 （可能有错别字）

UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 35)];
UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(10, 15, 320, 20)];

CALayer *bottomBorder = [CALayer layer];
bottomBorder.frame = CGRectMake(0, 40, 320, .5);

CALayer *rightBorder = [CALayer layer];
rightBorder.frame = CGRectMake(320, 0, 40, .5);

CALayer *topBorder = [CALayer layer];
topBorder.frame = CGRectMake(0, 0, 320, .5);

[view.layer addSublayer:bottomBorder];
[view.layer addSublayer:topBorder];
[view.layer addSublayer:rightBorder];
[view.layer addSublayer:label];

【讨论】：

我想我只想把它放在我的标签上，因为我在一个视图控制器上有大约 6 个。在您的代码中，我可能需要再创建 6 个 uiview，但感谢您的想法。

只要去掉视图就可以了。我只是觉得它的视图更整洁。

【参考方案3】：

您可以通过创建使用 UIBezierPath 的 CALayer 来用一条线绘制您的三个边。在所有示例中，将 QuartzCore 框架作为项目的一部分。

以您的原始代码为起点：

// at the top of the file with this code, include:
#import <QuartzCore/QuartzCore.h>

CGRect rect = myLabel.frame;

UIBezierPath * linePath = [UIBezierPath bezierPath];

// start at top left corner
[linePath moveToPoint:CGPointMake(0,0);
// draw top line across
[linePath addLineToPoint:CGPointMake(rect.size.width, 0);
// draw right vertical side
[linePath addLineToPoint:CGPointMake(rect.size.width, rect.size.height);
// draw left vertical side
[linePath addLineToPoint:CGPointMake(0, rect.size.height);

// draw from bottom right corner back to bottom left corner
[linePath addLineToPoint:CGPointMake(0, rect.size.height);

// create a layer that uses your defined path
CAShapeLayer * lineLayer = [CAShapeLayer layer];
lineLayer.lineWidth = 1.0;
lineLayer.strokeColor = [UIColor blackColor].CGColor;

lineLayer.fillColor = nil;
lineLayer.path = linePath.CGPath;

[myLabel.layer addSublayer:lineLayer];

【参考方案4】：

我正在使用 Swift 3。

// myLabel is a UILabel
let frame = myLabel.frame //Frame of label

// Bottom Layer
let bottomLayer = CALayer()
bottomLayer.frame = CGRect(x: 0, y: frame.height - 1, width: frame.width, height: 1)
bottomLayer.backgroundColor = UIColor.black.cgColor
myLabel.layer.addSublayer(bottomLayer)

// Top Layer
let topLayer = CALayer()
topLayer.frame = CGRect(x: 0, y: 0, width: frame.width, height: 1)
topLayer.backgroundColor = UIColor.black.cgColor
myLabel.layer.addSublayer(topLayer)

同样：

// Right Layer
let rightLayer = CALayer()
rightLayer.frame = CGRect(x: frame.width - 1, y: 0, width: 1, height: frame.height)
rightLayer.backgroundColor = UIColor.black.cgColor
myLabel.layer.addSublayer(rightLayer)

其中 1 是边框的宽度。

【参考方案5】：

你们来了！希望这会有所帮助，将其添加到 UItextfield 覆盖类中

UIView *view = [[UIView alloc] init];
view.translatesAutoresizingMaskIntoConstraints = NO;
view.layer.borderWidth = 1;
view.backgroundColor = [UIColor blackColor];
[self addSubview:view];

[self addConstraint:[NSLayoutConstraint constraintWithItem:view attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:self attribute:NSLayoutAttributeBottom multiplier:1.0 constant:0.0]];
[self addConstraint:[NSLayoutConstraint constraintWithItem:view attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:self attribute:NSLayoutAttributeWidth multiplier:1.0 constant:0.0]];
[self addConstraint:[NSLayoutConstraint constraintWithItem:view attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeHeight multiplier:1.0 constant:1.0]];
[self addConstraint:[NSLayoutConstraint constraintWithItem:view attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:self attribute:NSLayoutAttributeCenterX multiplier:1.0 constant:1.0]];

【参考方案6】：

感谢@jaiswal，我使用了你的代码并创建了一个函数，因为我有超过 10 个 UILabel。我把它放在这里供参考。

 func buttomBoarder(label: UILabel) -> UILabel 
    let frame = label.frame

    let bottomLayer = CALayer()
    bottomLayer.frame = CGRect(x: 0, y: frame.height - 1, width: frame.width, height: 1)
    bottomLayer.backgroundColor = UIColor.black.cgColor
    label.layer.addSublayer(bottomLayer)

    return label

调用使用

labelName = buttomBoarder(label: labelName)

【参考方案7】：

你可以继承 UILabel 并覆盖 drawRect: 来做到这一点。

或者您可以只制作 3 个黑色背景的 UIView 作为此标签的子视图。如果您在它们上正确设置 autoresizingMask，它们将根据标签大小的变化进行调整。 上边框应该有灵活的宽度和灵活的下边距，下边框应该有灵活的宽度和灵活的上边距，右边框应该有灵活的高度和灵活的左边距。

【讨论】：

也许一些代码会有所帮助。但是谢谢你的想法。

【参考方案8】：

您可以通过多种方式做到这一点： 第一个是最简单的，只需找到一个看起来像您的边框笔划的图像。然后在你的 UILabel 后面添加一个 UIImageView。 第二种方法是覆盖 UILabel drawRect: 然后根据您的需要绘制描边。