Hi Alex here from rebeloper.com and in this video I will teach you how you can
create a UIView with rating stars in them. So without further ado let's get to work!
Let me show you what we are going to build out with a hands-on example. I have
been working on this See It Buddy app for a while now and what it basically does is
download images and displays them on a slideshow but it's much more than that
of course. Go ahead if you're watching this in the future then find it on the
App Store. So what we are going to build out is something like this, as you can
see there is a rating as a UIView that has stars in it and you can write on it.
Of course out here you cannot rate, so it is the rating is
disabled. If I just click inside the view then I can rate it. So let's rate it
again. Let's see, as you can see I can rate it 1 star 2 and so on four stars.
Okay, and of course this is handled by the firebase and it
is fetched back here. So now as you can see it has been updated to four stars.
Now this is a real live apps example. What we are going to build out today is
a little bit different and let me just start off this example Cosmos testing
and don't peak here we have our example code. Let's see is it running? Yes it is.
It is building, so I'm going to show you what we are going
to build out today. It's a simple example that you can add into your own project.
So here we are... here we have 10 stars. a rate me button and of course you can rate
to whatever you would like. And as you can see if you just look real close we
can even have this half stars. Not the same as the other example but I will
teach you on this too. So let's start off with a brand new project. Okay, let's go
back to Xcode here let's minimize this and under file, new let's create a new
project. Okay let me just resize this so it makes it really nice and it would be
a Single View Application. Let's click on next and I will name this Cosmos Rating
Tutorial because we are going to use the Cosmos Github repository for this
tutorial. Now let's click on next and I will
create a Github repository that you can check that later on and you can download it.
Go ahead everything is down in the description just click the link
below. So I just drop this into the desktop let's create it. There we go!
Now first thing first let's delete our Main.storyboard here, move to trash and
let's delete the Main Interface here pretty simple stuff if you are
accustomed to my tutorials. Next up we add our window here.
window = UIWindow. Let me just make this a little more bigger... YouTube the dark...Great!
It is a UIWindow( ) and now let's make this window key and visible
so .makeKeyAndVisible( ). Let's instantiate our ViewController and we will use the
basic ViewController that Xcode has created. We will work inside them and
let's add our ViewController to the window?.rootViewController. So that's
like that. Great! We have done this a thousand times you know how it works so
next up let's add our views background color. Let's set it to white
because as default it is set to black. Okay, that's it for our basic setup.
Now what we want to add our Cosmos Github repository and we want to add a
label but I want to constrain it to the center
so we will use tiny constraints. Now these two are added to this project as
pod. So let's close this off and let it go and create our Cocoapods. So here we
have our CosmosRatingTutorial. Great, and let's open up terminal. Let me make
this real big. Let's add some huge fonts here and resize this. Great! Now, let's cd
the into our project. So that basically what it does it goes to that project
root folder. And let's type in pod init as usual to create a pod file.
Next up and I will just drag and drop our pod file into the icon of Xcode and add it
in this file. First of all let the platform be of iOS 9 and
next up I will add two pots. So far the number one is Cosmos and pot number two is
TinyConstraints. Now we should close this it is automatically saved and now
to install the pods we will simply type in pod install. Great!
Now let's wait for it. It is installed in Cosmos. It is installing TinyConstraints.
Good for us! Now let's wait for it and let us just open our finder and you will
see that a new Xcode workspace will be created. And indeed it has been created
here. So here it is and from now on we need to open this up because we are
using Cocoapods. Okay, let us just resize this window again
and now let's see what we have got here. First of all let's build our project because
as of today the TinyConstraints has a little update issue it hasn't been
updated to a swift 4.2 yet but it has only just one tiny little error
here. So UILayoutConstraintAxis will be u NSLayoutConstraintAxis so
let's fix that. Let's unlock the file so most probably you will not get this
error and in the meantime let's update our project to the recommended settings.
Great! As you can see here we have our Cosmos and TinyConstraints inside our
pods project. So let's go back to our ViewController and import these two.
import Cosmos, there we have it. And let's import tiny.... and let us just delete
this and hit command+B again so Xcode may realize that TinyConstraints is
indeed there. So import and here we have it TinyConstraints. Great!
Next up I want to create a simple CosmosView so lazy var... and I will just for now
create a simple basic CosmosView...
Next up what we want to do is add this CosmosView to our ViewControllers view
so pretty great stuff... and now comes the real fun part anchoring and constraining
this view to the center. And it is pretty simple with TinyConstraints.
So centerInSuperview wasn't that easy. Let's build and run with command+R and see how
this looks. Great! Here we go we have five stars three of
them are full, two of them are empty. Let me just
drag this here. Now let's just tap here and as you can see you can already fill
out the stars as much as you'd like. Now how can you let's say disable?
Because sometimes you just only want to show how many stars let's say a song has.
So to do that let's go back into our word CosmosView and type in view. and it
has something called like settings and here we have I believe it is
updateOnTouch and if we set this to false because it is set to true
by default you will not be able to let's say a set the rating. It is just for
displaying purposes. So let me just try no way. Okay!
Now, let's uncomment this because that's just something that marginally used.
What we want to do next is customize this rating view or cosmosView. Let's call it a
CosmosView. It's a rating view you but that's the repositorie's name.
Let's go into view and here we will have an... I believe it is settings and empty image
and filled image. So we want to add let's say a filled image first and that will be
of type UIImage and I will call upon this named and let us just add our images.
Now you can download these resources from the links below. Okay, and I will just
drag and drop it here it is. It is simple rating star field and rating star empty
there you go. So I will just
copy the name over this image and go back to our ViewController and simply
paste it in there. And it will be with a renderingMode.alwaysOriginal and
that basically it says that UIImage
should be presented as original and it should be presented always as original.
There's another one alwaysTemplate that you can apply some colors to it.
Another one is view.settings.emptyImage. Okay, this will be a UIImage again.
And it will be named you guessed it? It will be named RatingStarEmpty and of
course again this will be withRenderingMode(.alwaysOriginal). Okay!
Let's build and run our project now and see how the customization has changed.
Okay, here we go great we have our work field starts and
we have our empty stars. And of course because we have commented out that
updateOnTouch we can now update our rating. Great! Now what is up next? Well
you could add let's say we want to have10 stars. Now let's go into view and
settings and type in .totalStar.s Yeah, that's it. And now let's add this to 10
Okay, that would be 10 I will not make this run again. So let's take a look
at some other settings and you can see here our starSize. Now we can make
it as large as we want. I will make this 17. This is the height of the star.
Next up I want to set under settings the starMargin. Okay and that
is the distance between each stars 3.3 is okay by me.
Let's build and run and see how our rating view comes along. Okay we have
10 stars and 3 of them are full. Okay, next up we want to set
our fill mode. Now the fill mode can be like setting the stars fully or by
percentage. So let's go here and type in view.settings.fillMode and that would
be of type and let's wait for it. I believe it is full. Great! Okay, now
next up and this will conclude our tutorial we want to add some text. Okay...
Now next up I want to add a text color. I need to type in .settings and
text. You could add a text font I will not change this at this time I will add
a textColor and that will be a .red color. Okay, and I will set the
view.settings.textMargin to be let's say 10 because it is 5 by default. Now this is
the distance between the stars and the text. Okay, and let's build and run one
final time and see what we have got. Okay, here we have our star sizes and the
margins between the sizes and the rate meet text. Okay!
Now you can rate it. Great now one thing that you should know is to fetch what we
have actually rated and that is fairly simple
inside the viewDidLoad just type in simple cosmosView.didTouchCosmos
and here we have a rating and here we go.
And let's just print out rated and the rating. Great! Now let's build and run
again and see this in our log. First of all let me just drag this up and see
how we rate it. Okay, here we have rated seven six nine and so on. Okay, now if we
want to have not full mode let me just jump to our definition you can see we
have full half and precise. So I want precise. Okay, and let's paste that in
there and let's see again. Okay, here we go this precise, okay. Great stuff!
And that is how you can create a rating UIview in your apps. Okay, now it's your
turn! Do you have or are you planning to have
any apps that implement a rating system like this? Like do you give five stars or
ten stars to whatever you'd like. If you do go ahead and comment down below in
the comment section and, if you liked this video give it a thumbs up and
of course subscribe to see more and hit that notification bell to be notified
first when I upload a new videos. I regularly upload so you can learn more
about these awesome iOS Github repositories.
And as always I will see you in the next line