Comment ajouter 2 boutons dans la barre de navigation UIN sur le côté droit sans IB?


86

Comment puis-je ajouter 2 boutons dans le UINavigationBarsans XIB?
Les 2 boutons doivent être alignés sur le côté droit du UINavigationBar.

Je sais comment ajouter un bouton, mais qu'en est-il de deux?

Réponses:


142

Avec iOS 5+, c'est aussi simple que:

UIBarButtonItem *btnShare = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemAction target:self action:@selector(share)];
UIBarButtonItem *btnRefresh = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemRefresh target:self action:@selector(refresh)];
[self.navigationItem setRightBarButtonItems:[NSArray arrayWithObjects:btnShare, btnRefresh, nil]];

Je pense que c'est également disponible dans iOS 5.
iAmd

1
Sympa et simple! J'ai également inclus le bouton droit existant (défini dans IB) UIBarButtonItem * btnCurrent = self.navigationItem.rightBarButtonItem;
Duncan

43

J'ai posté du code (voir ci-dessous) pour ajouter deux boutons à droite de la barre de navigation. Vous pouvez définir barStyle = -1au lieu de sous-classer UIToolbar.

UIToolbar *tools = [[UIToolbar alloc]
                    initWithFrame:CGRectMake(0.0f, 0.0f, 103.0f, 44.01f)]; // 44.01 shifts it up 1px for some reason
tools.clearsContextBeforeDrawing = NO;
tools.clipsToBounds = NO;
tools.tintColor = [UIColor colorWithWhite:0.305f alpha:0.0f]; // closest I could get by eye to black, translucent style.
                                                              // anyone know how to get it perfect?
tools.barStyle = -1; // clear background
NSMutableArray *buttons = [[NSMutableArray alloc] initWithCapacity:3];

// Create a standard refresh button.
UIBarButtonItem *bi = [[UIBarButtonItem alloc]
    initWithBarButtonSystemItem:UIBarButtonSystemItemRefresh target:self action:@selector(refresh:)];
[buttons addObject:bi];
[bi release];

// Create a spacer.
bi = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFixedSpace target:nil action:nil];
bi.width = 12.0f;
[buttons addObject:bi];
[bi release];

// Add profile button.
bi = [[UIBarButtonItem alloc] initWithTitle:@"Profile" style:UIBarButtonItemStylePlain target:self action:@selector(goToProfile)];
bi.style = UIBarButtonItemStyleBordered;
[buttons addObject:bi];
[bi release];

// Add buttons to toolbar and toolbar to nav bar.
[tools setItems:buttons animated:NO];
[buttons release];
UIBarButtonItem *twoButtons = [[UIBarButtonItem alloc] initWithCustomView:tools];
[tools release];
self.navigationItem.rightBarButtonItem = twoButtons;
[twoButtons release];

c'était le premier message que j'ai trouvé qui incluait une configuration de barre d'outils supplémentaire qui le fait fonctionner avec différentes couleurs d'arrière-plan, merci
Chris

C'est la bonne réponse à cette question .... Le code de ce lien fonctionne parfaitement ... vous êtes un homme génial ... bravo ... :) Toutes les autres réponses ci-dessus sont fausses et ne fonctionnent pas
Sameera Chathuranga

