ios view添加上边框_ios - 在UIView外部添加边框（而不是在内部）

最新推荐文章于 2021-05-26 11:04:12 发布

原创最新推荐文章于 2021-05-26 11:04:12 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ios view添加上边框

这篇博客探讨了如何在iOS中为UIView添加边框，尤其是如何在视图外部而不是内部创建边框。作者提出了一种解决方案，即通过扩展视图的frame然后设置边框宽度来实现这一效果。其他回答提供了不同的方法，包括使用额外的CALayer、调整视图的frame和使用UIBezierPath等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ios - 在UIView外部添加边框(而不是在内部)

如果使用视图中的代码添加视图的边框

self.layer.borderColor = [UIColor yellowColor].CGColor;

self.layer.borderWidth = 2.0f;

边框添加到视图内部，如下所示：

右视图是原始视图，如您所见，边界视图的黑色区域小于原始视图。但我想得到的是原始视图之外的边框，如下所示：

。黑色区域等于原始区域，我该如何实现呢？

remykits asked 2019-06-17T08:58:06Z

7个解决方案

92 votes

不幸的是，您可以设置一个小的属性来将边框与外部对齐。它绘制与内部对齐，因为UIViews默认绘制操作在其边界内绘制。

想到的最简单的解决方案是在应用边框时按边框宽度的大小扩展UIView：

CGFloat borderWidth = 2.0f;

self.frame = CGRectInset(self.frame, -borderWidth, -borderWidth);

self.layer.borderColor = [UIColor yellowColor].CGColor;

self.layer.borderWidth = borderWidth;

Elliott James Perry answered 2019-06-17T08:58:28Z

17 votes

好的，已经有一个已接受的答案，但我认为有一个更好的方法，你只需要一个比你的视图大一点的新图层，不要将它掩盖到视图层的边界(实际上是默认行为)。以下是示例代码：

CALayer * externalBorder = [CALayer layer];

externalBorder.frame = CGRectMake(-1, -1, myView.frame.size.width+2, myView.frame.size.height+2);

externalBorder.borderColor = [UIColor blackColor].CGColor;

externalBorder.borderWidth = 1.0;

[myView.layer addSublayer:externalBorder];

myView.layer.masksToBounds = NO;

当然，如果你想要你的边框是1团大，如果你想要更多，你相应地适应borderWidth和图层的框架。这比使用稍大一点的第二个视图更好，因为CALayer比UIView轻，并且你没有修改myView的帧，这是好的，例如myView是aUIImageView

N.B：对我来说，结果在模拟器上并不完美(图层并不完全在正确的位置，因此有时候一侧的图层厚一些)但正是在真实设备上要求的。

编辑

其实我在N.B谈到的问题只是因为我减少了模拟器的屏幕，在正常尺寸上绝对没有问题

希望能帮助到你

Hugues Duvillier answered 2019-06-17T08:59:23Z

13 votes

那么没有直接的方法来做到这一点您可以考虑一些变通方法。

更改并增加框架并添加bordercolor

在当前视图后面添加一个较大的视图，使其显示为边框。可以作为自定义视图类

如果你不需要一个明确的边界(clearcut border)，那么你可以依靠阴影来达到目的

[view1 setBackgroundColor:[UIColor blackColor]];

UIColor *color = [UIColor yellowColor];

view1.layer.shadowColor = [color CGColor];

view1.layer.shadowRadius = 10.0f;

view1.layer.shadowOpacity = 1;

view1.layer.shadowOffset = CGSizeZero;

view1.layer.masksToBounds = NO;

Lithu T.V answered 2019-06-17T09:00:18Z

10 votes

通过以上公认的最佳答案，我使用了不太好的结果和难看的边缘经验：

所以我将与你分享我的UIView Swift扩展，它使用UIBezierPath作为边框轮廓 - 没有难看的边缘(灵感来自@Fattie)：

// UIView+BezierPathBorder.swift

import UIKit

