Ajouter une bordure à l'extérieur d'une UIView (au lieu de l'intérieur)

Question

Si l'on ajoute une bordure à une vue en utilisant un code dans une vue comme

self.layer.borderColor = [UIColor yellowColor].CGColor;
self.layer.borderWidth = 2.0f;

la bordure est ajoutée à l'intérieur de la vue comme suit :

la vue de droite est la vue originale, comme vous pouvez le voir, la zone noire de la vue bordée est inférieure à celle de la vue originale. mais ce que je veux obtenir est une bordure en dehors de la vue originale, comme ceci : . la zone noire est égale à la zone originale, comment puis-je l'implémenter ?

Answer 1

Swift 5

extension UIView {
    fileprivate struct Constants {
        static let externalBorderName = "externalBorder"
    }

    func addExternalBorder(borderWidth: CGFloat = 2.0, borderColor: UIColor = UIColor.white) -> CALayer {
        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.name = Constants.ExternalBorderName

        layer.insertSublayer(externalBorder, at: 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()
    }
}

Answer 2

Augmentez la largeur et la hauteur du cadre de la vue avec la largeur de la bordure avant d'ajouter la bordure :

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;

Answer 3

J'ai aimé la solution de @picciano Si vous voulez un cercle explosif au lieu d'un carré remplacez addExternalBorder fonction avec :

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

    }

Answer 4

Il existe en fait une solution très simple. Il suffit de les régler tous les deux comme ceci :

view.layer.borderWidth = 5

view.layer.borderColor = UIColor(red: 1, green: 1, blue: 1, alpha: 0.5).cgColor

view.backgroundColor = UIColor(red: 1, green: 1, blue: 1, alpha: 0.25).cgColor

Answer 5

La façon dont j'ai placé une bordure autour de ma vue IU (main - SubscriptionAd) dans Storyboard est de la placer à l'intérieur d'une autre vue IU (background - BackgroundAd). L'UIView Background a une couleur de fond qui correspond à la couleur de la bordure que je veux, et l'UIView Main a des contraintes de valeur 2 de chaque côté.

Je vais lier la vue de l'arrière-plan à mon ViewController, puis activer et désactiver la bordure en changeant la couleur de l'arrière-plan.