La solution ne fonctionne pas parfaitement lorsque vous présentez le navigationController comme un contentViewController de UIPopoverController. Lorsque vous définissez UIToolbar comme une vue personnalisée de leftBarButtonItem, la zone tactile du deuxième bouton est incorrecte (décalée vers la gauche, ce qui signifie que le côté droit du deuxième bouton n'est pas cliquable). Quand il s'agit de rightBarButtonItem, le deuxième bouton est mal dessiné (seul le côté gauche de celui-ci est dessiné) ... Dans ce cas, je devrai m'en tenir à l'utilisation de UIToolbar personnalisée comme en-tête au lieu de UINavigationBar je pense ...
manicaesar

1
Une des astuces ici est la tools.barStyle = -1ligne: sans cela, il y a des artefacts visuels si vous utilisez UIBarStyleBlack avec translucent = YES. (À savoir, la couleur d'arrière-plan ne correspond pas à celle de la barre de navigation.) Est-ce une fonctionnalité non documentée? Si c'est le cas, ce code est assez fragile. Je n'ai vu cela nulle part dans les documents.
ettore le

28

Vous pouvez utiliser un bouton de barre initialisé avec une barre d' outils comme vue personnalisée.

UIToolbar* toolbar = [[UIToolbar alloc] initWithFrame:CGRectMake(0.0f, 0.0f, 103.0f, 44.01f)];
NSArray* buttons = [NSArray arrayWithObjects:self.editButtonItem, someOtherButton, nil];
[toolbar setItems:buttons animated:NO];
self.navigationItem.rightBarButtonItem = [[UIBarButtonItem alloc] initWithCustomView:toolbar];

Donnerait quelque chose comme ça:

texte alternatif

Remarque: cette réponse est obsolète pour iOS 6 ou version ultérieure


3
@SameeraChathuranga vous ne pouvez pas simplement copier et coller ce code sans rien faire. Vous devez vous assurer que 'self.editButtonItem' et 'someOtherButton' sont définis quelque part en premier ...
Nathan

Salut! Merci pour l'extrait. En utilisant cela, j'ai ajouté deux boutons avec succès mais il y a un petit problème. Voici à quoi ça ressemble. Comme vous pouvez le voir, une légère bordure carrée est visible autour de la barre d'outils. Comment puis-je supprimer cela et le rendre transparent comme vous l'avez dans votre capture d'écran ci-dessus? Merci. :)
Isuru

Bizarre, je n'obtiens pas la bordure sur le bouton "ajouter". Je n'obtiens une bordure que si j'utilise UIBarButtonStyles qui n'ont pas d'icône.
pojo

23

Voici l'exemple de travail de mon projet actuel:

deux boutons dans la barre UINavigationbar rightBarButtonItem

UIButton *homeBtn =  [UIButton buttonWithType:UIButtonTypeCustom];
[homeBtn setImage:[UIImage imageNamed:@"home-icon"] forState:UIControlStateNormal];
//[homeBtn addTarget:self action:@selector(home) forControlEvents:UIControlEventTouchUpInside];
[homeBtn setFrame:CGRectMake(0, 0, 32, 32)];

UIButton *settingsBtn =  [UIButton buttonWithType:UIButtonTypeCustom];
[settingsBtn setImage:[UIImage imageNamed:@"settings-icon"] forState:UIControlStateNormal];
//[settingsBtn addTarget:self action:@selector(settings) forControlEvents:UIControlEventTouchUpInside];
[settingsBtn setFrame:CGRectMake(44, 0, 32, 32)];

UIView *rightBarButtonItems = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 76, 32)];
[rightBarButtonItems addSubview:homeBtn];
[rightBarButtonItems addSubview:settingsBtn];

self.navigationItem.rightBarButtonItem = [[UIBarButtonItem alloc] initWithCustomView:rightBarButtonItems];

18
UINavigationBar *navBarView = [[UINavigationBar alloc] initWithFrame: CGRectMake(0.0f, 0.0f, 320.0f, 42.0f)];
    navBarView.tintColor= [UIColor colorWithRed:90.0/255.0f green:53.0/255.0f blue:45.0/255.0f alpha:1.0];

    UIBarButtonItem *left=[[UIBarButtonItem alloc]initWithTitle:@"Back" style:UIBarButtonItemStylePlain target:self action:@selector(backView)];
    UIBarButtonItem *right=[[UIBarButtonItem alloc]initWithTitle:@"Save" style:UIBarButtonItemStylePlain target:self action:@selector(SaveImage)];
    UIBarButtonItem *Add=[[UIBarButtonItem alloc]initWithBarButtonSystemItem:UIBarButtonSystemItemAdd target:self action:@selector(AddComment:)];

    UINavigationItem *navigationItem = [[UINavigationItem alloc] init];
    navigationItem.leftBarButtonItem = left;
    NSMutableArray *buttonArray=[[NSMutableArray alloc]initWithCapacity:2];
    [buttonArray addObject:right];
    [buttonArray addObject:Add];
    navigationItem.rightBarButtonItems = buttonArray;
    [navBarView pushNavigationItem:navigationItem animated:NO];
[self.view addSubView:navBarView];

14

Rapide:

override func viewDidLoad() {
    super.viewDidLoad()

    // Additional bar button items
    let button1 = UIBarButtonItem(image: UIImage(named: "image1.png"), style: .Plain, target: self, action: "methodA")
    let button2 = UIBarButtonItem(image: UIImage(named: "image2.png"), style: .Plain, target: self, action: "methodB")
    let button3 = UIBarButtonItem(image: UIImage(named: "image3.png"), style: .Plain, target: self, action: "methodC")

    navigationItem.leftItemsSupplementBackButton = true
    navigationItem.setLeftBarButtonItem(button1, animated: true)
    navigationItem.setRightBarButtonItems([button2, button3], animated: true)

Méthodes pour les boutons:

func methodA() {
    performSegueWithIdentifier("segA", sender: nil)
}

func methodB() {
    performSegueWithIdentifier("segB", sender: nil)
}

func methodC() {
    performSegueWithIdentifier("segC", sender: nil)
}

9

RAPIDE

Tu peux faire vite comme ça

        var editImg   : UIImage = UIImage(named: "plus")!
        var searchImg : UIImage = UIImage(named: "search")!
        
        var editBtn : UIBarButtonItem = UIBarButtonItem(image: editImg,  style: UIBarButtonItemStyle.Plain, target: self, action: Selector("editBtnPressed:"))
        
        var searchBtn : UIBarButtonItem = UIBarButtonItem(image: searchImg,  style: UIBarButtonItemStyle.Plain, target: self, action: Selector ("searchBtnPressed:"))
        
        var buttons : NSArray = [editBtn, searchBtn]
        
        self.navigationItem.rightBarButtonItems = buttons

        func editBtnPressed(sender: AnyObject){
        
        }
    
        func searchBtnPressed(sender: AnyObject){
        
        }

7

Vous pouvez créer une vue UIV et ajouter deux boutons dans cette vue. Et ajoutez cet UIView comme bouton droit :)

