Criando um botão de seta para a esquerda (como o estilo "voltar" do UINavigationBar) em uma barra do UITool

Eu adoraria criar um botão "voltar" no painel da seta esquerda em um UIToolbar.

Até onde eu sei, a única maneira de obter uma dessas UINavigationControlleropções é deixar as configurações padrão e usar uma para o item da barra esquerda. Mas não há como encontrar um para criar um UIBarButtonItem, então não posso fazer um em um padrão UIToolbar, mesmo que sejam muito parecidos com UINavigationBars.

Eu poderia criá-lo manualmente com imagens de botão, mas não consigo encontrar as imagens de origem em nenhum lugar. Eles têm bordas de canal alfa, portanto, captura de tela e corte não terão resultados muito versáteis.

Alguma idéia além da captura de tela para todos os tamanhos e esquemas de cores que pretendo usar?

Atualização: PARE DE evitar a pergunta e sugerir que eu não deveria estar perguntando isso e deveria estar usando UINavigationBar. Meu aplicativo é o Instapaper Pro. Ele mostra apenas uma barra de ferramentas inferior (para economizar espaço e maximizar a área de conteúdo legível) e desejo colocar um botão Voltar em forma de seta esquerda na parte inferior.

Dizer-me que não deveria fazer isso não é uma resposta e certamente não merece uma recompensa.

Usei o seguinte psd derivado de http://www.teehanlax.com/blog/?p=447

http://www.chrisandtennille.com/pictures/backbutton.psd

Acabei de criar uma UIView personalizada que uso na propriedade customView do item da barra de ferramentas.

Funciona bem para mim.

Edit: Como apontado por PrairieHippo , maralbjo descobriu que usando o seguinte código simples, o truque (requer imagem personalizada no pacote) deve ser combinado com esta resposta. Então, aqui está um código adicional:

// Creates a back button instead of default behaviour (displaying title of previous screen)
UIBarButtonItem *backButton = [[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:@"back_arrow.png"]
                                                               style:UIBarButtonItemStyleBordered
                                                              target:self
                                                              action:@selector(backAction)];

tipsDetailViewController.navigationItem.leftBarButtonItem = backButton;
[backButton release];

O método Unicode

Eu acho que é muito mais fácil usar apenas um caractere unicode para fazer o trabalho. Você pode examinar as setas pesquisando no triângulo Unicode ou nas setas Unicode . A partir do iOS6, a Apple alterou o caractere para um emoji com uma borda. Para desativar a borda, adiciono o seletor de variação Unicode 0xFE0E .

NSString *backArrowString = @"\U000025C0\U0000FE0E"; //BLACK LEFT-POINTING TRIANGLE PLUS VARIATION SELECTOR

UIBarButtonItem *backBarButtonItem = [[UIBarButtonItem alloc] initWithTitle:backArrowString style:UIBarButtonItemStylePlain target:nil action:nil];
self.navigationItem.leftButtonItem = backBarButtonItem;

O bloco de código é apenas para a demonstração. Funcionaria em qualquer botão que aceite um NSString.

Para obter uma lista completa de caracteres, pesquise no Google caracteres Unicode e o que você deseja. Aqui está a entrada para o triângulo preto que aponta para a esquerda .

Resultado

AVISO: Há relatos de que isso não funcionará no iOS 6. Isso pode funcionar apenas em versões mais antigas do sistema operacional. Evidentemente, pelo menos um desenvolvedor teve seu aplicativo rejeitado por usar esse truque (veja os comentários). Use por sua conta e risco. Usar uma imagem (veja a resposta acima) pode ser uma solução mais segura.

Isso pode ser feito sem adicionar seus próprios arquivos de imagem usando o botão sekr1t tipo 101 para obter a forma correta. Para mim, o truque foi descobrir que eu poderia usar initWithCustomViewpara criar o BarButtonItem. Pessoalmente, eu precisava disso para uma barra de navegação dinâmica, e não para uma toolbar, mas testei-a com uma barra de ferramentas e o código é quase o mesmo:

