web-dev-qa-db-fra.com

Barre d'outils Clavier Suivant/Précédent iOS7

Actuellement, j'essaie de définir les boutons suivants/précédents de la barre d'outils de mon clavier sur le nouveau bouton élégant/précédent d'iOS 7, qui est placé dans les contrôleurs de navigation pour revenir en arrière. Voici ce que j'essaye. Comment utiliser le bouton de la barre système au lieu du texte statique ennuyeux?

[self setToolbar:[[UIToolbar alloc] initWithFrame:self.frame]];
        [self.toolbar setBarStyle:UIBarStyleDefault];
        [self.toolbar setAutoresizingMask:(UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleRightMargin | UIViewAutoresizingFlexibleWidth)];
        [self addSubview:self.toolbar];

        [self setSegmentedControl:[[UISegmentedControl alloc] initWithItems:@[ NSLocalizedStringFromTable(@"Previous", @"BSKeyboardControls", @"Previous button title."),
                                                                               NSLocalizedStringFromTable(@"Next", @"BSKeyboardControls", @"Next button title.") ]]];

Voici à quoi cela ressemble maintenant:

enter image description here

Voici ce que je veux qu'il ressemble à: enter image description here

Des idées sur la façon d'accéder à ces éléments du système sans utiliser réellement d'images? Je sais que c'est l'exact bouton de la barre de retour iOS 7, je ne sais tout simplement pas comment y accéder dans une barre d'outils. J'ai cherché partout. Si cela peut aider, j'utilise BSKeyboardControls.

EDIT: Pour que le résultat corresponde exactement à la deuxième image, utilisez les images fournies par Joshua et enregistrez-les sous le nom [email protected] et [email protected] dans votre projet xcode. Utilisez le code de Chun, mais assurez-vous d’appeler la méthode pour obtenir les images de la manière suivante: imageNamed: @ "back", et non @ "back @ 2x". Vous avez maintenant iOS 7 boutons précédent et suivant :)

EDIT2: pour qu’il ressemble exactement aux boutons fléchés précédent/suivant, utilisez les personnalisations suivantes dans les méthodes d’implémentation appropriées:

[self.segmentedControl setWidth:50 forSegmentAtIndex:0];
[self.segmentedControl setWidth:38 forSegmentAtIndex:1];

negativeSeparator.width = -19;

EDIT3: la barre d’outils avec les flèches <> est fournie par défaut avec tous les UIWebViews et elle apparaît lorsque vous tapez sur un champ de texte.

Si quelqu'un est intéressé par un exemple de projet, faites-le moi savoir et je téléchargerai un lien!

EDIT4: Depuis le 24 mai 2014, BSKeyboardControls dispose désormais de cette fonctionnalité par défaut.

iosobjective-ccocoa-touchios7
22
Josue Espinosa

1) Téléchargez les derniers fichiers depuis: https://github.com/simonbs/BSKeyboardControls

2) Importez les images pour les boutons Précédent/Suivant. Celles-ci peuvent être ce que vous voulez et vous pouvez définir les tailles appropriées pour qu'elles aient fière allure. Joshua a un bon jeu. J'ai le mien enregistré sous "keyboardBack.png" et "keyboardForward.png"

3) Dans BSKeyboardControls.m, mettez à jour initWithFields: fields. Ici, vous pouvez personnaliser certaines options, par exemple définir la largeur de vos boutons Précédent/Suivant. J'ai également supprimé le bouton Terminé ici pour suivre votre capture d'écran, mais vous pouvez le rajouter.

