Hi, Alex here from rebeloper.com and in this series I will teach you how to
use MBProgressHUD, so without further ado let's get started.
Okay, now what is MBProgress? Now if you are using iOS apps at all then you might
have progresses inside your app and then you need to show a little progress hud
for the user in order not to well go and terminate the background or together.
So for that to using progress huds the best way is to well use someone else's work
from Github and that is MBProgressHUD of a very very fine-tuned top quality Github
repo. So in this video in this first episode I will just show you what
MBProgressHUD can do and then we will just simply create a new project and I
will just import MBProgressHUD through Cocoapods and we are going to create
this project because I will go into detail of every little aspect of
MBProgressHUD all the properties all the methods and you will get to learn in
these series. So let's go ahead and take a look at MBProgressHUD, so go open up
your favorite browser and type in and maybe type in github and the first
one should appear from the 'jdg' and let me just click on there and here
we are inside MBProgressHUD, as you can see there are a lot of stars and lots of
watches top quality GitHub repo for iOS apps.
Now let's just scroll down and let's take a look at a few images here and if you
just go down there you will see that you can install
via Cocoapods cartridge stores files we will use Cocoapods
but what I want to show you is the usage as you can see this is an Objective-C
library and the usage and the example that you will see just a minute is
written in objective-c. Now we will dive into MBProgressHUD in Swift you will be
able to quickly learn how to use MBProgressHUD inside your swift iOS
apps okay now what I want you to do now well let's first of all clone our this
MBProgressHUD repo in our desktop so I will just simply click on open in
Xcode. Okay that will verify MBProgressHUD and now well the default folder is
documents but I will just go ahead and put it in my desktop under GitHub clones
okay let's clone it and we are inside well the MBProgressHUD readme
file this is just a little bit weirder than original
what we are used to inside our Xcode file. So here we have our MBProgressHUD.
We will not take a look at this at the moment instead as you can see of course
this MBProgressHUD is for a TV apps as well Apple TV apps as well so
let's take a look at that demo okay here we have our AppDelegate and as you can see
these are .h and .m files because they are all written in Objective C this example
demo is written in Objective C and here is our view controller and the .m file
according and here we have our examples. We will take a look at how to write
these examples in detail in later videos, okay
and of course we have our resources, info.plist file,
our UI and an image assets we have a checkmark that we will
use as a custom view well we will talk about this in later videos when we get
to those types of progress hud's okay for now let us just choose our hud demo
and don't be fooled by the indicator here this is the actual app icon I just
got a little confused at first but go ahead and this is not doing anything in
the background it's just the app icon of the hud demo so I just choose iPhoneX
and let us just a build and see how the examples are laid out and let me show
you some of them in this video.
Okay here we go it is loading up and as you can see we have a table view well a
navigation bar up here and a table view with, well I accidentally tapped on that
with sections okay let's go over them one by one so you may get accustomed to
the huge power MBProgressHUD can give you. So here we have an intermediate
boat of course I would not go into detail in this video I'm just going to
show you what this does okay here we have a simple progress spinner going and
now we have with label just loading the stuff a lot of examples out there and
here we have a second detail label let me just show you again loading and
parsing data and of course you can see that the detail label, details label is
longer than one line and that is taken care of MBProgressivHUD it wraps a
longer text into lines okay now we have, here we have a determinate mode a cool
animation it is loading something annular
determinate mode really cool animations we will dive into them later on and here
we have of course our bar loading and here's an interesting one that are
really alike this is the text only it displays a message text down below of
course you can set the, well where the text message should be
displayed okay here we have a custom view ok the custom view is the check
mark and you can add different custom views of course and here we have With
Action Button of course we can cancel it and of course we may wait for the
loading to proceed okay next up we have a mode switching now this is interesting
because if you have more than one well let's say actions or tasks during that
time that you want to present the progress hud and maybe add a success
progress hud at the end then you can use mode switching we will
dive into how to create this later on, so we are preparing now we are loading and
once the loading is finished then we are cleaning up and it write right here
completed. This is very very useful and quite good for the user experience if we
have of course long taking tasks. Now here we have an on window this is
presented on the window we will dive in later on and NSURL Session where
preparing and completed Determinate with NSProgress of course we can cancel this
out if we want. Now we can also dim the background and this is just a light
version I don't know if you can see this let me show you again it kind of dimmed
the background we have a dark mode too, well not we MBProgressHUD
has and of course we can color the hud with any color that we want and that
is all of course there are many other use cases that we will dive on in the
next videos but as you can see there's a lot of options and a lot of potential in
using MBProgressHUD. Now next up in the second part of the video
we are going to create a new project and we are going to install MBProgressHUD
to our project via Cocoapods. Now let's just close this and let me just create
file new and a new project, okay. It will be a single view application let's click on
next and I will type this ... and the language will be swift and let's click
on next. Okay, I will just drop it onto the desktop
here and I will create a git repository because you will be able to take a look
at the code on my GitHub account, okay. Let's create it and here we go. Let's add
our source control, let's create a remote here, create MBProgressHUD swift
remote on GitHub I will just use my Rebeloper account it will be a public
now let's create this this is basic GitHub stuff that you need to set up if
you want to use GitHub in your project and I highly recommend it go ahead and
take a look at my GitHub educational videos it's a whole playlist with pushes
and pulls and how to use GitHub so go and check that out if you don't know
what I'm doing right now, okay. Now next step is well next step is that we want to close
this project because we want to add a Cocoapod so we need to use the Cocoapod
way so for now let's just open our project let's navigate
to our project here it is MBProgressHUD Swift and now let's open
up terminal so Terminal here and let's type in CD and a space and drag
and drop MBProgressHUD Swift and let's just hit return there and now
let's type in pod init so we may create our pod file okay.
It is our pod file it has been created. These pod file creation of course I do
have another playlist here go ahed and check that out if you want to
find out what I'm actually doing here okay. Here we have our pod file open inside
our Xcode and we just comment this out and well iOS 9 is okay, MBProgressHUD
supports I believe even lower than iOS 7 versions so this is really good
stuff and now let's just go back to Chrome and take a look what we need to
add inside, well here we have MBProgressHUD and a version number and we will just
simply copy this out and paste it inside our pod file and maybe save it either
way when you close it it should be save but better be on the good side so next
up we type in pod install and this will install our project
well the pod into our project, okay and that is it from now on let's open up
finder from now on we will use the xcworkspace and let's open this up and as
you can see here we have our pods our pod file and our MBProgressHUD installed
inside our code and of course here we have our MBProgressHUD swift basic
swift app delegate and view controller okay and of course we have our main
storyboard which we will get read of in the next video where we will set
up the UI for all of these examples so hope you enjoyed this video and I hope
you will use MBProgressHUD in Swift if you will use it in swift go
ahead and take a look at my next videos where we will dive deeper into
MBProgressHUD and in the next one I will just simply create the user interface
for this example Swift project that we'll use MBProgressHUD so go ahead and
give it a thumbs up for this video if you liked it and of course subscribe to
the channel if you haven't already done so
but maybe share it with your friends go ahead and take a look at rebeloper.com
for more of my stuff and as usual I will see you in the next one