extension UIView {

fileprivate var bezierPathIdentifier:String { return "bezierPathBorderLayer" }

fileprivate var bezierPathBorder:CAShapeLayer? {

return (self.layer.sublayers?.filter({ (layer) -> Bool in

return layer.name == self.bezierPathIdentifier && (layer as? CAShapeLayer) != nil

}) as? [CAShapeLayer])?.first

}

func bezierPathBorder(_ color:UIColor = .white, width:CGFloat = 1) {

var border = self.bezierPathBorder

let path = UIBezierPath(roundedRect: self.bounds, cornerRadius:self.layer.cornerRadius)

let mask = CAShapeLayer()

mask.path = path.cgPath

self.layer.mask = mask

if (border == nil) {

border = CAShapeLayer()

border!.name = self.bezierPathIdentifier

self.layer.addSublayer(border!)

}

border!.frame = self.bounds

let pathUsingCorrectInsetIfAny =

UIBezierPath(roundedRect: border!.bounds, cornerRadius:self.layer.cornerRadius)

border!.path = pathUsingCorrectInsetIfAny.cgPath

border!.fillColor = UIColor.clear.cgColor

border!.strokeColor = color.cgColor

border!.lineWidth = width * 2

}

func removeBezierPathBorder() {

self.layer.mask = nil

self.bezierPathBorder?.removeFromSuperlayer()

}

例：

let view = UIView(frame: CGRect(x: 20, y: 20, width: 100, height: 100))

view.layer.cornerRadius = view.frame.width / 2

view.backgroundColor = .red

//add white 2 pixel border outline

view.bezierPathBorder(.white, width: 2)

//remove border outline (optional)

view.removeBezierPathBorder()

Peter Kreinz answered 2019-06-17T09:00:55Z

7 votes

对于Swift实现，您可以将其添加为UIView扩展。

extension UIView {

struct Constants {

static let ExternalBorderName = "externalBorder"

}

func addExternalBorder(borderWidth: CGFloat = 2.0, borderColor: UIColor = UIColor.whiteColor()) -> CALayer {

let externalBorder = CALayer()

externalBorder.frame = CGRectMake(-borderWidth, -borderWidth, frame.size.width + 2 * borderWidth, frame.size.height + 2 * borderWidth)

externalBorder.borderColor = borderColor.CGColor

externalBorder.borderWidth = borderWidth

externalBorder.name = Constants.ExternalBorderName

layer.insertSublayer(externalBorder, atIndex: 0)

layer.masksToBounds = false

return externalBorder

}

func removeExternalBorders() {

layer.sublayers?.filter() { $0.name == Constants.ExternalBorderName }.forEach() {

$0.removeFromSuperlayer()

}

func removeExternalBorder(externalBorder: CALayer) {

guard externalBorder.name == Constants.ExternalBorderName else { return }

externalBorder.removeFromSuperlayer()

}

picciano answered 2019-06-17T09:01:21Z

2 votes

在添加边框之前，使用边框宽度增加视图框架的宽度和高度：

float borderWidth = 2.0f

CGRect frame = self.frame;

frame.width += borderWidth;

frame.height += borderWidth;

self.layer.borderColor = [UIColor yellowColor].CGColor;

self.layer.borderWidth = 2.0f;

Hossam Ghareeb answered 2019-06-17T09:01:48Z

0 votes

我喜欢@picciano的解决方案如果你想爆炸圆而不是方形替换addExternalBorder函数：

func addExternalBorder(borderWidth: CGFloat = 2.0, borderColor: UIColor = UIColor.white) {

let externalBorder = CALayer()

externalBorder.frame = CGRect(x: -borderWidth, y: -borderWidth, width: frame.size.width + 2 * borderWidth, height: frame.size.height + 2 * borderWidth)

externalBorder.borderColor = borderColor.cgColor

externalBorder.borderWidth = borderWidth

externalBorder.cornerRadius = (frame.size.width + 2 * borderWidth) / 2

externalBorder.name = Constants.ExternalBorderName

layer.insertSublayer(externalBorder, at: 0)

layer.masksToBounds = false

}

Maksim Kniazev answered 2019-06-17T09:02:14Z