image
Picking Image
Start course
Difficulty
Intermediate
Duration
2h 10m
Students
32
Description

This course focuses on a concept known as core data, which will allow us to store our data in a database. We'll then show you how to apply this concept to a real-life app which we will build called Art Book.

Learning Objectives

Learn how to create a local database allowing users to save data on their phones using core data

Intended Audience

This course is intended for beginners who want to learn how to build apps using Swift.

Prerequisites

To the most out of this course, you should have some basic understanding of programming and computer science in general.

Transcript

Hi. Within this lecture, we're going to learn how to get images from the user's photo library. So far we are done with the user interface, now we have to find out a way in order to get those images out of a user's library. Why?

We have to store an image, and the name, and an artist, and the year into the core data, so that we can learn how to store information into core data and how to retrieve information from core data as well. First, we need to store information and in order to do that we need an image because we can easily write this text inside of text fields right now  but we need to learn about this photo library thing, in order to have an image to save on the core data. Once we learn how to write into database, then we can practice reading data from the database as well.

Alright, so the next step would be to learn how to reach the photo library and how to get images out of that one. And this is what you're going to use in most of the apps that you're going to build from now on. So, we're going to practice this a lot. Once you learn this, decodes the technique will be different from previous information that we have learned but you get to practice it much more. So, first of all we're going to need a gesture recognizer Y because the user will have to click on this image to save an image inside of the UI image view. Of course we can do that with a button but it won't be very practical. So, I'm going to use an image like this and I'm going to include this link in my repository and I'm going to include this link in the resources of this lecture so that you can download it and use it if you want but also I'm going to show you how to create one with any design program.

So, I'm going to use a design program called Sketch. But if you have anything like Photoshop, Paint it doesn't matter. You can just create a simple image from here. Later on, we're going to have a design section and I'm going to show you the details of this but right now I'm just going to add a new rectangle in here and write some text onto it. So, for right now I'm just going to dismiss these borders and I'm going to change the color to something blue. Okay. And I believe that's good, inside of that image I'm going to have a text which says select image. So, this is far too big for me, I'm going to decrease this font a little bit like this. And then I'm going to say select image. Okay.

And again, if you don't have any design program at this moment, it doesn't matter. You can just download one from my GitHub repository and then work with it. So, let me make this white and that's great. So, I believe that will do the job, okay. So, I'm going to group this and sketch is a design program that is mainly used to design this kind of applications like iOS applications or android applications. So, let me go to this ruler side and see the UI image view with an height. So, it's 264 to 300, okay. So, I can go back here and make it exactly like 264 and 300s. So, that would match and if you have something different in your own UI image view, you can always change the size with an height according to these numbers again. So, I'm going to name this image select and I'm going to export this and I'm going to place it on my desktop.

So, I don't need this sketch file anymore. I'm going to delete it, I just need this PNG or JPEG file anyway. So, it's on my desktop and I'm going to bring it on my project and I will say, okay, then I can go to my UI image view properties, okay and then select the image that I have just imported. So, here you go. As I said before, if you don't want to do this on your own, you can just use mine and download it from the internet or you can just use any image that you want. You can do this with a button if you like. You're just going to see that I'm just going to create a gesture recognizer and then assign a function to it, if you do that with a button, that's okay too. So, let's create a new gesture recognizer and assign it to my image view.

First of all, I have to make my image view user interaction enabled, so that people can click on it, tap on it and I'm going to call this image tap recognizer, okay because we have already used gesture recognizer name. So,this is going to be a UI tap gesture recognizer. So, if you open parenthesis it will ask you for a target in itself and the action will be actually a selector. So, I'm doing this a little bit fast because we have done this so many times. I'm going to come over here and create a new function and let's say objective C funk, you can say select image or you can say anything you want. Okay. And then in here I have to say select image and of course, after this I have to add this to my image view as a gesture recognizer. So, image view add gesture recognizer, image tap recognizer. So, that's okay whenever I tap on the image view it will do whatever I write on the select image. So, this will be a recognizer's. We're going to write a lot of code in the viewDiDLoads. So, I believe it's better to use comments like this in order to understand where we are later on and under select image what we're going to do. We're going to use a class called UIPickerImage . Okay. And that's kind of a view controller that lets us reach the user's photo library. So, you have to define this as a variable and we're going to call this a UIImagePickerController. As you can see, this is a view controller actually and it manages the interface for taking pictures, recording movies. So, if you want to get some images or movies out of the photo library, the library of the user, you need to use this UIImagePickerController, okay. And there are actually some kind of setup that you need to use this.

First of all, you need to set this as a delegate to your view controller. So, you have to say picker that delegate itself but this will give you an error. So, this is kind of the same thing that we do in the table views, okay. In order to do that, you have to come over here and you have to say that this is actually a UIImagePickercontroller delegate, okay UIImagePickerController delegate. And that's not enough by itself. You can also, you have to also say this is also a UINavigationController delegate. So, this lets us go back and forth between the newly presented picker controller and back. So, that's what we're going to do in order to use this picker controller on our app and then later on we're going to do the setup for the picker.

For example, since we have delegated it, later on we can use the functions related to this picker delegate as well. And we're going to set up what is going to be done after we select the picture itself and once I write that you will understand it much better. So far, we're just writing some different codes than before and you may have trouble understanding it, don't worry. For example, I'm going to assign a source type to picker and if you hit that you will see this is either a camera or photo library or photos album itself. So, I'm going to go for photo library because we cannot simulate the camera in a good way. But if we use simulator, after that you can use your own phone, iphone in order to test the camera as well.

