Jak szybko ustawić obraz w kółko

78

Jak mogę szybko zakreślić obrazek?

My ViewController:

import UIKit
import Foundation

class FriendsViewController : UIViewController{

    @IBOutlet weak var profilPicture: UIImageView!

    override func viewDidLoad() {
        super.viewDidLoad()
        profilPicture = UIImageView(frame: CGRectMake(0, 0, 100, 100))
    }
}

Moi profilPicture = UIImageView(frame: CGRectMake(0, 0, 100, 100))zrobić nic ..

Przykład: http://www.appcoda.com/ios-programming-circular-image-calayer/

Piksel
źródło
3
Co oznacza „ustaw obraz w kółku”? Czy możesz dokładniej opisać, co chcesz zrobić? Może narysuj obraz oczekiwanych wyników?
Matt
1
profilPicture = UIImageView(frame: CGRectMake(0, 0, 100, 100))nie „nic nie robi”. Zdecydowanie coś robi! Ale to, co robi, jest raczej niefortunne. Tworzy UIImageView i przypisuje go do słabej referencji. Widok obrazu jest pusty; nie ma obrazu. Ponadto odniesienie jest słabe, więc widok obrazu znika natychmiast w kłębie dymu. Z tego kodu trudno wywnioskować, co sobie wyobrażałeś.
Matt
Chcę uzyskać taki wynik: appcoda.com/ios-programming-circular-image-calayer
Pixel
Więc teraz dodałeś link do samouczka, który mówi, jak to zrobić. Po prostu postępuj zgodnie z instrukcjami w tym samouczku! Odpowiedziałeś na swoje własne pytanie.
Matt
Pracuję szybko, kiedy wykonuję instrukcje w tutoriel, nic nie dodaje: S
Pixel

Odpowiedzi:

221
import UIKit

class ViewController: UIViewController {
  @IBOutlet weak var image: UIImageView!

  override func viewDidLoad() {
    super.viewDidLoad()

    image.layer.borderWidth = 1
    image.layer.masksToBounds = false
    image.layer.borderColor = UIColor.black.cgColor
    image.layer.cornerRadius = image.frame.height/2
    image.clipsToBounds = true
}

Jeśli chcesz to na rozszerzeniu

import UIKit

extension UIImageView {

    func makeRounded() {

        self.layer.borderWidth = 1
        self.layer.masksToBounds = false
        self.layer.borderColor = UIColor.black.cgColor
        self.layer.cornerRadius = self.frame.height / 2
        self.clipsToBounds = true
    }
}

To wszystko, czego potrzebujesz ....

Jon
źródło
8
że image.clipsToBounds = truebyło dokładnie to, co potrzebne :-)
Dave Kliman
4
Nie działa, jeśli UIImageView może rosnąć lub zmniejszać się z powodu ograniczeń. W takim przypadku musi to być widok wewnętrznyDidLayoutSubviews ()
Georgevik
Zauważyłem, że dodanie obramowania wokół zaokrąglonego obrazu pozostawia na ekranie cień oryginalnego prostokąta. Było to widoczne w symulatorze 10.0 i może nie występować na prawdziwym urządzeniu, ale pomyślałem, że jest wystarczająco ważne, aby o tym tutaj wspomnieć.
ZacSketches
image.layer.borderColor = UIColor.blackColor().CGColor zmienia się w image.layer.borderColor = UIColor.black.cgColor
George Pazdral
Działa idealnie w szybkim 4. 👍🏻
iGhost
35

Możesz w prosty sposób utworzyć rozszerzenie:

import UIKit

extension UIImageView {

   func setRounded() {
      let radius = CGRectGetWidth(self.frame) / 2
      self.layer.cornerRadius = radius
      self.layer.masksToBounds = true
   }
}

i użyj go jak poniżej:

imageView.setRounded()
Daniel Kuta
źródło
16

Na podstawie odpowiedzi @DanielQ

Swift 4 i Swift 3

import UIKit

extension UIImageView {

    func setRounded() {
        self.layer.cornerRadius = (self.frame.width / 2) //instead of let radius = CGRectGetWidth(self.frame) / 2
        self.layer.masksToBounds = true
    }
}

Możesz go użyć w dowolnym ViewControllerz:

imageView.setRounded()
MrMins
źródło
12

Jeśli masz na myśli, że chcesz utworzyć okólnik UIImageView w Swift, możesz po prostu użyć tego kodu:

imageView.layer.cornerRadius = imageView.frame.height / 2
imageView.clipsToBounds = true
Tom Spee
źródło
2
Jeśli tego nie zrobisz image.clipsToBounds = true, obraz nie będzie skalowany.
Jean-Baptiste Louazel
7
@Tom Spee, kiedy ustawię promień narożnika na połowę szerokości obrazu, otrzymuję obraz w kształcie rombu, a nie ircle. Każdy pomysł, dlaczego miałoby to być ??
user2363025
@ user2363025 Podejrzewam, że już to rozgryzłeś, ale czy potwierdziłeś, że używasz imageView, a nie obrazu ?
Scott Corscadden
@ScottCorscadden przepraszam Scott, nie mam starego kodu, żeby się do niego odwołać.
user2363025
Może trochę późno, ale kształt rombu może być spowodowany automatycznym układem, więc może być tak, że musisz zadzwonić self.view.layoutIfNeeded()wcześniej.
Tom Spee
6

