web-dev-qa-db-fra.com

Comment définir imageView en cercle comme imageContacts dans Swift correctement?

Je veux montrer une image dans imageVoir comme le contact d'image (dans un cercle) Mais quand j'essaie de montrer cela, l'imageView redimensionne sa taille et cela ne s'affiche pas correctement dans un cercle.

 image.layer.borderWidth=1.0
 image.layer.masksToBounds = false
 image.layer.borderColor = UIColor.whiteColor().CGColor
 image.layer.cornerRadius = image.frame.size.height/2
 image.clipsToBounds = true

Je veux montrer comme ça: enter image description here

Mais je comprends ceci: enter image description here

Comment cette image peut-elle être redimensionnée à la taille UIImageView pour s'afficher comme un cercle?

Merci!

iosswiftuiimageviewxcode6
41
user3745888

Quelle taille frame utilisez-vous pour image? Je peux obtenir un cercle parfait si je règle le cadre comme un carré.

let image = UIImageView(frame: CGRectMake(0, 0, 100, 100))
35
chuckus

C'est la solution que j'ai utilisée dans mon application:

var image: UIImage = UIImage(named: "imageName")
imageView.layer.borderWidth = 1.0
imageView.layer.masksToBounds = false
imageView.layer.borderColor = UIColor.whiteColor().CGColor
imageView.layer.cornerRadius = image.frame.size.width/2
imageView.clipsToBounds = true

Swift 4.0

let image = UIImage(named: "imageName")
imageView.layer.borderWidth = 1.0
imageView.layer.masksToBounds = false
imageView.layer.borderColor = UIColor.white.cgColor
imageView.layer.cornerRadius = image.frame.size.width / 2
imageView.clipsToBounds = true
37
Manu Gupta

RapideetSimplesolution.

Comment masquer UIImage Cercle sans recadrer avec Swift.

extension UIImageView {
  public func maskCircle(anyImage: UIImage) {
    self.contentMode = UIViewContentMode.ScaleAspectFill
    self.layer.cornerRadius = self.frame.height / 2
    self.layer.masksToBounds = false
    self.clipsToBounds = true

   // make square(* must to make circle), 
   // resize(reduce the kilobyte) and 
   // fix rotation.
   self.image = anyImage
  }
}

Comment appeler:

let anyAvatarImage:UIImage = UIImage(named: "avatar")!
avatarImageView.maskCircle(anyAvatarImage)
16
fatihyildizhan

Je suggère de faire de votre fichier image un carré parfait pour commencer. Cela peut être fait dans presque n'importe quel programme de retouche photo. Après cela, cela devrait fonctionner dans viewDidLoad. Crédit à ceci vidéo

image.layer.cornerRadius = image.frame.size.width/2
image.clipsToBounds = true
5
jsanabria

C'est tout ce dont vous avez besoin ...

        profilepic = UIImageView(frame: CGRectMake(0, 0, self.view.bounds.width * 0.19 , self.view.bounds.height * 0.1))
        profilepic.layer.borderWidth = 1
        profilepic.layer.masksToBounds = false
        profilepic.layer.borderColor = UIColor.blackColor().CGColor
        profilepic.layer.cornerRadius = profilepic.frame.height/2
        profilepic.clipsToBounds = true
        slider.addSubview(profilepic)
4
Satnam Sync

Créez votre cercle personnalisé UIImageView et créez le cercle sous layoutSubviews si vous utilisez Autolayout. 

/*
      +-------------+
      |             |
      |             |
      |             |
      |             |
      |             |
      |             |
      +-------------+
  The IMAGE MUST BE SQUARE
*/
class roundImageView: UIImageView {

    override init(frame: CGRect) {
        // 1. setup any properties here
        // 2. call super.init(frame:)
        super.init(frame: frame)
        // 3. Setup view from .xib file
    }

    required init?(coder aDecoder: NSCoder) {
        // 1. setup any properties here
        // 2. call super.init(coder:)
        super.init(coder: aDecoder)
        // 3. Setup view from .xib file
    }

    override func layoutSubviews() {
        super.layoutSubviews()
        self.layer.borderWidth = 1
        self.layer.masksToBounds = false
        self.layer.borderColor = UIColor.white.cgColor
        self.layer.cornerRadius = self.frame.size.width/2
        self.clipsToBounds = true
    }
}
3
iluvatar_GR
reviewerImage.layer.cornerRadius = reviewerImage.frame.size.width / 2;
reviewerImage.clipsToBounds = true
2
Sai kumar Reddy

Je l'ai corrigé en modifiant la vue:

  1. Allez sur votre Main.storyboard
  2. Cliquez sur votre image
  3. Affichage -> Mode -> Remplissage

Cela fonctionne parfaitement

1
Nicolas2bert

essayez ceci . Swift code

