Hi, Alex here from rebeloper.com and welcome back to the channel and welcome to this
first episode on this series about SwiftUI in UIKit you heard that right
SwiftUI in UIKit with the help of a DuckUI. So without further
ado let's jump right into it.
Okay everybody. So SwiftUI in UIKit you
already know that you can have UIKit in SwiftUI but can you have SwiftUI in UIKit?
Well you kind of can because I am building and I will be constantly
building this framework out and it is cold DuckUI. Now go ahead and take
a look at it on my github repository and all of the resources can be found
down below in the description. You just click the link and you will be taken to
our YouTube resources page, okay. Now what is a DuckUI?
Well basically is swifty white for UIKit and in this series I will dive deep
into explaining how you can use it and why you should use it and why it's this
much faster than regular UIKit components and well building all of
those components out and much, much more. So stay tuned, subscribe to the channel
and hit a notification bell to see more videos on your feed as they do come out
because there will be many. So DuckUI. Why it can be installed via a cocoa pod
and today we are just going to install it and take a look at one of the most
important elements of DuckUI and that is the D view controller. So let's
see, there we go. Here you can see if you take a look at
this is my development pod by the way and here we have our D underscore view
controller from now I would just say D you can
roller or D style or the type elias and so on. So these were Duck if you haven't
noticed already. So let me just create a brand new project and let's see I will
choose a single view application. Yeah if you don't know how to create your custom
Xcode templates go ahead and click the links down below you can see how you can
do that. I will name this SwiftUI in UIKit wait DuckUI. A lot UI
there but it is a SeitftUI in UIKit with DuckUI it's kind of
counter camelcase there, okay. And yeah I will embed this in a navigation
controller or not embed this because we will take a look at a simple view
controller and we will talk about a safe area layout guid. So let's click on
next here and I will just drop it where will I drop it on my youtube video, there
we go. Under code I will create a git
repository so you can take a look at it later down the line on github. So let's
create that. There we go. First of all let's close this because we
want to install a cocoa pod there. So let's close this. Hit command let me just
find terminal real quick and navigate to our projects root folder and that is
this one. So type in CD under space as usual drag and drop the root folder hit
return type in pod init and the pod file will be created as so. Let's open
this up in Xcode let the platform be I was 12 and yeah what you need to add in
here is pod and it's simple DuckUI . There we go. Let's close this. Let's go back to
terminal and type in pod install, okay. And as you can see it is
downloading the DuckUI current version is 0.1.46 and
many changes will occur hopefully not breaking changes but do
you take in mind that this video has been recorded with version 0.1.46
but I try to keep it as consistent as possible but there will
be more awesome features of course I will create videos on those two.
And DuckUI uses something called bond and differ and reactive kit and we will
talk about them later down the line. So that being said let's open up our Xcode
workspace here and you will see, let me just resize things finally, yeah that is
how easy it is to add DuckUI and of course just one last taught here under
terminal. If you see that newer release has been added just type in pod update
like so and hit return maybe I will just hit return but pod. So pod update, there
we go. And all of the pods will be updated on your project so and that
being said let me just show you what we have here basically we have an app
delegate that is having the root view controller as the windows root view
controller and yeah basically that is it what we need to do here first is import
DuckUI I and let's change the UI view controller parent to D underscore
view controller. Now D view controller has some awesome properties that you can use.
First of all it has the white background and just run this so you can
see out of the box and it has some functions that you can override and we
will go through them today. So let's just wait for this to
build out in simulator. It is launching but till then let's just, yeah
is launching we can we can wait for that and yeah basically that is it a whole
wide screen. Not the black screen that usual view controller has we do have the
background set to be white. Now if you start typing in here setup you will see
that we have a setup views with safe area. So let's hit on that and override that.
First thing you can do is type in super dot setup we use with safe area
and if you wanted to you can use this plain old safe area that we get from
here but for our case and in most cases that I see you want to set your own safe
area rule. So for now let's just dive into those options so let's hit that
button and as you can see we have all button horizontal, leading, non-top
trailing, vertical pretty self-explanatory. So let's choose all for
now and see how that looks but to see that of course we need to add some views
in there and another interesting part of D view controller is that it comes with a
ready-made container view. So if you start typing in container you will see
that here we have our container and let's have our containers background
color to be let's say purple. There we go. And that will show off the safe area
that we have here. So let's it command R or just click on the play button so we
can see all of these changes. As you can see we have our safe areas well the
container is can us and as you can see here we have our container edged to the
safe area and let me just hit and arrow here so we can see that indeed
we have the safe areas in landscape mode too. How awesome is that let's change that
back here cool. Let me just move and that and there and yeah and that is one that you
need to be aware of, one function set of views we will be setting up views here
and it will be pretty awesome SwiftUI like you will like it just subscribe and
hit the notification bell to see the news videos on your YouTube feed.
Now some other functions that I want to cover here briefly just so you know that
we do have that is something called observe and you know SwiftUI is kind of
reactive functional programming has this reactive functional programming style
and we will be using bond and reactive kit intensively to observe some things
in our app that they do come out. So let's have your super dot observe and
the other one is bond. So you know we can bond things together now with SwiftUI
let's say a text labels so a labels text can be bond to a simple string and we
will talk about that later down the line so we have a bond here too.
So let's have super bond here and finally if you are kind of old school or
for some use cases you want to fetch some data manually not with bond or
maybe with observe. You can have this fetch data function so super dot fetch
data. So these are the functions that you can override in D view controller and
there are pretty awesome and this is the basic set of a D view controller and I
hi recommend that you do use D view
controller is just a simple subclass of uiviewcontroller
with these powerful I believe overridden functions. Now that is it for me today.
I hope you enjoyed this video if you did go ahead and give it a thumbs up,
subscribe to the channel and of course hit that notification bell to get
notified of new videos because I will post a lot of videos on DuckUI of course
that is SwiftUI in UIKit well kinda and if you have any questions go ahead and
comment down below about DuckUI or SwiftUI or even UIKit and how I
implemented all of this to make document possible for you and as always I will
see you in the next one.