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