override func viewWillAppear(_ animated: Bool) {
    super.viewWillAppear(true)
    perform(#selector(self.setCircleForImage(_:)), with: pickedImage, afterDelay: 0)
}


 @objc func setCircleForImage(_ imageView : UIImageView){
    imageView.layer.cornerRadius = pickedImage.frame.size.width/2
    imageView.clipsToBounds = true
}
1
Akhil Clement

ce que j’ai découvert, c’est que la largeur et la hauteur de la vue d’image doivent renvoyer un nombre pair lorsqu’elles sont divisées par 2 pour obtenir un cercle parfait, par exemple.

let image = UIImageView(frame: CGRectMake(0, 0, 120, 120))

cela ne devrait pas être quelque chose comme let image = UIImageView (cadre: CGRectMake (0, 0, 130, 130))

0
Umair Afzal

J'ai eu un résultat similaire (plus d'un ovale qu'un cercle). Il s’est avéré que les contraintes que j’ai imposées à la variable UIImageView l’ont forcée à former un ovale au lieu d’un cercle. Après avoir résolu ce problème, les solutions ci-dessus ont fonctionné.

0
cph2117

Si vous utilisez une UIViewController, voici comment procéder avec Anchors . La clé consiste à définir le layer.cornerRadius de l'imageView dans viewWillLayoutSubviews comme suit:

override func viewWillLayoutSubviews(){
    imageView.layer.cornerRadius = imageView.frame.size.width / 2
}

Assurez-vous également que les heightAnchor et widthAnchor ont la même taille. Ils sont tous les deux 100 dans mon exemple ci-dessous

Code:

let imageView: UIImageView = {
    let imageView = UIImageView()
    imageView.translatesAutoresizingMaskIntoConstraints = false
    imageView.layer.borderWidth = 1.0
    imageView.clipsToBounds = true
    imageView.layer.borderColor = UIColor.white.cgColor
    return imageView
}()


override func viewDidLoad() {
    super.viewDidLoad()

    view.addSubview(imageView)

    imageView.heightAnchor.constraint(equalToConstant: 100).isActive = true
    imageView.widthAnchor.constraint(equalToConstant: 100).isActive = true
    imageView.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
    imageView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 50).isActive = true

    imageView.image = UIImage(named: "pizzaImage")
}

override func viewWillLayoutSubviews() {
    imageView.layer.cornerRadius = imageView.frame.size.width / 2
}

Si vous utilisez un CollectionView Cell, définissez le layer.cornerRadius de l'imageView dans layoutSubviews():

override init(frame: CGRect) {
    super.init(frame: frame)

    addSubview(imageView)

    imageView.heightAnchor.constraint(equalToConstant: 100).isActive = true
    imageView.widthAnchor.constraint(equalToConstant: 100).isActive = true
    imageView.centerXAnchor.constraint(equalTo: self.centerXAnchor).isActive = true
    imageView.topAnchor.constraint(equalTo: self.topAnchor, constant: 50).isActive = true

    imageView.image = UIImage(named: "pizzaImage")

}

override func layoutSubviews() {
    super.layoutSubviews() // call super.layoutSubviews()
    imageView.layer.cornerRadius = imageView.frame.size.width / 2
}
0
Lance Samaria

Utilisez ce code pour rendre l'image ronde 

     self.layoutIfNeeded()
     self.imageView.layer.cornerRadius = 
     self.imageView.frame.width/2
     self.imageView.layer.masksToBounds = true
0
Nithinbemitk

Cela fonctionne parfaitement pour moi . L'ordre des lignes est important 

func circularImage(photoImageView: UIImageView?)
{
    photoImageView!.layer.frame = CGRectInset(photoImageView!.layer.frame, 0, 0)
    photoImageView!.layer.borderColor = UIColor.grayColor().CGColor
    photoImageView!.layer.cornerRadius = photoImageView!.frame.height/2
    photoImageView!.layer.masksToBounds = false
    photoImageView!.clipsToBounds = true
    photoImageView!.layer.borderWidth = 0.5
    photoImageView!.contentMode = UIViewContentMode.ScaleAspectFill
}

Comment utiliser:

    @IBOutlet weak var photoImageView: UIImageView!
    ...
    ...
    circularImage(photoImageView)
0
Sahli Simo

Cela fonctionne aussi pour moi. Pour un résultat de cercle parfait, utilisez la même taille pour la largeur et la hauteur. comme image.frame = CGRect(0,0,200, 200)

Pour un cercle non parfait, la largeur et la hauteur ne doivent pas être égales à celles décrites ci-dessous.

 image.frame = CGRect(0,0,200, 160)
 image.layer.borderColor = UIColor.whiteColor().CGColor
 image.layer.cornerRadius = image.frame.size.height/2
 image.layer.masksToBounds = false
 image.layer.clipsToBounds = true
 image.contentMode = .scaleAspectFill
0
handiansom

Essayez ceci, c'est un travail pour moi,

définir imageView largeur et hauteur identiques.

Rapide

imageview?.layer.cornerRadius = (imageview?.frame.size.width ?? 0.0) / 2     
imageview?.clipsToBounds = true
imageview?.layer.borderWidth = 3.0
imageview?.layer.borderColor = UIColor.white.cgColor

Capture d'écran enter image description here

Objectif c

self.imageView.layer.cornerRadius = self.imageView.frame.size.width / 2;
self.imageView.clipsToBounds = YES;
self.imageView.layer.borderWidth = 3.0f;
self.imageView.layer.borderColor = [UIColor whiteColor].CGColor;

J'espère que cela aidera quelqu'un.

0
Jaywant Khedkar