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/


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


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 ....


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()

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()

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

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

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
   }
}

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;
}

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.


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)

1

Dla programistów Swift3 / Swift4:

let radius = yourImageView.frame.width / 2
yourImageView.layer.cornerRadius = radius
yourImageView.layer.masksToBounds = true

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


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!)

0
imageView.layer.cornerRadius = imageView.frame.height/2
imageView.clipToBounds = true

-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).

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.