2014-12-16 13 views
30

Sto cercando di impostare un'immagine di pulsante della barra del lotto per questo ho un'immagine come:Come impostare l'immagine per il pulsante della barra con swift?

enter image description here

con risoluzione di 30 * 30, ma mentre mi assegna l'immagine Pulsante a Bar Il suo aspetto come:

enter image description here

ho assegnato immagine in questo modo:

enter image description here

.210

e Se provo in questo modo come fare un IBOutlet per il pulsante e Immagine impostare programatically formare this domanda e il codice per questo è:

// Outlet for bar button 
@IBOutlet weak var fbButton: UIBarButtonItem! 

// Set Image for bar button 
var backImg: UIImage = UIImage(named: "fb.png")! 
fbButton.setBackgroundImage(backImg, forState: .Normal, barMetrics: .Default) 

ma niente happend con questo,

Qualcuno può dirmi cosa sto facendo di sbagliato?

o qual è il modo migliore per farlo?

risposta

48

ho realizzato che programatically con questo codice:

import UIKit 

class ViewController: UIViewController { 

    override func viewDidLoad() { 
     super.viewDidLoad() 
     //create a new button 
     let button: UIButton = UIButton.buttonWithType(UIButtonType.Custom) as! UIButton 
     //set image for button 
     button.setImage(UIImage(named: "fb.png"), forState: UIControlState.Normal) 
     //add function for button 
     button.addTarget(self, action: "fbButtonPressed", forControlEvents: UIControlEvents.TouchUpInside) 
     //set frame 
     button.frame = CGRectMake(0, 0, 53, 31) 

     let barButton = UIBarButtonItem(customView: button) 
     //assign button to navigationbar 
     self.navigationItem.rightBarButtonItem = barButton 
    } 

    //This method will call when you press button. 
    func fbButtonPressed() { 

     println("Share to fb") 
    } 
} 

e il risultato sarà:

enter image description here

stesso modo è possibile impostare il pulsante per il lato sinistro anche questo way:

self.navigationItem.leftBarButtonItem = barButton 

E risultato sarà:

enter image description here

E se si vuole stessa transazione come controller di navigazione avere quando si va indietro con pulsante predefinito allora si può ottenere che, con pulsante personalizzato indietro con questo codice:

func backButtonPressed(sender:UIButton) { 
    navigationController?.popViewControllerAnimated(true) 
} 

Per swift 3.0:

import UIKit 

class ViewController: UIViewController { 

