Як швидко встановити зображення по колу


78

Як я можу зробити так, щоб я швидко кружляв зображення?

Мій 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
Що означає "встановити зображення в колі"? Чи можете ви більш точно описати, що ви хочете зробити? Можливо, намалюйте зображення бажаних результатів?
matt

1
profilPicture = UIImageView(frame: CGRectMake(0, 0, 100, 100))не "нічого не робити". Це точно щось робить! Але те, що воно робить, досить прикро. Він створює UIImageView і призначає його слабкому посиланню. Вид зображення порожній; воно не має зображення. Більше того, посилання є слабким, тому вигляд зображення відразу зникає в задимці. З цього коду важко зрозуміти, що ви думали, що тут відбудеться.
matt

Я хочу зробити цей результат: appcoda.com/ios-programming-circular-image-calayer
Pixel

Отже, тепер ви додали посилання на підручник, який розповідає, як це зробити. Тож просто дотримуйтесь інструкцій у цьому посібнику! Ви відповіли на власне запитання.
matt

Я працюю швидко, коли виконую вказівки в підручнику, нічого не додається: 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
Георгія Паздраля

Працюйте досконало в стрімкий 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

Свіфт 4 і Свіфт 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, коли я встановлюю радіус кута на половину ширини малюнків, я отримую зображення у формі ромба, а не дірка. Будь-яка ідея, чому це буде ??
user2363025

@ user2363025 Підозрюю, ти вже зрозумів це, але чи підтвердив ти, що використовував imageView, а не зображення ?
Скотт Корскадден,

@ScottCorscadden вибач, Скотте, у мене немає старого коду, на який можна озирнутися.
user2363025 01

Можливо, трохи пізно, але діамантову форму може спричинити автоматична розкладка, тому, можливо, вам потрібно зателефонувати self.view.layoutIfNeeded()раніше.
Том Спі

6

Не знаю, чи допомагає це комусь, але я деякий час боровся з цією проблемою, жодна з відповідей в Інтернеті мені не допомогла. Для мене проблема полягала в тому, що на зображенні в раскадровці були встановлені різні висоти та ширини. Я спробував кожне рішення на стеку, і виявляється, це було щось таке просте. Як тільки я встановив їх обох на 200, моє зображення профілю кола було ідеальним. Це був код тоді в моєму ВК.

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. Це змінює екземпляр класу безпосередньо. Якщо це не корисно, я можу його зняти.
Ачинтя Ашок,


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.