CODEWITHSUNDEEP
iosswiftuibuttonuibarbuttonitem
Andrew Hall
Andrew Hall

Reputation: 59

How to set circle button with background image on right navigation bar item

I have tried to put circle button on right navigation bar of iOS but unfortunately When I use button background it doesn't round the image it shows square shape background image but When I remove image and put background colour it round the button with background colour. Code that I tried:

        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

Upvotes: 5

Views: 7051

Answers (5)

葛帅琦
葛帅琦

Reputation: 1

It works for Objective-C. Have a try!

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;

Upvotes: 0

Bola Ibrahim
Bola Ibrahim

Reputation: 780

Swift 5 - You can simply do that, and make sure you make clipstobounds to true

teacherImage.setImage(UIImage(named: "icon_profile"), for: .normal)
teacherImage.frame = CGRect(x: 0, y: 0, width: 40, height: 40)
teacherImage.addTarget(self, action: #selector(addPressed), for: .touchUpInside)
teacherImage.layer.cornerRadius = 0.5 * teacherImage.bounds.size.width
teacherImage.clipsToBounds = true
let rightNavBarButton = UIBarButtonItem(customView: teacherImage)
let currWidth = rightNavBarButton.customView?.widthAnchor.constraint(equalToConstant: 40)
currWidth?.isActive = true
let currHeight = rightNavBarButton.customView?.heightAnchor.constraint(equalToConstant: 40)
currHeight?.isActive = true
self.navigationItem.rightBarButtonItem = rightNavBarButton

Upvotes: 0

K. Janjuha
K. Janjuha

Reputation: 177

I made a solution for Swift 4, you need to resize the image and the frame too

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 you need:

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

Upvotes: 2

Anit Kumar
Anit Kumar

Reputation: 8153

swift 2 set bar button in circle

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

}

Upvotes: 1

mohit_IBS
mohit_IBS

Reputation: 161

Try to use this code.. for rounded button with image -

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

With Actual image---

   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

Upvotes: 12

Related Questions