Membuat tombol panah kiri (seperti gaya "kembali" UINavigationBar) pada UIToolbar

Saya ingin membuat tombol "kembali" tanda panah kiri di a UIToolbar.

Sejauh yang saya tahu, satu-satunya cara untuk mendapatkan salah satunya adalah dengan meninggalkan UINavigationControllerpengaturan default dan menggunakan satu untuk item bar kiri. Tetapi tidak ada cara saya dapat menemukan untuk membuatnya sebagai UIBarButtonItem, jadi saya tidak bisa membuatnya dalam standar UIToolbar, meskipun mereka sangat mirip dengan UINavigationBars.

Saya dapat membuatnya secara manual dengan gambar tombol, tetapi saya tidak dapat menemukan gambar sumber di mana pun. Mereka memiliki tepi alpha-channel, sehingga screenshotting dan cutting tidak akan mendapatkan hasil yang sangat fleksibel.

Adakah ide di luar screenshotting untuk setiap skema ukuran dan warna yang ingin saya gunakan?

Pembaruan: TOLONG BERHENTI menghindari pertanyaan dan menyarankan agar saya tidak seharusnya menanyakan ini dan harus menggunakan UINavigationBar. Aplikasi saya adalah Instapaper Pro. Ini hanya menampilkan bilah alat bawah (untuk menghemat ruang dan memaksimalkan area konten yang dapat dibaca), dan saya ingin meletakkan tombol Kembali yang berbentuk panah-kiri di bagian bawah.

Memberitahu saya bahwa saya seharusnya tidak perlu melakukan ini bukanlah jawaban dan tentu saja tidak pantas mendapatkan hadiah.

Saya menggunakan psd berikut yang saya dapatkan dari http://www.teehanlax.com/blog/?p=447

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

Saya kemudian baru saja membuat UIView khusus yang saya gunakan di properti customView dari item toolbar.

Bekerja dengan baik untuk saya.

Sunting: Seperti yang ditunjukkan oleh PrairieHippo , maralbjo menemukan bahwa menggunakan kode sederhana berikut ini melakukan triknya (memerlukan gambar khusus dalam bundel) harus dikombinasikan dengan jawaban ini. Jadi di sini adalah kode tambahan:

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

Metode Unicode

Saya pikir itu jauh lebih mudah untuk hanya menggunakan karakter unicode untuk menyelesaikan pekerjaan. Anda dapat melihat melalui panah dengan googling baik Unicode Segitiga atau Unicode Arrows . Dimulai dengan iOS6 Apple mengubah karakter menjadi karakter emoji dengan batas. Untuk menonaktifkan perbatasan saya tambahkan Selektor Variasi 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 kode hanya untuk demo. Ini akan bekerja di tombol apa saja yang menerima NSString.

Untuk daftar lengkap karakter, cari Google untuk karakter Unicode dan apa yang Anda inginkan. Inilah entri untuk Segitiga Menunjuk Kiri Hitam .

Hasil

PERINGATAN: Ada laporan bahwa ini tidak akan berfungsi di iOS 6. Ini mungkin hanya bekerja pada versi OS yang lebih lama. Jelas setidaknya satu dev telah ditolak aplikasi mereka karena menggunakan trik ini (lihat komentar). Gunakan dengan risiko Anda sendiri. Menggunakan gambar (lihat jawaban di atas) mungkin merupakan solusi yang lebih aman.

Ini dapat dilakukan tanpa menambahkan file gambar Anda sendiri menggunakan tombol sekr1t ketik 101 untuk mendapatkan bentuk yang benar. Bagi saya triknya adalah mencari tahu yang bisa saya gunakan initWithCustomViewuntuk membuat BarButtonItem. Saya pribadi membutuhkan ini untuk navbar dinamis daripada toolbar, tetapi saya mengujinya dengan bilah alat dan kodenya hampir sama:

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

Jika Anda melakukan ini pada bilah alat, Anda harus mengubah cara Anda mengatur item, tetapi itu tergantung pada sisa kode Anda dan saya membiarkannya sebagai latihan untuk pembaca. : P Sampel ini berfungsi untuk saya (dikompilasi & dijalankan).

