web-dev-qa-db-fra.com

Ajouter un contrôle segmenté à la barre de navigation et conserver le titre avec des boutons

Je souhaite ajouter un contrôle segmenté à la barre de navigation tout en conservant le titre et les boutons, comme dans la section achetée sur iOS 7 Appstore ( exemple )

J'ai essayé d'ajouter un contrôle segmenté comme vue du titre, puis d'utiliser Invite comme titre, mais les boutons sont au même niveau que le contrôle segmenté.

iosuinavigationbaruisegmentedcontrol
25
sangi93

J'ai essayé de résoudre votre problème en utilisant une autre approche car l'utilisation d'une barre de navigation ne semblait pas fonctionner (c'est peut-être parce que l'application AppStore utilise une API privée, mais je ne suis pas assez au courant pour en être sûr ...) Quoi qu'il en soit, j'ai simplement utilisé une barre d'outils placée juste sous la barre de navigation sur laquelle j'ai ajouté un contrôle segmenté, le tout à l'intérieur d'un UIViewController standard.

Voici à quoi ça ressemble dans Storyboard: Storyboard

Et voici le résultat dans Simulator:

Simulator

Veillez simplement à décaler la vue sous forme de tableau pour tenir compte de l’espace vertical utilisé par la barre d’outils . J'espère que cela vous aidera!

12
neural5torm

J'ai trouvé deux solutions:

1) Comme suggéré par neural5torm, vous pouvez ajouter le contrôle segmenté à une vue UIV avec la même couleur d’arrière-plan que la barre de navigation.

Vous pouvez supprimer la racine des cheveux de UINavigationBar de cette manière:

for (UIView *view in self.navigationController.navigationBar.subviews)
{
    for (UIView *view2 in view.subviews)
    {
        if ([view2 isKindOfClass:[UIImageView class]])
        {
            [view2 removeFromSuperview];
        }
    }
}

C'est ok pour pas translucide barre de navigation. 



Si vous voulez une barre de navigation translucide :
2) Sous-classe UINavigationBar pour créer une barre plus haute en surchargeant sizeThatFits

- (CGSize)sizeThatFits:(CGSize)size
{
    size.width = self.frame.size.width;
    size.height = your height (probably 88.0f);
    return size;
}


Pour utiliser votre barre de navigation personnalisée:

UINavigationController *navController = [[UINavigationController alloc] initWithNavigationBarClass:[YouNavigationBar class] toolbarClass:nil];
[navController setViewControllers:@[viewController]];


Les éléments de titre et de bouton seront en bas. Ajustez leurs positions verticales (dans l'init de votre barre de navigation personnalisée ou via un proxy d'apparence)

// Title view
[self setTitleVerticalPositionAdjustment:-dy forBarMetrics:UIBarMetricsDefault];

// Button item as icon/image 
[[UIBarButtonItem appearanceWhenContainedIn:[YourCustomNavigationBar class], nil] setBackgroundVerticalPositionAdjustment:-dy forBarMetrics:UIBarMetricsDefault];

Regardez la référence de la classe UIBarButtonItem, il y a aussi setTitlePositionAdjustment et d'autres méthodes pour le bouton Précédent 


Lorsque vous créez votre contrôle segmenté, ajoutez-le à la barre de navigation

[self.navigationController.navigationBar addSubview:segmentedControl];


Le contrôle segmenté sera en haut. Ajustez sa position verticale en remplaçant didAddSubview dans votre barre de navigation personnalisée.

- (void)didAddSubview:(UIView *)subview
{
    [super didAddSubview:subview];

    if ([subview isKindOfClass:[UISegmentedControl class]])
    {
        CGRect frame = subview.frame;
        frame.Origin.y += your extra height (probably 44.0f);
        subview.frame = frame;
    }
}
14
user370773

Vous pouvez trouver la barre de navigation avec UISegmentedControl dans Apple Sample Code: https://developer.Apple.com/library/ios/samplecode/NavBar/Introduction/Intro.html

Voici mon interprétation de ce code (créer par programme):

// File MySegmController.h
@interface MySegmController : UIViewController
@end

// File MySegmController.m
#import "MySegmController.h"

@interface MyNavBarView : UIView
@end

@interface MySegmController ()<UITableViewDataSource, UITableViewDelegate>
{
    UISegmentedControl* _segm;
    UITableView* _table;
}
@end

#define SEGM_WIDTH 250

@implementation MySegmController