// create button
UIButton* backButton = [UIButton buttonWithType:101]; // left-pointing shape!
[backButton addTarget:self action:@selector(backAction) forControlEvents:UIControlEventTouchUpInside];
[backButton setTitle:@"Back" forState:UIControlStateNormal];

// create button item -- possible because UIButton subclasses UIView!
UIBarButtonItem* backItem = [[UIBarButtonItem alloc] initWithCustomView:backButton];

// add to toolbar, or to a navbar (you should only have one of these!)
[toolbar setItems:[NSArray arrayWithObject:backItem]];
navItem.leftBarButtonItem = backItem;

Se você estiver fazendo isso em uma barra de ferramentas, precisará ajustar a maneira como define os itens, mas isso depende do restante do seu código e deixo isso como um exercício para o leitor. : P Este exemplo funcionou para mim (compilado e executado).

Blá, blá, leia o HIG, não use recursos não documentados e tudo mais. Existem apenas seis tipos de botões suportados e este não é um deles.

Antes de tudo, você precisa encontrar uma imagem do botão Voltar. Eu usei um bom aplicativo chamado Extractor que extrai todos os gráficos do iPhone. No iOS7 , consegui recuperar a imagem chamada UINavigationBarBackIndicatorDefaulte estava na cor preta, pois precisava de uma tonalidade vermelha e alterei a cor para vermelho usando o Gimp.

EDITAR:

Como foi mencionado por btate em seu comentário, não há necessidade de alterar a cor com o editor de imagens. O código a seguir deve fazer o truque:

imageView.tint = [UIColor redColor];
imageView.image = [[UIImage imageNamed:@"UINavigationBarBackIndicatorDefault"] imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];

Em seguida, criei uma visualização que contém um imageView com essa seta, um rótulo com o texto personalizado e, na parte superior da visualização, tenho um botão com uma ação. Então eu adicionei uma animação simples (desbotamento e tradução).

O código a seguir simula o comportamento do botão Voltar, incluindo animação.

-(void)viewWillAppear:(BOOL)animated{
        UIImageView *imageView=[[UIImageView alloc] initWithImage:[UIImage imageNamed:@"UINavigationBarBackIndicatorDefault"]];
        [imageView setTintColor:[UIColor redColor]];
        UILabel *label=[[UILabel alloc] init];
        [label setTextColor:[UIColor redColor]];
        [label setText:@"Blog"];
        [label sizeToFit];

        int space=6;
        label.frame=CGRectMake(imageView.frame.origin.x+imageView.frame.size.width+space, label.frame.origin.y, label.frame.size.width, label.frame.size.height);
        UIView *view=[[UIView alloc] initWithFrame:CGRectMake(0, 0, label.frame.size.width+imageView.frame.size.width+space, imageView.frame.size.height)];

        view.bounds=CGRectMake(view.bounds.origin.x+8, view.bounds.origin.y-1, view.bounds.size.width, view.bounds.size.height);
        [view addSubview:imageView];
        [view addSubview:label];

        UIButton *button=[[UIButton alloc] initWithFrame:view.frame];
        [button addTarget:self action:@selector(handleBack:) forControlEvents:UIControlEventTouchUpInside];
        [view addSubview:button];

        [UIView animateWithDuration:0.33 delay:0 options:UIViewAnimationOptionCurveLinear animations:^{
            label.alpha = 0.0;
            CGRect orig=label.frame;
            label.frame=CGRectMake(label.frame.origin.x+25, label.frame.origin.y, label.frame.size.width, label.frame.size.height);
            label.alpha = 1.0;
            label.frame=orig;
        } completion:nil];

        UIBarButtonItem *backButton =[[UIBarButtonItem alloc] initWithCustomView:view];
}

- (void) handleBack:(id)sender{
}

EDITAR:

