ios - usar - Agregue control segmentado a la barra de navegación y mantenga el título con los botones

curso completo de bootstrap desde cero 1

Question

Quiero agregar un control segmentado a la barra de navegación, pero también mantener el título y los botones, como en la sección comprada en iOS 7 Appstore ( ejemplo )

He intentado agregar el control segmentado como vista de título y luego usar el indicador como título, pero luego los botones están en el mismo nivel que el control segmentado.

Answer 1

Encontré dos soluciones:

1) Como lo sugiere neural5torm, puede agregar el control segmentado a una UIView con el mismo color de fondo de la barra de navegación

Puedes eliminar la línea del cabello de UINavigationBar de esta manera:

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

Esto está bien para la barra de navegación no translúcida .

Si quieres una barra de navegación translúcida :
2) Subclase UINavigationBar para crear una barra más alta al anular sizeThatFits

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

Para usar tu barra de navegación personalizada:

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

Los elementos de título y botón estarán en la parte inferior. Ajuste sus posiciones verticales (en el inicio de su barra de navegación personalizada o mediante proxy de apariencia)

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

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

Mire la referencia de clase UIBarButtonItem, también hay setTitlePositionAdjustment y otros métodos para el botón Atrás

Cuando crees tu control segmentado, agrégalo a la barra de navegación

[self.navigationController.navigationBar addSubview:segmentedControl];

El control segmentado estará en la parte superior. Ajuste su posición vertical anulando didAddSubview en su barra de navegación personalizada

- (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;
    }
}

Answer 2

Intenté hacerlo en Xamarin.iOS, desde iOS 6, puedes heredar UINavigationBar y agregar controles, botón donde quieras.

Answer 3

Intente crear la subclase UINavigationBar y deje que se ajuste al protocolo UIToolbarDelegate. Luego, en el método de entrada, cree su control de segmento, agréguelo a UIToolBar y establezca su delegado en su clase UINavigationBar personalizada. Entonces escribe esta magia:

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

¡Buena suerte!

Answer 4

Mi solución fue la siguiente:
Agregue la barra de herramientas y el control segmentado a su archivo xib . Personalícelo como necesite y conéctelo a una salida de su controlador de vista:

Luego, ponga esto en el método viewDidLoad :

- (void)viewDidLoad
{
    [super viewDidLoad];

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

    self.navigationItem.rightBarButtonItem = item;
}

Answer 5

No lo he implementado completamente, pero lo siguiente es lo que planeo hacer. (ios7) Esto sería para tener título y los botones en la misma barra de navegación uno al lado del otro.

En el guión gráfico, agregue una vista en blanco a la barra de navegación. Luego, agregue una etiqueta y un control segmentado a esa vista. Esto le permite agregar cualquier control que desee a la barra de navegación. Hasta ahora la interfaz de usuario funciona, simplemente no la he conectado. Solo quería compartir lo que he encontrado hasta ahora.

Answer 6

Podría usar la propiedad de solicitud de elemento de navegación para esto. Simplemente configura la propiedad en el guión gráfico de esta manera y la barra de navegación se desvanecerá automáticamente de forma agradable. El único inconveniente es que el texto es un poco pequeño.

Answer 7

Puede encontrar la barra de navegación con UISegmentedControl en el Código de muestra de Apple: https://developer.apple.com/library/ios/samplecode/NavBar/Introduction/Intro.html

Aquí está mi interpretación de este código (crear programáticamente):

// 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

Answer 8

He intentado resolver su problema utilizando otro enfoque, ya que el uso de una barra de navegación no pareció funcionar (tal vez porque la aplicación AppStore usa una API privada, pero no tengo el conocimiento suficiente para decirlo con seguridad ...) De todos modos Simplemente utilicé una barra de herramientas colocada justo debajo de la barra de navegación en la que agregué un control segmentado, todo dentro de un UIViewController normal.

Esto es lo que parece en Storyboard:

Y este es el resultado en simulador:

Solo tenga cuidado de desplazar la vista de la tabla hacia abajo para tener en cuenta el espacio vertical que utiliza la barra de herramientas. ¡Espero que esto ayude!