- (void)loadView
{
    [super loadView];
    self.view.backgroundColor = [UIColor whiteColor];
    self.title = @"Title";

    float w = self.view.bounds.size.width;

    NSArray* items = [[NSArray alloc] initWithObjects: @"One", @"Two", @"Three", nil];
    _segm = [[UISegmentedControl alloc] initWithItems: items];
    [items release];
    [_segm sizeToFit];
    _segm.frame = CGRectMake((w - SEGM_WIDTH) / 2, 0, SEGM_WIDTH, _segm.bounds.size.height);
    _segm.autoresizingMask = UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleRightMargin;
    _segm.selectedSegmentIndex = 0;

    MyNavBarView* topView = [[MyNavBarView alloc] initWithFrame: CGRectMake(0, 0, w, _segm.bounds.size.height + 10)];
    topView.backgroundColor = [UIColor whiteColor];
    topView.autoresizingMask = UIViewAutoresizingFlexibleWidth;
    [topView addSubview: _segm];
    [_segm release];

    _table = [[UITableView alloc] initWithFrame: CGRectMake(0, topView.bounds.size.height, w, self.view.bounds.size.height - topView.bounds.size.height) style: UITableViewStylePlain];
    _table.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
    _table.dataSource = self;
    _table.delegate = self;
    [self.view addSubview: _table];
    [_table release];

    // add topView AFTER _table because topView have a shadow
    [self.view addSubview: topView];
    [topView release];
}

- (void)viewDidLoad
{
    [super viewDidLoad];

    self.navigationController.navigationBar.translucent = NO;
    // pixel_transp.png - 1x1 image with transparent background
    self.navigationController.navigationBar.shadowImage = [UIImage imageNamed: @"pixel_transp"];
    // pixel.png - 1x1 image with white background
    [self.navigationController.navigationBar setBackgroundImage: [UIImage imageNamed: @"pixel"] forBarMetrics: UIBarMetricsDefault];

    UIBarButtonItem* bt = [[UIBarButtonItem alloc] initWithBarButtonSystemItem: UIBarButtonSystemItemCancel target: self action: @selector(onCancel)];
    self.navigationItem.rightBarButtonItem = bt;
    [bt release];
}

- (void)onCancel
{
    [self.presentingViewController dismissViewControllerAnimated: YES completion: NULL];
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return 2;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    UITableViewCell* cell = [tableView dequeueReusableCellWithIdentifier: @"MyId"];
    if (!cell) cell = [[[UITableViewCell alloc] initWithStyle: UITableViewCellStyleDefault reuseIdentifier: @"MyId"] autorelease];
    cell.textLabel.text = @"text";
    return cell;
}

@end

@implementation MyNavBarView

- (void)willMoveToWindow: (UIWindow *)newWindow
{
    self.layer.shadowOffset = CGSizeMake(0, 1.0f / UIScreen.mainScreen.scale);
    self.layer.shadowRadius = 0;
    self.layer.shadowColor = [UIColor blackColor].CGColor;
    self.layer.shadowOpacity = 0.25f;
}

@end
10
pigmasha

Vous pouvez utiliser la propriété Invite de l'élément de navigation pour cela. Il suffit de définir la propriété dans le storyboard comme ceci et la barre de navigation s’ajoutera automatiquement aux fondus. Seul inconvénient, le texte est un peu petit.

 enter image description here

6
Zeezer

J'ai essayé de le faire dans Xamarin.iOS, à partir d'iOS 6, vous pouvez hériter de UINavigationBar et ajouter des contrôles, bouton où vous voulez.

2
Michal Dobrodenka

Essayez de créer la sous-classe UINavigationBar et laissez-la se conformer au protocole UIToolbarDelegate. Puis, dans la méthode ininit, créez votre contrôle de segment, ajoutez-le sur UIToolBar et définissez son délégué sur votre classe UINavigationBar personnalisée. Alors écris cette magie:

- (UIBarPosition)positionForBar:(id <UIBarPositioning>)bar {
    return UIBarPositionTopAttached;
}

Bonne chance!

2
user1403629

Ma solution était la suivante:
Ajoutez la barre d’outils et le contrôle segmenté à votre fichier xib .__

enter image description here

Ensuite, mettez ceci dans la méthode viewDidLoad:

- (void)viewDidLoad
{
    [super viewDidLoad];

    // add after your setup code
    UIBarButtonItem *item = [[UIBarButtonItem alloc] initWithCustomView:self.segmentedControl];

    self.navigationItem.rightBarButtonItem = item;
}

enter image description here

1
Nikolay Shubenkov

Je ne l’ai pas complètement mis en œuvre, mais voici ce que je prévois de faire. (ios7) Cela serait pour avoir le titre et les boutons sur la même barre de navigation côte à côte.

Dans le storyboard, ajoutez une vue vierge à la barre de navigation. Ajoutez ensuite une étiquette et un contrôle segmenté à cette vue. Cela vous permet d'ajouter n'importe quel contrôle à la barre de navigation. Jusqu'à présent, l'interface utilisateur fonctionne, je ne l'ai tout simplement pas câblée. Je voulais juste partager ce que j'ai trouvé jusqu'à présent.

0
Kalel Wade