Next/Previous Keyboard Toolbar iOS7

Question

Currently, I am trying to set the next/previous buttons on my keyboard toolbar to the new, sleek iOS 7 back button/forward buttons that get put in navigation controllers to go back. Here is what I am trying. How can I use the system bar button item instead of the boring static text?

[self setToolbar:[[UIToolbar alloc] initWithFrame:self.frame]];         [self.toolbar setBarStyle:UIBarStyleDefault];         [self.toolbar setAutoresizingMask:(UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleRightMargin | UIViewAutoresizingFlexibleWidth)];         [self addSubview:self.toolbar];          [self setSegmentedControl:[[UISegmentedControl alloc] initWithItems:@[ NSLocalizedStringFromTable(@"Previous", @"BSKeyboardControls", @"Previous button title."),                                                                                NSLocalizedStringFromTable(@"Next", @"BSKeyboardControls", @"Next button title.") ]]]; 

Here is what it looks like now:

Here is what I want it to look like:

Any ideas on how to access those system items without actually using images? I know its the exact iOS 7 back bar button item, I just don't know how to access it in a tool bar. I've searched everywhere. If it helps, i'm using BSKeyboardControls.

EDIT: To make it look exactly like the second image, use the images provided by Joshua, and save them as [email protected], and [email protected] into your xcode proj. Use Chun's code, but make sure to call the method for getting the images like this: imageNamed:@"back", and not @"back@2x". You now have iOS 7 back and forward buttons :)

EDIT2: To get it to look exactly like the next/previous arrow buttons use the following customizations in the correct implementation methods:

[self.segmentedControl setWidth:50 forSegmentAtIndex:0]; [self.segmentedControl setWidth:38 forSegmentAtIndex:1];  negativeSeparator.width = -19; 

EDIT3: The toolbar with the < > arrows comes by default with all UIWebViews, and it appears when you tap a textfield.

If anyone is interested in a sample project, let me know, and i'll upload a link!

EDIT4: As of May 24, 2014, BSKeyboardControls now has this functionality by default.

Answer 1

These are the images used in toolbar, e.g. the back and forward button images:

Answer 2

Use the icons shared by Joshua and then try with below piece of code and you will be good to go. I have not added the done button here.

UIImage *backImage = [[UIImage imageNamed:@"backImage"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]; UIImage *forwardImage = [[UIImage imageNamed:@"forward"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]; self.segmentedControl = [[UISegmentedControl alloc] initWithItems:@[backImage, forwardImage]]; [self.segmentedControl addTarget:self action:@selector(segmentedControlChangedState:) forControlEvents:UIControlEventValueChanged]; self.segmentedControl.segmentedControlStyle = UISegmentedControlStyleBar; self.segmentedControl.tintColor = [UIColor clearColor]; UIBarButtonItem *aSegmentedControlBarButtonItem = [[UIBarButtonItem alloc] initWithCustomView:self.segmentedControl]; [self setItems:@[aSegmentedControlBarButtonItem, self.flexibleSpace]];