web-dev-qa-db-ja.com

swiftで円で画像を設定する方法

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/

iosswiftuiimageview
64
Pixel
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
}

必要なのはそれだけです。

170
Jon

拡張機能を簡単に作成できます：

import UIKit

extension UIImageView {

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

以下のように使用します：

imageView.setRounded()
34
Daniel Kuta

@DanielQの答えに基づいて

Swift 4およびSwift

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()
14
MrMins

SwiftでUIImageViewを円形にしたい場合は、次のコードを使用できます。

imageView.layer.cornerRadius = imageView.frame.height / 2
imageView.clipsToBounds = true
11
Tom Spee

これが誰かに役立つかどうかはわかりませんが、私はしばらくの間この問題に苦労していましたが、オンラインの答えは私を助けませんでした。私にとって問題は、ストーリーボードの画像に異なる高さと幅が設定されていたことです。スタック上のすべてのソリューションを試しましたが、それはそれと同じくらい簡単なものでした。両方を200に設定すると、私のサークルプロフィール画像は完璧でした。これは当時のVCのコードでした。

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

Swift 4の場合：

import UIKit

extension UIImageView {

func makeRounded() {
    let radius = self.frame.width/2.0
    self.layer.cornerRadius = radius
    self.layer.masksToBounds = true
   }
}
4
Ghulam Rasool

上記のすべての答えは私の場合の問題を解決できませんでした。 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
Nazar Medeiros

まず、Circular ImageViewを取得するために等しい幅と高さを設定する必要があります。以下では、幅と高さを100,100に設定します。必要なサイズに応じて同じ幅と高さを設定する場合は、ここで設定します。

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

次に、角の半径にheight/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
user3182143

Swift3/Swift4開発者向け：

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

この方法は最も安価な方法であり、常に画像ビューを丸く保ちます。

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()メソッドで設定されたフレーム計算に基づいてビューを丸めるようにすることです。 これは正しくありません。最終フレームがどうなるかわからないからです。

0
J. Doe
struct CircleImage: View {
    var image: Image

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

これはSwiftUIに正しいです

0
Michal Rogowski

GitHubからToucanをダウンロードして使用します。 これはSwiftで提供されています。麻痺するほど簡単。また、他の多くの画像効果も提供します。

0
user3286381

画像が丸みを帯びている場合、高さと幅はまったく同じサイズ（つまり120）です。その数の半分を取得し、コードで使用します（image.layer.cornerRadius = 60）。

0
Raul Gutierrez
// 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)
}
}

// View Controllerから関数を呼び出す

self.imgCircleSmallImage.maskCircle(imgCircleSmallImage.image!)
0
Ullas Kumar