Implementing a Custom Back Button in Swift


I’ve recently been working on a personal project and the past week has mostly been focused on design. I finally decided on a color scheme, downloaded some cool fonts, and made the app look a lot cleaner than the mess I had before. During this process, I noticed that the back button on my navigation bar didn’t look great — the standard Apple blue just didn’t mesh well with my design scheme. I knew it was possible to change that button but what was supposed to be a simple design fix turned into a harrowing journey. Let me just state: the way to do this is actually very simple, I just overcomplicated it. So I’m going to walk through how to do it and offer some tips along the way so you can avoid unnecessarily raising your blood pressure.

Selecting Your Image

What I thought was going to be the easiest part turned out to be the thing that tripped me up the most. I had found a button online that I liked but the color just wasn’t right. So I put it into Figma, changed the color, and exported it into Xcode. As it turns out, the sizing was all off so every time I wrote the code to set that image as the back button, it was huge, the standard Apple blue, and pretty much off the screen. I spent hours searching Stack Overflow and Google, thinking that it was the code that was wrong (there are a lot of solutions out there!). As I came to find out much later, the problem was that my image was the wrong size!
So my recommendation is to go to a website like icons8 or flaticon and find an image that you like. On flaticon, you can even change the color on a lot of them to a custom color (which is what I ended up doing) and then just download it as a png. In my case, I went with this simple back arrow and changed the color to the brown I am using throughout my app:

Setting the Back Button

Now that you have the correct image and it is the correct size, you can drag and drop it into the Assets folder of your project and set the name to something simple, like “back.”
In my case, I have several navigation controllers across several view controllers and I want them all to have the same custom back button. I thought it would be a pain to do the custom back button in each separate file but as luck would have it, you can do a lot of customization (navigation bars, navigation items, segmented controls, etc) for your app in the AppDelegate!
First, I set a constant for the appearance of the bar button item:
All this does is make it easy to customize and change the appearance of UIBarButtonItems. It also saves you from having to type out “UIBarButtonItem.appearance()” multiple times if you have several things you want to customize.
Next, in the didFinishLaunchingWithOptions method, I declared a constant for the button image and set that image equal to the back button:
So first, I declared the constant and set it equal to my image. I then modified the image a little bit so that it would look right as the back button. You might need to mess around with this a little bit but I found that those numbers worked pretty well for me. Finally, I used the setBackButtonBackgroundImage to the constant I made earlier. And voila! I have a custom back button throughout my app:

Custom Text

As you can see, I also did away with any text that would normally appear like “back” or the name of the previous view controller. I tried to find a way to do that in the AppDelegate as well but nothing I did worked. Instead, I implemented the code below in each of my segues:
In my research on this, I found an interesting tidbit — the navigation item technically belongs to the parent view controller (the one that the segue comes from). So in order to set the title for the back button, you need to do so in the prepareForSegue method of the parent view controller. The code is pretty simple: declare a constant for a bar button, set the title as a blank string, and set that constant equal to the backBarButtonItem on the navigation item. It can be a little tedious to do this for each segue in your application, but copy and paste is a heck of a helper and in the end, it is worth it to have your app looking the way you want it.
I hope you found this helpful and if anyone has any other suggestions or ways to do this, I’d love to know!
origin: https://medium.com/

Comments

Post a Comment

Most popular posts

Image

Using Realm Mobile Database with Swift 4.0 (Insert, Update, Delete, List)

A big problem that many developers face now a days is dealing with database. To have your app in app store in top list is not quite easy and to make the app ready for scalability is pretty hard. When our app is reached to many users, say a million, we have to care about everything in the app from performance to scalability. As far as I see till date developers have only two options “SQLite” and “Core Data”. Though both have a lot of advantages over each, I love to work with “Core Data” because of ease of dealing with records and persisting data and also due to the native advantages of “Core Data”. Very Recently I started using Realm that can be considered as a perfect replacement for “SQLite” and “Core Data”. What is Realm? Realm, it’s a cross platform mobile database for iOS and Android and designed specifically for mobile applications. It is available in both Swift and Objective-C. It is framed to be faster and better than SQLite and CoreData. With just f...
Image

Chronometer Tutorial With Example In Android Studio

In Android,  Chronometer  is a class that implements a simple timer. Chronometer is a subclass of  TextView . This class helps us to add a timer in our app. You can give Timer start time in the elapsedRealTime() timebase and it start counting from that. If we don’t give base time then it will use the time at which time we call start() method. By default a chronometer displays the current timer value in the form of MM:SS or H:MM:SS. We can set our own format into an arbitrary string. Chronometer code in  XML : <Chronometer android:id = "@+id/simpleChronometer" android:layout_width = "wrap_content" android:layout_height = "wrap_content" /> Table Of Contents  [ hide ] 1  Methods Of Chronometer In Android: 2  Attributes of Chronometer In Android: 3  Chronometer Example in Android Studio: Methods Of Chronometer In Android: Let’s discuss some important methods of chronometer that may be calle...
Image

WKWebView advanced tutorial (catch JS events, access properties etc...) (Swift)

