Tworzenie przycisku strzałki w lewo (na przykład stylu „wstecz” UINavigationBar) na pasku narzędzi UIToolbar

Chciałbym utworzyć przycisk „wstecz” ze strzałką w lewo w ramce UIToolbar.

O ile mogę stwierdzić, jedynym sposobem na uzyskanie jednego z nich jest pozostawienie UINavigationControllerdomyślnych ustawień i używa jednego dla elementu lewego paska. Ale nie ma sposobu, żebym mógł stworzyć taki jako UIBarButtonItem, więc nie mogę zrobić go w standardzie UIToolbar, nawet jeśli są bardzo podobne do UINavigationBars.

Mógłbym ręcznie utworzyć go za pomocą obrazów przycisków, ale nigdzie nie mogę znaleźć obrazów źródłowych. Mają krawędzie kanału alfa, więc zrzuty ekranu i wycinanie nie dają bardzo wszechstronnych rezultatów.

Jakieś pomysły poza zrzutami ekranu dla każdego rozmiaru i schematu kolorów, które zamierzam zastosować?

Aktualizacja: PROSZĘ PRZERWAĆ unikanie pytania i sugerowanie, że nie powinienem o to pytać i powinienem go używać UINavigationBar. Moja aplikacja to Instapaper Pro. Pokazuje tylko dolny pasek narzędzi (aby zaoszczędzić miejsce i zmaksymalizować czytelny obszar zawartości), a na dole chcę umieścić przycisk Wstecz w kształcie strzałki w lewo.

Mówienie, że nie powinienem tego robić, nie jest odpowiedzią i na pewno nie zasługuje na nagrodę.

Użyłem następującego psd, który otrzymałem z http://www.teehanlax.com/blog/?p=447

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

Właśnie utworzyłem niestandardowy UIView, którego używam we właściwości customView elementu paska narzędzi.

Działa dla mnie dobrze.

Edycja: Jak wskazał PrairieHippo , maralbjo stwierdził, że używając następującego prostego kodu załatwił sprawę (wymaga niestandardowego obrazu w pakiecie) należy połączyć z tą odpowiedzią. Oto dodatkowy kod:

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

Metoda Unicode

Myślę, że o wiele łatwiej jest po prostu użyć znaku Unicode, aby wykonać zadanie. Możesz przeglądać strzałki, przeglądając trójkąty Unicode lub Strzałki Unicode . Począwszy od iOS6 Apple zmieniło znak na emoji z obramowaniem. Aby wyłączyć granicę, dodaję selektor wariacji 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;

Blok kodu jest tylko dla wersji demonstracyjnej. Działa w każdym przycisku, który akceptuje NSString.

Aby uzyskać pełną listę znaków, wyszukaj w Google znak Unicode i co chcesz. Oto wpis dotyczący czarnego trójkąta skierowanego w lewo .

Wynik

OSTRZEŻENIE: Istnieją doniesienia, że ​​nie będzie to działać w systemie iOS 6. Może to działać tylko w starszych wersjach systemu operacyjnego. Najwyraźniej przynajmniej jeden deweloper odrzucił swoją aplikację za użycie tej sztuczki (patrz komentarze). Używaj na własne ryzyko. Korzystanie z obrazu (patrz odpowiedź powyżej) może być bezpieczniejszym rozwiązaniem.

Można to zrobić bez dodawania własnych plików obrazów za pomocą przycisku sekr1t typ 101, aby uzyskać prawidłowy kształt. Dla mnie sztuczka polegała na ustaleniu, że mogę użyć initWithCustomViewdo stworzenia BarButtonItem. Osobiście potrzebowałem tego zamiast dynamicznego paska nawigacyjnego toolbar, ale przetestowałem go z paskiem narzędzi, a kod jest prawie taki sam:

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

Jeśli robisz to na pasku narzędzi, musisz dostosować sposób ustawiania elementów, ale to zależy od reszty kodu i pozostawiam to jako ćwiczenie dla czytelnika. : P Ta próbka działała dla mnie (skompilowana i uruchomiona).

