Comment créer des lignes à double bordure dans l'UIImage avec le Swift?

Question

J'ai essayé de chercher les astuces "double frontière" dans Swift pour faire comme ça. J'ai le sentiment que cela pourrait être comme une "double bordure" dans UIImage.

Faites-moi savoir si vous connaissez les codes. :)

Answer 1

Vous pouvez simplement prendre un UIView et ajouter l'UIImageView à l'intérieur. Effacez la couleur de l'UIView pour effacer.

C'est ce que j'ai fait en utilisant le storyboard.

1. Ajout de l'UIView et d'une UIImageView à l'intérieur, la couleur de la vue est définie pour effacer et la vue de l'image est à 15 points de tous les côtés. Veuillez changer selon vos besoins (Reportez-vous à l'image 1).

2. Il s'agit du code du contrôleur de vue (voir l'image 2).

3. Sortie (Reportez-vous à l'image 3).

Remarque : Juste une idée de base, bien que vous puissiez changer la couleur et la largeur de la bordure, etc. selon vos besoins.

Disposition du storyboard

Afficher le code du contrôleur

Production

Answer 2

Vous devez ajouter borderColor (noir) et cornerRadius à la couche par défaut de UIImageView. Parallèlement à cela, vous devez ajouter une autre sous-couche dans UIImageView avec borderColor en gris.

imageView.layer.borderWidth = 4.0
imageView.layer.borderColor = UIColor.gray.cgColor
imageView.layer.cornerRadius = imageView.frame.width / 2

let borderLayer = CALayer()
borderLayer.frame = imageView.bounds
borderLayer.borderColor = UIColor.black.cgColor
borderLayer.borderWidth = 14.0
borderLayer.cornerRadius = borderLayer.frame.width / 2
imageView.layer.insertSublayer(borderLayer, above: imageView.layer)

Voir la démo de l'aire de jeux ci-jointe.

Answer 3

Je pense que vous pouvez ajouter 1 cercle (UIView) en tant que sous-vue entre UIImageView et UIImage. Par exemple, vous pouvez initialiser UIImageView avec la graycouleur du cornerRadius externe. Ensuite, vous ajoutez le cercle UIView et enfin l'UIImage.

Ou, l'alternative peut être d'ajouter l'UIImage avant le cercle UIView (avec un arrière-plan transparent).

Je pense que vous pouvez trouver le code similaire ici: Image View Double Border