But it's no different than getting the image out of photo library. So, I'm going to go for a photo library and then for example you can just say picker that allows editing. It means that if user chooses an image, they get to edit it, okay. They get to zoom it, they get to crop it and it's not mandatory to do that. You can just set it to false as well but I'm just showing you as a general information and then I'm going to say present this picker as we did in the alert messages, right? So, this will present this picker and it will be animated and in the completion I don't want anything to be done and that's it. That's how we actually reach the photo library of the user so that

we can go over here and choose any picture that we want. And that's not enough, because we have to say what will happen after we chose this image as well. And that's why we have in this navigation.delegate, picker.delegate. We can actually call these functions right now. We have to call a function called didfinispicking. Okay. So, if you  write did finish, and this is one of them. So, let me say didfinishPicking,  yeah, this one. If you 'double' click on this function, you will see that it will display something called didFinishPickingMedia. That's what we are looking for, didFinishPickingMediaWithInfo. So, what does this function give us? So, let me just close this down so that we can have a better look. As you can see, this is going to get called when we finish the PickingMedia, and this will give us a dictionary in which we will have a UIImagePickerControllerInfo. And in return, we will get an object with Any type. So, this will be our image. The Any type will be our image. We're going to cast this as a UIImage. Okay. And the info will be the information that we're going to get from the imagePickerController, like an original image or an edited image. So, let me show you. What I want is to assign this chosen image as my imageView.image. So, later on, I'm going to say info and this will be a dictionary.

If I open these parentheses, I get to choose my key. So, if I give a key, it will give me a value and the value will be Any type. So, I'm going to cast this as an UIImage later on. But in order to do that, I have to give a key. And the key that I will be providing can be seen by hitting 'dot' in here. So, if you hit 'dot', you will see some of the options like editedImage. So, we allow the editing. And if actually user edits this image, we can get the edited one by choosing this. For example, if you're dealing with a livePhoto, we can get it from here. And the default one is actually the originalImage. So, even if we allow editing, if we choose this originalImage, even if the user edits this, then we get the originalImage anyway.

So, it doesn't make sense to use both of these options, but I'm going to use this as an example. So, if you want to use editedImage, then you can go for that. And then I'm going to cast this as a UIImage, because it's not a UIImage now. It's Any type. Okay. As you can see, it gives me a warning. It gives me an error. Now I'm going to cast this optionally to UIImage, because there are some things that can go wrong in this process. For example, maybe the user won't select an image. Maybe he will just cancel this. So, I don't do this. Okay. I'm not going to force cast this. I'm just going to optionally cast this as a UIImage. And that's it.

That's what's going to get me the picture and show it on my ImageView. And then later on, I have to dismiss this PickerController to go back to my original view controller. So, you can just say self.dismiss, it will dismiss this picker controller. and you're going to say true for animated and completion is nil. So, that's all I wanted to show you because I believe we are now ready to go ahead and test this. So far, what we have done is to create a selectImage function in which we display the UIImagePickerController. And under the didFinishPickingMediaWithInfo, we have specified what will happen when we choose it.

So, if you click on this right now, it will pop up the photo library of the user like this. And you can come over here and choose anything you want like these flowers over here. Okay. And you can edit this. You can zoom in and crop if you want. I'm not going to do that right now because that's cool. So, I'm going to go for these flowers. I 'm going to say 'Choose' and here you go. That's perfect. That's what I have been looking for. So, I have my image right now. I can just write name, artist, and year and I can just try to save this on my core data database. But I just want to show you one last thing before we proceed to that. So, it's not mandatory on the new versions like iOS 12, 13 and we're working on iOS 13 right now.

But I believe you should know that. Before we had to give a reason to reach the library, photo library of the user, and we need this kind of explanation when there is a privacy concern for the user like reaching the location of the user or reaching the photo library of the user. Okay. And if you open these files, if you go to Info.plist which is we have never worked with before. So, this is kind of where you do the general stuff, general settings of your app. For example, we can add whatever option that we want here by clicking on this '+' button, and it will pop up a list for you. And in this list, you're going to see a lot of information, a lot of options and we're looking for privacy. Okay.

If you scroll down a little bit, you will see the privacy. For example, in here we have privacy explanation for locations. For example, we're going to see this in the following section. But right now, I suppose that you want to use the location of the user. If you click on this, you can give a specific reason to reach the location of the user so that Xcode can display a message to the user saying that this app wants to reach your location. For example, if you choose this Photo Library Usage Description, then you can write some explanation here, like I want to access your photos, okay, to upload them to my core data or upload to the server.

I don't know. You have to come up with a good reason to write here. And again, this is not mandatory at this point. But maybe the people with iOS 9 or iOS 10 will use your app. Then this will be mandatory. So, I believe you should know how to do this. So, after choosing the privacy, you can say to access photos, and I don't believe it's going to be displayed right now when I click this. But if it was an older version, then when I click this, it would show up in here as a message and people would have to approve this.

So, I believe you can try to add this on your own and add a new creative message here to persuade users to give you permission. So far, so good. Now we have chosen our media. We have our image. Then we can learn how to save all of this information into a database. That's what we're going to learn in the next lecture.

 

About the Author
Students
2092
Courses
55
Learning Paths
3

Atil is an instructor at Bogazici University, where he graduated back in 2010. He is also co-founder of Academy Club, which provides training, and Pera Games, which operates in the mobile gaming industry.

Covered Topics