Nie wiem, czy to komukolwiek pomogło, ale od jakiegoś czasu zmagałem się z tym problemem, żadna z odpowiedzi online nie pomogła mi. Dla mnie problem polegał na tym, że miałem różne wysokości i szerokości ustawione na obrazie w storyboardzie. Wypróbowałem każde rozwiązanie na stosie i okazało się, że było to coś tak prostego. Kiedy ustawiłem ich oboje na 200, moje zdjęcie w profilu koła było idealne. To był kod w moim VC.

profileImage2.layer.cornerRadius = profileImage2.frame.size.width/2
    profileImage2.clipsToBounds = true
wdzięk
źródło
Słodkie! Dzięki. To powinna być odpowiedź. Dwie wyraźne linie kodu. Nie ma potrzeby rozszerzania klas ani niczego dodatkowego.
user3286381
4

Dla Swift 4 :

import UIKit

extension UIImageView {

func makeRounded() {
    let radius = self.frame.width/2.0
    self.layer.cornerRadius = radius
    self.layer.masksToBounds = true
   }
}
Ghulam Rasool
źródło
3

Wszystkie powyższe odpowiedzi nie rozwiązały problemu w moim przypadku. Mój ImageViewzostał umieszczony w dostosowanym UITableViewCell. Dlatego też wywołałem tę layoutIfNeeded()metodę stąd. Przykład:

 class NameTableViewCell:UITableViewCell,UITextFieldDelegate { ...

 override func awakeFromNib() {

    self.layoutIfNeeded()
    profileImageView.layoutIfNeeded()

    profileImageView.isUserInteractionEnabled = true
    let square = profileImageView.frame.size.width < profileImageView.frame.height ? CGSize(width: profileImageView.frame.size.width, height: profileImageView.frame.size.width) : CGSize(width: profileImageView.frame.size.height, height:  profileImageView.frame.size.height)
    profileImageView.addGestureRecognizer(tapGesture)
    profileImageView.layer.cornerRadius = square.width/2
    profileImageView.clipsToBounds = true;
}
Nazar Medeiros
źródło
2

Ten sposób jest najtańszy i zawsze zapewnia zaokrąglenie widoku obrazu:

class RoundedImageView: UIImageView {

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

        clipsToBounds = true
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)

        clipsToBounds = true
    }

    override func layoutSubviews() {
        super.layoutSubviews()

        assert(bounds.height == bounds.width, "The aspect ratio isn't 1/1. You can never round this image view!")

        layer.cornerRadius = bounds.height / 2
    }
}

Inne odpowiedzi nakazują zaokrąglanie widoków na podstawie obliczeń ramek ustawionych w metodzie UIViewControllers viewDidLoad(). To nie jest poprawne , ponieważ nie jest pewne, jaka będzie ostateczna klatka.

J. Doe
źródło
1
Zasugeruj może równie dobrze dodać @IBDesignable
Fattie
1

Najpierw musisz ustawić równą szerokość i wysokość, aby uzyskać Circular ImageView.Poniżej ustawiłem szerokość i wysokość na 100,100.Jeśli chcesz ustawić równą szerokość i wysokość zgodnie z wymaganym rozmiarem, ustaw tutaj.

 var imageCircle = UIImageView(frame: CGRectMake(0, 0, 100, 100))

Następnie musisz ustawić wysokość / 2 dla promienia narożnika

 imageCircle.layer.cornerRadius = imageCircle.frame.size.height/2
 imageCircle.layer.borderWidth = 1
 imageCircle.layer.borderColor = UIColor.blueColor().CGColor
 imageCircle.clipsToBounds = true
 self.view.addSubview(imageCircle)
user3182143
źródło
1

Dla programistów Swift3 / Swift4:

let radius = yourImageView.frame.width / 2
yourImageView.layer.cornerRadius = radius
yourImageView.layer.masksToBounds = true
Achintya Ashok
źródło
niezupełnie, myślę, że dodaje rozszerzenie do ImageView. To zmienia bezpośrednio instancję klasy. Jeśli to nie pomoże, mogę to usunąć.
Achintya Ashok
1
struct CircleImage: View {
    var image: Image

    var body: some View {
        image
           .clipShape(Circle())
    }
}

To jest poprawne dla SwiftUI

Michał Rogowski
źródło
0
// code to make the image round


import UIKit

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 = prepareImage(anyImage)
}
}

// aby wywołać funkcję z kontrolera widoku

self.imgCircleSmallImage.maskCircle(imgCircleSmallImage.image!)
Ullas Pujary
źródło
0
imageView.layer.cornerRadius = imageView.frame.height/2
imageView.clipToBounds = true
Rishi jha
źródło
-1

Jeśli obraz jest zaokrąglony, miałby wysokość i szerokość dokładnie tego samego rozmiaru (tj. 120). Po prostu bierzesz połowę tej liczby i wykorzystujesz ją w swoim kodzie (image.layer.cornerRadius = 60).

Raul Gutierrez
źródło