UIToolbarに左矢印ボタン（UINavigationBarの「戻る」スタイルなど）を作成する

に「戻る」左矢印ベゼルボタンを作成したいですUIToolbar。

私が知る限り、これらのいずれかを取得する唯一の方法はUINavigationController、デフォルト設定のままにして、左側のバー項目に1つ使用することです。しかしUIBarButtonItem、それをとして作成する方法を見つけることができないためUIToolbar、と非常に似ていても、標準で作成することはできませんUINavigationBar。

ボタン画像を使用して手動で作成することはできましたが、ソース画像がどこにも見つかりません。アルファチャネルエッジを持っているため、スクリーンショットや切り取りでは、多目的な結果は得られません。

私が使用するすべてのサイズと配色のスクリーンショットを超えるアイデアはありますか？

更新：質問を避けて、私はこれを尋ねるべきではなく、使用するべきであることを示唆するのをやめてくださいUINavigationBar。私のアプリはInstapaper Proです。（スペースを節約し、読み取り可能なコンテンツ領域を最大化するために）下部のツールバーのみが表示され、左矢印の戻るボタンを下部に配置したいと思います。

これを行う必要はないということは答えではなく、確かに賞金に値しません。

http://www.teehanlax.com/blog/?p=447から派生した次のpsdを使用しました

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

次に、ツールバー項目のcustomViewプロパティで使用するカスタムUIViewを作成しました。

私にはうまくいきます。

編集： PrairieHippoが指摘したように、maralbjoは、次の単純なコードがトリック（カスタムイメージをバンドルで必要とする）をこの回答と組み合わせる必要があることを発見しました。だからここに追加のコードがあります：

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

Unicodeメソッド

仕事を終わらせるためにユニコード文字を使用する方がはるかに簡単だと思います。Unicode TrianglesまたはUnicode Arrowsのいずれかをグーグルすることで、矢印全体を見ることができます。iOS6以降、Appleは文字を境界線付きの絵文字に変更しました。境界線を無効にするには、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;

コードブロックはデモ用です。NSStringを受け入れる任意のボタンで機能します。

文字の完全なリストについては、GoogleでUnicode文字と必要なものを検索してください。これは、黒い左向きの三角形のエントリです。

結果

警告：これはiOS 6では機能しないという報告があります。これは、古いバージョンのOSでのみ機能する可能性があります。明らかに、少なくとも1人の開発者がこのトリックを使用したためにアプリを拒否しました（コメントを参照）。自己責任。画像（上記の回答を参照）を使用する方が安全な解決策になる場合があります。

これは、正しい形状を取得するためにsekr1tボタンタイプ101を使用して独自の画像ファイルを追加せずに行うことができます。私にとってのトリックはinitWithCustomView、を作成するために使用できることを理解することでしたBarButtonItem。私はでなく動的ナビゲーションバーにこれを個人的に必要toolbarとしましたが、ツールバーでテストしましたが、コードはほとんど同じです。

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

ツールバーでこれを行う場合は、項目の設定方法を微調整する必要がありますが、それはコードの残りの部分に依存するため、読者のための演習として残しておきます。：Pこのサンプルは私のために働いた（コンパイルして実行した）。

何とか、HIGを読んで、文書化されていない機能を使用しないでください。サポートされているボタンの種類は6つしかありませんが、これはそれらの1つではありません。

まず最初に、戻るボタンの画像を見つける必要があります。iPhoneからすべてのグラフィックを抽出するExtractorという素晴らしいアプリを使用しました。ではiOS7私はと呼ばれる画像を取得するために管理UINavigationBarBackIndicatorDefaultし、私は赤の色合いを必要とするので、それは、黒い色にいた私はGimpのを使用して赤に色を変えます。

編集：

btateのコメントで述べたように、画像エディターで色を変更する必要はありません。次のコードでうまくいくはずです。

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

次に、その矢印の付いたimageView、カスタムテキストのラベルを含むビューを作成し、ビューの上にアクション付きのボタンを配置しました。次に、簡単なアニメーション（フェードと翻訳）を追加しました。

次のコードは、アニメーションを含む戻るボタンの動作をシミュレートします。

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

編集：

私の意見では、ボタンを追加する代わりに、ジェスチャー認識機能を使用することをお勧めします。

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

これが機能するかどうかUINavigationControllerはわかりませんが、デフォルト設定でを作成してボタンを作成し、ナビゲーションコントローラーのサブビュー階層でボタンを見つけ、removeFromSuperviewそれを呼び出し、ナビゲーションコントローラーを破棄して、ボタンをツールバーのサブビュー。プロセス中に割り当てが解除されないようにするためretainに、呼び出す前にremoveFromSuperview（およびreleaseツールバーのサブビューとして追加した後で）ボタンとボタンを必要とする場合もあります。

矢印の付いたUIButtonをiOS 7システムの戻る矢印にかなり近づける（私はデザイナーではありません）。

標準：

アップルSDゴシックネオ

Xcodeの場合：

