UIButton圆角和边框

时间:2013-10-07 16:05:53

标签: iphone ios cocoa-touch uibutton rounded-corners

我想在UIButton上设置边框,并且只在一侧设置圆角

我使用此代码:

//set rounded corners on top
UIBezierPath *maskPath =  [UIBezierPath bezierPathWithRoundedRect:self.scanButton.bounds byRoundingCorners:(UIRectCornerTopLeft | UIRectCornerTopRight) cornerRadii:CGSizeMake(10.0, 10.0)];

CAShapeLayer *maskLayer = [CAShapeLayer layer];
maskLayer.frame = self.scanButton.bounds;
maskLayer.path = maskPath.CGPath;

self.scanButton.layer.mask = maskLayer;

// set border
self.scanButton.layer.borderColor = [UIColor blackColor].CGColor;
self.scanButton.layer.borderWidth = 2.0f;
[self.scanButton.layer setMasksToBounds:YES];

enter image description here

如何在顶角设置合适的边框?

3 个答案:

答案 0 :(得分:3)

Swift 2.0版本

边框的边角是剪裁因为你可能在UIView本身上设置了视图的背景颜色。更好的方法是直接在图层上设置填充颜色。这可以这样做:

let button = ... // your existing UIButton
let borderLayer = CAShapeLayer()
borderLayer.strokeColor = UIColor.blackColor().CGColor
borderLayer.fillColor = UIColor.yellowColor().CGColor
borderLayer.borderWidth = 2.0

let borderPath = UIBezierPath(roundedRect: button.bounds,
    byRoundingCorners: [.TopLeft, .TopRight],
    cornerRadii: CGSize(width:10.0, height: 10.0))
    borderLayer.path = borderPath.CGPath

button.layer.insertSublayer(borderLayer, atIndex: 0)

上面会给你这个结果没有修剪角落:

example button

我已经使用这种方法组合了一个UIButton子类,其中可以单独在按钮的每个角上设置边框半径,请在此处查看:https://gist.github.com/alexpls/95279b3f9a2da7f2d7bf,希望它有所帮助!

答案 1 :(得分:2)

你可能最好用子类化UIButton并用你的自定义绘图覆盖drawRect:你需要实现一个CGContext并添加你的UIBezierPath然后抚摸它。不记得你是否需要先把它作为CGPath,但我不这么认为。

答案 2 :(得分:1)

看一下以下答案 - Stroke masked CALayer in iOS他使用了面具和放大器的组合。形状图层来绘制这样的自定义边框。您需要为屏蔽图层关闭常规边框。