ios - UIToolbar での左矢印ボタン (UINavigationBar の「戻る」スタイルのような) の作成

Question

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

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

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

使用するすべてのサイズと配色のスクリーンショット以外のアイデアはありますか?

更新:質問をかわしたり、これを質問するべきではなく、UINavigationBar. 私のアプリは Instapaper Pro です。(スペースを節約し、読みやすいコンテンツ領域を最大化するため) 下部のツールバーのみが表示され、下部に左矢印の形をした [戻る] ボタンを配置したいと考えています。

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

score 130 · Accepted Answer

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

score 45 · Accepted Answer

Unicodeメソッド

仕事を終わらせるためにユニコード文字を使用する方がはるかに簡単だと思います。UnicodeTrianglesまたはUnicodeArrowsのいずれかをグーグルで検索すると、矢印を確認できます。iOS6以降、Appleはキャラクターを境界線のある絵文字に変更しました。境界線を無効にするには、0xFE0EUnicodeバリエーションセレクターを追加します。

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文字と必要な文字を検索してください。これが黒い左向きの三角形のエントリです。

結果

score 37 · Accepted Answer

警告:これは 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 つではありません。

score 18 · Accepted Answer

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

score 14 · Accepted Answer

iOS 7 システムの戻る矢印にかなり近い矢印 (私はデザイナーではありません;) を持つ UIButton を作成するには:

標準：

標準システムの戻る矢印

アップル SD ゴシックネオ

Apple SD ゴシック Neo < キャラクター

Xcode の場合:

ボタンのタイトル値フィールド (またはテキストコンテンツを含むその他のビュー/コントロール) に注目します。
編集を開く -> 特殊文字
括弧グループを選択し、「<」文字をダブルクリックします
フォントを次のように変更します: Apple SD Gothic Neo、レギュラー、希望のサイズ (例: 20)
お好みで色を変えて

iOS 7 の Back-like arrow に対する @staticVoidMan の回答を参照してください。

score 7 · Accepted Answer

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

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

score 4 · Accepted Answer

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

score 4 · Accepted Answer

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

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

score 4 · Accepted Answer

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;

score 4 · Accepted Answer

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

オブジェクトライブラリのツールバーとバーボタンアイテムを使用する
ボタンの属性インスペクターで、戻るボタンの画像を含む画像セクションを編集します

終わり！

score 4 · Accepted Answer

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

score 2 · Accepted Answer

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

score 1 · Accepted Answer

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

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

score 1 · Accepted Answer

UIToolbar の画像を作成するには、Photoshop で png を作成し、どこにでも白を置き、アルファ = 0 の場所はそのままにします。

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

見てください、これは私がPhotoshopで進むボタンのために作ったものです（明らかにそれを戻るボタンに置き換えます）：

http://twitpic.com/1oanv

これはInterface Builderでのように見えたものです

http://twitpic.com/1oaoa

score 0 · Accepted Answer

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

score 0 · Accepted Answer

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

score 0 · Accepted Answer

迅速

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

score -5 · Accepted Answer

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

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

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

score -23 · Accepted Answer

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

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

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

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

ios - UIToolbar での左矢印ボタン (UINavigationBar の「戻る」スタイルのような) の作成

24 に答える 24

Unicodeメソッド

結果

Related

Reference