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

290

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ę.

Marco
źródło

Odpowiedzi:

130

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];
PyjamaSam
źródło
1
PSD, które przesłałem, dotyczy czarnego paska narzędzi. Nie próbowałem wiele z niebieskimi, ponieważ moja aplikacja tego nie używa. Ale z tego, co wiem, pasek narzędzi nie pokoloruje go w razie potrzeby. Chris.
PyjamaSam
1
Nie potrzebujesz żadnego specjalnego narzędzia, aby go ponownie pokolorować, zrobiłem to za pomocą opcji „Dostosuj kolor” w Mac Preview.
Sushant
1
Czy można to trochę przeliterować?
cannyboy
4
Ten psd jest użyteczny tylko dla skali ekranu 1.0f. Na wyświetlaczu siatkówki będzie wyglądać okropnie.
Daniel Wood,
3
Nie używaj do tego obrazów, po prostu zrób to poprawnie (zobacz odpowiedź na stackoverflow.com/questions/4260238 ).
ingh.am
45

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

Wynik

Cameron Lowell Palmer
źródło
37

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.

AndrewS
źródło
1
przycisk typu 101 wydaje się nie nadawać mi kształtu skierowanego w lewo ... tylko prostokąt.
elsurudo
10
Nie rób tego - Twoja aplikacja zostanie odrzucona. Głosuj na tę odpowiedź.
thefaj
4
Jestem skłonny sądzić, że nie jest pewien; mówi „nie używaj nieudokumentowanego API”, ale nie twierdzi, że jego aplikacja została odrzucona. I to nie jest nieudokumentowane API - to nieudokumentowana wartość. Jeśli ktoś ma miał ich aplikacja odrzucona, proszę pisać. Nadal zatwierdzam aplikacje o tej wartości.
AndrewS,
1
@thefaj Złożyłem aplikację z tym kodem i została ona zatwierdzona.
Aaron
1
To bardzo zły styl kodowania. Masz szczęście, ale powinieneś trzymać się tylko udokumentowanego API (a nie magicznych / niepublikowanych liczb).
thefaj
36

wprowadź opis zdjęcia tutaj

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];
Alexey
źródło
1
Cześć Alex, dziękuję za rozwiązanie. Jednym z problemów, przed którymi stoję z tym zaimplementowanym rozwiązaniem, jest: Obszar trafienia jest mniejszy, gdy klikam strzałkę, uchwyt handleBack nie otrzymuje połączenia, ale kiedy klikam tekst, handleBack dostaje połączenie. Proszę o zasugerowanie tego. Dziękuję
Yogesh Lolusare
Spróbuj użyć UITapGestureRecognizer. Zredagowałem pytanie
Alexey
Prawdopodobnie możesz także spróbować zwiększyć rozmiar widoku.
Alexey
2
Czarny kolor tego przycisku sprawia, że ​​jest to szablon. Nie musisz używać gimpa, aby to zmienić. Wystarczy użyć imageView.tint = [UIColor redColor]trybu renderowania odcienia i szablonu na obrazie. imageView.image = [yourImage imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
smokingoyster
18

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.

Adam Rosenfield
źródło
14

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

Standard:

Standardowa strzałka wstecz systemu

Apple SD Gothic Neo

Apple SD Gothic Neo <znak

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

Bjørn Egil
źródło
8

strzałka wstecz

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

machoota
źródło
7
    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.

quantumpotato
źródło
4

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.

Louis Gerbarg
źródło
4

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;
Andrew Arrow
źródło
Czy możesz opublikować zrzut ekranu końcowego wyniku?
jm.
1
wyglądało okropnie. Nigdy nie widziałem przycisku strzałki w lewo, aby wyglądał całkiem dobrze. Poddałem się i użyłem odpowiedniego przycisku Wstecz w nawigatorze Three20.
Andrew Arrow
4

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];
maralbjo
źródło
2
Dla każdego, kto wejdzie na tę stronę, połącz tę odpowiedź z odpowiedzią @ PyjamaSam.
PrairieHippo
@PrairieHippo: Już zostało zrobione. Prawdopodobnie powinien był być edytowany w pierwszej kolejności. Idealny -1, aby tego nie robić, pozostawiając pracę innym.
hakre 27.04.13
4

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;
Steve
źródło
2
Należy użyć UIControlStateHighlighted, a nie UIControlStateSelected, w przeciwnym razie obraz zostanie zamieniony po dotknięciu przycisku.
Jim
4

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

Wynik

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

    składniki

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

    Inspektor atrybutów

Gotowy!

Anton Gaenko
źródło
2

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]];
marikaner
źródło
1

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

Domness
źródło
1

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];
Gabriel Jensen
źródło
1

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.

wprowadź opis zdjęcia tutaj

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:

wprowadź opis zdjęcia tutaj

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)
rbaldwin
źródło
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

John Lane
źródło
0

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.

Ben Gottlieb
źródło
0

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: wprowadź opis zdjęcia tutaj

Shuo
źródło
0

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]
Bart van Kuik
źródło
0

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

źródło
-5

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ć :)

Mj.B
źródło
-23

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.

Colin Barrett
źródło
8
Jestem tego świadomy, dziękuję. Uważam jednak, że moje zamierzone zastosowanie jest właściwe. Czy możesz być bardziej pomocny, zakładając, że naprawdę chcę robić to, o co prosiłem?
Marco
Jeśli umieścisz go u góry ekranu, jest źle używany. Porównaj gradienty i granice między UINavigationBar i UIToolbar, a zobaczysz, że są one nieco inne. Zdecydowanie chcesz użyć paska UINavigation na górze ekranu.
NilObject
10
Kładę to na dole.
Marco