如何在周围添加虚线边框UIView
。
像这样
如何在周围添加虚线边框UIView
。
像这样
Answers:
您可以使用“图层”和“贝塞尔曲线”路径使用此图案设置边框,如下例所示。
目标C
CAShapeLayer *yourViewBorder = [CAShapeLayer layer];
yourViewBorder.strokeColor = [UIColor blackColor].CGColor;
yourViewBorder.fillColor = nil;
yourViewBorder.lineDashPattern = @[@2, @2];
yourViewBorder.frame = yourView.bounds;
yourViewBorder.path = [UIBezierPath bezierPathWithRect:yourView.bounds].CGPath;
[yourView.layer addSublayer:yourViewBorder];
斯威夫特3.1
var yourViewBorder = CAShapeLayer()
yourViewBorder.strokeColor = UIColor.black.cgColor
yourViewBorder.lineDashPattern = [2, 2]
yourViewBorder.frame = yourView.bounds
yourViewBorder.fillColor = nil
yourViewBorder.path = UIBezierPath(rect: yourView.bounds).cgPath
yourView.layer.addSublayer(yourViewBorder)
您还可以使用图案图片设置不同类型的设计,如下例所示。
[yourView.layer setBorderWidth:5.0];
[yourView.layer setBorderColor:[[UIColor colorWithPatternImage:[UIImage imageNamed:@"DotedImage.png"]] CGColor]];///just add image name and create image with dashed or doted drawing and add here
在这里,您必须<QuartzCore/QuartzCore>
在项目中添加框架,并使用YourViewController.m
文件中的以下行将其导入。
#import <QuartzCore/QuartzCore.h>
如果您喜欢子图层,则可以使用另一种方法。在您的自定义视图的init中,放置以下内容(_border是一个ivar):
_border = [CAShapeLayer layer];
_border.strokeColor = [UIColor colorWithRed:67/255.0f green:37/255.0f blue:83/255.0f alpha:1].CGColor;
_border.fillColor = nil;
_border.lineDashPattern = @[@4, @2];
[self.layer addSublayer:_border];
然后在您的layoutsubviews中,输入以下内容:
_border.path = [UIBezierPath bezierPathWithRect:self.bounds].CGPath;
_border.frame = self.bounds;
_border.path = [UIBezierPath bezierPathWithRoundedRect:self.bounds cornerRadius:5.f].CGPath;
_border.lineWidth = 3
border = CAShapeLayer() border.strokeColor = yourColor border.fillColor = nil border.lineDashPattern = [4, 2] self.layer.addSublayer(border)
对于那些在Swift中工作的人来说,在UIView上进行此类扩展很容易。这是基于sunshineDev的答案。
extension UIView {
func addDashedBorder() {
let color = UIColor.red.cgColor
let shapeLayer:CAShapeLayer = CAShapeLayer()
let frameSize = self.frame.size
let shapeRect = CGRect(x: 0, y: 0, width: frameSize.width, height: frameSize.height)
shapeLayer.bounds = shapeRect
shapeLayer.position = CGPoint(x: frameSize.width/2, y: frameSize.height/2)
shapeLayer.fillColor = UIColor.clear.cgColor
shapeLayer.strokeColor = color
shapeLayer.lineWidth = 2
shapeLayer.lineJoin = CAShapeLayerLineJoin.round
shapeLayer.lineDashPattern = [6,3]
shapeLayer.path = UIBezierPath(roundedRect: shapeRect, cornerRadius: 5).cgPath
self.layer.addSublayer(shapeLayer)
}
}
要使用它:
anyView.addDashedBorder()
addDashedBorder()
,didMoveToSuperview()
认为自动布局到那时将完成,并且帧大小正确,但事实并非如此。虚线边框的宽度超出了视图的宽度。虚线看起来很好!这self.frame.size
是不正确的。
迅捷3:
import UIKit
class UIViewWithDashedLineBorder: UIView {
override func draw(_ rect: CGRect) {
let path = UIBezierPath(roundedRect: rect, cornerRadius: 0)
UIColor.purple.setFill()
path.fill()
UIColor.orange.setStroke()
path.lineWidth = 5
let dashPattern : [CGFloat] = [10, 4]
path.setLineDash(dashPattern, count: 2, phase: 0)
path.stroke()
}
}
在情节提要(作为自定义类)中或直接在代码中使用:
let v = UIViewWithDashedLineBorder(frame: CGRect(x: 0, y: 0, width: 100, height: 100))
结果:
根据Prasad G的建议,我在UIImage Extras类中创建了一个方法,其中包含以下内容:
- (CAShapeLayer *) addDashedBorderWithColor: (CGColorRef) color {
CAShapeLayer *shapeLayer = [CAShapeLayer layer];
CGSize frameSize = self.size;
CGRect shapeRect = CGRectMake(0.0f, 0.0f, frameSize.width, frameSize.height);
[shapeLayer setBounds:shapeRect];
[shapeLayer setPosition:CGPointMake( frameSize.width/2,frameSize.height/2)];
[shapeLayer setFillColor:[[UIColor clearColor] CGColor]];
[shapeLayer setStrokeColor:color];
[shapeLayer setLineWidth:5.0f];
[shapeLayer setLineJoin:kCALineJoinRound];
[shapeLayer setLineDashPattern:
[NSArray arrayWithObjects:[NSNumber numberWithInt:10],
[NSNumber numberWithInt:5],
nil]];
UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:shapeRect cornerRadius:15.0];
[shapeLayer setPath:path.CGPath];
return shapeLayer;
}
请务必指出,如果将形状的位置定义为(0,0),则边框的下角将位于图像的中心,这就是为什么我将其设置为:(frameSize.width / 2,frameSize .height / 2)
然后,我使用我的方法使用UIImageView的UIImage获取虚线边框,并将CAShapeLayer添加为UIImageView层的子层:
[myImageView.layer addSublayer:[myImageView.image addDashedBorderWithColor:[[UIColor whiteColor] CGColor]]];
使用CGContextSetLineDash()方法。
CGFloat dashPattern[]= {3.0, 2};
context =UIGraphicsGetCurrentContext();
CGContextSetRGBStrokeColor(context, 1.0, 1.0, 1.0, 1.0);
// And draw with a blue fill color
CGContextSetRGBFillColor(context, 0.0, 0.0, 1.0, 1.0);
// Draw them with a 2.0 stroke width so they are a bit more visible.
CGContextSetLineWidth(context, 4.0);
CGContextSetLineDash(context, 0.0, dashPattern, 2);
CGContextAddRect(context, self.bounds);
// Close the path
CGContextClosePath(context);
CGContextStrokePath(context);
// Fill & stroke the path
CGContextDrawPath(context, kCGPathFillStroke);
我认为这将对您有所帮助。
这是一个UIView子类,可以用于任何项目,也可以用于圆形视图:
import UIKit
class CustomDashedView: UIView {
@IBInspectable var cornerRadius: CGFloat = 0 {
didSet {
layer.cornerRadius = cornerRadius
layer.masksToBounds = cornerRadius > 0
}
}
@IBInspectable var dashWidth: CGFloat = 0
@IBInspectable var dashColor: UIColor = .clear
@IBInspectable var dashLength: CGFloat = 0
@IBInspectable var betweenDashesSpace: CGFloat = 0
var dashBorder: CAShapeLayer?
override func layoutSubviews() {
super.layoutSubviews()
dashBorder?.removeFromSuperlayer()
let dashBorder = CAShapeLayer()
dashBorder.lineWidth = dashWidth
dashBorder.strokeColor = dashColor.cgColor
dashBorder.lineDashPattern = [dashLength, betweenDashesSpace] as [NSNumber]
dashBorder.frame = bounds
dashBorder.fillColor = nil
if cornerRadius > 0 {
dashBorder.path = UIBezierPath(roundedRect: bounds, cornerRadius: cornerRadius).cgPath
} else {
dashBorder.path = UIBezierPath(rect: bounds).cgPath
}
layer.addSublayer(dashBorder)
self.dashBorder = dashBorder
}
}
这样,您可以从情节提要中进行编辑,如下所示:
一对结果:
为此,您需要为该特定对象添加CAShapeLayer
CAShapeLayer * dotborder = [CAShapeLayer layer];
dotborder.strokeColor = [UIColor redColor].CGColor;//your own color
dotborder.fillColor = nil;
dotborder.lineDashPattern = @[@4, @2];//your own patten
[codeBtn.layer addSublayer:dotborder];
dotborder.path = [UIBezierPath bezierPathWithRect:codeBtn.bounds].CGPath;
dotborder.frame = codeBtn.bounds;
斯威夫特4.2
根据rmooney的回答,将其UIView
扩展为具有可配置参数的参数,这些参数已设置了默认值。
请注意,如果视图具有
self.translatesAutoresizingMaskIntoConstraints = false
extension UIView {
func addDashedBorder(_ color: UIColor = UIColor.black, withWidth width: CGFloat = 2, cornerRadius: CGFloat = 5, dashPattern: [NSNumber] = [3,6]) {
let shapeLayer = CAShapeLayer()
shapeLayer.bounds = bounds
shapeLayer.position = CGPoint(x: bounds.width/2, y: bounds.height/2)
shapeLayer.fillColor = nil
shapeLayer.strokeColor = color.cgColor
shapeLayer.lineWidth = width
shapeLayer.lineJoin = CAShapeLayerLineJoin.round // Updated in swift 4.2
shapeLayer.lineDashPattern = dashPattern
shapeLayer.path = UIBezierPath(roundedRect: bounds, cornerRadius: cornerRadius).cgPath
self.layer.addSublayer(shapeLayer)
}
}
shapeLayer.lineJoin = CAShapeLayerLineJoin.round
应该是yourViewBorder.lineJoin = kCALineJoinRound
QuartzCore答案的Swift版本。
import QuartzCore
let dottedPattern = UIImage(named: "dottedPattern")
myView.layer.borderWidth = 1
myView.layer.borderColor = UIColor(patternImage: dottedPattern!).CGColor
该CAShapeLayer
方法有效,但如果需要,可以使用QuartzCore方法更好地处理Table View重载。UIView
位于单元格内。
对于图像,您可以使用类似以下的内容(它很小):
当我可以摆脱它时,我倾向于使用矢量而不是PNG:
Images.xcassets
,创建一个New Image Set
称为dottedPatternScale Factors
为Single Vector
对于Xamarin.iOS虚线/虚线边框。
dottedLayer = new CAShapeLayer();
dottedLayer.StrokeColor = UIColor.FromRGB(202, 202, 208).CGColor;
dottedLayer.FillColor = null;
dottedLayer.LineDashPattern = new[] { new NSNumber(4), new NSNumber(2) };
dottedLayer.Path = UIBezierPath.FromRect(YourView.Bounds).CGPath; //for square
dottedLayer.Path = UIBezierPath.FromRoundedRect(YourView.Bounds, 5).CGPath; //for rounded corners
dottedLayer.Frame = YourView.Bounds;
YourView.Layer.AddSublayer(dottedLayer);
这是您在Swift 2中是否想要的
func addDashedLineBorderWithColor(color:UIColor) {
let _ = self.sublayers?.filter({$0.name == "DashedBorder"}).map({$0.removeFromSuperlayer()})
let border = CAShapeLayer();
border.name = "DashedBorder"
border.strokeColor = color.CGColor;
border.fillColor = nil;
border.lineDashPattern = [4, 4];
border.path = UIBezierPath(rect: self.bounds).CGPath
border.frame = self.bounds;
self.addSublayer(border);
}
尝试下面的代码
- (void)drawRect:(CGRect)rect {
//// Color Declarations
UIColor* fillColor = [UIColor colorWithRed: 1 green: 1 blue: 1 alpha: 1];
UIColor* strokeColor = [UIColor colorWithRed: 0.29 green: 0.565 blue: 0.886 alpha: 1];
//// Rectangle Drawing
UIBezierPath* rectanglePath = [UIBezierPath bezierPathWithRoundedRect:rect cornerRadius: 6];
[fillColor setFill];
[rectanglePath fill];
[strokeColor setStroke];
rectanglePath.lineWidth = 1;
CGFloat rectanglePattern[] = {6, 2, 6, 2};
[rectanglePath setLineDash: rectanglePattern count: 4 phase: 0];
[rectanglePath stroke];
[super drawRect:rect];
}
对于Swift 5
extension UIView {
func addDashBorder() {
let color = UIColor.white.cgColor
let shapeLayer:CAShapeLayer = CAShapeLayer()
let frameSize = self.frame.size
let shapeRect = CGRect(x: 0, y: 0, width: frameSize.width, height: frameSize.height)
shapeLayer.bounds = shapeRect
shapeLayer.name = "DashBorder"
shapeLayer.position = CGPoint(x: frameSize.width/2, y: frameSize.height/2)
shapeLayer.fillColor = UIColor.clear.cgColor
shapeLayer.strokeColor = color
shapeLayer.lineWidth = 1.5
shapeLayer.lineJoin = .round
shapeLayer.lineDashPattern = [2,4]
shapeLayer.path = UIBezierPath(roundedRect: shapeRect, cornerRadius: 10).cgPath
self.layer.masksToBounds = false
self.layer.addSublayer(shapeLayer)
}
}
如何添加
vw.addDashBorder()
如何再次删除边框
let _ = vw.layer.sublayers?.filter({$0.name == "DashBorder"}).map({$0.removeFromSuperlayer()})
我最终使用@Chris实现创建了一个IB Designable:
CurvedDashedBorderUIVIew.h:
#import <UIKit/UIKit.h>
IB_DESIGNABLE
@interface CurvedDashedBorderUIVIew : UIView
@property (nonatomic) IBInspectable CGFloat cornerRadius;
@property (nonatomic) IBInspectable UIColor *borderColor;
@property (nonatomic) IBInspectable int dashPaintedSize;
@property (nonatomic) IBInspectable int dashUnpaintedSize;
@property (strong, nonatomic) CAShapeLayer *border;
@end
CurvedDashedBorderUIVIew.m:
#import "CurvedDashedBorderUIVIew.h"
@implementation CurvedDashedBorderUIVIew
- (instancetype)init
{
self = [super init];
if (self) {
[self setup];
}
return self;
}
- (instancetype)initWithCoder:(NSCoder *)coder
{
self = [super initWithCoder:coder];
if (self) {
[self setup];
}
return self;
}
- (instancetype)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
[self setup];
}
return self;
}
-(void)setup
{
_border = [CAShapeLayer layer];
[self.layer addSublayer:_border];
}
-(void)layoutSubviews {
[super layoutSubviews];
self.layer.cornerRadius = self.cornerRadius;
_border.strokeColor = self.borderColor.CGColor;
_border.fillColor = nil;
_border.lineDashPattern = @[[NSNumber numberWithInt:_dashPaintedSize],
[NSNumber numberWithInt:_dashUnpaintedSize]];
_border.path = [UIBezierPath bezierPathWithRoundedRect:self.bounds cornerRadius:self.cornerRadius].CGPath;
_border.frame = self.bounds;
}
@end
然后只需在xib / storyboard中进行设置即可:
具有自定义类的Swift解决方案与自动布局一起使用
由@Iain Smith定制
class DashedBorderView: UIView {
@IBInspectable var cornerRadius: CGFloat = 4
@IBInspectable var borderColor: UIColor = UIColor.black
@IBInspectable var dashPaintedSize: Int = 2
@IBInspectable var dashUnpaintedSize: Int = 2
let dashedBorder = CAShapeLayer()
override init(frame: CGRect) {
super.init(frame: frame)
commonInit()
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
commonInit()
}
private func commonInit() {
//custom initialization
self.layer.addSublayer(dashedBorder)
applyDashBorder()
}
override func layoutSublayers(of layer: CALayer) {
super.layoutSublayers(of: layer)
applyDashBorder()
}
func applyDashBorder() {
dashedBorder.strokeColor = borderColor.cgColor
dashedBorder.lineDashPattern = [NSNumber(value: dashPaintedSize), NSNumber(value: dashUnpaintedSize)]
dashedBorder.fillColor = nil
dashedBorder.cornerRadius = cornerRadius
dashedBorder.path = UIBezierPath(rect: self.bounds).cgPath
dashedBorder.frame = self.bounds
}
}
您可以像这样简单地创建一个IBDesignable类:
import UIKit
@IBDesignable
class BorderedView: UIView {
@IBInspectable var cornerRadius: CGFloat = 0
@IBInspectable var borderWidth: CGFloat = 0
@IBInspectable var borderColor: UIColor = UIColor.clear
override func draw(_ rect: CGRect) {
let path = UIBezierPath(roundedRect: rect, cornerRadius: cornerRadius)
path.lineWidth = borderWidth
borderColor.setStroke()
let dashPattern : [CGFloat] = [10, 4]
path.setLineDash(dashPattern, count: 2, phase: 0)
path.stroke()
}
}
然后,使用Xcode中的BorderedView子类化视图。这样,您可以从界面生成器中轻松设置边框颜色和边框宽度!
extension UIView{
func addDashedLineBorder() {
let color = UIColor.black.cgColor
let shapeLayer:CAShapeLayer = CAShapeLayer()
let frameSize = (self.frame.size)
let shapeRect = CGRect(x: 0, y: 0, width: self.frame.width, height: self.frame.height)
shapeLayer.bounds = shapeRect
shapeLayer.position = CGPoint(x: frameSize.width/2, y: frameSize.height/2)
shapeLayer.fillColor = UIColor.clear.cgColor
shapeLayer.strokeColor = color
shapeLayer.lineWidth = 1
shapeLayer.lineJoin = kCALineJoinRound
shapeLayer.lineDashPattern = [2,2]
shapeLayer.path = UIBezierPath(rect: shapeRect).cgPath
self.layer.addSublayer(shapeLayer)
}
并在viewdidLoad()中延迟调用此函数:
DispatchQueue.main.asyncAfter(deadline: .now() + 0.5) {
// Your code with delay
self.YourView.addDashedBorder()
}
•迅捷5
•与自动排版一起使用
•使用拐角半径
import UIKit
class DashedBorderView: UIView {
private let dashedLineColor = UIColor.black.cgColor
private let dashedLinePattern: [NSNumber] = [6, 3]
private let dashedLineWidth: CGFloat = 4
private let borderLayer = CAShapeLayer()
init() {
super.init(frame: CGRect.zero)
borderLayer.strokeColor = dashedLineColor
borderLayer.lineDashPattern = dashedLinePattern
borderLayer.backgroundColor = UIColor.clear.cgColor
borderLayer.fillColor = UIColor.clear.cgColor
borderLayer.lineWidth = dashedLineWidth
layer.addSublayer(borderLayer)
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
override func draw(_ rect: CGRect) {
borderLayer.frame = bounds
borderLayer.path = UIBezierPath(roundedRect: rect, cornerRadius: layer.cornerRadius).cgPath
}
}
在Swift 4中,我创建了一个具有以下功能的UIView扩展:
func borderDash(withRadius cornerRadius: Float, borderWidth: Float, borderColor: UIColor, dashSize: Int) {
let currentFrame = self.bounds
let shapeLayer = CAShapeLayer()
let path = CGMutablePath()
let radius = CGFloat(cornerRadius)
// Points - Eight points that define the round border. Each border is defined by two points.
let topLeftPoint = CGPoint(x: radius, y: 0)
let topRightPoint = CGPoint(x: currentFrame.size.width - radius, y: 0)
let middleRightTopPoint = CGPoint(x: currentFrame.size.width, y: radius)
let middleRightBottomPoint = CGPoint(x: currentFrame.size.width, y: currentFrame.size.height - radius)
let bottomRightPoint = CGPoint(x: currentFrame.size.width - radius, y: currentFrame.size.height)
let bottomLeftPoint = CGPoint(x: radius, y: currentFrame.size.height)
let middleLeftBottomPoint = CGPoint(x: 0, y: currentFrame.size.height - radius)
let middleLeftTopPoint = CGPoint(x: 0, y: radius)
// Points - Four points that are the center of the corners borders.
let cornerTopRightCenter = CGPoint(x: currentFrame.size.width - radius, y: radius)
let cornerBottomRightCenter = CGPoint(x: currentFrame.size.width - radius, y: currentFrame.size.height - radius)
let cornerBottomLeftCenter = CGPoint(x: radius, y: currentFrame.size.height - radius)
let cornerTopLeftCenter = CGPoint(x: radius, y: radius)
// Angles - The corner radius angles.
let topRightStartAngle = CGFloat(Double.pi * 3 / 2)
let topRightEndAngle = CGFloat(0)
let bottomRightStartAngle = CGFloat(0)
let bottmRightEndAngle = CGFloat(Double.pi / 2)
let bottomLeftStartAngle = CGFloat(Double.pi / 2)
let bottomLeftEndAngle = CGFloat(Double.pi)
let topLeftStartAngle = CGFloat(Double.pi)
let topLeftEndAngle = CGFloat(Double.pi * 3 / 2)
// Drawing a border around a view.
path.move(to: topLeftPoint)
path.addLine(to: topRightPoint)
path.addArc(center: cornerTopRightCenter,
radius: radius,
startAngle: topRightStartAngle,
endAngle: topRightEndAngle,
clockwise: false)
path.addLine(to: middleRightBottomPoint)
path.addArc(center: cornerBottomRightCenter,
radius: radius,
startAngle: bottomRightStartAngle,
endAngle: bottmRightEndAngle,
clockwise: false)
path.addLine(to: bottomLeftPoint)
path.addArc(center: cornerBottomLeftCenter,
radius: radius,
startAngle: bottomLeftStartAngle,
endAngle: bottomLeftEndAngle,
clockwise: false)
path.addLine(to: middleLeftTopPoint)
path.addArc(center: cornerTopLeftCenter,
radius: radius,
startAngle: topLeftStartAngle,
endAngle: topLeftEndAngle,
clockwise: false)
// Path is set as the shapeLayer object's path.
shapeLayer.path = path;
shapeLayer.backgroundColor = UIColor.clear.cgColor
shapeLayer.frame = currentFrame
shapeLayer.masksToBounds = false
shapeLayer.setValue(0, forKey: "isCircle")
shapeLayer.fillColor = UIColor.clear.cgColor
shapeLayer.strokeColor = borderColor.cgColor
shapeLayer.lineWidth = CGFloat(borderWidth)
shapeLayer.lineDashPattern = [NSNumber(value: dashSize), NSNumber(value: dashSize)]
shapeLayer.lineCap = kCALineCapRound
self.layer.addSublayer(shapeLayer)
self.layer.cornerRadius = radius;
}
如果您希望此功能与cornerRadius一起使用,请尝试以下操作
tagView.clipsToBounds = YES;
tagView.layer.cornerRadius = 20.0f;
tagView.backgroundColor = [UIColor groupTableViewBackgroundColor];
CAShapeLayer *yourViewBorder = [CAShapeLayer layer];
yourViewBorder.strokeColor = [UIColor blackColor].CGColor;
yourViewBorder.fillColor = nil;
yourViewBorder.lineDashPattern = @[@2, @2];
yourViewBorder.frame = tagView.bounds;
// Create the path for to make circle
UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:tagView.bounds
byRoundingCorners:UIRectCornerAllCorners
cornerRadii:CGSizeMake(20, 20)];
yourViewBorder.path = maskPath.CGPath;
[tagView.layer addSublayer:yourViewBorder];
迅捷5+
import UIKit
class DashedBorderView: UIView {
private let borderLayer = CAShapeLayer()
init(color: UIColor, width: CGFloat = 1) {
super.init(frame: CGRect.zero)
let pattern: [NSNumber] = [NSNumber(value: Float(5 * width)), NSNumber(value: Float(3 * width))]
borderLayer.backgroundColor = nil
borderLayer.fillColor = nil
borderLayer.lineDashPattern = pattern
borderLayer.lineWidth = width
borderLayer.strokeColor = color.cgColor
layer.addSublayer(borderLayer)
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
override func draw(_ rect: CGRect) {
borderLayer.frame = bounds
borderLayer.path = UIBezierPath(roundedRect: rect, cornerRadius: layer.cornerRadius).cgPath
}
}
如何使用:
// f.e. inside UIViewController
let viewWithDashedBorder = DashedBorderView(color: .red, width: 2)
view.addSubview(viewWithDashedBorder)