如何将圆形个人资料图片图像（来自 url 字符串）设置为 iOS Swift 中的 UIBarButton 项目

Question

您好，我正在开发一个 iOS Swift 项目，我想在该项目中将导航栏中的用户个人资料图片显示为圆形。我尝试了很多示例代码，但它没有制作圆角曲线。请帮助我。

我试过这些代码，

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

结果是这样的，这里的图片没有变圆，也不是我给的全宽。

后来我尝试了另一种解决方案，即

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]

结果是，

在第二个解决方案中，它工作但图像正在重新绘制，就像镜像向下一样。请帮助我如何在 UIBarButtonItems 中放置圆形个人资料图片。

Answer 1

试试这个

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

而不是 UIImage(name:) 使用你的 UIImage(data:) 构造函数

Answer 2

我使用了以下方法，

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)

调整图片大小

extension UIImage {
    func resizeImage(to size: CGSize) -> UIImage {
       return UIGraphicsImageRenderer(size: size).image { _ in
           draw(in: CGRect(origin: .zero, size: size))
    }
}}

在上面的例子中，我使用了Data(contentsOf: URL)从互联网上加载图片，但最好是异步获取图片。查看 this 了解更多详情。

Answer 3

您不需要自定义按钮或图像视图。并且不要使用圆角。只需将目标图像绘制成所需大小并剪裁成一个圆圈，然后将其用作条形按钮项目的 image.

如何将圆形个人资料图片图像（来自 url 字符串）设置为 iOS Swift 中的 UIBarButton 项目

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

uinavigationbar

uinavigationitem

ios

swift