it-swarm-pt.tech

Barra de navegação personalizada

Eu estava rastejando no Dribble e encontrei o desenho em anexo. Eu queria saber como fazer uma barra de navegação personalizada como esta. Quero dizer, como criar a barra de navegação uma vez e reutilizá-la implicitamente para todos os controladores de exibição.

Eu estava pensando em ter um tipo de controlador de exibição raiz e herdar para outros controladores de exibição, mas não sei como fazer isso.

Qualquer ideia ou link será avaliado!

Felicidades.

Cyril

Nav bar image

32
Cyril

Graças ao iOS5, agora você pode personalizar a aparência de uma UINavigationBar sem precisar subclassificar ou criar uma categoria.

O seguinte bloco de código (coloque-o no método applicationDidFinishLoading: method) alterará a UINavigationBar de todo o aplicativo para qualquer imagem que você der.

Observe, isso só funcionará no iOS5

[[UINavigationBar appearance] setBackgroundImage:[UIImage imageNamed:@"nav bar.png"] forBarMetrics:UIBarMetricsDefault];

No entanto, você também pode alterar a aparência de uma única UINavigationBar, dependendo do controlador de exibição em que está, usando o código a seguir em viewDidLoad.

[self.navigationController.navigationBar setBackgroundImage:[UIImage imageNamed:@"nav bar.png"] forBarMetrics:UIBarMetricsDefault];

O código acima está discutindo apenas as novas maneiras de personalizar a aparência do UINavigationBar graças ao iOS5. No entanto, ele não discute a maneira como os botões foram implementados.

No entanto, adicionar os botões é um jogo completamente diferente. Para isso, eu recomendaria a subclasse UINavigationBar e, em seguida, adicionaria os botões quando necessário. Você provavelmente poderia até se safar com apenas um UINavigationBar padrão, mas personalizado UIBarButtonItem s que são executados em uma exibição específica.

Por exemplo:

UIView *rightButton = [[[UIView alloc] initWithFrame:CGRectMake(0.0f, 0.0f, 30.0f, 30.0f)] autorelease];
[rightButton addSubview:[UIImage imageNamed:@"rightButtonImage.png"]];

UIBarButtonItem *rightButtonItem = [[[UIBarButtonItem alloc] initWithCustomView:rightButton] autorelease];
[rightButtonItem setAction:@selector(rightButtonAction:)];

Eu não testei esse código, portanto não é uma solução de copiar/colar, mas fornece uma idéia do que precisa ser feito para obter UIBarButtonItems com aparência "personalizada".

Boa sorte!

8
Sebastien Peek

Nas versões anteriores do iOS, é necessário subclassificar UINavigationBar, ou seja:

@interface CustomNavigationBar : UINavigationBar
@end

@implementation CustomNavigationBar

- (id)initWithCoder:(NSCoder *)aDecoder {
    self = [super initWithCoder:aDecoder];
    if (self) {
        self.opaque = YES;
        self.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"CustomBackground"]];
    }
    return self;
}

- (void)drawRect:(CGRect)rect {
    // Skip standard bar drawing
}

@end

Para usar uma barra de navegação personalizada no seu controlador de exibição, você deve alterar um nome de classe padrão para CustomNavigationBar no XIB.

Além disso, você pode definir a barra de navegação personalizada programaticamente:

UIViewController *tempController = [[[UIViewController alloc] init] autorelease];
UINavigationController *navigationController = [[[UINavigationController alloc] initWithRootViewController:tempController] autorelease];

NSData *archive = [NSKeyedArchiver archivedDataWithRootObject:navigationController];
NSKeyedUnarchiver *unarchiver = [[[NSKeyedUnarchiver alloc] initForReadingWithData:archive] autorelease];
[unarchiver setClass:[CustomNavigationBar class] forClassName:@"UINavigationBar"];
UINavigationController *customNavigationController = [unarchiver decodeObjectForKey:@"root"];

UIViewController *contentController = [[[ContentViewController alloc] init] autorelease];
customNavigationController.viewControllers = [NSArray arrayWithObject:contentController];

Agora customNavigationController tem a barra de navegação personalizada.

6
Vadim

definir um plano de fundo personalizado para o NavigationBar