Em vez de adicionar o botão, na minha opinião, a melhor abordagem é usar um reconhecedor de gestos.

UITapGestureRecognizer* tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(handleBack:)];
[view addGestureRecognizer:tap];
[view setUserInteractionEnabled:YES];

Não tenho certeza se isso funcionaria, mas você pode tentar criar um UINavigationControllercom as configurações padrão para criar o botão, encontrar o botão na hierarquia de subvisões do controlador de navegação, chamá removeFromSuperview-lo, destruir o controlador de navegação e adicionar o botão como uma subvisão da sua barra de ferramentas. Você também pode precisar retaine o botão antes de ligar removeFromSuperview(e releasedepois adicioná-lo como subview da barra de ferramentas) para evitar que seja desalocado durante o processo.

Para fazer um UIButton com uma seta bem próximo (não sou designer;) da seta para trás do sistema iOS 7:

Padrão:

Apple SD Gothic Neo

No Xcode:

• Concentre-se no campo de valor do título do botão (ou em qualquer outra visualização / controle com conteúdo de texto)
• Abrir Edição -> Caracteres Especiais
• Selecione o grupo Parênteses e clique duas vezes no caractere '<'
• Altere a fonte para: Apple SD Gothic Neo, Regular com o tamanho desejado (por exemplo, 20)
• Mude a cor como quiser

Ref da resposta de staticVoidMan da seta Back-like no iOS 7

Se você não quiser se preocupar com arquivos de imagem, a forma da seta pode ser desenhada em uma subclasse UIView com o seguinte código:

- (void)drawRect:(CGRect)rect {
    float width = rect.size.width;
    float height = rect.size.height;
    CGContextRef context = UIGraphicsGetCurrentContext();

    CGContextBeginPath(context);
    CGContextMoveToPoint(context, width * 5.0/6.0, height * 0.0/10.0);
    CGContextAddLineToPoint(context, width * 0.0/6.0, height * 5.0/10.0);
    CGContextAddLineToPoint(context, width * 5.0/6.0, height * 10.0/10.0);
    CGContextAddLineToPoint(context, width * 6.0/6.0, height * 9.0/10.0);
    CGContextAddLineToPoint(context, width * 2.0/6.0, height * 5.0/10.0);
    CGContextAddLineToPoint(context, width * 6.0/6.0, height * 1.0/10.0);
    CGContextClosePath(context);

    CGContextSetFillColorWithColor(context, [UIColor blackColor].CGColor);
    CGContextFillPath(context);
}

onde a vista em seta é proporcional a uma largura de 6,0 e uma altura de 10,0

    self.navigationItem.leftBarButtonItem = self.navigationItem.backBarButtonItem;

Funciona para mim. Eu usei isso quando eu tinha mais guias, então poderia caber na barra de guias, e um controlador de exibição pressionado a partir do "Mais" substituiu o leftBarButtonItem em seu viewDidLoad.

Você pode encontrar as imagens de origem extraindo-as de Other.artwork no UIKit $ {SDKROOT} /System/Library/Frameworks/UIKit.framework/Other.artwork. A comunidade modding tem algumas ferramentas para extraí-las, aqui . Depois de extrair a imagem, você pode escrever um código para recolori-lo conforme necessário e defini-lo como a imagem do botão. Se você pode ou não enviar uma coisa dessas (já que está incorporando obras de arte derivadas) pode ser um pouco arriscado, então talvez você queira conversar com um advogado.

