web-dev-qa-db-ja.com

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

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

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

ボタン画像で手動で作成できましたが、ソース画像がどこにも見つかりません。アルファチャンネルのエッジがあるため、スクリーンショットやカッティングは非常に多目的な結果にはなりません。

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

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

私はこれをする必要はないことを教えてください答えではありませんそして確かに報奨に値するものではありません。

iosiphonecocoa-touchuinavigationbaruitoolbar
286
Marco

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];
127
PyjamaSam

Unicodeメソッド

ユニコード文字を使用して作業を完了する方がはるかに簡単だと思います。 nicode Triangles または nicode Arrows のいずれかをグーグルして、矢印を見ることができます。 iOS6以降、Appleは、文字を枠付きの絵文字に変更しました。境界線を無効にするには、0xFE0E nicode 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文字と必要な文字を検索してください。 黒の左向き三角形 のエントリは次のとおりです。

結果

The result

46
Cameron Lowell Palmer

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

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

// 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つではありません。

37
AndrewS

enter image description here

まず、戻るボタンの画像を見つける必要があります。 Extractor という素敵なアプリを使用して、iPhoneからすべてのグラフィックを抽出しました。 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];
36
Alexey

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

18
Adam Rosenfield

IOS 7システムの戻る矢印にかなり近い（私はデザイナーではありません）矢印付きのUIButtonを作成するには：

標準：

Standard system back arrow

Apple SD Gothic Neo

Apple SD Gothic Neo < character

Xcodeの場合：

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

参照 @ staticVoidMan's answer iOS 7のBack-like矢印に

14
Bjørn Egil

back arrow

画像ファイルに煩わされたくない場合は、次のコードを使用して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に比例します

8
machoota
    self.navigationItem.leftBarButtonItem = self.navigationItem.backBarButtonItem;

私のために働く。タブバーに収まるより多くのタブがあり、 "More"からプッシュされたView ControllerがviewDidLoadのleftBarButtonItemをオーバーライドしたときに、これを使用しました。

7
quantumpotato

これらすべてのソリューションなどを検索した後、私がやったことは次のとおりです。 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;
4
Steve

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;
4
Andrew Arrow

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

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

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

4
Louis Gerbarg

Interface Builder in Xcode 5.xで簡単に行えます

Result

  • ツールバーおよびバーボタン項目 from Object libraryを使用

    Components

  • ボタンのAttributes inspector edit Image section withyour 戻るボタンの画像

    Attributes inspector

完了！

4
Anton Gaenko

同じことをしようとしていましたが、戻るボタンをナビゲーションバーに配置したかったのです。 （実際には戻るボタンが必要でした。これは戻るだけではないため、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]];
2
marikaner

UIToolbarの画像を作成するには、photoshopでpngを作成し、任意の色で白を配置し、alpha = 0の場合はそのままにします。

SDKは実際に作成したアイコンの周囲に境界線を配置し、何もしなくても白に変わります。

参照してください、これは進むボタン用にPhotoshopで作成したものです（明らかに戻るボタン用に入れ替えます）。

http://twitpic.com/1oanv

これがInterface Builderでの表示です

http://twitpic.com/1oaoa

1
Domness

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];
1
Gabriel Jensen

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]
0
Bart van Kuik

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

0
Ben Gottlieb

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
0
user7587085

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

このようなもの： enter image description here

0
Shuo

自分で描画したくない場合は、文書化されていないクラスを使用できます：スタイル1のUINavigationButtonこれは、もちろん、アプリケーションの承認を停止する可能性があります.../John

0
John Lane