Tworzenie przycisku ze strzałką w lewo (jak styl "wstecz" UINavigationBar) na pasku UIToolbar

Metoda Unicode

Myślę, że o wiele łatwiej jest po prostu użyć znaku unicode, aby wykonać zadanie. Możesz przeglądać strzałki, googlując albo Trójkąty Unicode lub Strzałki Unicode . Począwszy od iOS6 Apple zmienił postać na postać emoji z obramowaniem. Aby wyłączyć obramowanie dodaję 0xFE0E Unicode variation Selector .

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 demo. Będzie działać w każdym przycisku, który akceptuje NSString.

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

Wynik

Ostrzeżenie: istnieją doniesienia, że nie będzie to działać na iOS 6. Może to działać tylko w starszych wersjach systemu operacyjnego. Widocznie co najmniej jeden dev miał swoją aplikację odrzuconą za użycie tej sztuczki (Zobacz komentarze). Używaj na własne ryzyko. Użycie obrazu (patrz odpowiedź powyżej) może być bezpieczniejszym rozwiązaniem.

Można to zrobić bez dodawania własnych plików graficznych za pomocą przycisku sekr1t typu 101, aby uzyskać prawidłowy kształt. Dla mnie sztuczka polegała na tym, że mogę użyć initWithCustomView do stworzenia BarButtonItem. Osobiście potrzebowałem tego do dynamicznego navbara, a nie toolbar, ale Przetestowałem go z paskiem narzędzi i 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, będziesz musiał dostosować sposób ustawiania elementów, ale to zależy od reszty kodu i zostawię to jako ćwiczenie dla czytelnika. : P ta próbka zadziałała u mnie(skompilowana i uruchomiona).

Najpierw musisz znaleźć obraz przycisku Wstecz. Użyłem fajnej aplikacji o nazwie Extractor , która wyodrębnia wszystkie grafiki z iPhone ' a. W iOS7 udało mi się odzyskać obrazek o nazwie UINavigationBarBackIndicatorDefault i był w kolorze czarnym, ponieważ potrzebowałem czerwonego odcienia zmieniam kolor na czerwony za pomocą Gimp.

EDIT:

Jak wspomniał btate w swoim komentarzu, nie ma potrzeby zmiany koloru za pomocą edytora obrazków. Poniższy kod powinien zadziałać:

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

Następnie utworzyłem widok, który zawiera imageView z tą strzałką, etykietę z niestandardowym tekstem i na górze widoku mam przycisk z akcją. Następnie dodałem prostą animację (blaknięcie i tłumaczenie).

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

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

EDIT:

Zamiast dodawania przycisku, moim zdaniem lepszym podejściem jest użycie gestu / align = "left" /

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ć UINavigationController z domyślnymi ustawieniami, aby utworzyć przycisk, znaleźć przycisk w hierarchii subview kontrolera nawigacji, wywołać removeFromSuperview na nim, zniszczyć kontroler nawigacji, a następnie dodać Przycisk jako subview paska narzędzi. Może być również konieczne retain i przycisk przed wywołaniem removeFromSuperview (a następnie release to po dodaniu go jako subview paska narzędzi), aby uniknąć dealokacji podczas procesu.

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

Standard:

Apple SD Gothic Neo

W Xcode:

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

Ref @staticVoidMan ' s answer to Back-like arrow on iOS 7

Jeśli nie chcesz przejmować się plikami graficznymi, kształt strzałki można narysować w podklasie UIView o następującym kodzie:

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

Możesz znaleźć obrazy źródłowe, wydobywając je z innych.grafika w UIKit ${SDKROOT} / System/Library/Framework / UIKit.framework / Inne.grafika. Społeczność moddingu ma kilka narzędzi do ich wyodrębniania, tutaj . Po rozpakowaniu obrazu możesz napisać kod, aby przebarwić go w razie potrzeby i ustawić jako obraz przycisku. To, czy rzeczywiście możesz wysłać coś takiego (ponieważ osadzasz pochodną grafikę), 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;

Stwierdziłem, że użycie poniższego, prostego kodu załatwiło sprawę (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 zrobiłem po przeszukaniu wszystkich tych rozwiązań i innych. Wykorzystuje rozciągliwe pliki png pobrane ze zdjęć stockowych UIKit. W ten sposób możesz ustawić tekst na cokolwiek chcesz

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

It ' s easy to do with Interface Builder w Xcode 5.x

• Użyj paska narzędziowego i elementu przycisku paska z biblioteka obiektów

  

• In button ' s Inspektor atrybutów edit Image section z twoim obrazkiem przycisku Wstecz

  

Zrobione!

Próbowałem zrobić to samo, ale chciałem, aby przycisk Wstecz był w 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 zasugerował AndrewS, ale w pasku nawigacyjnym nie wyglądało to tak, jak powinno, ponieważ UIButton był jakby odlany do UIBarButtonItem.

// 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 stworzyć obrazek dla Uitoolbara, zrób png w Photoshopie i tam gdzie jest jakiś kolor To Go postawi na biało, a gdzie jest alpha = 0 to zostawia go samego.

SDK faktycznie umieszcza obramowanie wokół ikony, którą zrobiłeś i zmienia ją na białą, bez konieczności robienia czegokolwiek.

Widzisz, to jest to, co zrobiłem w Photoshopie dla mojego przycisku forward (oczywiście zamień go na przycisk back):

Http://twitpic.com/1oanv

I to jest to pojawił się jak w Interface Builder

Http://twitpic.com/1oaoa

Rozwiązanie bez użycia png. Na podstawie tego więc odpowiedź: dodanie małej strzałki po prawej stronie komórki w komórce TableView iPhone

Wystarczy przewrócić UITableViewCell poziomo!

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

Symbol jabłka left Teraz pozwala na bardziej eleganckie rozwiązanie, aby niestandardowy przycisk. Dopasowałem rozmiar i odstępy jak najbliżej.

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

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 mieć strzałkę skierowaną w prawo:

Użyj symbolu jabłka o nazwie "chevron.prawo "

Dodaj następujący kod do klasy CustomBackButton:

    // 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, możesz użyć nieudokumentowanej klasy: UINavigationButton ze stylem 1. Może to oczywiście 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. A próbką jest przycisk nawigacyjny z tyłu, podobny do przycisku, który można używać w dowolnym miejscu, podobnie jak dostosowany przycisk.

Coś takiego:

Przykład w języku Swift 3, z przyciskiem poprzedni i następny 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]

Swift

// 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 stworzyć taki.

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 coś, co wygląda jak pasek nawigacji, użyj UINavigationBar.

Paski narzędzi mają specyficzny styl wizualny związany z nimi. Wytyczne dotyczące interfejsu człowieka 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 mniej więcej kwadratowych ikon bez tekstu. Zachęcam do podążaj za tym.