Как установить изображение по кругу в swift

78

Как я могу обвести картинку с помощью swift?

Мой 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))
    }
}

Я profilPicture = UIImageView(frame: CGRectMake(0, 0, 100, 100))ничего не делаю ..

Пример: http://www.appcoda.com/ios-programming-circular-image-calayer/

Пиксель
источник
3
Что значит «поставить изображение в круг»? Вы можете более точно описать, чем хотите заниматься? Может быть, нарисуйте желаемый результат?
Мэтт
1
profilPicture = UIImageView(frame: CGRectMake(0, 0, 100, 100))не «ничего не делает». Он определенно что-то делает! Но то, что он делает, весьма прискорбно. Он создает UIImageView и назначает его слабой ссылке. Изображение пусто; у него нет изображения. Кроме того, эталон слабый, поэтому изображение сразу исчезает в клубах дыма. Из этого кода трудно понять, что, по вашему мнению, здесь произойдет.
Мэтт
Хочу добиться такого результата: appcoda.com/ios-programming-circular-image-calayer
Pixel
Итак, теперь вы добавили ссылку на учебник, в котором рассказывается, как это сделать. Так что просто следуйте инструкциям в этом руководстве! Вы ответили на свой вопрос.
Мэтт
Я работаю быстро, когда выполняю инструкции в руководстве, которые ничего не добавляют: S
Pixel

Ответы:

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
}

Если вы хотите это на расширении

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

Это все, что вам нужно ....

Джон
источник
8
это image.clipsToBounds = trueбыло именно то, что мне было нужно :-)
Дэйв Климан
4
Это не работает, если UIImageView может увеличиваться или уменьшаться из-за ограничений. В таком случае он должен быть внутри viewDidLayoutSubviews ()
Georgevik
Я обнаружил, что добавление границы вокруг закругленного изображения оставляет на экране призрак исходного прямоугольника. Это было видно в Simulator 10.0 и может не происходить на реальном устройстве, но я подумал, что это достаточно важно, чтобы упомянуть здесь.
ZacSketches
image.layer.borderColor = UIColor.blackColor().CGColor превращается в image.layer.borderColor = UIColor.black.cgColor
Джордж Паздрал
Идеально работает в Swift 4. 👍🏻
iGhost
35

Вы можете просто создать расширение:

import UIKit

extension UIImageView {

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

и используйте его, как показано ниже:

imageView.setRounded()
Даниэль Кута
источник
16

На основе ответа @DanielQ

Swift 4 и 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
    }
}

Вы можете использовать его в любом ViewControllerс:

imageView.setRounded()
MrMins
источник
12

Если вы имеете в виду, что хотите создать циркуляр UIImageView в Swift, вы можете просто использовать этот код:

imageView.layer.cornerRadius = imageView.frame.height / 2
imageView.clipsToBounds = true
Том Спи
источник
2
В противном случае image.clipsToBounds = trueизображение не будет масштабировано.
Жан-Батист Луазель
7
@Tom Spee, когда я устанавливаю радиус угла на половину ширины изображения, я получаю изображение в форме ромба, а не ircle. Любая идея, почему это будет ??
user2363025 06
@ user2363025 Я подозреваю, что вы уже поняли это, но подтвердили ли вы, что использовали imageView, а не изображение ?
Скотт Корскадден
@ScottCorscadden, извини, Скотт, у меня нет старого кода, на который можно было бы оглянуться.
user2363025 01
Возможно, немного поздно, но ромбовидная форма может быть вызвана автоматической компоновкой, поэтому может быть, вам нужно позвонить self.view.layoutIfNeeded()раньше.
Том Спи
6

Не знаю, помогает ли это кому-нибудь, но я какое-то время боролся с этой проблемой, ни один из ответов в Интернете не помог мне. Для меня проблема заключалась в том, что у меня была разная высота и ширина изображения в раскадровке. Я пробовал все решения в стеке, и оказалось, что все было так просто. Как только я установил их на 200, мое изображение профиля круга стало идеальным. Тогда это был код в моем VC.

profileImage2.layer.cornerRadius = profileImage2.frame.size.width/2
    profileImage2.clipsToBounds = true
Грейс
источник
Сладкий! Благодарю. Это должен быть ответ. Две чистые строчки кода. Не нужно расширять классы или что-то еще.
user3286381
4

Для Swift 4 :

import UIKit

extension UIImageView {

func makeRounded() {
    let radius = self.frame.width/2.0
    self.layer.cornerRadius = radius
    self.layer.masksToBounds = true
   }
}
Гулам Расул
источник
3

Все приведенные выше ответы не смогли решить проблему в моем случае. Мой ImageViewбыл помещен в индивидуальный UITableViewCell. Поэтому я также должен был вызвать layoutIfNeeded()метод отсюда. Пример:

 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

Этот способ является наименее дорогостоящим и всегда сохраняет округлость изображения:

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

В других ответах говорится, что представления должны округляться на основе вычислений кадров, установленных в методе UIViewControllers viewDidLoad(). Это неверно , поскольку неизвестно, каким будет окончательный кадр.

Дж. Доу
источник
1
Предложите также добавить @IBDesignable
Fattie
1

Сначала вам нужно установить одинаковую ширину и высоту для получения Circular ImageView. Ниже я установил ширину и высоту как 100,100. Если вы хотите установить одинаковую ширину и высоту в соответствии с вашим требуемым размером, установите здесь.

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

Затем вам нужно установить высоту / 2 для радиуса угла.

 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
источник
1

Для разработчиков Swift3 / Swift4:

let radius = yourImageView.frame.width / 2
yourImageView.layer.cornerRadius = radius
yourImageView.layer.masksToBounds = true
Ачинтья Ашок
источник
не совсем, я думаю он добавляет расширение к ImageView. Это напрямую меняет экземпляр класса. Если это не поможет, я могу его снять.
Achintya Ashok
1
struct CircleImage: View {
    var image: Image

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

Это правильно для 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)
}
}

// для вызова функции из контроллера представления

self.imgCircleSmallImage.maskCircle(imgCircleSmallImage.image!)
Уллас Пуджари
источник
0
imageView.layer.cornerRadius = imageView.frame.height/2
imageView.clipToBounds = true
Риши Джха
источник
-1

Если ваше изображение округлено, оно будет иметь одинаковую высоту и ширину (например, 120). Вы просто берете половину этого числа и используете это в своем коде (image.layer.cornerRadius = 60).

Рауль Гутьеррес
источник