创建一个左箭头按钮(如UINavigationBar's "back"style)在一个UIToolbar

我想在UIToolbar中创建一个“后退”左箭头边框按钮。

据我所知，获得其中一个的唯一方法是将UINavigationController保留为默认设置，它将为左侧栏项使用一个。但是我找不到方法来创建一个作为UIBarButtonItem，所以我不能在标准的UIToolbar中创建一个，即使它们非常类似于__abc3。

我可以用按钮图像手动创建它，但我在任何地方都找不到源图像。它们有alpha通道边缘，所以截图和剪切不会得到非常通用的结果。

对于我打算使用的每种尺寸和配色方案，除了截图之外还有什么想法吗?

更新:请停止回避这个问题，并建议我不应该问这个问题，应该使用UINavigationBar。我的应用程序是Instapaper Pro。它只显示了一个底部工具栏(以节省空间和最大化可读内容区域)，我希望在底部放置一个左箭头形状的后退按钮。

告诉我，我不需要这样做不是答案，当然不值得赏金。

180812 次浏览
小开

好吧，你不必为每个大小都有不同的按钮，你可以使用[UIImage stretchableImageWithLeftCapWidth:topCapHeight:]，但我唯一找到的是自定义图像。

小开

你为什么要这么做?如果你想要一个看起来像导航栏的东西，使用UINavigationBar。

工具栏具有与之相关的特定视觉样式。iPhone的人机界面指南如下:

一个工具栏出现在屏幕的底部边缘，其中包含执行与当前视图中的对象相关的操作的按钮。

然后，它给出了几个没有文本的大致方形图标的视觉示例。我强烈建议你在这件事上遵循HIG。

小开
最佳答案

我使用了从http://www.teehanlax.com/blog/?p=447派生的以下psd

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

然后我只是创建了一个自定义的UIView，我在工具栏项的customView属性中使用。

很适合我。

编辑: 正如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];
小开
如果你想避免自己绘制它，你可以使用没有文档的类:风格1的UINavigationButton。当然，这可能会阻止你的申请被批准。 /约翰< / p >
小开

您可以通过从Other中提取源图像来找到它们。UIKit ${SDKROOT}/System/Library/Frameworks/UIKit.framework/Other.artwork。modding社区有一些提取它们的工具，在这里。一旦你提取图像，你可以写一些代码来根据需要重新着色，并将其设置为按钮图像。你是否真的可以发布这样的东西(因为你正在嵌入派生的艺术品)可能有点冒险，所以你可能需要和律师谈谈。

小开

我不确定这是否会工作，但你可以尝试创建一个UINavigationController默认设置来创建按钮，在导航控制器的子视图层次结构中找到按钮，在它上调用removeFromSuperview，销毁导航控制器，然后添加按钮作为你的工具栏的子视图。你可能还需要在调用removeFromSuperview之前retain和按钮(然后在将它添加为工具栏的子视图后release它)，以避免在这个过程中它被释放。

小开

要为UIToolbar创建一个图像，在photoshop中制作一个png，无论哪里有任何颜色，它都会把它放在白色，而当它的alpha = 0时，它就会离开它。

SDK实际上是在你所创建的图标周围设置边界，并在你不需要做任何事情的情况下将其变成白色。

看，这是我在Photoshop中为前进按钮做的(显然是把它换成后退按钮):

http://twitpic.com/1oanv

这是它在Interface Builder中出现的样子

http://twitpic.com/1oaoa

小开

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;
小开

Unicode方法

我认为使用unicode字符来完成工作要容易得多。你可以通过谷歌搜索Unicode三角形或Unicode的箭来查看箭头。从iOS6开始，苹果将该字符改为带有边框的表情符号字符。为了禁用边框，我添加了0xFE0E Unicode变体选择器。

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字符和所需内容。下面是黑色左角三角形的条目。

结果

The result

小开

警告:有报道称这将无法在iOS 6上工作。这可能只适用于较旧版本的操作系统。显然，至少有一名开发者的应用因为使用这种技巧而被拒绝。使用风险自负。使用图像(见上面的答案)可能是一个更安全的解决方案。

这可以在不添加您自己的图像文件使用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，不要使用未记录的特性，等等。只有六种支持的按钮类型，这不是其中之一。

小开

我试图做同样的事情，但我希望后退按钮在导航栏。(我实际上需要一个返回按钮，这将做的不仅仅是返回，所以我必须使用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]];
小开

我发现使用以下，简单的代码做到了这一点(需要在bundle中自定义图像):

// 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];
小开 
    self.navigationItem.leftBarButtonItem = self.navigationItem.backBarButtonItem;

对我有用。我使用这个当我有更多的标签，然后可以在标签栏上，和一个视图控制器从“更多”推覆leftBarButtonItem在它的viewDidLoad。

小开

以下是我在搜索了所有这些解决方案和其他解决方案后最终所做的事情。它使用了一个可拉伸的png的提取UIKit库存图像。通过这种方式，您可以将文本设置为您喜欢的任何内容

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

试试这个。我相信你不需要一个后退按钮图像来创建这样一个。

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

这就是你所要做的:)

小开

我有一个类似的问题，并拿出一个库PButton。示例是类似于后退导航按钮的按钮，它可以像自定义按钮一样在任何地方使用。

像这样: enter image description here

小开

enter image description here

首先，你必须找到后退按钮的图像。我使用了一个叫做器的不错的应用程序，它可以从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];
小开

在Xcode 5.倍中使用< em > Interface Builder < / em >很容易做到

Result

  • 使用工具栏和栏按钮从< em > < / em >对象库

    Components

    .

  • 在按钮的< em >属性检查器< / em >编辑图像部分 你的返回按钮图像

    Attributes inspector

完成了!

小开

制作一个带有箭头的UIButton(我不是设计师;)，非常接近iOS 7系统的后退箭头:

标准:

标准系统后退箭头

Apple SD Gothic Neo

Apple SD哥特Neo <性格”></p> <p>在Xcode中:</p> <ul> <li>关注按钮的标题值字段(或任何其他带有文本内容的视图/控件)</li> <li>打开编辑->特殊字符</li> <li>选择括号组，双击'<'字符</li> <li>更改字体为:Apple SD哥特式Neo，常规与所需的大小(例如20)</li> <li>随你喜欢改变颜色</li> </ul> <p>在iOS 7上，Ref <a href=@staticVoidMan的回答到backlike箭头

小开

解决方案不使用png。基于这个SO答案:在iPhone tableviewcell的单元格右侧添加小箭头

只是水平翻转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];
小开

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

小开

Swift 3中的例子，右上方有一个previous和next按钮。

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
小开

Swift 5.2 Xcode 11.4

Apple Symbol chevron.left现在允许一个更优雅的解决方案来制作一个自定义按钮。我已经尽可能地匹配了大小和间距。

enter image description here

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

如果你想翻转按钮，让箭头指向右侧:

enter image description here

使用Apple Symbol “chevron.right”

将以下代码添加到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)

提交答案