Hi, Alex here from rebeloper.com and welcome back to the channel and welcome
back to this awesome tutorial about alternate icons for your iOS apps.
So without further ado let's jump right into it.
WWDC is around the corner
and I have been thinking about their app and one awesome feature that it has it
is that you can altarnate between the app icons. If you already don't know what I'm
talking about go ahead and download the WWDC app from Apple and if you
open it like so and select your profile you will see that you can change your
app icon and the default is a light blue and let me just go into there and select
let's say our red one and it says you have changed the icon for WWDC and
let's step okay and let's minimize this and you will see that the WWDC
icon is now red indeed. And if we change it let's say for yellow you will see the
same effect, okay. Now we are going to build out that today. So let's see how
this looks like in our test app so let's build and run this and see that we have
only two icons here a blue and the red and if I just let me just minimize this
for now you can see the default icon is this bluish rebeloper and if we
tap on a red here it says you have changed icon for testing multiple icons.
Those are alternate icons of course and let's hit okay there and let's minimize
this and you can see that it is red and if we would go into selecting the blue
one we would have the blue one. So let's
build this out for today. As usual we are going to start off with
a brand new project. So let's go to file, new and project, okay. And I will name
this alternate icons and I will use my single view app then plate, go ahead and
click the links down below you will find how to create custom Xcode templates for
your development. So let's click on next here and I will type in alternate icons
here and I will use embed in navigation controller because I want to have that
as default. So let's click on next here and let me just create a github
repository on my Mac. So we will have this on my github account so you can
take a look at it later on, okay. Now let's resize this so you may
see how all over this looks in fullscreen. There we go, okay. Now what is
up next. Here we have our root view controller it's just a basic simple root
view controller. Now if you click the links down below you will see one that
you will have your resources in and if you download those resources you will
see that we have an icon blue and icon red, an info.plist keys which I will
talk about in just a little bit and a root view controller. Now this is just a
basic set up for a table view so let me just remove this. So let's delete and
move to trash and I just drag and drop this. Yeah, this is just basic setup I'm
just saving on time here and as you can see let's see what we have here
root view controller we have some icons it's just array of strings a cell reuse
ID and we have our title of our navigation controller. We are registering
table view cells, it's basic UITable view cells we
have two rows and here we are just dequeuing the use the reusable cells and
setting the text of our cells to the icons index path row or rather yet
we are getting this index path row from here. So what we are going to implement
is this table view did select row at index path and we are going to use this
set app icon named by private function, okay.
Now it's time to have that implementation and before we do that let
me just build and run just real quick and fast so we can see how this looks
like, okay. Build has succeeded, oh I don't want to run this on my iPhone or
rather I want to run this on iPhoneXR, okay. Let's just wait for that.
It should compile real fast. Build has succeeded. There we go. Blue, red it
doesn't do anything just yet and if we go outside we can see that eternity
icons has the default icon that we need to replace, okay.
First things first let's delete this from our asset catalog and let me just
select here remove selected items and since we did this let's go to our
info.plist or rather yet our general tab and here under app icons and launch images
you can see that app icon is missing. So we want to select don't use. Well as of
this version of Xcode it doesn't really make any changes but if you tap on let's
say non capabilities and go back to general you will see that indeed it has
changed to use asset catalog but we are not using any app icons source as our
asset catalog, okay. That is our first part. Now for the second part. We want to
create or rather you just drag and drop our app
icons but we are not going to add them to our assets catalog we are going to
create here a new group and I will call this app icons and go ahead and use the
one that I have provided or use your own this is just for testing purposes.
So I will just simply drag and drop those into that group that I have just created.
Now we want to make sure that copy items if needed is checked and of course create
groups is checked and of course the target is checked, okay.
Aleranate icons, ooh I just mistyped that, okay.
So let's finish there and sorry about the mistyped project name. So there we
are we have our two icons there, okay. Now the next thing we want to do is modify
our info.plist file. So these icons can be addressed in our code in Xcode.
So let's open up our info.plist keys a text edit here and I would just copy all of
this this is just for brevity and for you to use later on. So let's just open
our info.plist file as a source code and if you go to the top of the dictionary
let just copy and paste the one that you have in your resources and let's just go
back so you can see how all of this looks. So let's open as property list and
we have added this icon files iOS 5 and if we expand on that here we have our
primary icon and here we have our icons file and it is called icon blue. Now you
can change that to your primary icon and name and that
is here and if you go to CF bundle alternate icons you can see that we have
one icon red. Now you can add multiple ones if you wanted to like in the
WWDC app. We have only one for these testing purposes. Now if you expand on
that again we have icon already includes cross effects set to no and CF bundle
icon the files. Now here we have our item 0 as icon red. Now this is very
very simple. Of course building this out in as the
plist file with adding plus tapping on this plus or maybe minus buttons is
really hard and getting the names right is really hard so i highly encourage you
to copy and paste that resource that i have just gave you into the source code
and that will be much easier to handle later on. So you just need to let's say
copy this out and add a new alternate icon rather yet it's here. So this one
from the starting of the dictionary to the end of the dictionary or is it this
one yep it's this one. Icon red. So let's see if we wanted to add an icon
yellow we could do that again well this what you want to copy and
paste again, okay. Now it's time for the coding part. So let's go to our root view
controller and here in our table view did select row add and set app icon is
where we are going to work. Now the two functions that we are going to learn
today are supports alternate icons and set alternate icon and name.
So the first thing you want to check if our application does support alternate icons
and that I believe is handled by the iOS. So let's just type in here, I just move
this little bit further up. So if UIApplication dot shared supports
alternate icons then we are going to of course go further else we are going to
just print out and now let's just grab our row as usual. Let row equals and that
is index path dot row and now let's have a switch statement here. So switch
row and case zero and let's see here, let's add in here case one and a default value,
default there we go, okay. So case one for the case one that means
that we are going to use the blue icon and that is the default one and for that
we are going to type in UI application dot shared and just type in set
alternate icon name and let's just use this one and to have the default
icon we just need to set this string to nil.
Okay and the completion handler we don't need a completion handle in this case.
Okay! So that is for setting the default app icon. Now what if we wanted to set of
course the red icon it is pretty straightforward
again UI application dot shared and set alternate icon name and name will be
icon red. So I can red, okay and for the completion handle will we have an
error and let's handle that error. If let error equals error then we just want to
print out the errors localized description there we go.
Else let's just print out done and that will work for changing to the alternate
icon of course in other cases if you want to add more than you just add in
this alternate icon name function and we are just going to simplify this
with file private set app icon named function. But we still need to handle the
default value so let's just go and copy the default setting of set alternate icon
name to nil, okay. And that will just simply handle all of this. So let's build
and run and see how this looks and how actually it works, okay. There we go and
let's tap on a red and as you can see you have changed the icon for alernateIcons
again sorry for the typo of there. Let's see that indeed it has done
printed in the console log. Let's see their alternate icons that is red.
Pretty sweet, okay and again let's see how this will change back to the default blue.
There we go and it is a blue. Now let's refactor our code so it will look
much prettier. So let's just change this so let's hit command X there to copy and
paste it in there and now on let's use set app icon and let me just change this
to set app icon named and nil will be here. Set app icon named and it will
be icon red. So again let's copy this out and paste it in there and
let's add in here named.There we go and set app icon to nil for the default
is what we want, okay. And that will do just the same thing. Now that is it for
today. I hope you enjoyed this one if you did go ahead and give it a thumbs up,
subscribe to the channel and hit that notification bell to get notified of new
videos as they do come out. Now it is your turn go ahead and add alternate icons to
your own apps and as usual I will see you in the next one.