Blah blah, baca HIG, jangan gunakan fitur tidak berdokumen, dan semua itu. Hanya ada enam jenis tombol yang didukung dan ini bukan salah satunya.

Pertama-tama Anda harus menemukan gambar tombol kembali. Saya menggunakan aplikasi yang bagus bernama Extractor yang mengekstrak semua gambar dari iPhone. Di iOS7 saya berhasil mengambil gambar yang dipanggil UINavigationBarBackIndicatorDefaultdan itu dalam warna hitam, karena saya membutuhkan warna merah saya mengubah warna menjadi merah menggunakan Gimp.

EDIT:

Seperti yang disebutkan oleh btate dalam komentarnya, tidak perlu mengubah warna dengan editor gambar. Kode berikut harus melakukan trik:

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

Lalu saya membuat tampilan yang berisi imageView dengan panah itu, label dengan teks kustom dan di atas tampilan saya memiliki tombol dengan tindakan. Kemudian saya menambahkan animasi sederhana (fading dan terjemahan).

Kode berikut mensimulasikan perilaku tombol kembali termasuk animasi.

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

Alih-alih menambahkan tombol, menurut saya pendekatan yang lebih baik adalah dengan menggunakan pengenal isyarat.

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

Saya tidak yakin apakah ini akan berhasil, tetapi Anda dapat mencoba membuat UINavigationControllerdengan pengaturan default untuk membuat tombol, menemukan tombol dalam hierarki subview pengendali navigasi, memanggilnya removeFromSuperview, menghancurkan pengontrol navigasi, dan kemudian menambahkan tombol sebagai subview dari toolbar Anda. Anda juga mungkin perlu retaindan tombol sebelum memanggil removeFromSuperview(dan kemudian releasesetelah menambahkannya sebagai subview dari toolbar Anda) untuk menghindari itu tidak dialokasikan selama proses.

Untuk membuat UIButton dengan panah cukup dekat (saya bukan desainer;) ke panah kembali sistem iOS 7:

Standar:

Apple SD Gothic Neo

Dalam Xcode:

• Fokus pada bidang nilai judul tombol (atau tampilan / kontrol lainnya dengan konten teks)
• Buka Edit -> Karakter Khusus
• Pilih grup Tanda kurung dan klik dua kali karakter '<'
• Ubah font ke: Apple SD Gothic Neo, Regular dengan ukuran yang diinginkan (mis. 20)
• Ubah warna sesuka Anda

Jawaban Ref @ staticVoidMan untuk panah Kembali-suka di iOS 7

Jika Anda tidak ingin repot dengan file gambar, bentuk panah dapat digambar dalam subkelas UIView dengan kode berikut:

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

di mana tampilan panah sebanding dengan lebar 6,0 dan tinggi 10,0

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

Bekerja untukku. Saya menggunakan ini ketika saya memiliki lebih banyak tab kemudian bisa muat pada bilah tab, dan pengontrol tampilan didorong dari "Lebih" mengesampingkan leftBarButtonItem di viewDidLoad.

Anda dapat menemukan gambar sumber dengan mengekstraknya dari Other.artwork di UIKit $ {SDKROOT} /System/Library/Frameworks/UIKit.framework/Other.artwork. Komunitas modding memiliki beberapa alat untuk mengekstraksi mereka, di sini . Setelah Anda mengekstrak gambar, Anda dapat menulis beberapa kode untuk mewarnai ulang sesuai kebutuhan dan mengaturnya sebagai gambar tombol. Apakah Anda benar-benar dapat mengirimkan barang seperti itu (karena Anda sedang menanamkan karya seni yang diturunkan) mungkin sedikit tidak pasti, jadi mungkin Anda ingin berbicara dengan seorang pengacara.

Perpustakaan Three20 memiliki cara untuk melakukan ini:

  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;

Saya menemukan bahwa menggunakan kode sederhana berikut melakukan trik (memerlukan gambar kustom dalam bundel):

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

Inilah yang akhirnya saya lakukan setelah mencari semua solusi ini dan yang lainnya. Ini menggunakan png merenggang diekstraksi dari gambar stok UIKit. Dengan cara ini Anda dapat mengatur teks ke apa pun yang Anda sukai

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