Bla bla, czytaj HIG, nie używaj nieudokumentowanych funkcji i tak dalej. Istnieje tylko sześć obsługiwanych typów przycisków i nie jest to jeden z nich.

Przede wszystkim musisz znaleźć obraz przycisku Wstecz. Użyłem ładnej aplikacji o nazwie Extractor, która wyodrębnia całą grafikę z iPhone'a. W iOS7 udało mi się pobrać obraz o nazwie UINavigationBarBackIndicatorDefaulti był on w kolorze czarnym, ponieważ potrzebowałem czerwonego odcienia , zmieniam kolor na czerwony za pomocą Gimp.

EDYTOWAĆ:

Jak wspomniano w komentarzu btate , nie ma potrzeby zmiany koloru za pomocą edytora obrazów. Poniższy kod powinien załatwić sprawę:

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

Następnie stworzyłem widok zawierający imageView ze strzałką, etykietę z niestandardowym tekstem, a na górze widoku mam przycisk z akcją. Następnie dodałem prostą animację (zanikanie i tłumaczenie).

Poniższy kod symuluje zachowanie przycisku Wstecz, w tym animacji.

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

EDYTOWAĆ:

Zamiast dodawać przycisk, moim zdaniem lepszym rozwiązaniem jest użycie rozpoznawania gestów.

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

Nie jestem pewien, czy to zadziała, ale możesz spróbować utworzyć UINavigationControllerz domyślnymi ustawieniami, aby utworzyć przycisk, znaleźć przycisk w hierarchii podglądu kontrolera nawigacyjnego, wywołać removeFromSuperviewgo, zniszczyć kontroler nawigacyjny, a następnie dodać przycisk jako widok paska narzędzi. Konieczne może być również retainprzycisk i przycisk przed wywołaniem removeFromSuperview(a następnie releasepo dodaniu go jako podgląd paska narzędzi), aby uniknąć cofnięcia przydziału w trakcie procesu.

Aby zrobić UIButton ze strzałką całkiem blisko (nie jestem projektantem;) do strzałki wstecz systemu iOS 7:

Standard:

Apple SD Gothic Neo

W Xcode:

• Skoncentruj się na polu wartości tytułu przycisku (lub dowolnym innym widoku / kontrolce z zawartością tekstu)
• Otwórz Edycja -> Znaki specjalne
• Wybierz grupę nawiasów i kliknij dwukrotnie znak „<”
• Zmień czcionkę na: Apple SD Gothic Neo, Zwykły o pożądanym rozmiarze (np. 20)
• Zmień kolor, jak chcesz

Ref @ staticVoidMan Odpowiedź na strzałkę podobną do Back na iOS 7

Jeśli nie chcesz zawracać sobie głowy plikami plików, kształt strzałki można narysować w podklasie UIView za pomocą następującego kodu:

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

gdzie widok strzałki jest proporcjonalny do szerokości 6,0 i wysokości 10,0

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

Pracuje dla mnie. Użyłem tego, gdy miałem więcej kart, a potem mogłem zmieścić się na pasku kart, a kontroler widoku wypchnięty z „Więcej” zastąpił leftBarButtonItem w jego viewDidLoad.

Możesz znaleźć obrazy źródłowe, wyodrębniając je z Other.artwork w UIKit $ {SDKROOT} /System/Library/Frameworks/UIKit.framework/Other.artwork. Wspólnota modding ma kilka narzędzi do ich wydobycia, tutaj . Po wyodrębnieniu obrazu możesz napisać kod, aby go odpowiednio pokolorować i ustawić jako obraz przycisku. To, czy rzeczywiście możesz wysłać taką rzecz (ponieważ osadzasz dzieła pochodne), może być trochę ryzykowne, więc może chcesz porozmawiać z prawnikiem.

Biblioteka Three20 ma na to sposób:

  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;

Odkryłem, że użycie następującego prostego kodu rozwiązało problem (wymaga niestandardowego obrazu w pakiecie):

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

Oto, co skończyłem po przeszukaniu wszystkich tych i innych rozwiązań. Wykorzystuje rozciągliwy png wyodrębniony z obrazów stockowych UIKit. W ten sposób możesz ustawić tekst na cokolwiek zechcesz

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