A biblioteca Three20 tem uma maneira de fazer isso:

  UIBarButtonItem *backButton = [[UIBarButtonItem alloc] initWithTitle: @"Title" style:UIBarButtonItemStylePlain 
                                                                target:self action:@selector(foo)];

  UIColor* darkBlue = RGBCOLOR(109, 132, 162);

  TTShapeStyle* style = [TTShapeStyle styleWithShape:[TTRoundedLeftArrowShape shapeWithRadius:4.5] next:
    [TTShadowStyle styleWithColor:RGBCOLOR(255,255,255) blur:1 offset:CGSizeMake(0, 1) next:
    [TTReflectiveFillStyle styleWithColor:darkBlue next:
    [TTBevelBorderStyle styleWithHighlight:[darkBlue shadow]
                                     shadow:[darkBlue multiplyHue:1 saturation:0.5 value:0.5]
                                      width:1 lightSource:270 next:
    [TTInsetStyle styleWithInset:UIEdgeInsetsMake(0, -1, 0, -1) next:
    [TTBevelBorderStyle styleWithHighlight:nil shadow:RGBACOLOR(0,0,0,0.15)
                                        width:1 lightSource:270 next:nil]]]]]];

  TTView* view = [[[TTView alloc] initWithFrame:CGRectMake(0, 0, 80, 35)] autorelease];
  view.backgroundColor = [UIColor clearColor];
  view.style = style;
  backButton.customView = view;


  self.navigationItem.leftBarButtonItem = backButton;

Eu descobri que usando o código simples a seguir, o truque (requer imagem personalizada no pacote):

// Creates a back button instead of default behaviour (displaying title of previous screen)
    UIBarButtonItem *backButton = [[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:@"back_arrow.png"]
                                                                   style:UIBarButtonItemStyleBordered
                                                                  target:self
                                                                  action:@selector(backAction)];

    tipsDetailViewController.navigationItem.leftBarButtonItem = backButton;
    [backButton release];

Eis o que acabei fazendo depois de pesquisar em todas essas soluções e outras. Ele usa pngs extensíveis extraídos das imagens de ações do UIKit. Dessa forma, você pode definir o texto como preferir

// Generate the background images
UIImage *stretchableBackButton = [[UIImage imageNamed:@"UINavigationBarDefaultBack.png"] stretchableImageWithLeftCapWidth:14 topCapHeight:0];
UIImage *stretchableBackButtonPressed = [[UIImage imageNamed:@"UINavigationBarDefaultBackPressed.png"] stretchableImageWithLeftCapWidth:13 topCapHeight:0];
// Setup the UIButton
UIButton *backButton = [UIButton buttonWithType:UIButtonTypeCustom];
[backButton setBackgroundImage:stretchableBackButton forState:UIControlStateNormal];
[backButton setBackgroundImage:stretchableBackButtonPressed forState:UIControlStateSelected];
NSString *buttonTitle = NSLocalizedString(@"Back", @"Back");
[backButton setTitle:buttonTitle forState:UIControlStateNormal];
[backButton setTitle:buttonTitle forState:UIControlStateSelected];
backButton.titleEdgeInsets = UIEdgeInsetsMake(0, 5, 2, 1); // Tweak the text position
NSInteger width = ([backButton.titleLabel.text sizeWithFont:backButton.titleLabel.font].width + backButton.titleEdgeInsets.right +backButton.titleEdgeInsets.left);
[backButton setFrame:CGRectMake(0, 0, width, 29)];
backButton.titleLabel.font = [UIFont boldSystemFontOfSize:13.0f];
[backButton addTarget:self action:@selector(yourSelector:) forControlEvents:UIControlEventTouchDown];
// Now add the button as a custom UIBarButtonItem
UIBarButtonItem *backButtonItem = [[[UIBarButtonItem alloc] initWithCustomView:backButton] autorelease];
self.navigationItem.leftBarButtonItem = backButtonItem;

É fácil fazer isso com o Interface Builder no Xcode 5.x

• usar barra de ferramentas e item de botão de barra da biblioteca de objetos

  

• Inspetor de Atributos do botão editar seção Imagem com a imagem do botão Voltar

  

Feito!

Eu estava tentando fazer a mesma coisa, mas queria que o botão Voltar estivesse na barra de navegação. (Na verdade, eu precisava de um botão Voltar, que faria mais do que apenas voltar, então tive que usar a propriedade leftBarButtonItem). Eu tentei o que o AndrewS sugeriu, mas na barra de navegação não teria a aparência que deveria, pois o UIButton era meio que convertido para um UIBarButtonItem.

