web-dev-qa-db-ja.com

SwiftのimageContactsのような円でimageViewを正しく設定する方法は？

Image contactのようにimageViewに画像を（円で）表示したいのですが、これを表示しようとすると、imageViewがサイズを変更し、円で正しく表示されません。

 image.layer.borderWidth=1.0
 image.layer.masksToBounds = false
 image.layer.borderColor = UIColor.whiteColor().CGColor
 image.layer.cornerRadius = image.frame.size.height/2
 image.clipsToBounds = true

私はこのように見せたいです： enter image description here

しかし、私はこれを取得します： enter image description here

その画像をUIImageViewのサイズに変更して、円のように表示するにはどうすればよいですか？

ありがとう！

iosswiftuiimageviewxcode6
44
user3745888

frameに使用しているimageサイズは何ですか？フレームを正方形に設定すると、完全な円を取得できます。

let image = UIImageView(frame: CGRectMake(0, 0, 100, 100))
38
chuckus

これは私のアプリで使用したソリューションです：

var image: UIImage = UIImage(named: "imageName")
imageView.layer.borderWidth = 1.0
imageView.layer.masksToBounds = false
imageView.layer.borderColor = UIColor.whiteColor().CGColor
imageView.layer.cornerRadius = image.frame.size.width/2
imageView.clipsToBounds = true

Swift 4.0

let image = UIImage(named: "imageName")
imageView.layer.borderWidth = 1.0
imageView.layer.masksToBounds = false
imageView.layer.borderColor = UIColor.white.cgColor
imageView.layer.cornerRadius = image.frame.size.width / 2
imageView.clipsToBounds = true
40
Manu Gupta

FastおよびSimpleソリューション。

maskUIImageをSwiftでトリミングせずにCircleにする方法。

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 = anyImage
  }
}

電話方法：

let anyAvatarImage:UIImage = UIImage(named: "avatar")!
avatarImageView.maskCircle(anyAvatarImage)
18
fatihyildizhan

Autolayoutを使用する場合、カスタムサークルUIImageViewを作成し、layoutSubviewsの下にサークルを作成します。

/*
      +-------------+
      |             |
      |             |
      |             |
      |             |
      |             |
      |             |
      +-------------+
  The IMAGE MUST BE SQUARE
*/
class roundImageView: UIImageView {

    override init(frame: CGRect) {
        // 1. setup any properties here
        // 2. call super.init(frame:)
        super.init(frame: frame)
        // 3. Setup view from .xib file
    }

    required init?(coder aDecoder: NSCoder) {
        // 1. setup any properties here
        // 2. call super.init(coder:)
        super.init(coder: aDecoder)
        // 3. Setup view from .xib file
    }

    override func layoutSubviews() {
        super.layoutSubviews()
        self.layer.borderWidth = 1
        self.layer.masksToBounds = false
        self.layer.borderColor = UIColor.white.cgColor
        self.layer.cornerRadius = self.frame.size.width/2
        self.clipsToBounds = true
    }
}
6
iluvatar_GR

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

        profilepic = UIImageView(frame: CGRectMake(0, 0, self.view.bounds.width * 0.19 , self.view.bounds.height * 0.1))
        profilepic.layer.borderWidth = 1
        profilepic.layer.masksToBounds = false
        profilepic.layer.borderColor = UIColor.blackColor().CGColor
        profilepic.layer.cornerRadius = profilepic.frame.height/2
        profilepic.clipsToBounds = true
        slider.addSubview(profilepic)
5
Satnam Sync

画像ファイルを最初から完璧な正方形にすることをお勧めします。これは、ほとんどすべての写真編集プログラムで実行できます。その後、これはviewDidLoad内で機能するはずです。これにクレジット ビデオ

image.layer.cornerRadius = image.frame.size.width/2
image.clipsToBounds = true
5
jsanabria
reviewerImage.layer.cornerRadius = reviewerImage.frame.size.width / 2;
reviewerImage.clipsToBounds = true
2
Sai kumar Reddy

ビューを変更して修正しました：

  1. Main.storyboardに移動します
  2. 画像をクリックしてください
  3. 表示->モード->アスペクト塗り

完全に動作します

1
Nicolas2bert

UIViewControllerを使用している場合、Anchorsを使用してこれを行う方法は次のとおりです。重要なのは、imageViewのlayer.cornerRadiusをviewWillLayoutSubviewsに次のように設定することです。

override func viewWillLayoutSubviews(){
    imageView.layer.cornerRadius = imageView.frame.size.width / 2
}

また、heightAnchorとwidthAnchorが同じサイズであることを確認してください。以下の私の例では、両方とも100です

コード：

let imageView: UIImageView = {
    let imageView = UIImageView()
    imageView.translatesAutoresizingMaskIntoConstraints = false
    imageView.layer.borderWidth = 1.0
    imageView.clipsToBounds = true
    imageView.layer.borderColor = UIColor.white.cgColor
    return imageView
}()


