Быстрое пользовательское изображение NavBar Back Button и текст

Мне нужно настроить внешний вид кнопки в проекте Swift.

Вот что у меня есть: Default Back Button

Вот что я хочу: Custom Back Button

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

let backButton = UIBarButtonItem(title: "Custom", style: .Plain, target: self, action: nil    )
//backButton.image = UIImage(named: "imageName") //Replaces title
backButton.setBackgroundImage(UIImage(named: "imageName"), forState: .Normal, barMetrics: .Default) // Stretches image
navigationItem.setLeftBarButtonItem(backButton, animated: false)

ОТВЕТЫ

Ответ 1

Вы можете сделать что-то вроде этого:

let yourBackImage = UIImage(named: "back_button_image")
self.navigationController?.navigationBar.backIndicatorImage = yourBackImage
self.navigationController?.navigationBar.backIndicatorTransitionMaskImage = yourBackImage
self.navigationController?.navigationBar.backItem?.title = "Custom"

У вашего изображения будет только один цвет, хотя

Ответ 2

Примечание. Помните, что кнопка "Назад" относится к исходному ViewController, а не к целевому ViewController. Таким образом, модификация должна быть выполнена в исходном VC, что отражается на всем представлении в навигационном контроллере

Фрагмент кода:

let backImage = UIImage(named: "icon-back")

self.navigationController?.navigationBar.backIndicatorImage = backImage

self.navigationController?.navigationBar.backIndicatorTransitionMaskImage = backImage

/*** If needed Assign Title Here ***/
self.navigationItem.backBarButtonItem = UIBarButtonItem(title: "", style: UIBarButtonItemStyle.plain, target: nil, action: nil)

Ответ 3

swift 4

В моем случае мне нужно было только изображение кнопки без текста. Надеюсь, это кому-то будет полезно.

let imgBackArrow = UIImage(named: "back_arrow_32")

navigationController?.navigationBar.backIndicatorImage = imgBackArrow
navigationController?.navigationBar.backIndicatorTransitionMaskImage = imgBackArrow

navigationItem.leftItemsSupplementBackButton = true
navigationItem.leftBarButtonItem = UIBarButtonItem(title: "", style: .plain, target: self, action: nil)

Ответ 4

Наличие кнопки в панели навигации с изображением и текстом довольно сложно. Особенно после того, как они ввели новую головную боль с позицией UIBarButtonItem в iOS 11: iOS 11 - UIBarButtonItem горизонтальная позиция

Вы можете сделать любую кнопку с изображением или кнопкой с текстом, но не с кнопкой с обоими из них. Я даже попробовал два UIBarButtonItems вместе, один с изображением и другой с текстом - он все еще не выглядит хорошо, и их UIStackView не может быть легко доступен для модификации.

Неожиданно я нашел простое решение:

1) спроектируйте кнопку в виде интерфейса в Interface Builder. В моем случае он находится внутри целевого UIViewController и доступен через IBOutlet для простоты

2) установите ограничение ведущего пространства для негативного изображения, вы также можете установить цвет фона представления для.clear.

enter image description here

3) использовать его:

@IBOutlet var backButtonView: UIView!

override func viewDidLoad() {
    super.viewDidLoad()

    let backButton = UIBarButtonItem(customView: self.backButtonView)
    self.backButtonView.heightAnchor.constraint(equalToConstant: 44).isActive = true // if you set more than you'll get "Unable to simultaneously..."
    self.backButtonView.widthAnchor.constraint(equalToConstant: 75).isActive = true
    self.navigationItem.leftBarButtonItem = backButton
}

Это. Не нужно использовать трюк с отрицательным разделителем для iOS 10 или трюк с imageInsets для iOS 11 (который работает, только если у вас есть изображение и не работает для изображения + текст, BTW).

enter image description here

Ответ 5

Для изображения кнопки "Назад":

  • В этом уроке: (но не работал для меня)

    UINavigationBar.appearance().backIndicatorImage = UIImage(named: "imageName")

  • Но ответ на этот стек: (работал для меня)

    var backButtonImage = UIImage(named: "back-button-image")
backButtonImage = backButtonImage?.stretchableImage(withLeftCapWidth: 15, topCapHeight: 30)
UIBarButtonItem.appearance().setBackButtonBackgroundImage(backButtonImage, for: .normal, barMetrics: .default)

И для шрифта, если вы хотите, чтобы шрифт соответствовал всей навигационной панели: (в настоящее время используется)

if let font = UIFont(name: "Avenir-Book", size: 22) {
  UINavigationBar.appearance().titleTextAttributes = [NSFontAttributeName: font]
}

Ответ 6

swift 3

    extension UIViewController {

        func setBackButton(){
            let yourBackImage = UIImage(named: "backbutton")
            navigationController?.navigationBar.backIndicatorImage = yourBackImage
            navigationController?.navigationBar.backIndicatorTransitionMaskImage = yourBackImage
        }

    }

Ответ 7

Просто замените backButton на пользовательский rightBarButtonItem

let backImage = UIImage(named: "BackBtn")?.withRenderingMode(.alwaysOriginal)
    navigationItem.leftBarButtonItem = UIBarButtonItem(image: backImage, style: .plain, target: self, action: #selector(popnav))

    @objc func popnav() {
    self.navigationController?.popViewController(animated: true)
}