Mas eu encontrei uma maneira de contornar isso. Na verdade, basta colocar uma UIView sob o UIButton e definir o customView para o UIBarButtonItem. Aqui está o código, se alguém precisar:

// initialize button and button view
UIButton *backButton = [UIButton buttonWithType:101];
UIView *backButtonView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, backButton.frame.size.width, backButton.frame.size.height)];

[backButton addTarget:self action:@selector(backButtonTouched:) forControlEvents:UIControlEventTouchUpInside];
[backButton setTitle:@"Back" forState:UIControlStateNormal];
[backButtonView addSubview:backButton];

// set buttonview as custom view for bar button item
UIBarButtonItem *backButtonItem = [[UIBarButtonItem alloc] initWithCustomView:backButtonView];
self.navigationItem.leftBarButtonItem = backButtonItem;

// push item to navigationbar items
[self.navigationController.navigationBar setItems:[NSArray arrayWithObject:backButtonItem]];

Para criar uma imagem para a barra UITool, faça um png no photoshop e ONDE SEMPRE ALGUMA cor, ela a coloca em branco e, onde é alfa = 0, deixa-a em paz.

Na verdade, o SDK coloca a borda ao redor do ícone que você criou e o torna branco sem que você precise fazer nada.

Veja, foi o que fiz no Photoshop para o meu botão de avanço (obviamente troque-o pelo botão de retorno):

http://twitpic.com/1oanv

e foi assim que apareceu no Interface Builder

http://twitpic.com/1oaoa

Solução SEM usar um png. Com base nesta resposta SO: Adicionando a pequena seta ao lado direito de uma célula em uma célula do iPhone TableView

Basta virar o UITableViewCell horizontalmente!

UIButton *btnBack = [[UIButton alloc] initWithFrame:CGRectMake(0, 5, 70, 20)];

// Add the disclosure
CGRect frm;
UITableViewCell *disclosure = [[UITableViewCell alloc] init];
disclosure.transform = CGAffineTransformScale(CGAffineTransformIdentity, -1, 1);
frm = self.btnBack.bounds;
disclosure.frame = CGRectMake(frm.origin.x, frm.origin.y, frm.size.width-25, frm.size.height);
disclosure.accessoryType = UITableViewCellAccessoryDisclosureIndicator;
disclosure.userInteractionEnabled = NO;
[self.btnBack addSubview:disclosure];

// Add the label
UILabel *lbl = [[UILabel alloc] init];
frm = CGRectOffset(self.btnBack.bounds, 15, 0);
lbl.frame = frm;
lbl.textAlignment = NSTextAlignmentCenter;
lbl.text = @"BACK";
[self addSubview:lbl];

Swift 5.2 Xcode 11.4

O símbolo Apple chevron.left agora permite uma solução mais elegante para criar um botão personalizado. Combinei o tamanho e o espaçamento o mais próximo possível.

import UIKit

class CustomBackButton: UIBarButtonItem {

    convenience init(target: Any, selector: Selector) {

        // Create UIButton
        let button = UIButton(frame: .zero)

        // Customise Title
        button.setTitle("Back", for: .normal)
        button.setTitleColor(.systemBlue, for: .normal)
        button.titleLabel?.font = UIFont.systemFont(ofSize: 17)

        // Customise Image
        let config = UIImage.SymbolConfiguration(pointSize: 19.0, weight: .semibold, scale: .large)
        let image = UIImage(systemName: "chevron.left", withConfiguration: config)
        button.setImage(image, for: .normal)

        // Add Target
        button.addTarget(target, action: selector, for: .touchUpInside)

        // Customise Spacing to match system Back button
        button.imageEdgeInsets = UIEdgeInsets(top: 0.0, left: -18.0, bottom: 0.0, right: 0.0)
        button.titleEdgeInsets = UIEdgeInsets(top: 0.0, left: -12.0, bottom: 0.0, right: 0.0)

        self.init(customView: button)
    }
}