override func viewDidLoad() {
    super.viewDidLoad()

    view.addSubview(imageView)

    imageView.heightAnchor.constraint(equalToConstant: 100).isActive = true
    imageView.widthAnchor.constraint(equalToConstant: 100).isActive = true
    imageView.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
    imageView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 50).isActive = true

    imageView.image = UIImage(named: "pizzaImage")
}

override func viewWillLayoutSubviews() {
    imageView.layer.cornerRadius = imageView.frame.size.width / 2
}

CollectionView Cellを使用している場合、layoutSubviews()でimageViewのlayer.cornerRadiusを設定します。

override init(frame: CGRect) {
    super.init(frame: frame)

    addSubview(imageView)

    imageView.heightAnchor.constraint(equalToConstant: 100).isActive = true
    imageView.widthAnchor.constraint(equalToConstant: 100).isActive = true
    imageView.centerXAnchor.constraint(equalTo: self.centerXAnchor).isActive = true
    imageView.topAnchor.constraint(equalTo: self.topAnchor, constant: 50).isActive = true

    imageView.image = UIImage(named: "pizzaImage")

}

override func layoutSubviews() {
    super.layoutSubviews() // call super.layoutSubviews()
    imageView.layer.cornerRadius = imageView.frame.size.width / 2
}
1
Lance Samaria

これを試して。 Swiftコード

override func viewWillAppear(_ animated: Bool) {
    super.viewWillAppear(true)
    perform(#selector(self.setCircleForImage(_:)), with: pickedImage, afterDelay: 0)
}


 @objc func setCircleForImage(_ imageView : UIImageView){
    imageView.layer.cornerRadius = pickedImage.frame.size.width/2
    imageView.clipsToBounds = true
}
1
Akhil Clement

この拡張機能は本当に機能します（Swift 4+を含む）

extension UIImageView {
    func roundedImage() {
        self.layer.cornerRadius = (self.frame.size.width) / 2;
        self.clipsToBounds = true
        self.layer.borderWidth = 3.0
        self.layer.borderColor = UIColor.white.cgColor
    }
}

次に、単にそれを

imageView.roundedImage()
1
Dhanu K

私が見つけたのは、完全な円を得るために、画像ビューの幅と高さを2で割ったときに偶数を返す必要があることです

let image = UIImageView(frame: CGRectMake(0, 0, 120, 120))

let image = UIImageView（frame：CGRectMake（0、0、130、130））のようなものであってはなりません

0
Umair Afzal

同様の結果が得られました（円よりも楕円形に近い）。 UIImageViewに設定した制約により、円ではなく楕円に強制されたことが判明しました。それを修正した後、上記のソリューションは機能しました。

0
cph2117

このコードを使用して画像を丸くします

     self.layoutIfNeeded()
     self.imageView.layer.cornerRadius = 
     self.imageView.frame.width/2
     self.imageView.layer.masksToBounds = true
0
Nithinbemitk

これは私にとって完璧に機能します。行の順序は重要です

func circularImage(photoImageView: UIImageView?)
{
    photoImageView!.layer.frame = CGRectInset(photoImageView!.layer.frame, 0, 0)
    photoImageView!.layer.borderColor = UIColor.grayColor().CGColor
    photoImageView!.layer.cornerRadius = photoImageView!.frame.height/2
    photoImageView!.layer.masksToBounds = false
    photoImageView!.clipsToBounds = true
    photoImageView!.layer.borderWidth = 0.5
    photoImageView!.contentMode = UIViewContentMode.ScaleAspectFill
}

使い方：

    @IBOutlet weak var photoImageView: UIImageView!
    ...
    ...
    circularImage(photoImageView)
0
Sahli Simo

これも私には有効です。完全な円の結果を得るには、幅と高さに同じサイズを使用します。 image.frame = CGRect(0,0,200, 200)など

完全でない円の場合、以下のこのコードのように幅と高さを等しくしないでください。

 image.frame = CGRect(0,0,200, 160)
 image.layer.borderColor = UIColor.whiteColor().CGColor
 image.layer.cornerRadius = image.frame.size.height/2
 image.layer.masksToBounds = false
 image.layer.clipsToBounds = true
 image.contentMode = .scaleAspectFill
0
handiansom

これを試してみてください、それは私のために働いています、

setimageView幅と高さを同じにします。

Swift

imageview?.layer.cornerRadius = (imageview?.frame.size.width ?? 0.0) / 2     
imageview?.clipsToBounds = true
imageview?.layer.borderWidth = 3.0
imageview?.layer.borderColor = UIColor.white.cgColor

スクリーンショットenter image description here

目的C

self.imageView.layer.cornerRadius = self.imageView.frame.size.width / 2;
self.imageView.clipsToBounds = YES;
self.imageView.layer.borderWidth = 3.0f;
self.imageView.layer.borderColor = [UIColor whiteColor].CGColor;

これが誰かの助けになることを願っています。

0
Jaywant Khedkar