Как установить изображение по кругу в 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()

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)

1

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

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

не совсем, я думаю он добавляет расширение к ImageView. Это напрямую меняет экземпляр класса. Если это не поможет, я могу его снять.
Achintya Ashok


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


-1

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

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.