UIView* rightItem = [UIView alloc] initWithFrame:frame];
//Create UIButton1 b1
//Create UIButton2 b2
[rightItem addSubview:b1];
[rightItem addSubview:b2];

self.navigationItem.rightBarButtonItem = rightItem;

@NathanReed, It should be self.navigationItem.rightBarButtonItem = [[UIBarButtonItem alloc] initWithCustomView: rightItem];( Exemple de code de travail complet ci-dessous [par moi])
Adnan

7

La réponse Prakash fonctionne également dans le constructeur d'interface.

Faites glisser un UIViewdans le UINavigationItem, puis vous pouvez en mettre plusieurs UIButtoncomme enfants de ceci UIViewet créer une hiérarchie comme ceci:

Barre de navigation avec hiérarchie de 3 boutons

Définissez la couleur d'arrière-plan du UIViewpour effacer et ajoutez des contraintes pour centrer verticalement les boutons et fixer la position horizontale. Voici le résultat que j'ai obtenu avec zéro ligne de code:

Résultat dans le simulateur


1
Cela marche! Pour ceux qui sont aussi confus que moi, ce que j'ai fait a été de remplacer l'élément de bouton de barre par l'UIView à la place en le faisant glisser vers UINavigationItem comme décrit. Après cela, ce sera exactement la même chose que de faire glisser des boutons sur votre scène et d'ajouter des contraintes. Félicitations pour cette solution car sans aucun code, je peux maintenant le faire en plus de créer une transition vers différentes scènes en faisant simplement glisser les boutons dans le storyboard :) Merci!
Bruce

2
Ce n'est pas du tout nécessaire. Vous pouvez simplement faire glisser les éléments du bouton de la barre vers le bouton de la barre de droite. Xcode 7.3.1
João Nunes

4

Dans SWIFT, vous pouvez ajouter ce code pour configurer deux boutons sur le côté droit (ou gauche):

self.navigationItem.rightBarButtonItems = [UIBarButtonItem(barButtonSystemItem: UIBarButtonSystemItem.Action, target: self, action: "barButtonItemClicked"), UIBarButtonItem(barButtonSystemItem: UIBarButtonSystemItem.Search, target: self, action: "barButtonItemClicked")]


3

