Как установить изображение для кнопки со стрелкой?

Я пытаюсь установить изображение для элемента панели для элемента, для которого у меня есть изображение:

enter image description here

с разрешением 30 * 30, но при назначении этой кнопки Image to Bar ее выглядит так:

enter image description here

Я назначил изображение таким образом:

enter image description here

и если я пробую так, как сделать IBOutlet для кнопки, и установить Image programatically form этот вопрос и код для этого:

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

но ничего не случилось с этим,

Может ли кто-нибудь сказать мне, что я делаю неправильно?

или который является способом тестового процесса?

Ответы

Ответ 1

Я добился этого программно с помощью этого кода:

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

И результат будет:

enter image description here

Таким же образом вы можете установить кнопку для левой стороны также:

self.navigationItem.leftBarButtonItem = barButton

И результат будет:

enter image description here

И если вам нужна та же транзакция, что и у контроллера навигации, когда вы возвращаетесь с кнопкой возврата по умолчанию, то вы можете добиться этого с помощью пользовательской кнопки возврата с этим кодом:

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

Для 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")
    }
}

Для Swift 4.0:

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        //create a new button
        let button = UIButton(type: .custom)
        //set image for button
        button.setImage(UIImage(named: "fb.png"), for: .normal)
        //add function for button
        button.addTarget(self, action: #selector(fbButtonPressed), for: .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.
    @objc func fbButtonPressed() {

        print("Share to fb")
    }
}

Ответ 2

Легким решением может быть следующее

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

затем перейдите на свой Assets.xcassets, выберите изображение и перейдите к инспектору атрибутов и выберите "Исходное изображение" в списке "Повторить" как.

Ответ 3

Подобно принятому решению, но вы можете заменить

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

с

let button = UIButton()

Вот полное решение, наслаждайтесь: (это немного чище, чем принятое решение)

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

Ответ 4

Здесь простой extension на 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
    }
}

Ответ 5

Я использую последние быстрые (2.1), и ответ (Dharmesh Kheni and jungledev) не работает для меня. Цвет изображения был выключен (при установке в IB он был синим, а при настройке непосредственно в UIButton он был черным). Оказывается, я могу создать тот же элемент бара со следующим кодом:

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

Ответ 6

Для этого требуется только две строки кода

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

}

Ответ 7

Ваша проблема связана с тем, как был создан значок - он не соответствует спецификациям значков панели пользовательских вкладок Apple:

To design a custom bar icon, follow these guidelines:

Use pure white with appropriate alpha transparency.
Dont include a drop shadow.
Use antialiasing.

Из руководящих принципов:

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

То, что было бы возможно, выглядит следующим образом. Вы можете найти такие иконки на большинстве бесплатных сайтов с иконками панели вкладок.

enter image description here

Ответ 8

Вы можете использовать этот код для нескольких кнопок бара с пользовательским изображением:

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]

Результат будет таким:

enter image description here

Ответ 9

Свифт 4.

@IBOutlet weak var settingBarBtn: UIBarButtonItem! {
    didSet {
        let imageSetting = UIImageView(image: UIImage(named: "settings"))
        imageSetting.image = imageSetting.image!.withRenderingMode(.alwaysOriginal)
        imageSetting.tintColor = UIColor.clear
        settingBarBtn.image = imageSetting.image
    }
}

Ответ 10

Инициализируйте barbuttonItem следующим образом:

let pauseButton = UIBarButtonItem(image: UIImage(named: "big"),
                                  style: .plain,
                                  target: self,
                                  action: #selector(PlaybackViewController.pause))

Ответ 11

Если ваш UIBarButtonItem уже выделен, как в раскадровке. (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

Ответ 12

Не забывайте, что имя изображения является чувствительным к регистру для XCode.

Ответ 13

SwiftUI

Модификатор .navigationBarItems выбирает любой вид:

struct ContentView: View {
     var body: some View {
        NavigationView {
            Text("SwiftUI")
            .navigationBarItems(leading:
                HStack {
                    Image(systemName: "trash")
                    Text("Trash")
                }
            )
        }
    }
}

Leading with text[1]

.navigationBarItems(trailing: Image(systemName: "trash") )

Trailing

.navigationBarItems(leading: Image(systemName: "trash.fill"),
                    trailing: Image(systemName: "trash")
)

Bothsides

Вы можете использовать кнопку для каждого, если вам нужно действие для каждого из них.