- (id)initWithFields:(NSArray *)fields
{
    if (self = [super initWithFrame:CGRectMake(0.0f, 0.0f, 320.0f, 44.0f)])
    {
        // Creates toolbar
        [self setToolbar:[[UIToolbar alloc] initWithFrame:self.frame]];
        [self.toolbar setBarStyle:UIBarStyleDefault];
        [self.toolbar setAutoresizingMask:(UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleRightMargin | UIViewAutoresizingFlexibleWidth)];
        [self addSubview:self.toolbar];

        // Import images
        UIImage *backImage = [[UIImage imageNamed:@"keyboardBack"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
        UIImage *forwardImage = [[UIImage imageNamed:@"keyboardForward"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];

        // Create segmentedcontrol
        self.segmentedControl = [[UISegmentedControl alloc] initWithItems:@[backImage, forwardImage]];
        self.segmentedControl.tintColor = [UIColor clearColor];

        // Set button widths
        [self.segmentedControl setWidth:50 forSegmentAtIndex:0];
        [self.segmentedControl setWidth:50 forSegmentAtIndex:1];

        // Other BSKeyboardControls stuff
        [self.segmentedControl addTarget:self action:@selector(segmentedControlValueChanged:) forControlEvents:UIControlEventValueChanged];
        [self.segmentedControl setMomentary:YES];
        [self.segmentedControl setEnabled:NO forSegmentAtIndex:BSKeyboardControlsDirectionPrevious];
        [self.segmentedControl setEnabled:NO forSegmentAtIndex:BSKeyboardControlsDirectionNext];
        [self setSegmentedControlItem:[[UIBarButtonItem alloc] initWithCustomView:self.segmentedControl]];
        [self setVisibleControls:(BSKeyboardControlPreviousNext)];
        [self setFields:fields];
    }

    return self;
}

4) Le remplissage gauche de la barre d’outils est un peu trop fort, vous pouvez donc le corriger en ajoutant un séparateur négatif dans toolbarItems: dans BSKeyboardControls.m:

- (NSArray *)toolbarItems
{
    NSMutableArray *items = [NSMutableArray arrayWithCapacity:3];
    if (self.visibleControls & BSKeyboardControlPreviousNext)
    {
        UIBarButtonItem *negativeSeperator = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFixedSpace
                                                                                           target:nil
                                                                                           action:nil];
        negativeSeperator.width = -12;

        [items addObject:negativeSeperator];
        [items addObject:self.segmentedControlItem];

    }

    if (self.visibleControls & BSKeyboardControlDone)
    {
        [items addObject:[[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace target:nil action:nil]];
        [items addObject:self.doneButton];
    }

    return items;
}

Remarque: je n'ai probablement pas les largeurs de boutons et les rembourrages aux spécifications exactes, mais vous pouvez les ajuster à votre guise!

6
Chun

Ce sont les images utilisées dans la barre d’outils, par exemple. les images des boutons Précédent et Suivant:

enter image description here

enter image description here

21
Joshua

Utilisez les icônes partagées par Joshua, puis essayez avec le morceau de code ci-dessous et vous serez prêt à partir. Je n'ai pas ajouté le bouton Terminé ici.

UIImage *backImage = [[UIImage imageNamed:@"backImage"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
UIImage *forwardImage = [[UIImage imageNamed:@"forward"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
self.segmentedControl = [[UISegmentedControl alloc] initWithItems:@[backImage, forwardImage]];
[self.segmentedControl addTarget:self action:@selector(segmentedControlChangedState:) forControlEvents:UIControlEventValueChanged];
self.segmentedControl.segmentedControlStyle = UISegmentedControlStyleBar;
self.segmentedControl.tintColor = [UIColor clearColor];
UIBarButtonItem *aSegmentedControlBarButtonItem = [[UIBarButtonItem alloc] initWithCustomView:self.segmentedControl];
[self setItems:@[aSegmentedControlBarButtonItem, self.flexibleSpace]];
8
Abhinav

Si vous ne craignez pas de vivre sur le bord, vous pouvez utiliser les éléments système non documentés d’Apple pour obtenir l’aspect iOS 7. Voici les éléments des boutons de barre gauche et droite.

    [self setDoneButton:[[UIBarButtonItem alloc] initWithBarButtonSystemItem:105 target:nil action:nil]];
    [self setDoneButton:[[UIBarButtonItem alloc] initWithBarButtonSystemItem:106 target:nil action:nil]];

Source: http://iphonedevwiki.net/index.php/UIBarButtonItem

5
Steve Moser

Vous pouvez utiliser cet excellent tool by @iftekhar et personnaliser IQSegmentedNextPrevious en fonction de votre besoin de donner des images au lieu du bouton suivant. 

2
Mayur Shrivas

En utilisant Xcode 7.3, vous pouvez simplement entrer un symbole sous la forme title pour l’élément de barre. Cela fonctionne à la fois dans le code et dans Interface Builder:

  • Placez votre curseur à l'endroit où vous souhaitez que le symbole apparaisse (par exemple, une boîte title dans IB ou entre guillemets dans le code).
  • Dans le menu de Xcode, cliquez sur Modifier, puis sur Emoji et symboles. (Vous pouvez également appuyer sur control-command-space pour afficher la liste des caractères.)
  • Dans la zone de recherche, tapez less ou plus grand .
  • Ensuite, sélectionnez le symbole que vous voulez.

Les symboles inférieur et supérieur sont colorés en bleu dans la barre d'outils par défaut.

Dans du code:

backButton.title = "＜"

En IB:

 control-command-click to bring up Emoji & Symbols

1
leanne

Utilisez ceci: https://github.com/simonbs/BSKeyboardControls

Mais il utilise le contrôle segmenté qui a été aplati dans iOS 7.

Edit: Modifiez simplement le texte des segments:

  [self setSegmentedControl:[[UISegmentedControl alloc] initWithItems:@[@"<",@">") ]]];

Cela peut ne pas être le plus élégant. (Même pas sûr que ce code exact compile, mais vous voyez le point)

0
Shaunti Fondrisi