Voici le code Swift 4:

    let editImage   = UIImage(named: "plus")!
    let searchImage = UIImage(named: "search")!
    let editButton   = UIBarButtonItem(image: editImage,  style: .plain, target: self, action:#selector(didTapEditButton))
    let searchButton = UIBarButtonItem(image: searchImage,  style: .plain, target: self, action:#selector(didTapSearchButton))
    navigationItem.rightBarButtonItems = [editButton, searchButton]


 @objc func didTapEditButton(sender: AnyObject){

  }

 @objc func didTapSearchButton(sender: AnyObject){

  }

2

Vous n'avez pas besoin d'ajouter deux boutons. Vous avez juste besoin d'ajouter

UIBarButtonSystemItemFlexibleSpace 

ne pas

UIBarButtonSystemItemFixedSpace

et un bouton, de sorte qu'il soit du côté droit.

Comme ça:

UIToolbar *toolbar = [[UIToolbar alloc] initWithFrame:CGRectMake(0, 0, 320, 40)];
toolbar.barStyle = UIBarStyleBlackTranslucent;

UIBarButtonItem *spaceButton = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace target:nil action:nil];

UIBarButtonItem *infoButtonItem1 = [[UIBarButtonItem alloc] initWithTitle:@"Done" style:UIBarButtonItemStyleDone target:self action:@selector(empresaTextFieldDone)];    

toolbar.items = [NSArray arrayWithObjects: spaceButton, infoButtonItem1, nil];   

2
UIView* buttonsView= [[UIView alloc] initWithFrame:CGRectMake(10, 6, 84, 32)];
buttonsView.backgroundColor=[UIColor clearColor];

btn_back = [UIButton buttonWithType:UIButtonTypeCustom];
[btn_back addTarget:self action:@selector(backButtonClick) 
forControlEvents:UIControlEventTouchUpInside];
btn_back.frame = CGRectMake(0, 0, 32, 32);
btn_back.backgroundColor=[UIColor colorWithPatternImage:[UIImage imageNamed:@"close.png"]];

btn_help = [UIButton buttonWithType:UIButtonTypeCustom];
[btn_help addTarget:self action:@selector(helpButtonClick) 
 forControlEvents:UIControlEventTouchUpInside];
btn_help.frame = CGRectMake(42, 0, 32, 32);
btn_help.backgroundColor=[UIColor colorWithPatternImage:[UIImage imageNamed:@"info.png"]];

[buttonsView addSubview:btn_back];
[buttonsView addSubview:btn_help];

segmentItem = [[UIBarButtonItem alloc] initWithCustomView:buttonsView];
self.navigationItem.rightBarButtonItem = segmentItem;

1

Au cas où quelqu'un viendrait ici, comme moi, à la recherche d'une réponse MonoTouch, ne cherchez pas plus loin que NavigationItem.RightBarButtonItemsarray.


1

dans SWIFT:

(supposons que vous ayez un contrôleur de navigation) dans le contrôleur racine, utilisez ce code:

la gauche: ..

    let leftBtn =  UIBarButtonItem(title: "Do It", style: UIBarButtonItemStyle.Plain,
        target: self, action: "doIt:")
    leftBtn.tag=100
    self.navigationItem.leftBarButtonItem = leftBtn

droite:

    let rightView = UIView(frame:  CGRectMake(0, 0, 100, 30))
    rightView.backgroundColor = UIColor.redColor()

    let btn1 = UIButton(frame: CGRectMake(0,0,60, 20))
    btn1.setTitle("R1", forState: UIControlState.Normal)
    btn1.tag=101
    btn1.addTarget(self, action: "doIt:", forControlEvents: UIControlEvents.TouchUpInside)
    rightView.addSubview(btn1)

    let btn2 = UIButton(frame: CGRectMake(30,0,60, 20))
    btn2.setTitle("R2", forState: UIControlState.Normal)
    btn2.tag=102
    btn2.addTarget(self, action: "doIt:", forControlEvents: UIControlEvents.TouchUpInside)
    rightView.addSubview(btn2)


    let rightBtn = UIBarButtonItem(customView: rightView)
    self.navigationItem.rightBarButtonItem = rightBtn;

..

où:

 func doIt(sender: AnyObject!){
    let tag = sender.tag

}

0
    func makeCustomNavigationBar () {

        // Create the navigation bar
        let navigationBar = UINavigationBar(frame: CGRectMake(0, 20, self.view.frame.size.width, 44)) // Offset by 20 pixels vertically to take the status bar into account
        navigationBar.backgroundColor = UIColor.init(hexString: "E43037")
        navigationBar.delegate = self;

        navigationBar.setBackgroundImage(UIImage(), forBarMetrics: .Default)
        navigationBar.shadowImage = UIImage()
        navigationBar.translucent = true

        // Create a navigation item with a title
        let navigationItem = UINavigationItem()
        navigationBar.tintColor = UIColor.whiteColor()

        navigationItem.title = "Forgot Password"
        navigationBar.titleTextAttributes = [NSForegroundColorAttributeName : UIColor.whiteColor()]

        // Create left and right button for navigation item
        let leftButton = UIBarButtonItem(title: "", style: UIBarButtonItemStyle.Plain, target: self, action: nil)
        leftButton.action = "returnToLoginView"

        let backbuttonImageView =  UIImageView(frame: CGRectMake(0, 0, 30, 30))
        backbuttonImageView.image = UIImage(named: "nav-arrow-left")
        leftButton.image = backbuttonImageView.image
        navigationItem.leftBarButtonItem = leftButton


let rightButton = UIBarButtonItem(title: "Right", style: UIBarButtonItemStyle.Plain, target: self, action: nil)
        rightButton.action = "navigateToDashBoardView"

        let rightButtonImageView =  UIImageView(frame: CGRectMake(0, 0, 30, 30))
        rightButtonImageView.image = UIImage(named: "nav-arrow-left")
        rightButton.image = backbuttonImageView.image
        navigationItem.rightBarButtonItem = rightButton

        // Assign the navigation item to the navigation bar
        navigationBar.items = [navigationItem]

        // Make the navigation bar a subview of the current view controller
        self.view.addSubview(navigationBar)
    }
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.