Search code examples
swiftuibuttonborderouter-joinrounded-corners

Rounded Rect UIButton with outer border

i wants to make outer border for UIButton. When i click on button add border width, not inside rounded button - outside of this button.

P.S. i use this code to make button round: 

    button.layer.cornerRadius = 0.5 * button.frame.size.width
    button.clipsToBounds = true

And this for border:

    self.button.layer.borderWidth = CGFloat(10)

Now i have this result:

GIF RESULT

But i need border outside of the button. if someone help me, it's will be amazing, thanx.

Solution

  • Just add alpha (transparency) and instead of adding the border, change its alpha value. set the border color as follow: 

        let borderColor = UIColor(red: 0.0/256.0, green: 0.0/256.0, blue: 0.0/256.0, alpha: 0.0)

    and modify the alpha value. This way it will look like you are adding the frame on the outside of the button.

    Now, you didn't specify if you wanted the animation as well. If you do want the animation, you should just draw the frame outside the button's boundary, it might be trickier to do, and the frame would not have the button's functionality.

    Another option of keeping the button and the animation is to draw a circle with behind the button and set the border to transparent, then animate.

    These are only three of your options, I'm sure there are more...