如何快速设置酒吧按钮的图像？

我试图设置一个图像为酒吧按钮项目，我有一个图像像:

enter image description here

分辨率为30 * 30，但是当我把这个图像分配到条形按钮时，它看起来像:

enter image description here

我这样分配图像:

enter image description here

如果我尝试这种方法，比如为按钮制作一个 IBOutlet，并通过编程方式将 Image 设置为 这个问题和代码:

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

但这件事没有任何进展,

有人能告诉我哪里做错了吗？

或者哪种方法更好呢？

123157 次浏览
小开

你的问题在于图标的制作方式——它不符合苹果的自定义标签栏图标规格:

要设计自定义条形图标，请遵循以下准则:

  • 使用带有适当透明度的纯白色。
  • 不包括阴影。
  • 使用反走样。

(来自 指南)

有可能的东西看起来像这样。你可以在大多数免费的标签栏图标网站上找到这样的图标。

Button example

小开
最佳答案

我用这段代码编程实现了这一点:

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

类似于已接受的解决方案，但您可以替换

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
小开

我使用的是最新的雨燕(2.1)和答案(Dharmesh Kheni 和 jungledev)不适合我。图像颜色关闭(在 IB 中设置为蓝色，在 UIButton 直接设置为黑色)。原来我可以用下面的代码创建相同的条形项:

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

下面是 UIBarButtonItem台的一个简单的 extension:

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

一个简单的解决方案可能如下

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

然后转到你的 Assets.xcassets 选择图像，进入属性检查器并在 Reder 中选择“原始图像”作为选项。

小开

此操作只需要两行代码

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


}
小开

如果您的 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
小开

您可以使用这个代码为自定义图像的多个条形按钮:

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

小开

Swift 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
}
}
小开

像下面这样初始化 barbuttonItem:

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

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

如果需要对每个按钮进行操作，可以为每个按钮使用一个按钮。

小开

如果您已经在情节串连板中使用图像设置了 UIBarButtonItem，那么改变 renderingMode 的一个小技巧就是向 viewDidLoad ()添加以下代码。这样，您就不必在代码中添加整个按钮和图像。

if let navButton = self.navigationItem.leftBarButtonItem, let buttonImage = navButton.image {
navButton.image = buttonImage.withRenderingMode(.alwaysOriginal)
}
小开

在 Xcode 为 assets添加图像时，只需选择 Original image选项

enter image description here

小开

快速5 + 。 < img src = “ https://i.stack.imgur.com/bFUqm.png”alt = “ enter image description here”/> < img src = “ https://i.stack.imgur.com/bFUqm.png”alt = “在这里输入图像描述”/> 平滑的解决方案，添加理想的形象，因为你想要的动态解决方案

func rightBarButtonItem(iconNameButton: String, selector: Selector) {
let button = UIButton()
button.frame = CGRect(x: 0, y: 0, width: 25, height: 25)
    

button.setImage(UIImage(named: iconNameButton), for: .normal)
button.addTarget(self, action: selector, for: .touchUpInside)
button.imageView?.contentMode = .scaleAspectFit


let buttonBarButton = UIBarButtonItem(customView: UIView(frame: CGRect(x: 0, y: 0, width: 25, height: 25)))
buttonBarButton.customView?.addSubview(button)
buttonBarButton.customView?.frame = button.frame


self.navigationItem.rightBarButtonItem = buttonBarButton
}
小开 
navigationItem.rightBarButtonItem = UIBarButtonItem(title: "Left",
style: .plain,target: self, action: #selector(rightbarButtonAction))


navigationItem.rightBarButtonItem?.image = UIImage(named: "Notification Bell")

提交答案