Question

我试图在iOS的右侧导航栏上放置圆形按钮但不幸的是当我使用按钮背景时它不会使图像呈圆形，它显示方形背景图像但是当我删除图像并将背景颜色放在按钮周围时背景色。我试过的代码：

        let button = UIButton()
        button.frame = CGRectMake(0, 0, 40, 40)
        button.layer.cornerRadius = 0.5 * button.bounds.size.width
        button.setImage(self.myPic, forState: .Normal)            
        let barButton = UIBarButtonItem()
        barButton.customView = button
        self.navigationItem.rightBarButtonItem = barButton

Answer 1

尝试使用此代码.. 用于带图像的圆形按钮 -

let button = UIButton()
button.frame = CGRectMake(0, 0, 40, 40)
let color = UIColor(patternImage: UIImage(named: "btnImage")!)
button.backgroundColor = color
button.layer.cornerRadius = 0.5 * button.bounds.size.width
let barButton = UIBarButtonItem()
barButton.customView = button
self.navigationItem.rightBarButtonItem = barButton

使用实际图像---

   let button = UIButton()
    button.frame = CGRectMake(0, 0, 40, 40)

    let image = UIImage(named: "btnImage")!

    UIGraphicsBeginImageContextWithOptions(button.frame.size, false, image.scale)
    let rect  = CGRectMake(0, 0, button.frame.size.width, button.frame.size.height)
    UIBezierPath(roundedRect: rect, cornerRadius: rect.width/2).addClip()
    image.drawInRect(rect)

    let newImage = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()


    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.rightBarButtonItem = barButton

Answer 2

斯普利特2 在圆圈中设置栏按钮

func setProfileImageOnBarButton() {

    let button = UIButton()
    button.setImage(profileImage, forState: UIControlState.Normal)
    button.addTarget(self, action:#selector(self.openUserProfile), forControlEvents: UIControlEvents.TouchUpInside)
    button.frame = CGRectMake(0, 0, 36, 36)
    button.layer.cornerRadius = CGRectGetWidth(button.frame) / 2
    button.layer.masksToBounds = true
    let barButton = UIBarButtonItem(customView: button)
    self.navigationItem.rightBarButtonItem = barButton

}

Answer 3

我为Swift 4提供了解决方案，您也需要调整图像和框架的大小

    let avatarSize: CGFloat = 30
    let button = UIButton()
    button.frame = CGRect(x: 0, y: 0, width: avatarSize, height: avatarSize)
    button.setImage(UIImage(named: "avatar")?.resizeImage(avatarSize, opaque: false), for: .normal)

    if let buttonImageView = button.imageView {
        button.imageView?.layer.cornerRadius = buttonImageView.frame.size.width / 2
        button.imageView?.clipsToBounds = true
        button.imageView?.contentMode = .scaleAspectFit
    }

您需要的扩展名：

extension UIImage {
func resizeImage(_ dimension: CGFloat, opaque: Bool, contentMode: 
    UIViewContentMode = .scaleAspectFit) -> UIImage {
    var width: CGFloat
    var height: CGFloat
    var newImage: UIImage

    let size = self.size
    let aspectRatio =  size.width/size.height

    switch contentMode {
    case .scaleAspectFit:
        if aspectRatio > 1 {                            // Landscape image
            width = dimension
            height = dimension / aspectRatio
        } else {                                        // Portrait image
            height = dimension
            width = dimension * aspectRatio
        }

    default:
        fatalError("UIIMage.resizeToFit(): FATAL: Unimplemented ContentMode")
    }

    if #available(iOS 10.0, *) {
        let renderFormat = UIGraphicsImageRendererFormat.default()
        renderFormat.opaque = opaque
        let renderer = UIGraphicsImageRenderer(size: CGSize(width: width, height: height), format: renderFormat)
        newImage = renderer.image {
            (context) in
            self.draw(in: CGRect(x: 0, y: 0, width: width, height: height))
        }
    } else {
        UIGraphicsBeginImageContextWithOptions(CGSize(width: width, height: height), opaque, 0)
        self.draw(in: CGRect(x: 0, y: 0, width: width, height: height))
        newImage = UIGraphicsGetImageFromCurrentImageContext()!
        UIGraphicsEndImageContext()
    }

    return newImage
}
}

Answer 4

Swift 5-您可以简单地做到这一点，并确保将clipstobounds设置为true

isLoading

Answer 5

它适用于Objective-C。试试看！

UIButton *avatarButton = [[UIButton alloc]initWithFrame:CGRectMake(0, 0, 40, 40)];
// redraw the image to fit new size
UIGraphicsBeginImageContextWithOptions(avatarButton.frame.size, NO, 0);
[[UIImage imageNamed:@"pikachu"] drawInRect:CGRectMake(0, 0, avatarButton.frame.size.width, avatarButton.frame.size.height)];
UIImage *resultImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

UIColor *color = [UIColor colorWithPatternImage: resultImage];
avatarButton.backgroundColor = color;
avatarButton.layer.cornerRadius = 0.5 * avatarButton.bounds.size.width;
UIBarButtonItem *barButton = UIBarButtonItem.new;
barButton.customView = avatarButton;
self.navigationItem.rightBarButtonItem = barButton;

如何在右侧导航栏项目上设置带有背景图像的圆形按钮

5 个答案: