1. Home
  2. Training Library
  3. Programming
  4. Programming Courses
  5. Leveraging Machine Learning for Your iOS Apps with MLKit

User Interface



The course is part of this learning path

Start course

This course focuses on machine learning. We're going to discuss what machine learning is and how we can leverage it to create intelligent and engaging apps. You'll also follow along as we create an image recognition app.


Hi, within this lecture we're going to create our user interface in order to have our Image Recognition App. So, let's go over here and select Single View App. And I'm going to call this MachineLearningImageRecognition. So this is a long name but it's self explanatory, I believe. So, hit 'Next' on here and try to choose the folder that you always choose to create your first project of Machine Learning. So, here we go. Let me put this into a full screen. So, let me make this like that so that we can see it clearly. And we're going to start by creating our user interface. And it's going to be fairly easy. It's going to be fairly simple. All I want to do is just an image view to display the image that the user has chosen. So, that we can see what the chosen image is in here. And then we're going to have a label just under this image view, and this will display the result of our process. So, this is going to be something like, yep, this is a monkey. So, let me make this a little bit bigger, okay? And let me make it central. And the next thing I'm going to bring in a button. So, I'm going to change the image or select the image by using this button rather than the UI image view that we have done before, okay? Because it can be complicated in this case to click on this UI image view to select an image because we want the user to clearly understand  they can change the picture by clicking on this button as well. So, that's all we want for user interface in this app. So, let me reset these suggested constraints, okay? And I want to give this a fixed width and height constraint as well. And once I do that I believe this is kind of distorted. So, let me bring this into a better looking state and say Update Constraint Constants. Yep, here we go. Now, I have this label issue. Let me select all of these and bring them into the center one more time, okay? Then I can say, Update Constraint Constants, and in fact, let me try to make this a little bit bigger, okay? And say Update Constraint Constants one more time. Maybe we can make this a little bit bigger as well because we don't know what we're getting as a result right now, so it can be a little bit longer than this. So, let me say Update Constraint Constant one more time and here we go. So, now we are ready to bring all of these views in our view controller. So, let me drag and drop this image view, okay? So, this is going to be an image view and this is going to be my result label, okay? So, let me call this resultLabel. And in here I'm going to bring this as an action and I'm going to say, changeButtomClicked or changeClicked. Yep, this is good. So, now we're done over here, you can just delete this label because we don't want anything in here. Maybe you can just say something like, select image, okay? And in the changeClicked, I'm going to write my function. So, first of all I want to choose a picture from the gallery, from the photo library of the user. So, you know how this goes, right? We create a picker. So, this is going to be a UIImagePickerController. Then we're going to have to make this delegate to self. And once we do that it will give us an error because we have to come up over here and say this ViewController is in fact a UIImagePickerControllerDelegate. And also a UINavigationControllerDelegate as well. Once we do that, the errors will go away and remember you can just select if the speaker will allow editing or not. I'm not going to do that because I don't want to allow editing, I just want the original picture in this case. So, what I'm going to do, I'm going to select the sourceType of the speaker and this is going to be the photoLibrary, okay? And then later on I'm going to present this. So, let me just say present and choose speaker and the animated will be true, the completion will be nil. So, the next thing to do is actually specify what's going to happen once the user chooses an image out of photo library. Remember how we do that, we have to write didfinish launching with options. So, this is what we're looking for. And remember this gives us a dictionary in which we can get the original image. So, in order to do that we're going to call the imageview, okay? We're going to say imageview.image and this will get its data from the info dictionary with originalImage key. And we're going to cast this as a UIImage. And then we're going to display this, dismiss this actually in order to display the view controller. So, self.dismiss, animated, of course true and completion will be nil. And we're not done yet here actually. After the user chooses this picture, we want to call the function to recognize this image. And we're going to call this function in here so that user will see what picture contains once they chooses it. And of course, we don't have that yet. We don't have that function yet. And remember you can just come over here to info.plist and just give it a photoLibrary users description if you want. But I'm not going to do that. I'm just going to test this on my simulator. As you can see if I choose any picture here and let me see if I choose one more time it will display on my image view. So, that's it for our user interface. So, we're going to stop here and we're going to bring in the model in the next lecture.


About the Author
Learning Paths

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