How to set rounded profile picture image(from url string) to UIBarButton item in iOS Swift - ios

Question

Hi I'm working on an iOS Swift project in which I want to show users profile picture in the navigation bar as rounded. I tried lot of sample code, but it is not making rounded curve. Please help me.
I have tried these codes,
var image = UIImage()
if let userImage = UserProfile.image {
let imageUrl = self.dmcCommon.convertStringToImageURL(url: userImage)
let data = (try? Data(contentsOf: imageUrl as URL))!
image = UIImage(data: data)!
} else {
image = UIImage(named: "Me")!
}
let v = UIImageView(frame: CGRect(x: 0, y: 0, width: 40, height: 40))
v.image = image
v.layer.masksToBounds = true
v.layer.cornerRadius = 20
let rightBtn = UIBarButtonItem(customView: v)
self.navigationItem.rightBarButtonItem = rightBtn
And the result is like this,
Here the image is not getting round also it taking full width not as I gave.
Later I tried another solution, which is,
let button = UIButton()
button.frame = CGRect(x: 0, y: 0, width: 30, height: 30)
var image = UIImage()
if let userImage = UserProfile.image {
let imageUrl = self.dmcCommon.convertStringToImageURL(url: userImage)
let data = (try? Data(contentsOf: imageUrl as URL))!
image = UIImage(data: data)!
} else {
image = UIImage(named: "Me")!
}
UIGraphicsBeginImageContextWithOptions(button.frame.size, false, image.scale)
let rect = CGRect(x:0, y:0, width:button.frame.size.width, height:button.frame.size.height)
UIBezierPath(roundedRect: rect, cornerRadius: rect.width/2).addClip()
image.draw(in: rect)
let newImage = UIGraphicsGetImageFromCurrentImageContext()!
UIGraphicsEndImageContext()
button.addTarget(self, action:#selector(self.navToMe), for: UIControl.Event.touchUpInside)
let color = UIColor(patternImage: newImage)
button.backgroundColor = color
button.layer.cornerRadius = 0.5 * button.bounds.size.width
let barButton = UIBarButtonItem()
barButton.customView = button
self.navigationItem.rightBarButtonItems = [notificationButton, barButton]
And the result is,
In second solution it working but the image is redrawing like mirroring to down. Please help me how to place rounded profile picture in UIBarButtonItems.

Answer 1

I've used the following approch,
let button = UIButton(type: .system)
button.frame = CGRect(x: 0, y: 0, width: 30, height: 30)
button.layer.cornerRadius = 15
button.clipsToBounds = true
button.imageView?.contentMode = .scaleAspectFit
let imageData = try? Data(contentsOf: URL(string : "https://www.w3schools.com/howto/img_avatar.png")!)
if let imageData = imageData , let image = UIImage(data: imageData)?.resizeImage(to: button.frame.size) {
button.setBackgroundImage(image, for: .normal)
}
navigationItem.rightBarButtonItem = UIBarButtonItem(customView: button)
To resize the image
extension UIImage {
func resizeImage(to size: CGSize) -> UIImage {
return UIGraphicsImageRenderer(size: size).image { _ in
draw(in: CGRect(origin: .zero, size: size))
}
}}
In the above example, I've used Data(contentsOf: URL) to load image from the internet, but it is better to fetch the image asynchronously. Check this for more details.

Answer 2

Try this
let frame = CGRect(x: 0, y: 0, width: 30, height: 30)
let customView = UIView(frame: frame)
let imageView = UIImageView(image: UIImage(named: "turtle"))
imageView.frame = frame
imageView.layer.cornerRadius = imageView.frame.height * 0.5
imageView.layer.masksToBounds = true
customView.addSubview(imageView)
navigationItem.rightBarButtonItems = [
UIBarButtonItem(systemItem: .action), UIBarButtonItem(customView: customView)
]
Instead of UIImage(name:) use your UIImage(data:) constructor

Answer 3

You do not need a custom button or an image view. And do not use corner rounding. Just draw the target image into the desired size with clipping to a circle and use that as the bar button item’s image.