在UIToolbar创建一个左箭头按钮(如UINavigationBar的的“后退”的风格)在UIT

2019-05-09 03:23发布

我很想建立在一个“回”左箭头屏幕按钮UIToolbar

至于我可以告诉大家,让其中的一个唯一的办法是离开UINavigationController默认设置状态下,它使用一个用于左侧栏项目。 但是没有办法,我可以找到创造一个作为UIBarButtonItem ,所以我不能让一个在一个标准的UIToolbar ,尽管他们很相似, UINavigationBar秒。

我可以用手动按钮图像创建它,但我找不到任何地方的源图像。 他们有alpha通道的边缘,以免screenshotting和切割不会得到非常多才多艺的结果。

超越screenshotting每一个的大小和配色方案,我打算用什么想法?

更新:请停止回避问题,并建议我不应该要求这一点,应使用UINavigationBar 。 我的应用是Instapaper的专业版。 这表明只有底部的工具栏(以节省空间和最大化可读的内容区),我想提出一个左箭头形的后退按钮在底部。

告诉我,我不应该需要做的,这不是一个答案 ,当然不值得一赏金。

Answer 1:

我用下面的PSD,我从衍生http://www.teehanlax.com/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];


Answer 2:

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字符,你想要什么。 这里是进入向左的黑色三角 。

结果



Answer 3:

警告:有报道说,这将不会在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,不使用未记录的功能,和所有。 这里只有六种支持按钮类型,这是不是其中之一。



Answer 4:

首先,你必须要找到后退按钮的图像。 我用了一个很好的应用程序称为提取 ,提取从iPhone所有的图形。 在iOS7我设法取回称为图像UINavigationBarBackIndicatorDefault ,它是黑色的,因为我需要一个红色的色调我改变颜色为红色用瘸子。

编辑:

正如被提到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];


Answer 5:

我不知道这是否会工作,但你可以尝试建立一个UINavigationController默认设置来创建按钮,找到在导航控制器的子视图层次结构中的按钮,呼叫removeFromSuperview它,破坏导航控制器,然后添加按钮工具栏的子视图。 您可能还需要retain和呼叫前按钮removeFromSuperview (然后release将其添加为您的工具栏的子视图后话),以避免它的过程中被释放。



Answer 6:

为了使一个UIButton有一个箭头很接近(我不是一个设计师;)到了iOS 7系统后退箭头:

标准:

苹果SD哥特式新

在Xcode中:

  • 着眼于该按钮的标题字段值(或者与文本内容的任何其它视图/控制)
  • 打开编辑 - >特殊字符
  • 选择括号组,双击“<”字符
  • 更改字体:苹果SD哥特式新,定期与所需的尺寸(如20)
  • 改变颜色,只要你喜欢

参考@ staticVoidMan的回答到背箭一样在iOS上7



Answer 7:

如果你不想与图像文件打扰,箭头形状可以与下面的代码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的高度



Answer 8:

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

我的作品。 我用这个当我有多个选项卡,然后可以适应标签栏和视图控制器从“更多”推翻了leftBarButtonItem在其viewDidLoad中推进。



Answer 9:

您可以通过在UIKit的$ {} SDKROOT从/System/Library/Frameworks/UIKit.framework/Other.artwork提取Other.artwork他们找到源图像。 该插件社区对提取它们,有些工具在这里 。 一旦你提取图像,你可以写一些代码,根据需要进行重新着色,并设置为按钮图像。 无论你是否可以实际出货这样的事情(因为你嵌入了衍生作品)可能是有点冒险,所以也许你想与一名律师。



Answer 10:

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


Answer 11:

我发现,使用下面简单的代码的伎俩(需要捆绑自定义图像):

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


Answer 12:

下面是我最终通过所有这些解决方案和其他搜索后做什么。 它使用从UIKit的股票图像中提取的可伸缩PNG的。 这样,您就可以将文本设置为你liek什么

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


Answer 13:

这很容易在Xcode 5.x中界面生成器

  • 使用工具栏栏按钮项目对象库

  • 你的背部按钮图像按钮的属性检查器中编辑图片部分

完成!



Answer 14:

我试图做同样的事情,但我想后退按钮是在导航栏。 (其实我需要一个返回按钮,会做不仅仅是要回多,所以我只好用leftBarButtonItem属性)。 我试了一下安德鲁斯建议,但在导航栏也不会看它应该的方式,为的UIButton是种浇铸为的UIBarButtonItem。

但是,我发现了一个方法来解决这个问题。 其实,我只是把UIButton的下一个UIView并设置customView为的UIBarButtonItem。 下面是代码,如果有人需要它:

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


Answer 15:

要创建UIToolbar图像,使在Photoshop PNG何地有它把它白色的任何颜色,并在它的α= 0,那么它离开单干。

居然把SDK的周围,你所做的图标边界,把它白色的,您无需做任何事情。

看,这就是我在Photoshop中做了我的前进按钮(显然它掉周围的后退按钮):

http://twitpic.com/1oanv

而这也正是它似乎像在Interface Builder

http://twitpic.com/1oaoa



Answer 16:

解决方案,无需使用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];


Answer 17:

如果你想避免自己绘制它,你可以使用无证类:UINavigationButton风格1.这可能,当然,从停止你的申请被批准... /约翰·



Answer 18:

那么,你不必有不同的按钮,为各种规模,你可以使用[UIImage stretchableImageWithLeftCapWidth:topCapHeight:] ,但我发现的唯一的事情是自定义图像。



Answer 19:

我也有类似的问题,出来一个库PButton 。 和样品就像按钮后面的导航键,它可以在任何地方使用,就像一个自定义的按钮。

事情是这样的:



Answer 20:

实施例中夫特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]


Answer 21:

迅速

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


Answer 22:

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

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

这就是你需要做的:)



Answer 23:

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

工具栏具有与其相关的特定的视觉样式。 为iPhone状态人机界面指南:

工具栏显示在屏幕的底部边缘和包含执行在当前视图中的对象相关的动作的按钮。

然后,它给出了近似正方形的图标,没有文字几个视觉的例子。 我促请你遵循这个HIG。



文章来源: Creating a left-arrow button (like UINavigationBar's “back” style) on a UIToolbar