Sangat mudah dilakukan dengan Interface Builder di Xcode 5.x

• menggunakan Bilah Alat dan Item Tombol Bar dari Pustaka objek

  

• di bagian Atribut inspektur tombol edit gambar dengan gambar tombol kembali Anda

  

Selesai!

Saya mencoba melakukan hal yang sama, tetapi saya ingin tombol kembali berada di bilah navigasi. (Saya benar-benar membutuhkan tombol kembali, yang akan melakukan lebih dari hanya kembali, jadi saya harus menggunakan properti leftBarButtonItem). Saya mencoba apa yang disarankan AndrewS, tetapi di bilah navigasi tidak akan terlihat seperti seharusnya, karena UIButton semacam itu dicor ke UIBarButtonItem.

Tetapi saya menemukan cara untuk mengatasi ini. Saya sebenarnya hanya meletakkan UIView di bawah UIButton dan mengatur customView untuk UIBarButtonItem. Ini kodenya, jika seseorang membutuhkannya:

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

Untuk membuat gambar untuk UIToolbar, buat png di photoshop dan WHERE EVER ada warna APA itu putih, dan di mana itu alpha = 0 maka ia meninggalkannya sendiri.

SDK sebenarnya menempatkan perbatasan di sekitar ikon yang Anda buat dan mengubahnya menjadi putih tanpa Anda harus melakukan apa pun.

Lihat, ini adalah apa yang saya buat di Photoshop untuk tombol maju saya (jelas bertukar sekitar untuk tombol kembali):

http://twitpic.com/1oanv

dan inilah yang tampak seperti di Interface Builder

http://twitpic.com/1oaoa

Solusi TANPA menggunakan png. Berdasarkan jawaban SO ini: Menambahkan panah kecil ke sisi kanan sel dalam iPhone TableView Cell

Hanya membalik UITableViewCell secara horizontal!

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

Apple Symbol chevron.left sekarang memungkinkan solusi yang lebih elegan untuk membuat tombol kustom. Saya telah mencocokkan ukuran dan jarak sedekat mungkin.

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

Ini dapat diimplementasikan baik sebagai UIToolbarItem, atau aUINavigationItem

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

Jika Anda ingin membalik tombol dan mengarahkan panah ke kanan:

Gunakan Simbol Apple bernama "chevron.right"

Tambahkan kode berikut ke CustomBackButtonkelas:

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

Jika Anda ingin menghindari menggambar sendiri, Anda dapat menggunakan kelas tidak berdokumen: UINavigationButton dengan gaya 1. Ini tentu saja dapat menghentikan aplikasi Anda agar tidak disetujui ... / John

Nah, Anda tidak harus memiliki tombol berbeda untuk setiap ukuran, Anda dapat menggunakan [UIImage stretchableImageWithLeftCapWidth:topCapHeight:], tetapi satu-satunya hal yang saya temukan adalah gambar khusus.

Saya memiliki masalah yang sama, dan keluar satu perpustakaan PButton . Dan sampelnya adalah tombol navigasi belakang seperti tombol, yang dapat digunakan di mana saja seperti tombol yang disesuaikan.

Sesuatu seperti ini:

Contoh dalam Swift 3, dengan tombol sebelumnya dan berikutnya di kanan atas.

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]

Cepat

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

Coba ini. Saya yakin Anda tidak memerlukan gambar tombol kembali untuk membuatnya.

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

Itu yang harus Anda lakukan :)

Mengapa kau melakukan ini? Jika Anda menginginkan sesuatu yang terlihat seperti bilah navigasi, gunakan UINavigationBar.

Bilah alat memiliki gaya visual spesifik yang terkait dengannya. Panduan Antarmuka Manusia untuk kondisi iPhone:

Bilah alat muncul di tepi bawah layar dan berisi tombol yang melakukan tindakan yang terkait dengan objek dalam tampilan saat ini.

Ini kemudian memberikan beberapa contoh visual dari ikon persegi kira-kira tanpa teks. Saya ingin Anda mengikuti HIG dalam hal ini.