Hi, Alex here from rebeloper.com and welcome back to the channel and welcome
to this new tutorial on how to create a debug visual view of course all of it in
Swift 5. So without further ado let's jump right into it.
Okay now if you have
been tinkering out with Swift UI you will see that we have this kind of
borders for these elements when the you are highlighting the row in the code.
So this is not quite a good example because we are accessing all of these inspector
variables for this label but if you have been taking a look at the swift UI
interface you will see that if you highlight or just basically grab add
your cursor to a new line of code it will be highlighted in in this new
preview panel. I believe it's called canvas.
Okay! So we want to do that right now with UIKit. So let's jump right
into the code and go ahead and click the link down below so you can see all of
the resources and what I have basically added here is it's not too much I have
added tiny constraints. So we can better constrain our label here. Add the label
set the views background color to white added some text to our label at this
label to our view and centered it into our super view and yeah that's just
build and run and see how that looks and as you can see here I've already started
some basic stuff for our debug UIView. So there we go, but at this time we
don't really know all of the let's so called
borders of our label. So yeah let's just create a debug view so we can see if
it's here or here or somewhere else okay and this
will be for a UILabel but I'm going to create an extension for a UIView
because basically a UILabel is a UIView and yeah a lot of elements are
based off a UIView. So you can later downline use this let say UI text
field or UITextView and so on so what I basically added here is this
public function or debug and it is returning the UIView. Now if you don't
know what the discardable result means go ahead and take a look at one of my
previous videos I have just recently released a brand while awesome video on
what is discoverable result really means. Okay, so for now let us just tackle the
debug view. So what we want to add in here is basically add some borders. So we
are in a UIView. So we are going to grab our label and we are going to add a
border color and that is let's say my blue and of course this is a cg color.
Okay and layer dot border width let's have this only through one pixel. So what
we want to do now is basically add this function to our label and I'm just going
to comment this out after we add some text to it we are
setting this debug here, okay. And that is basically it.
Well we could maybe add this to 1.5. There we go let's hit command R
and see this in action and yeah much, much better. So what we are at is let me
just make this a little fancier because yeah it kind of looks like this one but
I don't want to be exactly the same. So let me just add some background color too.
So background color equals my blue and I will set an alpha
component of 0.3 and set some border corner radius. So layer dot corner radius
equals let's say free and for that we want to set the layers mask to bounds
to the truth. There we go, okay. And let's build and run and see how that looks
like, okay. Real, real good. Now this is quite usual to see and you most probably
know that okay the bounds would be somewhere here but what if we set some
left and right constraints to our label here and let's just build and run and
see how this looks like and we'll see that basically we have all of this label
laid out here and if we get rid of the debug we don't really know where it
starts and where it ends of course if you take a look at the code but yeah I
don't know if it's starting here or where it is ending or maybe starting
here who knows but with the new debug extension that we have just created we
can see it straight away. Okay! Now this debug extension is part of
DuckUI. Go ahead and take a look at it and of course you could create UI label
separate extensions but most probably UIView will fit everything that you need
and of course here we have our UIStackViews too and much much more inside
DuckUI. If you are interested in it go ahead and take a look at my github
repository and just download it or maybe use it with cocoa pods you can install
it with cocoa pods so yep go ahead and take a look at it.
DuckUI its SwiftUI for UI kit well kindof. And I really hope that you enjoy that
this visually about UIView for UIKit video tutorial if you did go ahead and
give it a thumbs up, subscribe to the channel and hit that notification bet to
get notified of new videos as they do come out. Now it is your turn how do you
really debug your views in Xcode. Go ahead and leave your comments down below
and as usual I will see you in the next one.