• ボタンのタイトル値フィールド（またはテキストコンテンツを含むその他のビュー/コントロール）にフォーカスします
• 編集を開く->特殊文字
• 括弧グループを選択し、「<」文字をダブルクリックします
• フォントを次のように変更します：Apple SD Gothic Neo、Regular希望のサイズ（例：20）
• 好きなように色を変える

iOS 7のBack-like矢印に対する@staticVoidManの回答を参照

画像ファイルに煩わされたくない場合は、次のコードを使用して、UIViewサブクラスに矢印の形状を描画できます。

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

矢印ビューは、幅6.0と高さ10.0に比例します

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

私のために働く。タブバーに収まるより多くのタブがあり、「More」からプッシュされたビューコントローラーがそのviewDidLoadのleftBarButtonItemをオーバーライドしたときに、これを使用しました。

UIKit $ {SDKROOT} /System/Library/Frameworks/UIKit.framework/Other.artworkのOther.artworkからソース画像を抽出すると、ソース画像を見つけることができます。改造コミュニティは、それらを抽出するためのいくつかのツールを持ってここに。画像を抽出したら、必要に応じて色を変更し、ボタン画像として設定するコードを記述できます。（派生したアートワークを埋め込んでいるため）実際にそのようなものを出荷できるかどうかは少し厄介なことかもしれません。そのため、弁護士に相談したいと思うかもしれません。

Three20ライブラリには、これを行う方法があります。

  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;

次の簡単なコードでうまくいくことがわかりました（カスタムイメージをバンドルで必要とします）。

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

これらはすべてこれらのソリューションやその他を検索した後の結果です。UIKitストック画像から抽出された伸縮可能なpngを使用します。このようにして、テキストを好きなように設定できます

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

Xcode 5.xのInterface Builderで簡単に実行できます

• 使用ツールバーやバーボタン項目をからオブジェクトライブラリ

  

• ボタンの属性インスペクタで、戻るボタンの画像を含む画像セクションを編集します

  

できた！

私は同じことをやろうとしていましたが、戻るボタンをナビゲーションバーに配置したかったのです。（実際には、戻るボタンだけが必要でした。戻るだけでは不十分なので、leftBarButtonItemプロパティを使用する必要がありました）。AndrewSの提案を試しましたが、UIButtonはUIBarButtonItemにキャストされたようなので、ナビゲーションバーでは期待どおりに表示されませんでした。

しかし、私はこれを回避する方法を見つけました。実際には、UIButtonの下にUIViewを配置し、UIBarButtonItemのcustomViewを設定します。誰かがそれを必要とするならば、これはコードです：

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

UIToolbarの画像を作成するには、フォトショップでpngを作成し、どこにでも色を配置すると白になり、アルファ= 0の場合はそのままになります。

SDKは実際に、作成したアイコンの周囲に境界を配置し、何もすることなく白に変えます。

これは、Photoshopで進むボタン用に作成したものです（明らかに、戻るボタンと交換します）。

http://twitpic.com/1oanv

これは、Interface Builderのように表示されます。

http://twitpic.com/1oaoa

pngを使用しないソリューション。このSOの回答に基づく：iPhone TableViewセルのセルの右側に小さな矢印を追加する

UITableViewCellを水平に反転するだけです！

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により、カスタムボタンを作成するためのより洗練されたソリューションが可能になりました。サイズと間隔をできるだけ近づけました。

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

これはUIToolbarItem、またはとして実装できます。UINavigationItem

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

ボタンを反転させて矢印を右向きにしたい場合：

「chevron.right」という名前のAppleシンボルを使用する

次のコードを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)

自分で描画したくない場合は、ドキュメント化されていないクラスUINavigationButtonをスタイル1で使用できます。これにより、当然、アプリケーションの承認が停止される可能性があります... / John

そうですね、サイズごとに異なるボタンを用意する必要はありません。使用できます[UIImage stretchableImageWithLeftCapWidth:topCapHeight:]が、私が見つけたのはカスタム画像だけです。

私は同様の問題を抱えていて、1つのライブラリPButtonが出てきました。そして、サンプルはボタンのような戻るナビゲーションボタンで、カスタマイズされたボタンと同じようにどこでも使用できます。

このようなもの：

右上に「前へ」ボタンと「次へ」ボタンがあるSwift 3の例

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]

迅速

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

これを試して。私はあなたがそのようなものを作成するために戻るボタンの画像を必要としないと確信しています。

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

それがあなたがしなければならないすべてです:)

なぜあなたはこれをやっている？ナビゲーションバーのようなものが必要な場合は、UINavigationBarを使用します。

ツールバーには、特定の視覚スタイルが関連付けられています。iPhoneのヒューマンインターフェイスガイドライン：

ツールバーは画面の下端に表示され、現在のビューのオブジェクトに関連するアクションを実行するボタンが含まれています。

次に、テキストのないほぼ正方形のアイコンの視覚的な例をいくつか示します。これについてHIGに従うことをお勧めします。