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.