如何仅在圆形 UIButton 顶部制作边框颜色？

Question

我在UITabBarController 中制作中心圆UIButton。我只需要在 UIButton 从 tabBar 边框出来的地方绘制边框颜色。我怎样才能做到？我们只需要那里的边框颜色https://monosnap.com/file/7MDqGzpUdIbClvnAvAiY2kJYKUro7z

我把 UIButton 做成了

       private func setupLifelineButton() {
        let lifelineButton = UIButton(frame: CGRect(x: 0, y: 0, width: 64, height: 64))
        var lifelineButtonFrame = lifelineButton.frame
        lifelineButtonFrame.origin.y = view.bounds.height - lifelineButtonFrame.height - 13 // default without 13
        lifelineButtonFrame.origin.x = view.bounds.width / 2 - lifelineButtonFrame.size.width / 2
        lifelineButton.frame = lifelineButtonFrame

//        lifelineButton.backgroundColor = .redColor()
        lifelineButton.layer.cornerRadius = lifelineButtonFrame.height / 2
        lifelineButton.layer.borderWidth = 0.5
        lifelineButton.layer.borderColor = ColorManager.tabBarLayerColor.CGColor//UIColor.blackColor().CGColor

        lifelineButton.addTarget(self, action: #selector(menuButtonAction), forControlEvents: .TouchUpInside)

        // icon 

//        lifelineButton.setImage(UIImage(named: "LifeLineBarButtonIcon"), forState: .Normal)

        self.view.addSubview(lifelineButton)
        self.view.layoutIfNeeded()
    }

更新：我需要删除边框颜色的下半部分

Answer 1

这可能对你有帮助

目标 c

-(void)createCurveBtnWithBorder
{
   UIBezierPath *shapePath = [UIBezierPath bezierPathWithRoundedRect:_btnCurve.bounds
                                                byRoundingCorners:UIRectCornerTopLeft | UIRectCornerTopRight
                                                      cornerRadii:CGSizeMake(_btnCurve.frame.size.width/2, _btnCurve.frame.size.height/2)];

   CAShapeLayer *shapeLayer = [CAShapeLayer layer];
   shapeLayer.frame = _btnCurve.bounds;
   shapeLayer.path = shapePath.CGPath;
   _btnCurve.backgroundColor=[UIColor clearColor];
   shapeLayer.fillColor = [UIColor purpleColor].CGColor;
   shapeLayer.strokeColor = [UIColor blueColor].CGColor; //Here you can set border with green color
   shapeLayer.lineWidth = 2;
   [_btnCurve.layer addSublayer:shapeLayer];
}

斯威夫特 4

func createCurveBtnWithBorder()
{
   let shapePath = UIBezierPath(roundedRect: btnCurve.bounds, byRoundingCorners: [.topLeft, .topRight], cornerRadii: CGSize(width: btnCurve.frame.size.width / 2, height: btnCurve.frame.size.height / 2))
   let shapeLayer = CAShapeLayer()
   shapeLayer.frame = btnCurve.bounds
   shapeLayer.path = shapePath.cgPath
   btnCurve.backgroundColor = UIColor.clear as? CGColor
   shapeLayer.fillColor = UIColor.purple.cgColor
   shapeLayer.strokeColor = UIColor.blue.cgColor
   //Here you can set border with green color
   shapeLayer.lineWidth = 2
   btnCurve.layer.addSublayer(shapeLayer)
}

这是输出

Answer 2

好吧，您可以完全按照自己的意愿制作图像，然后为按钮提供该图像！ ?

Answer 3

我做的不一样

     private func setupLifelineButton() {
        lifelineButton = UIButton(frame: CGRect(x: 0, y: 0, width: 64, height: 64))
        var lifelineButtonFrame = lifelineButton.frame
        lifelineButtonFrame.origin.y = view.bounds.height - lifelineButtonFrame.height - 13 // default without 13
        lifelineButtonFrame.origin.x = view.bounds.width / 2 - lifelineButtonFrame.size.width / 2
        lifelineButton.frame = lifelineButtonFrame

        lifelineButton.backgroundColor = .whiteColor()
        lifelineButton.layer.cornerRadius = lifelineButtonFrame.height / 2

        lifelineButton.addTarget(self, action: #selector(showLifelineScreen), forControlEvents: .TouchUpInside)

        // icon 
        let lifelineImageView = UIImageView(image: UIImage(named: "LifeLineBarButtonIcon"))
        view.addSubview(lifelineButton)
        lifelineButton.addSubview(lifelineImageView)

        lifelineImageView.snp_makeConstraints { (make) in
            make.width.equalTo(ConstraintManager.widthByMainScreenByOriginalDigit(30))
            make.height.equalTo(ConstraintManager.heightByMainScreenByOriginalDigit(40))
            make.center.equalTo(lifelineButton)
        }


        // second view
        let path = UIBezierPath(arcCenter: CGPoint(x: lifelineButton.frame.width / 2, y: lifelineButton.frame.height / 2), radius: lifelineButtonFrame.height / 2, startAngle: CGFloat(-M_PI_2), endAngle: CGFloat(M_PI * 2 - M_PI_2), clockwise: true)

        let arc = Arc.sharedInstance
        arc.addFigure(path.CGPath, fillColor: .clearColor(), strokeColor: ColorManager.tabBarLayerColor, strokeStart: 0, strokeEnd: 0.23, lineWidth: 0.5, miterLimit: 0, lineDashPhase: 0, layer: lifelineButton.layer)
        arc.addFigure(path.CGPath, fillColor: .clearColor(), strokeColor: .whiteColor(), strokeStart: 0.23, strokeEnd: 0.77, lineWidth: 0.5, miterLimit: 0, lineDashPhase: 0, layer: lifelineButton.layer)
        arc.addFigure(path.CGPath, fillColor: .clearColor(), strokeColor: ColorManager.tabBarLayerColor, strokeStart: 0.77, strokeEnd: 1, lineWidth: 0.5, miterLimit: 0, lineDashPhase: 0, layer: lifelineButton.layer)

        view.layoutIfNeeded()
    }

public class Arc {

    public init() { }

    public static let sharedInstance = Arc()

    public func addFigure(path: CGPath, fillColor: UIColor, strokeColor: UIColor, strokeStart: CGFloat, strokeEnd: CGFloat, lineWidth: CGFloat, miterLimit: CGFloat, lineDashPhase: CGFloat, layer: CALayer) {
        let shape = CAShapeLayer()
        shape.path = path
        shape.fillColor = fillColor.CGColor
        shape.strokeColor = strokeColor.CGColor
        shape.strokeStart = strokeStart
        shape.strokeEnd = strokeEnd
        shape.lineWidth = lineWidth
        shape.miterLimit = miterLimit
        shape.lineDashPhase = lineDashPhase
        layer.addSublayer(shape)
    }

    public func drawCircle(arcRadius: CGFloat, miniRadius: CGFloat, fillColor: UIColor, strokeColor: UIColor, view: UIView) {

    }
}

我的结果