UIImage *navBackground =[[UIImage imageNamed:@"navbarBackground"] 
                 resizableImageWithCapInsets:UIEdgeInsetsMake(0, 0, 0, 0)];
[[UINavigationBar appearance] setBackgroundImage:navBackground forBarMetrics:UIBarMetricsDefault];

depois, no seu View Controller, defina visualizações personalizadas para leftBarButtons e título.

self.navigationItem.titleView = customTitleView;
self.navigationItem.leftBarButtonItem = customBarButton;
self.navigationItem.rightBarButtonItem = customBarButton2;
3
agilityvision

Você precisaria criar sua própria subclasse UINavigationBar e usar em locais onde você precisaria de um navigationController.

Nesta classe personalizada, você desenhará o plano de fundo, os botões, o texto etc.


Atualizar

Na verdade, olhando mais de perto esse exemplo, parece ser um UIToolBar. Você pode atribuir métodos de navegação aos botões como popViewController: etc. Para o "Confirmar informações" e o indicador de progresso, você pode usar uma etiqueta e uma imagem. Para o botão direito, é apenas um gráfico.

Obviamente, o exemplo que você forneceu é simplesmente um conceito, e não um aplicativo real. Mas com um pouco de criatividade, algumas horas de codificação e mais algumas horas de design gráfico, você pode obter essa mesma interface.

1
WrightsCS

Usando Category, adicione o código abaixo no seu arquivo delegado (.m)

@implementation UINavigationBar (UINavigationBarCategory)

- (void)drawRect:(CGRect)rect
{
    UIImage *navBg = [UIImage imageNamed:@"NavBar.png"];
    [navBg drawInRect:CGRectMake(0, 0, 320, 44)];
}
@end

Editar:

Usar Category não é uma boa maneira, escrevi uma demonstração sem usar Category, clique em aqui .

0
xda1001

Após muita pesquisa para um dos meus projetos recentes em IOS. Decidi usar a subclasse para personalizar apenas a barra de navegação sem o uso de UINavigationController.

import UIKit

class CustomNavigationBar: UINavigationBar {
    override func awakeFromNib() {
        super.awakeFromNib()
        self.setBackgroundImageOfNavBar(imagenName: "navbar.jpg")
        self.setShadowImageOfNavBar(imagenName: "")
        self.setTitleAttribute()
        self.setBarAsTranslucent()
    }
    func setBackgroundImageOfNavBar(imagenName:String){
        //pass the image name and set the image here
         self.setBackgroundImage(UIImage(named: imagenName), for: .default)
        //if you want white backgroung just remove the image
       // self.setBackgroundImage(UIImage(), for: .default)
        //if you want to set backgroung color
        self.backgroundColor = UIColor.clear
    }

    func setShadowImageOfNavBar(imagenName:String){
        //pass the image name and set the image here
        // self.shadowImage = UIImage(named: imagenName)
        //if you want white backgroung just remove the image
        self.shadowImage = UIImage()
    }
    func setTitleAttribute(){
        //add NSAttributedStringKey as you want to customize title Color and font provide your app font family name open below commented code
        //        let textAttributes = [NSAttributedStringKey.foregroundColor:UIColor.black,NSAttributedStringKey.font: UIFont(name: "Enter Your App Font Name", size: 18)!]

        //set only title color of navigation bar by below code
        let textAttributes = [NSAttributedStringKey.foregroundColor:#colorLiteral(red: 0.8784313725, green: 0.1882352941, blue: 0.3254901961, alpha: 1)]
        self.titleTextAttributes = textAttributes
    }
    func setBarAsTranslucent(){
        self.isTranslucent = false
    }
}

Eu compartilhei m link que faz muitas coisas personalizadas incluindo a adição de imagens de fundo, sombra de texto etc.

0
Sanjay-Dev

Você pode usar o estoque UINavigationController e ocultar a UINavigationBar.

Em seguida, crie sua própria subclasse de UIViewController que possui todos os elementos de navegação e, em seguida, uma exibição de tamanho flexível para onde o conteúdo vai. Faça com que todas as suas classes subclasses este elemento e desenhe na visualização. O botão simplesmente precisa chamar [self.navigationController popViewControllerAnimated:YES] e o UILabel em exibição apenas precisa definir seu texto para self.title.

0
Tim