it-swarm.com.ru

Swift Custom NavBar Назад Кнопка Изображение и текст

Мне нужно настроить внешний вид кнопки «Назад» в проекте 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)
28
Conor

Вы можете сделать что-то подобное:

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

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

50
Randy

Примечание : Помните, что кнопка «Назад» принадлежит исходному 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)
26
Supratik Majumdar

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)

Для iOS 12 вы можете сделать

func setNavigationBar() {

    self.navigationItem.setHidesBackButton(true, animated:false)

    //your custom view for back image with custom size
    let view = UIView(frame: CGRect(x: 0, y: 0, width: 40, height: 40))
    let imageView = UIImageView(frame: CGRect(x: 10, y: 10, width: 20, height: 20))

    if let imgBackArrow = UIImage(named: "icn_back_arrow") {
        imageView.image = imgBackArrow
    }
    view.addSubview(imageView)

    let backTap = UITapGestureRecognizer(target: self, action: #selector(backToMain))
    view?.addGestureRecognizer(backTap)

    let leftBarButtonItem = UIBarButtonItem(customView: view ?? UIView())
    self.navigationItem.leftBarButtonItem = leftBarButtonItem
}

@objc func backToMain() {
    self.navigationController?.popViewController(animated: true)
}
16
Booharin

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

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

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

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

2) установите ограничение Leading Space для изображения, чтобы быть отрицательным, вы также можете установить цвет фона представления .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 (который работает, только если у вас есть изображение, и не работает для изображения + текста, кстати).

 enter image description here

8
Vitalii

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

  • К этому учебник : (но у меня не получилось)

    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]
}
5
Idan

Свифт 3 

    extension UIViewController {

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

    }
2
Safad Funy

Просто замените кнопку 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)
}
1
Mohamed Ali

Swift 4.2 Добавить эту функцию ViewController

func addNavigationBarButton(imageName:String,direction:direction){
    var image = UIImage(named: imageName)
    image = image?.withRenderingMode(.alwaysOriginal)
    switch direction {
    case .left:
       self.navigationItem.leftBarButtonItem = UIBarButtonItem(image: image, style:.plain, target: nil, action: #selector(goBack))
    case .right:
       self.navigationItem.rightBarButtonItem = UIBarButtonItem(image: image, style:.plain, target: nil, action: #selector(goBack))
    }
}

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

enum direction {
    case right
    case left
}

Используя вы должны использовать здесь

viewDidLoad () 

addNavigationBarButton(imageName: "ic_back", direction:.left)
0
ikbal

Я перепробовал все вышеперечисленное и все сделал собственное изображение без изменения текста Единственное, что сработало для меня, это из этого ответ

let backBTN = UIBarButtonItem(image: UIImage(named: "Back"), 
                              style: .plain, 
                              target: navigationController, 
                              action: #selector(UINavigationController.popViewController(animated:)))
navigationItem.leftBarButtonItem = backBTN
navigationController?.interactivePopGestureRecognizer?.delegate = self
0
Mohamed Saleh