Isso pode ser implementado como um UIToolbarItem, ou umUINavigationItem

override func viewDidLoad() {
    super.viewDidLoad()

    // UIToolbar Item
    let barBackButton = CustomBackButton(target: self, selector: #selector(backButtonTapped))
    let flexSpace = UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: nil, action: nil)
    navigationController?.setToolbarHidden(false, animated: false)
    toolbarItems = [barBackButton, flexSpace]

    // Navigation Item
    let navBackButton = CustomBackButton(target: self, selector: #selector(backButtonTapped))
    navigationItem.leftBarButtonItem = navBackButton
}

@objc func backButtonTapped() {
    print("Back tapped")
}

Se você deseja apertar o botão e ter a seta apontando para a direita:

Use o símbolo da Apple chamado "chevron.right"

Adicione o seguinte código à CustomBackButtonclasse:

    // Put the image of the right side of the button
    button.transform = CGAffineTransform(scaleX: -1.0, y: 1.0)
    button.titleLabel?.transform = CGAffineTransform(scaleX: -1.0, y: 1.0)
    button.imageView?.transform = CGAffineTransform(scaleX: -1.0, y: 1.0)

Se você quiser evitar desenhá-lo você mesmo, poderá usar a classe não documentada: UINavigationButton com estilo 1. Isso pode, é claro, impedir que seu aplicativo seja aprovado ... / John

Bem, você não precisa ter um botão diferente para cada tamanho, pode usar [UIImage stretchableImageWithLeftCapWidth:topCapHeight:], mas a única coisa que encontrei foram as imagens personalizadas.

Eu tive um problema semelhante e saí de uma biblioteca PButton . E a amostra é o botão de navegação traseira como botão, que pode ser usado em qualquer lugar, como um botão personalizado.

Algo assim:

Exemplo no Swift 3, com um botão anterior e um próximo no canto superior direito.

let prevButtonItem = UIBarButtonItem(title: "\u{25C0}", style: .plain, target: self, action: #selector(prevButtonTapped))
let nextButtonItem = UIBarButtonItem(title: "\u{25B6}", style: .plain, target: self, action: #selector(nextButtonTapped))
self.navigationItem.rightBarButtonItems = [nextButtonItem, prevButtonItem]

Rápido

// create button
    var backButton = UIButton(type: 101)

    // left-pointing shape!
    backButton.addTarget(self, action: #selector(self.backAction), for: .touchUpInside)
    backButton.setTitle("Back", for: .normal)

    // create button item -- possible because UIButton subclasses UIView!
    var backItem = UIBarButtonItem(customView: backButton)

    // add to toolbar, or to a navbar (you should only have one of these!)
    toolbar.items = [backItem]
    navItem.leftBarButtonItem = backItem

Tente isso. Tenho certeza de que você não precisa de uma imagem do botão Voltar para criar uma dessas.

UIBarButtonItem *backButton = [[UIBarButtonItem alloc] initWithTitle:@"Back"
                                                               style:UIBarButtonItemStyleBordered
                                                              target:self
                                                              action:@selector(yourSelectorGoesHere:)];
self.navigationItem.backBarButtonItem = backButton;

É tudo o que você precisa fazer :)

Por que você está fazendo isso? Se você deseja algo parecido com uma barra de navegação, use UINavigationBar.

As barras de ferramentas têm um estilo visual específico associado a elas. As diretrizes da interface humana para o iPhone declaram:

Uma barra de ferramentas aparece na borda inferior da tela e contém botões que executam ações relacionadas a objetos na exibição atual.

Em seguida, fornece vários exemplos visuais de ícones aproximadamente quadrados sem texto. Exorto-vos a seguir o HIG sobre isso.