Introduction I have never been a fan of cross-platform, HTML based iOS and Android frameworks (PhoneGap, Cordova). They always seem to lag behind in features and responsiveness, and that’s a compromise I’m rarely willing to take. However, sometimes you can’t avoid embedding HTML and JavaScript into your project. In those situations, iOS uses the  WKWebView  component for loading and displaying web pages embedded within the application.  WKWebView  is based on Safari browser and uses  webkit  so it’s speed and responsiveness are on par with the latest and greatest of the mobile browser world. In this tutorial, I’ll show how to: Embed a  WKWebView inside of your iOS Universal App Load an HTML webpage via URL Perform an action on the  WKWebView  html via JavaScript as a result of native controll action Respond to JavaScript events from your native application Access JavaScript variables from your native application Preparation ...

How to adjust image content mode using aspect fill, aspect fit and scaling

All views (including those that don't hold images) have a content mode that affects the way they draw their content. The default is  Scale To Fill  because it's fastest: the contents of the view just get stretched up (or down) to fit the space available. But there are two others that you'll be using a lot: Aspect Fit and Aspect Fill. "Aspect Fit" means "stretch this image up as large as it can go, but make sure that all the image is visible while keeping its original aspect ratio." This is useful when you want an image to be as large as possible without stretching its proportions, and it's probably the most commonly used content mode. "Aspect Fit" means "stretch this image up as large as it can go, cropping off any parts that don't fit while keeping its original aspect ratio." This is useful when you want an image to fill its image view, even when that means losing either the horizontal or vertical edges. If you want to f...

How to clear all activity stack in Android

Method 1 In API level 11 or greater, use  FLAG_ACTIVITY_CLEAR_TASK  and  FLAG_ACTIVITY_NEW_TASK  flag on Intent to clear all the activity stack. Intent i = new Intent(OldActivity. this , NewActivity. class ); // set the new task and clear flags i.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK | Intent.FLAG_ACTIVITY_CLEAR_TASK) startActivity(i); FLAG_ACTIVITY_NEW_TASK If set, this activity will become the start of a new task on this history stack. A task (from the activity that started it to the next task activity) defines an atomic group of activities that the user can move to. Tasks can be moved to the foreground and background; all of the activities inside of a particular task always remain in the same order. See Tasks and Back Stack for more information about tasks. This flag is generally used by activities that want to present a "launcher" style behavior: they give the user a list of separate things that can be done, which otherwise run comp...
Image

From Swift to Javascript and Back

’s been added to the  JSVirtualMachine  using  addManagedReference:withOwner  method and has not been removed using the  removeManagedReference:withOwner  method. Otherwise, the  JSManagedValue  gets set to nil, releasing the  JSValue , and is free to be garbage-collected on the JavaScript side. JSExport A  JSValue  can represent and convert all of the JavaScript builtin types to Objective C/Swift and can convert them in the other direction to JavaScript types. However, a  JSValue  can’t convert Objective C/Swift classes to JavaScript objects without help. The  JSExport  protocol provides a way to convert Swift/Objective C classes and their underlying instance methods, class functions, and properties into JavaScript objects. By default when using  JSValues ,  JavascriptCore  will convert a Swift/Objective C class into JavaScript object but will not populate instance methods, class function...
Image

How To: Map, Reduce and Filter in Swift

Written by  Reinder de Vries  on May 3 2017 in  App Development The Swift programming functions Map, Reduce and Filter can be challenging to wrap your head around. Especially, if you’ve always written for-loops to solve iteration problems! The Map, Reduce and Filter functions come from the realm of  functional programming . In Swift, you can use Map, Reduce and Filter to loop over collection types like  Array  and  Dictionary  without using a for-loop. When building apps you typically use the  procedural  or  object-oriented  way of programming. Functional programming is different: it only deals with functions. No variables, no “states”, no for-loops – just functions. The Swift programming language lends itself perfectly for functional programming. You don’t need to strictly write functional code though, simply adopting concepts from functional programming (like Map, Reduce and Filter) can help you learn how to code ...
Image

Extension functions in Kotlin: Extend the Android Framework (KAD 08)

Extension functions are a really cool  feature that Kotlin provides , and that you’ll find yourself using a lot when writing Android Apps. We have to admit that  the Android Framework sometimes makes things a bit difficult , and in Java the only solution we have left is to create wrappers that do things like we want, or utility clases with static methods that are not the best in terms of readability. How would you like to be able to add extra functions to the Framework classes? This is what the Kotlin extension functions allow us to do. Extension functions in Kotlin Extension functions are functions that, as the name implies,  help us to extend the functionality of classes without having to touch their code . Now let’s see how these functions are defined, and some examples that I personally find very useful. How can you define an extension function? Just write a function as you would normally, and put the name of the class before separated by a point. Th...
Image

SQL injection in Android content providers and how to be protected

If you are familiar with Android apps development, you have dealt with  components  for sure (although maybe you don’t know them with that name) and specifically, with  content providers . In this post, I am going to talk about how to use SQL injection to access data provided by this kind of components and how to be protected against this kind of attacks. But before, a bit of context to introduce the components of an Android app and content providers. What is a component in an Android app? An android app can contain several components with a specific aim and different lifecycle. These components, according to the official Android documentation, are entry points through which the system or a user can enter our app and help to define the general behaviour. The four components of an Android app are: Activities Services Content providers Broadcast receivers. Apart from the content providers, I am not going to explain in detail each component because I woul...