Forward Navigation Arrow Button With Text in iOS - ios

Question

I would like to know how to place a right navigation arrow button on the navigation bar, and display it with text, just like it is the Apple Music and Apple Podcast apps:

Answer 1

So, as Sen briefly described, you want to drag a UIView into your navigation bar in your UIViewController in Xcode's storyboard (it will automatically get wrapped into a Navigation Bar Item when you drag it in). Then, change the UIView's class to UIControl (this will allow you to put a tap gesture recognizer in it later, but it acts like a UIView for now).
Now add two things to the view (control): UILabel and UIImageView. Type whatever you want into the label and give it the desired size, etc. Now, for the UIImageView, you'll have to drag the arrow image (link below) into your project in Xcode. You can literally just download the image, drag it onto the project source code explorer panel in Xcode, make sure that the option for copying the image in if needed is checked, and then click "OK".
Now, click on your UIImageView in the storyboard and choose the image you just dragged into Xcode as the UIImageView's image (it's name should appear automatically in the drop down box if you dragged the image into Xcode correctly; and the image drop down box can be found on the right side panel in Xcode if you have the UIImageView selected in the storyboard). In order to make the arrow look like Apple's, set it's size to about 35 x 35.
Now, all you need to do is drag a Tap Gesture Recognizer onto your UIControl, and then control+drag from the tap gesture (which is in your storyboard document outline) into your view controller's source code. This will make a method in which you can add code to segue. For example:
- (IBAction)forwardButtonClicked:(id)sender {
[self.navigationController pushViewController:self.someViewController animated:YES];
}
Now it's all hooked up!
Hope this isn't too confusing. Let me know if you have any questions.
Here's the link to the image: https://www.iconfinder.com/icons/211688/arrow_forward_icon#size=512 (You can just download it as a .png with the button at the bottom of the web page).
In order to make it blue like Apple's back arrow, I did the following:
I opened the downloaded image in a photo editor (such as GIMP)
I took a screen shot of Apple's default back button arrow (use cmd+shift+4 to take a screen shot while the simulator is open).
I opened the screen shot in the photo editor.
I used the color selector tool and chose the color of Apple's arrow.
I used the paint bucket and filled in the color of my arrow image.
I exported my blue arrow image as a .png (and now you can just drag this .png into Xcode like I mentioned before).