    override func viewDidLoad() { 
     super.viewDidLoad() 
     //create a new button 
     let button = UIButton.init(type: .custom) 
     //set image for button 
     button.setImage(UIImage(named: "fb.png"), for: UIControlState.normal) 
     //add function for button 
     button.addTarget(self, action: #selector(ViewController.fbButtonPressed), for: UIControlEvents.touchUpInside) 
     //set frame 
     button.frame = CGRect(x: 0, y: 0, width: 53, height: 51) 

     let barButton = UIBarButtonItem(customView: button) 
     //assign button to navigationbar 
     self.navigationItem.rightBarButtonItem = barButton 
    } 

    //This method will call when you press button. 
    func fbButtonPressed() { 

     print("Share to fb") 
    } 
} 
+7

Ottima soluzione. Non penso che sia necessario eseguire il cast come UIButton 'let button: UIButton = UIButton.buttonWithType (UIButtonType.Custom) as! UIButton' In realtà, in Swift 2.1 abbiamo questo: 'pulsante let: UIButton = UIButton (tipo: UIButtonType.Custom)' –

+0

Per swift 4, è necessario anche aggiungere ancore di vincoli di larghezza e altezza al 'button' ' s e imposta 'translatesAutoresizingMaskIntoConstraints' come falso. es. 'button.widthAnchor.constriant (equalToConstant: 53) .isActive = true' ' button.heightAnchor.constraint (equalToConstant: 51).isActive = true' – kbunarjo

4

Il tuo problema è a causa del modo in cui l'icona è stato fatto - non è conforme alla scheda personalizzata barra delle icone specifiche di Apple:

To design a custom bar icon, follow these guidelines: 

Use pure white with appropriate alpha transparency. 
Don’t include a drop shadow. 
Use antialiasing. 

Dalle linee guida:

https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/BarIcons.html#//apple_ref/doc/uid/TP40006556-CH21-SW1

Qualcosa che sarebbe possibile assomiglia a questo. È possibile trovare tali icone nella maggior parte dei siti di icone della barra delle schede gratuiti.

enter image description here

+0

grazie per la risposta e possono darmi qualsiasi sito web in cui posso scaricare questo tipo di immagini? –

+0

Ho ottenuto quello sopra da http://www.icondeposit.com/theicondeposit:139 – aparna

14

Simile alla soluzione accettata, ma è possibile sostituire il

let button: UIButton = UIButton.buttonWithType(UIButtonType.Custom) as! UIButton 

con

let button = UIButton() 

Ecco la soluzione completa, godere: (è solo un po 'più pulita di la soluzione accettata)

let button = UIButton() 
button.frame = CGRectMake(0, 0, 51, 31) //won't work if you don't set frame 
button.setImage(UIImage(named: "fb"), forState: .Normal) 
button.addTarget(self, action: Selector("fbButtonPressed"), forControlEvents: .TouchUpInside) 

let barButton = UIBarButtonItem() 
barButton.customView = button 
self.navigationItem.rightBarButtonItem = barButton 
+0

aggiungi due punti alla fine di fbButtonPressed –

+0

@AbdulWaheed che non è corretto, perché non sta assumendo alcun argomento. – jungledev

+1

Sei incredibile heidi! –

8

Sto usando il più recente swift (2.1) e la risposta (Dharmesh Kheni e jungledev) non funziona per me. Il colore dell'immagine era spento (quando si impostava in IB, era blu e quando si impostava direttamente in UIButton, era nero). Si scopre ho potuto creare lo stesso articolo bar con il seguente codice:

let barButton = UIBarButtonItem(image: UIImage(named: "menu"), landscapeImagePhone: nil, style: .Done, target: self, action: #selector(revealBackClicked)) 
self.navigationItem.leftBarButtonItem = barButton 
+0

Questa dovrebbe essere la risposta accettata – stumped

10

Ecco un semplice extension su UIBarButtonItem:

extension UIBarButtonItem { 
    class func itemWith(colorfulImage: UIImage?, target: AnyObject, action: Selector) -> UIBarButtonItem { 
     let button = UIButton(type: .custom) 
     button.setImage(colorfulImage, for: .normal) 
     button.frame = CGRect(x: 0.0, y: 0.0, width: 44.0, height: 44.0) 
     button.addTarget(target, action: action, for: .touchUpInside) 

     let barButtonItem = UIBarButtonItem(customView: button) 
     return barButtonItem 
    } 
} 
+0

per SWIFT 4, è necessario per aggiungere anche i vincoli di larghezza e altezza ai 'button' e impostare' translatesAutoresizingMaskIntoConstraints' come falso. es. 'button.widthAnchor.constriant (equalToConstant: 44) .isActive = true' ' button.heightAnchor.constraint (equalToConstant: 44) .isActive = true' – kbunarjo

15

Una soluzione semplice potrebbe essere la seguente

barButtonItem.image = UIImage(named: "image") 

quindi vai al tuo Assets.xcassets seleziona l'immagine e vai a "Attribute Inspector" e seleziona "Original Image" in Reder come opzione.

+0

A volte la risposta è più semplice di quanto pensiamo. In precedenza, ho creato un nuovo UIBarButtonItem che è inizializzato con l'immagine che stavo cercando di cambiare e assegnarlo all'oggetto UIBarButtonItem corrente. Apparentemente, non devi farlo. Basta impostare la proprietà dell'immagine dell'attuale UIBarButtonItem sull'immagine che stavo cercando di modificare. ♂️. Grazie! – yohannes

+0

Inoltre, se l'immagine non si trova all'interno di un catalogo di risorse, è possibile utilizzare l'estensione UIImage .withRenderingMode (.alwaysOriginal) per ottenere la stessa funzione. UIImage (named: "image"). WithRenderingMode (.alwaysOriginal) – Mike

3

solo due righe di codice necessario per questo

Swift 3,0

let closeButtonImage = UIImage(named: "ic_close_white") 
     navigationItem.rightBarButtonItem = UIBarButtonItem(image: closeButtonImage, style: .plain, target: self, action: #selector(ResetPasswordViewController.barButtonDidTap(_:))) 

func barButtonDidTap(_ sender: UIBarButtonItem) 
{ 

} 
+0

Grazie! È breve e dolce. – Raja

+0

Anche lavorato con Swift 4. – Alfi

+0

Funziona ma il colore dell'immagine è cambiato .... – Jerome

0

Se l'UIBarButtonItem è già assegnato come in uno storyboard. (printBtn)

let btn = UIButton(frame: CGRect(x: 0, y: 0, width: 30, height: 30)) 
    btn.setImage(UIImage(named: Constants.ImageName.print)?.withRenderingMode(.alwaysTemplate), for: .normal) 
    btn.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(handlePrintPress(tapGesture:)))) 
    printBtn.customView = btn 
-1

Non dimenticare il nome dell'immagine è caseSensitive per XCode.

+0

Questa non è una risposta alla domanda –

1

È possibile utilizzare questo codice per il multiplo pulsante della barra immagine personalizzata con:

self.navigationItem.leftBarButtonItem = nil 

let button = UIButton(type: .custom) 
button.setImage(UIImage (named: "ChatTab"), for: .normal) 
button.frame = CGRect(x: 0.0, y: 0.0, width: 35.0, height: 35.0) 
//button.addTarget(target, action: nil, for: .touchUpInside) 
let barButtonItem = UIBarButtonItem(customView: button) 

let button2 = UIButton(type: .custom) 
button2.setImage(UIImage (named: "ActivityTab"), for: .normal) 
button2.frame = CGRect(x: 0.0, y: 0.0, width: 35.0, height: 35.0) 
//button.addTarget(target, action: nil, for: .touchUpInside) 

let barButtonItem2 = UIBarButtonItem(customView: button2) 
self.navigationItem.rightBarButtonItems = [barButtonItem, barButtonItem2] 

risultato sarà questo:

enter image description here

Problemi correlati