Łatwo jest to zrobić za pomocą Konstruktora interfejsów w Xcode 5.x

• użyj paska narzędzi i elementu przycisku paska z biblioteki obiektów

  

• w przycisku, Atrybuty inspektor edycji obrazu sekcji z Twojego przycisk BACK obrazu

  

Gotowy!

Próbowałem zrobić to samo, ale chciałem, aby przycisk Wstecz znajdował się na pasku nawigacyjnym. (Właściwie potrzebowałem przycisku Wstecz, który zrobiłby więcej niż tylko powrót, więc musiałem użyć właściwości leftBarButtonItem). Próbowałem tego, co sugerował AndrewS, ale na pasku nawigacyjnym nie wyglądało to tak, jak powinno, ponieważ UIButton był w pewnym sensie rzutowany na UIBarButtonItem.

Ale znalazłem sposób na obejście tego. Właściwie po prostu umieszczam UIView pod UIButton i ustawiam customView dla UIBarButtonItem. Oto kod, jeśli ktoś go potrzebuje:

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

Aby utworzyć obraz dla paska narzędzi UITool, zrób png w Photoshopie i GDZIEKOLWIEK istnieje jakikolwiek kolor, który nadaje mu biały kolor, a gdzie jest alfa = 0, to pozostawia go w spokoju.

Zestaw SDK faktycznie umieszcza ramkę wokół utworzonej ikony i zmienia kolor na biały bez konieczności robienia czegokolwiek.

Zobacz, oto, co zrobiłem w Photoshopie dla mojego przycisku przewijania do przodu (oczywiście zamień go na przycisk wstecz):

http://twitpic.com/1oanv

i tak to wyglądało w Konstruktorze interfejsów

http://twitpic.com/1oaoa

Rozwiązanie BEZ użycia png. W oparciu o tę odpowiedź SO: Dodanie małej strzałki po prawej stronie komórki w komórce iPhone TableView

Wystarczy obrócić UITableViewCell w poziomie!

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

Chevron.left Apple Symbol pozwala teraz na bardziej eleganckie rozwiązanie, aby utworzyć niestandardowy przycisk. Dopasowałem rozmiar i odstępy tak blisko, jak to możliwe.

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)
    }
}

Można to zaimplementować jako a UIToolbarItemlubUINavigationItem

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")
}

Jeśli chcesz obrócić przycisk i strzałka skierowana jest w prawo:

Użyj symbolu Apple o nazwie „chevron.right”

Dodaj następujący kod do CustomBackButtonklasy:

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

Jeśli chcesz uniknąć rysowania go samemu, możesz użyć nieudokumentowanej klasy: UINavigationButton ze stylem 1. To oczywiście może uniemożliwić zatwierdzenie twojego wniosku ... / John

Cóż, nie musisz mieć innego przycisku dla każdego rozmiaru, możesz użyć [UIImage stretchableImageWithLeftCapWidth:topCapHeight:], ale jedyne, co znalazłem, to niestandardowe obrazy.

Miałem podobny problem i wyszedłem z jednej biblioteki PButton . Przykładem jest przycisk nawigacyjny z tyłu podobny do przycisku, którego można używać w dowolnym miejscu, podobnie jak przycisk dostosowany.

Coś takiego:

Przykład w Swift 3, z poprzednim i następnym przyciskiem w prawym górnym rogu.

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]

Szybki

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

Spróbuj tego. Jestem pewien, że nie potrzebujesz obrazu przycisku wstecz, aby go utworzyć.

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

To wszystko co musisz zrobić :)

Dlaczego to robisz? Jeśli chcesz czegoś, co wygląda jak pasek nawigacji, użyj UINavigationBar.

Paski narzędzi są powiązane z określonym stylem wizualnym. Wytyczne Human Interface dla iPhone'a:

Pasek narzędzi pojawia się w dolnej krawędzi ekranu i zawiera przyciski, które wykonują czynności związane z obiektami w bieżącym widoku.

Następnie podaje kilka wizualnych przykładów z grubsza kwadratowych ikon bez tekstu. Zachęcałbym was do śledzenia HIG w tej sprawie.