Swift 5.1 – How to make Drawing App (Xcode 11.1)


hey everyone hope you guys are doing
well I’m Shubham and you are watching let create an app
so in this video we will create one drawing application in which user can
draw on the screen and even he can change the color change the opacity and
even he can save the photo whatever we have drawn on the screen so we’ve
recovered all this topic in this video so that’s the reason this video is quite
bit long and if you want to learn all these things please watch the video
completely and so let’s look into the demo first and then we will see how we
can create this kind of application so this is the drawing application let’s
click on this thing and as we click on this thing this looks something like
this in which we are having this animation as well as these are the
colors and this is a download button this is the undo button if you want to
remove any line which we have drawn and this is a clear button this is a opacity
slider so this is a size like the the stroke size and this is a opacity slider
so now let’s choose one color like this is a red color by default cadets of
black and now let’s increase the size of this stroke so as you increase the size
it the size have changed and now let’s change the color and we can do choose
any of the color even we can add more colors up to us so let’s remove this
thing so the as we do that an undo thing it will remove the last brown line and
now let’s increase more size and reduce the opacity so let’s take this color and
it’s look something like this now let’s increase the opacity so like this now if
you want to clear all the thing on the screen then we can press this button so
it will remove all the things on the screen and now let’s draw again some
other things something like this and if I want to save this thing then you have
to press on this Save button and as we click on this stress but press on this
button it will save the image now let’s move on the photo and let’s see that we
get this image over there so this is the last image which we have drawn on the
screen so this is over here so we will cover all these topics in this video so
if you like this video please don’t forget to hit the like button and if you
have any query or Sedition please post that thing in the comment box and if you
are new to the channel please don’t forget to hit the subscribe
button and press the while I can to get the notifications of all my other videos
so let’s start the video left by an expert click on single view application
click on next and give the whatever name you want to give I’m just giving drawing
app and be sure that user interface should be storyboard not Swift ey if you
are using an Xcode 11 and just click on next and create this project where you
want to create I’m creating this project on my desktop so we have just created a
simple project now first we are going to create the bottom layout first which we
have seen in the demo so let’s look into the demo again so
this is the demo and we are going to create this thing first and then we will
proceed further in the functionality and if you have any issue while drawing this
thing let me know in the comment section I will help you out so let me first draw
this thing quickly so that we can proceed further intertwine functionality
I have just designed the bottom layout now let’s create the outlet of all these
things so this is collection view this is Save button this is undo button this
is Clear button and this is the size of the brush and this is the slider of our
opacity so now let’s quickly move on the view Pandora and take the outlets of all
these things so let’s move on the view controller here this and the expert is
quite new so I’m not comfortable with this thing right now but soon as ever I
will work I will get comfortable with this now let’s take the outlet of this
collection view first so simply right collection view and we
need to take the actions of all these things we don’t need to take any outlets
for these buttons so simply take the actions on click save on click undo on
click clear like this and this is on click brush size and this is on click
opacity like this now let’s keep the space to each and every like this
so now first we need to implement the collection use of what they just create
an extension extension and in this as you always know we always use extension
for creating anything any kind of or implementing any kind of datasource and
delegate because this is one of the good practice it a source like this and now
we need to create the methods of you a collection view like this so these are
the two methods number of items and sections of what that we need to create
one array at the top over here like items and these items is a type of a UI
color head of UI fella UI color like this so I’ve just already copied the
array so just popping the area of a UI colors over here and how we need to
written the counts of you iCal over here items dot-com like this now we need to
create one cell over here so let say L equals to collection view 4d cube this
one and in this minute to pass the name of the cell so we have just seen the in
the hierarchy that the name of the cell is cell so I’ll just simply pass that
thing over here now we need to give the index path so simply pass index path
over here and now we need to get the view so just give me a minute so in this cell we are having of you
which I just provided a red color so we can get this view we are the text so
let’s check that what is the tag of this view so the tag of this view is 1 1 1 so
we can simply get this you’ve ear tag method so cell dot u with tag reason
method you with take and we need to type us this thing if we need to check for
if-else condition if let u is equal to and the tag is 1 1 1 1 1 and if this
view as UI view like this and if this is a true statement
we found finder view with one moment tag then this will return true and we have
to set the background color of this view so view dot background color she
requires two items index path that are true like this and we also need to set
the corner radius brought for a radius not Lea corner radius is equal to three
like this now by simply written this sell it and sell like this so we need to
create this thing and let’s build it build this thing so there is no issue in
showing an optional binding so there is no issue like that now let’s run this
thing and check that it is working fine or not
so before running we also need to provide the data since datasource and
delegate to this collection you so a collection you tour tell you it equals
to sell and relation user data source is it close to sales now let’s run this
thing in Jake the trick is working fine or not so let’s play this thing so this
is the thing which we have to get over here like this and we will not do
anything right now we only create this collection UN populate the data so let’s
look forward how we can create that drawing functionality so now we need to
create from canvas class which is which is kind of a UI view and that class is
responsible for all that drawing part which is which have seen in the demo
part so let’s create one class and just click on this name and select s wave
file and give the name as canvas you something like this and just remove this
thing and by default this class something looks like something like this
and we need to change this import Foundation to input UI kit because
Foundation is already in UI fit part and we need some things of UI kit in this
class so now we need to use that methods is something like touch begin touch
moved draw these kind of a methods to draw some
on this view and for that we need to create instruct in which we define some
properties and these properties help us to draw the lines and different color
lines over here so let’s look how we can create that strut so simply right
straight over here and the name of the structure should be like it’s it’s up to
you you can give any name I’m using touch point and color so because this is
struct provided points as well as colors to the methods so that’s why I just
choose this name in this we need to define four properties and the first
property is color and that is of UI pallet type and this should be optional
and next competition should be like and this is a width of a stroke so it’s of
CG float type CG float and the next property is like opacity so whatever
things we have defined in the UI part we have to define all the things over here
also so this is a CG point type simply CG flow type are in easy flow type and
the last property is like points which are going to see in the screen so this
is an area of CG point because VP also providing a functionality of undo the
things so we need to take an array of CG points what is drawing on the screen so
now we need to in it all these things so simply create a simple in it and this is
of color so we need to define the color UI color like this and the points it is
a CG point type CG points CG point type like this and this is done we need to
define the properties in all these things
I’m not defining a width and the opacity in this in it because I don’t need that
thing you will see why we didn’t define these things over here so simply red
color and self dot points equals two points
so now we have defined the wave created district now we move forward to creating
the draw method touch begin method and touch move method now we need to create
one class and that is of a uiview type so simply write class canvas view we
should be able inverse view and it is of UI view type so this class is
responsible for all the drawing part and we are having different methods in this
classes like a touch begin touch moves so we are using these methods to draw
anything on the canvas but we can see that UI mu so first we have to create an
property that is of lines and these properties used to draw all the lines
and it is of a property of a struct type which we have provided over at the top
so this is of something like this now let’s create a method that is a touch
begins or we can see that inherit that method that is touch begin let’s begin
this one and in this we have to append something in this line like this and we
have to obtain one empty object of this touch class so let’s append an empty
object and it piece of UI color we are not having any color right now so simply
append the empty objects of these things and this is something like this now we
need to create one more method or we can see that we have to use another method
that stretch moves this one so this method is this this method is providing
all the parameters or we can say that all the properties to the line so just
simply first get the points so the so all we can say that touches so that
equals to touches dot location dot first dot location
this one and in this because it’s a self thing and in this way to simply return
the thing now we have to get the last point of these line array so guard where
the last point is equals to lines Oh blast so we had this method we will
get the last point and in the else part we need to simply return the thing like
this so this is the last point on which user have tapped or we can say that user
have moved so in this we have to append the things so we can say that we have to
provide the point properties to this last point so last point dot points and
it is a head of CG point so we need to append all the points in this array
simply touch touch and we need to provide the all the things as like color
because all the points should be of the same color in the user move to his
finger up what we can say that end the touch so in the color simply I’m using a
red color in the initial point and the last point dot width so I’m using a
width just like five last point dot opacity so these are the properties
which we will pass from the previous controller to this controller when we
said these things so this is zero point or we can see that one point zero
initially it is one point zero now we need to append this last point in the
lines method simply write lines dot append and in this we have to append
this last point like this now we need to call one method that is a draw method
which is responsible for drawing everything on the UI view so simply just
override the draw method simply write draw and it is prompting all these
methods we need to use this method is easy right one and now we need to call
the super dot draw super dot throw this one in this we need to file call this is
it like this so now we have to put some logic over here so that we can draw the
things on the screen so simply first we need to create a context so simply write
card let context is equals to UI graphics get current context UI graphics
get current this one as we will simply return this
thing if it is not available now we need to iterate the lines array so that we
can draw things we are using this line variable so simply write lines dot for
each I am using a for each loop like this and just simply press ENTER and in
the lines we need to again create a for loop so that we can it trade these
points array of points so for that simply write 4 and I am using a double
for this thing I comma P I stands for index P stands for points in and in this
we need to get the array of the CG point dot points like this so I am using this
topper so we need to enumerate this thing dot enumeration enumerate it like
this and you need to falsely cause this thing so we are doing this thing we will
get up index as well as giving data points now we need to identify that when
we have to add the lines and when we have to move to the point so the move
method is used to move the on the specific position and add line is used
to add the points or we can see data chain so just simply write context not
to move so first we have to identify that we are at the index 0 so if I is
equals to is equal to 0 then this else this
so now context dot move so the point is P and in this context dot add 9 this one
and the point is P so if the user have just starting the line so the first
point moves over here so it will automatically move the user at that
point and when you just start moving the moving his finger then this method will
call and he will add the lines from the last point which user left so now lets
set the stroke context third said stroke color and this flow color should be like
now we are just simply added the line but we didn’t set the color and opacity
of this pain so for that we need to set that color and opacity for this line so
dot set stroke color so for that simply write line dot color dot with alpha so
that we can set the opacity at the same time line dot opacity like this and I
guess it will show in error because these things that an optional in these
these are not optional thing it will not take an option either optional so simply
we need to provide 1.0 as optional value and this parameter is a color parameter
so we need to provide a CG color I guess CG color like this simply like this and
now let’s build this in and it is again showing an error that it is an optional
thing so we need to provide again optional value so over here we have to
provide a for simply like black color different things possibly it is not
taking so simply ready white color we got black dot see like this and one more
thing we need to provide ended is a bit so for that simply right context God set
line width set line cap we need to provide the thing put some time set line
with this one and we have to Co add a line dot width and that default is 1.0
1.0 this is all done now we need to set the end point and starting point of a
line so that how the line will look like so for that context dot set line cap
this one and this should be around like this and context but stroke path stroke
path by this method this will be three – true path or we can see that all the
part which is from which user have moved on so now
this is completed now we need to clear we need to call this method draw from
this whenever use them moving this method will :
create the lines so for that we need to create them we need to call one method
and that is need this flag is said need is Priya safely display set need this
one so whenever all these things done this will this method will call and this
method will call directly this method draw method and all that work will be
done so now let let’s run this thing inject it to this it is working fine or
not so for that we need to create one can bust you on the storyboard first so
just simply take UI view like this and simply just take a drag and drop UI view
over here like this and just give the basic constraints to this view from all
the four side it should be zero like this and we need to provide one class to
this view that is a canvas view class canvas view class now let’s create the
outlet of this class so simply like this unless you like this and it is prompting
in error that could not insert okay let me try one more time sometime this is this is done now let’s run this thing in
check that it is working fine or not and it is running the things with the
default value just like 1.0 and black color so let’s look this thing and then
we will see how we can create rest other things it’s like a Selectric selected
color color line and changing the value of the brush or opacity it’s totally up
to us so let’s look so this is just working
fine ah let’s draw something and as we are trying something on the screen you
completely drawing but we are unable to change the color because these things
are default the line width to the color all the things are default now let’s
look how we can create the functionalities of all these things and
how we can make these things also working so let’s look this thing and for
that just move on the this controller if first we need to move on the canvas view
so that we can create the default properties over there so we will create
some properties over here so that we can pass these properties from the previous
controller over here so for that first we have to take the width of the line so
what that simply type stroke width like this and this is a CG flow type see this
type like this and the default value is always zero point one point zero now we
need to define the stroke color so where stroke color and this is a pure color
type like this and it is always dot black like this and the next thing is
stroke opacity stroke opacity oh should be capital like this and this is also CT
flow type like this and it is all based on point zero so these are the default
values which were provided now we have default values provided over here so now
let’s change these things to is true color stroke width and this is stroke
property stroke opacity like this now we need to provide these things program
from the previous controller so just move on the previous controller and
let’s use this precise thing so for that we have to simply use now whenever user
change the value of that precise or opacity these methods will be called so
we need to change this any to us later so we will get the values of UI slide
over here like this now we need to just access the property which are which is
in the canvas view so canvas view dot stroke width so definitely brush sizes
or the stroke width so it’s like see the CG CG float can we need to send the
sender what value like this so same we have to do this for this also canvas
view dot the stroke opacity like this and it is up CG float and we have to
send the standard value so whatever value user select in under
UI those values will pass in these opacity will use and they will adjust
according to its phone now we need to create the method of this undo n clear
so we need to create these methods over here so we have to write these methods
over here just just give some space and now let’s write these methods so simply
we need to type here canvas view we need to create one conscience function here
canvas you like this and in this we need to remove all the points of the line so
lime store remove all we need to simply use this method and we need to call that
matter send is display so it will automatically call the this draw method
and remove all the points so one more whether we need to call and that is undo
method so we need to simply use function and you can create this method according
to your own need or you can give any name to this method but I’m simply using
undo undo draw like this and in this we need to check that the count is greater
than zero fifth lines toward count otherwise the application will get
crashed if the count is zero if the count is zero lesser than zero because
if we clear the canvas and then we will again click on that Clear button then
definitely a pelvic crash so line store to remove last remove will ask and again
we need to call the set need display method so that the UI you will get
update so this is the basic functionality now we need to call this
method we are this undo method so canvas view dot and
I guess I’m to drop this one and in this canvas view dot clear taken bus so these
are the methods so one more thing we are going to do that is whatever color user
will select from this collection view that that will be passed on that
controller so for that you have to simply get the value of the selected
color so for that we have to simply use self for did select item add it select
this one and in this we have to get the color but we can simply assign the color
to this canvas color so canvas canvas to toad stroke color it is stupid
and that color should be like items and this is index path dot true like this so
whatever color user will clicked on that we’ll provide it to this stroke color
and that will assign to that line so now let’s run this thing inside that it is
working fine or not so after that we only left one functionality that is safe
functionality and then we will see how’s the application look like so it’s
completely working fine this the default value is 1 so it’s working with 1 now
let’s increase the size and as we increase the size the size of this
pencil already considered finger is worth fine now let’s change the color so
now the color is purple and if this it is completely working fine so now let’s
change the color again and again this is working fine so we can draw or we can do
anything something like this now let’s check the functionalities of these
button so now let’s click on this clear so as I click on sclera all the screen
will be empty I definitely have all this pins will be empty and this is
completely working fine the one functionality we need to test is there
to this undo button so yeah as we click on this undo it will removing the
previous draw which we have done on the screen so now let’s test this thing
again like this and just clip on this undo and it will remove the last name
till and it is not crashing so that’s why we
have used that thing over at that point now we only let that is a download
functionality we can say that a screenshot functionality of this UI
whatever you have drawn so now let’s see how we can create this functionality so
now we only need to save the drawing which we have drawn so for that I am I
need to create one extension of UI view and in that extension we will create a
function which is responsible for saving the image by using a UI graphics current
context with options so this is the method basically we will use to save the
image so just simply read extension extension extension and these pieces of
UI view type and in this mini took little functions of function take a
screenshot like this because we are taking a screenshot of the canvas view
so for that first we need to begin the current graphic context so you a
graphics begin context with option this one this one and in this we need to pass
the size so for that we need to pass the full size of that view that canvas view
to self-taught bounds dot size like this and Oba Q is false we don’t want any
kind of opaque you and scaling we need to pass the UI screen scale because it
will completely with respect to the you ice cream
so simply scale of you ice cream so this is the line which is responsible for
creating the graphic context with the current options now we need to draw the
thing on the draw the thing so for that you need to call this method draw a head
a turkey in this one and in this minute to power the self-taught bound like this
and after screen update we need to pass true definitely because if the screen is
not updated then the trying will not we get correctly so now we will get the
image so for that let you made it was to you I fix you get
image from current image from current context this one method so in this image
parameter we will get the image now we need to end the fix current context so
for that ey graphics and image context anyways context this one and now we need
to just check that if there is a actual image is there or not
so if image is not close to nil this one as we will part written over here so
first we need to make this function is a detectable function so that it can
return the image UI image image this one so in this we need simply written the
image which feeds checked else if the image is not available then we will
simply written this thing uim every empty object UI which this one so this
function is responsible for taking the screenshot of the canvas view this is an
optional volution let me grab this thing like this now we only need to save that
image in the photo album or camera roll so for that we need to move on the
aviation of this save image button now we need to get the image so let image
equal to inverse u dot to take screenshot this one and now we need to
type this image in the camera roll so for that we need to use a method that is
UI image right to save photo this album this one and in this we need to pass the
image and completion target is self so basically this method is taking poor
parameter so let’s see this thing on this Apple documentation that what is
this and it is taking up o parameters in which one is the image that is the next
is completion target another is when is completion cell attend the last one is
context info so basically these two things that we have passed and the next
thing is this completion selector so with this is taking a three parameters
image saving with error and the last one is context info so basically context
info is a and how optional pointer which is specific to
the context so we are not passing anything so we only need to pass this
completion selector so let’s move on and in this video to simply pass and this is
of UI unsafe mutual crow pointer like this and in this we need to pass the
function so we have to read one of the fish a reference function like this and
the name is like you can give any name image saved like this and this will take
three parameters the first is image of UI image type and the second one is as
we have seen in this method this one which is of error type so this one and
this is of error type error like this and the third one is append text type
context type and this is of UI unsafe pointer type QA and sorry unsafe pointer
type you see pointer type row pointer type so
this is the method which we will call over here so for that we need to first
create a selector this one and in this method we will pass this function so
image saved this one like this so this will completely work fine and if there
is any error then this will throw in this and if the image is successfully
stored and there is no error will be thrown so let’s check if that error is
equals to error is like this and if the add there is some error print on able to into photos and if there is no error
then we can simply say that which saved into the photos like this so
this is how we can do that now let’s end this thing and check that it is working
fine or not and it is saying that okay fine we can do all this also because we
are not using it added thing over anywhere in the code so let’s run this
thing in check that it is working fine or not so let’s run this thing again
so this is our canvas and now let’s draw something it’s totally up to you what
you want to draw now let’s say this thing is I click on this save so this is
crashed because we didn’t provide any photo exascale library access to the
application so let’s move on the input @p list and we need to provide some X’s
so that app can use the photos so just click on this plus button and we need to
go on the security part privacy security and in this we need to move on photos
photo library additional in this description and this one so I want to
use the photo by baby like this and we need to use the another one also this
one we can copy the same thing and paste over here like this now let’s run this
thing and check that it is working fine or not let’s see if this thing and ok we
need to allow the permission and you may save it into the photo library now let’s
move in the photo gallery so that we can check if there is any image or not it’s
fitted so far so yeah this is the image which we’ve created so it’s saved in the
4 so this is how we can create a drawing
application and if you liked this video please don’t forget to hit the like
button any favor any query or suggestion please pull that thing in the comment
box and if you’re new to the channel please don’t forget to hit the subscribe
button and place the bell icon to get the notifications of all my other video
made you in the next video thank you

11 thoughts on “Swift 5.1 – How to make Drawing App (Xcode 11.1)

  1. sir what model of macbook are you currently using for development if share detail then iam very thankfull to you

Leave a Reply

Your email address will not be published. Required fields are marked *