신속하게 원 안에 이미지를 설정하는 방법


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
"원으로 이미지 설정"은 무엇을 의미합니까? 하고 싶은 일을 더 정확하게 설명 할 수 있습니까? 원하는 결과를 그림으로 그려 보시겠습니까?
매트

1
profilPicture = UIImageView(frame: CGRectMake(0, 0, 100, 100))"아무것도하지 않음"이 아닙니다. 확실히 뭔가를합니다! 그러나 그것이하는 일은 다소 불행한 일입니다. UIImageView를 생성하고 약한 참조에 할당합니다. 이미지보기가 비어 있습니다. 이미지가 없습니다. 더욱이 참조가 약하기 때문에 이미지 뷰가 연기를 내며 즉시 사라집니다. 이 코드에서 당신이 여기에서 일어날 것이라고 상상했던 것을보기는 어렵습니다.
matt

나는이 결과를 만들고 싶어 : appcoda.com/ios-programming-circular-image-calayer
픽셀

이제 방법을 알려주는 튜토리얼 링크를 추가했습니다. 따라서 해당 튜토리얼의 지침을 따르십시오! 당신은 당신 자신의 질문에 대답했습니다.
matt

내가 tutoriel의 아무것도 APPEND의 지침을 수행 할 때 나는 빠른 작동 : S
픽셀

답변:


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내가 :-) 필요했던 정확히
데이브 Kliman에게

4
제한으로 인해 UIImageView가 늘어나거나 줄어들 수있는 경우 작동하지 않습니다. 이 경우는 viewDidLayoutSubviews () 안에 있어야
Georgevik

둥근 이미지 주위에 테두리를 추가하면 화면에 원래 사각형의 유령이 남습니다. 이것은 Simulator 10.0에서 볼 수 있었고 실제 장치에서는 발생하지 않을 수 있지만 여기서 언급 할만큼 중요하다고 생각했습니다.
ZacSketches

image.layer.borderColor = UIColor.blackColor().CGColor 로 변합니다 image.layer.borderColor = UIColor.black.cgColor
George Pazdral

신속한 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

Swift에서 UIImageView를 원형으로 만들고 싶다면 다음 코드를 사용할 수 있습니다.

imageView.layer.cornerRadius = imageView.frame.height / 2
imageView.clipsToBounds = true

2
하지 않으면 image.clipsToBounds = true이미지 크기가 조정되지 않습니다.
Jean-Baptiste Louazel

7
@Tom Spee에서 모서리 반경을 사진 너비의 절반으로 설정하면 다이아몬드 모양의 이미지가 표시되고 ircle이 표시되지 않습니다. 왜 이럴까요 ??
user2363025

@ user2363025 지금까지 알아 낸 것 같지만 이미지가 아닌 imageView 를 사용했는지 확인 했습니까?
Scott Corscadden

@ScottCorscadden 죄송합니다 Scott, 저는 되돌아 볼 이전 코드가 없습니다.
user2363025

조금 늦었을 수도 있지만 자동 레이아웃으로 인해 다이아몬드 모양이 발생할 수 있으므로 self.view.layoutIfNeeded()이전 에 전화해야 할 수도 있습니다 .
Tom Spee

6

이것이 누구에게도 도움이되는지 모르겠지만 한동안이 문제로 어려움을 겪고 있었지만 온라인 답변 중 어느 것도 나를 도왔습니다. 나에게 문제는 스토리 보드의 이미지에 다른 높이와 너비가 설정되어 있다는 것입니다. 나는 스택에서 모든 솔루션을 시도해 보았고 그렇게 간단한 것으로 밝혀졌습니다. 둘 다 200으로 설정하면 내 서클 프로필 이미지가 완벽했습니다. 이것은 내 VC의 코드였습니다.

profileImage2.layer.cornerRadius = profileImage2.frame.size.width/2
    profileImage2.clipsToBounds = true

단! 감사. 이것이 답이되어야합니다. 두 줄의 코드. 클래스를 확장하거나 추가 할 필요가 없습니다.
user3286381 dec.

4

대한 스위프트 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

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

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.