स्विफ्ट में सर्कल में छवि कैसे सेट करें


78

मैं स्विफ्ट के साथ आई सर्कल चित्र कैसे बना सकता हूं?

मेरा दृश्य नियंत्रक:

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

तो, अब आपने एक ट्यूटोरियल के लिए एक लिंक जोड़ा है जो आपको बताता है कि यह कैसे करना है। तो बस उस ट्यूटोरियल के निर्देशों का पालन करें! आपने अपने प्रश्न का उत्तर दिया है।
मैट

मैं स्विफ्ट में काम करता हूं जब मैं ट्यूटरियल में निर्देश कुछ भी नहीं करता हूं: एस
पिक्सेल

जवाबों:


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 ()
जॉर्ज्विक

मैंने पाया कि गोल छवि के चारों ओर सीमा जोड़ने से स्क्रीन पर मूल आयत का एक भूत निकल जाता है। यह सिम्युलेटर 10.0 पर दिखाई दे रहा था और एक वास्तविक डिवाइस पर नहीं हो सकता है, लेकिन यह यहां उल्लेख करने के लिए पर्याप्त महत्वपूर्ण था।
ZacSketches

image.layer.borderColor = UIColor.blackColor().CGColor में बदल जाता है image.layer.borderColor = UIColor.black.cgColor
जॉर्ज Pazdral

स्विफ्ट में सही काम 4. May
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 सर्कुलर बनाना चाहते हैं तो आप इस कोड का उपयोग कर सकते हैं:

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

2
यदि आप ऐसा नहीं करते हैं image.clipsToBounds = true, तो छवि पैमाने पर नहीं होगी।
जीन-बैप्टिस्ट लुजेल

7
@ टॉम स्पि जब मैंने कोने की त्रिज्या को चित्रों की चौड़ाई के आधे हिस्से पर सेट किया, तो मुझे एक हीरे के आकार की छवि मिल रही है, न कि एक ircle। किसी भी विचार क्यों यह होगा ??
user2363025

@ user2363025 मुझे लगता है कि आप अब तक यह समझ गए होंगे, लेकिन आप की पुष्टि की है कि आप का इस्तेमाल किया imageView और न छवि ?
स्कॉट कोर्सेडेन

@ScottCorscadden क्षमा करें स्कॉट, मेरे पास वापस देखने के लिए पुराना कोड नहीं है।
user2363025

थोड़ी देर हो सकती है, लेकिन एक हीरे की आकृति ऑटो लेआउट के कारण हो सकती है ताकि आपको self.view.layoutIfNeeded()पहले कॉल करने की आवश्यकता हो ।
टॉम स्पि

6

अगर यह किसी की मदद करता है पता नहीं है, लेकिन मैं थोड़ी देर के लिए इस समस्या से जूझ रहा था, ऑनलाइन जवाब में से किसी ने भी मेरी मदद नहीं की। मेरे लिए समस्या यह थी कि मैं स्टोरीबोर्ड में अलग-अलग ऊंचाइयों और चौड़ाई को छवि पर सेट करता था। मैंने स्टैक पर हर समाधान की कोशिश की और यह पता चला कि यह उस तरह से सरल था। एक बार जब मैंने उन दोनों को 200 पर सेट किया तो मेरी सर्कल प्रोफ़ाइल छवि एकदम सही थी। यह कोड तब मेरे वीसी में था।

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

मिठाई! धन्यवाद। इसका उत्तर होना चाहिए। कोड की दो साफ लाइनें। कक्षाओं या अतिरिक्त कुछ भी विस्तारित करने की आवश्यकता नहीं है।
user3286381

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

अन्य उत्तर आपको बता रहे हैं कि UIViewControllerएस viewDidLoad()पद्धति में निर्धारित फ्रेम कैलकुलेशन के आधार पर विचारों को गोल किया जाए । यह सही नहीं है , क्योंकि यह निश्चित नहीं है कि अंतिम फ्रेम क्या होगा।


1
सुझाव के रूप में अच्छी तरह से @IBDesignable
Fattie

1

पहले आपको परिपत्र छवि दृश्य प्राप्त करने के लिए समान चौड़ाई और ऊंचाई निर्धारित करने की आवश्यकता है। फिर भी मैं 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 Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.