UIToolbarに左矢印ボタン（UINavigationBarの＆＃8220; back＆＃8221;スタイルなど）を作成する
https://stackoverflow.com/questions/227078
-
03-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian質問
「戻る」を作成したい UIToolbar の左矢印ベゼルボタン。
私が知る限り、これらのいずれかを取得する唯一の方法は、 UINavigationController をデフォルト設定のままにして、左のバー項目に使用することです。しかし、 UIBarButtonItem として作成する方法を見つけることができないため、標準の UIToolbar で作成することはできません。 > UINavigationBar s。
ボタン画像を使用して手動で作成できましたが、ソース画像がどこにも見つかりません。アルファチャンネルのエッジがあるため、スクリーンショットやカッティングは非常に多目的な結果にはなりません。
使用するすべてのサイズと配色のスクリーンショットを超えるアイデアはありますか？
更新：質問を避け、これを尋ねるのではなく、 UINavigationBar を使用することを提案してください。私のアプリはInstapaper Proです。下部のツールバーのみを表示し（スペースを節約し、読み取り可能なコンテンツ領域を最大化するため）、下部に左矢印の「戻る」ボタンを配置します。
これを行う必要はないことを教えてください答えではありません、確かに報奨を受けるに値するものではありません。
解決
http://www.teehanlax.comから派生した次のpsdを使用しました。 / blog /？p = 447
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文字を使用するだけで、仕事を終わらせる方がずっと簡単だと思います。 Unicode Triangles または< href = "http://www.fileformat.info/info/unicode/block/arrows/list.htm" rel = "nofollow noreferrer"> 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を受け入れる任意のボタンで機能します。
文字の完全なリストについては、Unicode文字と必要な文字をGoogleで検索してください。 黒の左向きの三角形のエントリです。
結果
警告：これはiOS 6では動作しないという報告があります。これは古いバージョンのOSでのみ動作する可能性があります。明らかに、少なくとも1人の開発者が、このトリックの使用を理由にアプリを拒否しました（コメントを参照）。自己責任。画像（上記の回答を参照）を使用すると、より安全なソリューションになる場合があります。
これは、正しい形状を得るためにsekr1tボタンタイプ101を使用して独自の画像ファイルを追加せずに実行できます。私にとっての秘theは、 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このサンプルは私のために機能しました（コンパイル＆amp;実行）。
何とか、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 を作成してボタンを作成し、Navigation Controllerのサブビュー階層でボタンを見つけて、を呼び出すことができますremoveFromSuperview でナビゲーションコントローラーを破棄し、ツールバーのサブビューとしてボタンを追加します。また、 removeFromSuperview を呼び出す前に retain とボタンが必要になる場合があります（ツールバーのサブビューとして追加した後、 release する）。プロセス中に割り当て解除されます。
iOS 7システムの戻る矢印に非常に近い矢印（私はデザイナーではありません;）でUIButtonを作成するには：
標準：
Apple SD Gothic Neo
Xcodeの場合：
- ボタンのタイトル値フィールド（またはテキストコンテンツを含むその他のビュー/コントロール）に焦点を当てる
- 編集を開く-＆gt;特殊文字
- 括弧グループを選択し、「＆lt;」をダブルクリックします文字
- フォントをApple SDゴシックネオ、希望のサイズ（20など）のレギュラーに変更します
- 好きなように色を変更
@staticVoidManの回答をiOS 7のBack-like矢印に参照してください
画像ファイルに煩わされたくない場合は、次のコードを使用して、矢印の形状を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;
私のために働く。タブバーに収まるより多くのタブがあり、「その他」からプッシュされたView Controllerがあるときにこれを使用しました。 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の画像を作成するには、photoshopでpngを作成し、任意の色があればどこでも白にし、alpha = 0の場合はそのままにします。
SDKは実際に作成したアイコンの周囲に境界線を配置し、何もすることなく白に変更します。
これは、進むボタン用にPhotoshopで作成したものです（明らかに、戻るボタン用に入れ替えます）：
そしてこれはInterface Builderでの表示です
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のUINavigationButtonを使用できます。これはもちろん、アプリケーションの承認を停止する可能性があります... /ジョン
まあ、サイズごとに異なるボタンを用意する必要はありません。 [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]
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
これを試してください。そのようなものを作成するために戻るボタンの画像は必要ないと確信しています。
UIBarButtonItem *backButton = [[UIBarButtonItem alloc] initWithTitle:@"Back"
style:UIBarButtonItemStyleBordered
target:self
action:@selector(yourSelectorGoesHere:)];
self.navigationItem.backBarButtonItem = backButton;
あなたがしなければならないのはそれだけです：）
なぜこれを行うのですか？ナビゲーションバーのようなものが必要な場合は、UINavigationBarを使用します。
ツールバーには、特定の視覚スタイルが関連付けられています。 iPhone状態のヒューマンインターフェイスガイドライン：
ツールバーは画面の下端に表示され、現在のビューのオブジェクトに関連するアクションを実行するボタンが含まれています。
次に、テキストのないほぼ正方形のアイコンの視覚的な例をいくつか示します。これについてはHIGに従うことをお勧めします。
