1

00:00:08,050 --> 00:00:13,670

Hey everybody this is Caleb with Deb soapstar common in this video we're going to build our view controller



2

00:00:13,680 --> 00:00:18,390

that's going to display the images that we select from our collection view.



3

00:00:18,390 --> 00:00:23,250

We're also going to set it up so that when you tap on a cell it actually presents that view controller



4

00:00:23,250 --> 00:00:26,230

will pass some data we'll do all that kind of stuff.



5

00:00:26,280 --> 00:00:27,390

It will be really really cool.



6

00:00:27,390 --> 00:00:30,780

So let's go ahead and pull open our tax code project.



7

00:00:30,780 --> 00:00:31,680

There we go.



8

00:00:31,980 --> 00:00:36,540

And as it currently stands we have one view controller Matt B.C.E..



9

00:00:36,540 --> 00:00:41,260

Now before we do anything else we need to first create a view control or file.



10

00:00:41,310 --> 00:00:48,180

So go ahead and right click on your controller folder click new file and select cocoa touch class.



11

00:00:48,180 --> 00:00:52,290

Now of course this is going to be of type you view controller.



12

00:00:52,710 --> 00:01:00,130

And I'm going to call this pop Visi because later we're going to use 3D Pekan pop to display the View



13

00:01:00,150 --> 00:01:00,600

Controller.



14

00:01:00,600 --> 00:01:05,420

So I'm just going to name pop Visi because we're popping The View Controller up yeah.



15

00:01:05,430 --> 00:01:09,930

So click Next go ahead and add it to your project.



16

00:01:10,290 --> 00:01:11,190

And here we go.



17

00:01:11,190 --> 00:01:15,270

So let's get rid of this boilerplate nonsense that we don't need.



18

00:01:15,360 --> 00:01:21,990

And now let's go ahead and head into the storyboard and let's create the actual interface builder element



19

00:01:22,080 --> 00:01:23,870

for The View Controller.



20

00:01:23,870 --> 00:01:24,260

Awesome.



21

00:01:24,270 --> 00:01:31,380

So there is Matt Visi and we're going to just drag in a new View Controller like so before we do anything



22

00:01:31,410 --> 00:01:34,900

we need to make sure we set the identity to be pop.



23

00:01:34,900 --> 00:01:37,380

DC-X otherwise it's not going to do anything for us.



24

00:01:37,560 --> 00:01:42,930

And while we're here we're actually going to go ahead and set the storyboard ideas well to be pop Visi



25

00:01:43,860 --> 00:01:48,000

because we're going to use the storyboard later to instantiate our view controller.



26

00:01:48,110 --> 00:01:48,650

OK.



27

00:01:48,960 --> 00:01:50,420

So that is done.



28

00:01:50,610 --> 00:01:52,960

And now let's go ahead and add what we need.



29

00:01:52,980 --> 00:01:57,950

This view controller is going to be super simple it's basically going to be a giant UI image of you



30

00:01:58,290 --> 00:02:01,920

and we're going to put a little label down at the bottom just to give the user a clue that they should



31

00:02:01,920 --> 00:02:03,240

double tap to dismiss it.



32

00:02:03,240 --> 00:02:05,730

We're going to add that functionality later as well.



33

00:02:05,730 --> 00:02:11,130

So first let's go ahead and add on that image of you so search for image view.



34

00:02:11,280 --> 00:02:15,690

Drag it on and we're going to make it the entire size of the screen.



35

00:02:15,870 --> 00:02:17,100

Very easy.



36

00:02:17,100 --> 00:02:22,910

Now we're going to pin this to all four corners zero so that it stays put.



37

00:02:23,130 --> 00:02:28,920

And of course we need to set the content mode so that if an image is filling this it does not look stretched



38

00:02:28,950 --> 00:02:31,130

or distorted.



39

00:02:31,130 --> 00:02:38,610

So select content mode and choose aspect fill that way the image will fill up the screen but stay in



40

00:02:38,610 --> 00:02:39,330

aspect mode.



41

00:02:39,330 --> 00:02:46,350

Now some of the photos might get clipped a little bit but that's fine as long as they're not looking



42

00:02:46,350 --> 00:02:47,550

stretched and ugly.



43

00:02:47,610 --> 00:02:48,720

So very cool.



44

00:02:48,720 --> 00:02:50,410

We have an image view there.



45

00:02:50,430 --> 00:02:50,700

All right.



46

00:02:50,700 --> 00:02:56,580

So let's go ahead and let's drop on a view and we're going to just make a little you eye view here we're



47

00:02:56,580 --> 00:02:59,130

going to make it pretty small.



48

00:02:59,130 --> 00:03:02,820

Let's go ahead and just shrink it down to about that size should be good.



49

00:03:02,820 --> 00:03:09,420

I'll zoom in here so you can see now I'm just going to pin this 20 from the bottom like so I'm going



50

00:03:09,420 --> 00:03:10,820

to give it a fixed width and height.



51

00:03:10,830 --> 00:03:17,130

Let's make it nice even numbers here let's make it 100 wide by 25 high.



52

00:03:17,400 --> 00:03:21,810

And now I'm going to go ahead and pendant horizontally in the container so that it stays perfectly centered.



53

00:03:21,810 --> 00:03:28,530

And about this high next we're going to go ahead and add a label on the I could spell it right there



54

00:03:28,530 --> 00:03:29,250

we go.



55

00:03:29,280 --> 00:03:37,600

So drag it on and we're going to type double tap to dismiss.



56

00:03:37,620 --> 00:03:42,070

Now I'm seeing that I need to make this a little wider Let's try 200.



57

00:03:42,540 --> 00:03:48,140

And then our label we're going to need to stretch to fit the constraints of this.



58

00:03:48,330 --> 00:03:49,100

That looks good.



59

00:03:49,110 --> 00:03:54,630

Let's go to the attributes inspector and let's center our label and of course we want to change the



60

00:03:54,630 --> 00:03:58,100

font because you know how I feel about the system font.



61

00:03:58,110 --> 00:04:01,030

Change it to Avenir next or another nice font.



62

00:04:01,050 --> 00:04:06,910

And you know what just for fun let's make Demi bold looks pretty good.



63

00:04:07,020 --> 00:04:13,620

Now let's go ahead and let's center this horizontally and vertically in the container which is the little



64

00:04:13,620 --> 00:04:14,680

view that it's in.



65

00:04:14,820 --> 00:04:18,710

Add those constraints and you know what our view controller is done.



66

00:04:18,720 --> 00:04:20,230

That was super easy.



67

00:04:20,250 --> 00:04:24,900

We don't need to have a cancel button or anything because we're going to set up a double tap gesture



68

00:04:24,900 --> 00:04:26,420

to dismiss the view controller.



69

00:04:26,430 --> 00:04:28,550

So very simple.



70

00:04:28,590 --> 00:04:33,300

Now let's go ahead and set up the Iby outlet that's going to control the image view by going to the



71

00:04:33,300 --> 00:04:35,070

assistant editor.



72

00:04:35,280 --> 00:04:40,320

We are going to select pop the scene you'll see it opens up nicely right there.



73

00:04:40,320 --> 00:04:45,330

Right click and drag from UI image view and drop it on your view controller.



74

00:04:45,330 --> 00:04:49,390

We're just going to call this pop image view.



75

00:04:49,530 --> 00:04:50,740

All right.



76

00:04:51,390 --> 00:04:56,490

And that's really all we need to do as far as interface builder goes so go ahead and close the assistant



77

00:04:56,490 --> 00:05:03,180

editor and open up just pop B.C now is where we need to think about what are we going to do to get the



78

00:05:03,180 --> 00:05:06,170

image in the UI image view.



79

00:05:06,270 --> 00:05:09,450

So let's go ahead and let's think about that now.



80

00:05:09,840 --> 00:05:14,580

I think it would be best for us to create a function that we will call when we initialize this view



81

00:05:14,590 --> 00:05:21,540

controller after we tap on one of the collection cells we can pass an image and then we can present



82

00:05:21,540 --> 00:05:24,020

the view controller after we have initialized it.



83

00:05:24,210 --> 00:05:29,250

So let's write an initializer function now called func in that data.



84

00:05:29,820 --> 00:05:35,280

And we're just going to go ahead and in this data function we're basically going to pass it an image



85

00:05:37,170 --> 00:05:44,070

from our collection of cells so let's do data for Image and I'll create an internal parameter here called



86

00:05:44,250 --> 00:05:48,170

image and it's going to be of type II image.



87

00:05:48,240 --> 00:05:55,520

So now let's just assume that we have instantiated an instance of pop b c we call it data we pass in



88

00:05:55,520 --> 00:06:02,280

an image and we want to basically set a property in this view controller that can hold our image so



89

00:06:02,280 --> 00:06:08,070

that in view the load we can set our image to actually fill the image view that we want.



90

00:06:08,100 --> 00:06:14,110

So I'm going to create a variable called Past image and I'm actually going to put it.



91

00:06:14,930 --> 00:06:17,370

Now I'm going to put it beneath my Iby outlet.



92

00:06:17,370 --> 00:06:23,490

So go ahead and call or not call but right var past image because it's going to be the image that's



93

00:06:23,490 --> 00:06:26,670

passed in and it's going to be of type II image.



94

00:06:26,670 --> 00:06:32,700

Now we're going to put an exclamation mark because we definitely will have a value but we don't yet



95

00:06:32,880 --> 00:06:33,290

have it.



96

00:06:33,300 --> 00:06:41,820

And we're going to set it in our data function so to do that just call self past image equals image.



97

00:06:41,820 --> 00:06:46,740

Now when we call this when we create an instance we'll be able to pass that in image set it to have



98

00:06:46,740 --> 00:06:48,330

a value from the get go.



99

00:06:48,510 --> 00:06:54,900

And then when the view loads we can call pop image view image and we can set its image property to be



100

00:06:55,170 --> 00:06:56,260

passed image.



101

00:06:56,370 --> 00:06:57,460

Very very cool.



102

00:06:57,480 --> 00:07:02,900

OK so now we can pass an image to our pop B.C instance.



103

00:07:02,910 --> 00:07:08,460

Now let's go back to map the sea and let's see what we need to do in order to send an image through



104

00:07:08,520 --> 00:07:09,840

to this view controller.



105

00:07:09,840 --> 00:07:15,810

So go ahead and click on Matt B.C and there's a function we need to call from the collection view delegate.



106

00:07:15,900 --> 00:07:23,770

And it is did select item an index path right there.



107

00:07:23,790 --> 00:07:28,890

This is what is called when one of the cells is tapped and the cool thing is that we can access the



108

00:07:28,890 --> 00:07:29,960

index path.



109

00:07:29,970 --> 00:07:37,200

Now if you remember our cells are set up by pulling out the images at the index path for every single



110

00:07:37,200 --> 00:07:43,770

row of our photos so we can get the specific photo we tap on by calling its index row and pulling it



111

00:07:43,770 --> 00:07:45,020

from our image array.



112

00:07:45,030 --> 00:07:46,740

It's very cool that way.



113

00:07:46,740 --> 00:07:52,110

So first we're going to have to create an instance of pop Visi then after that we're going to have to



114

00:07:52,110 --> 00:07:59,130

call our data function and pass it the image from our image array and then we need to present it and



115

00:07:59,130 --> 00:08:03,130

that all happens when we select an item at a certain index path.



116

00:08:03,300 --> 00:08:09,140

So to create the pop B.C instance let's go ahead and use guard so that we're nice and safe let's call



117

00:08:09,150 --> 00:08:17,840

guard let pop VC equals storyboard instantiate view controller with identifier.



118

00:08:17,840 --> 00:08:23,730

Now do you remember earlier I had you said a storyboard ID that's what goes here and we've used this



119

00:08:23,730 --> 00:08:26,450

before but that's what goes here.



120

00:08:26,520 --> 00:08:33,330

Poppen VC that's the idea that we have set and the cool thing is we can use the storyboard just like



121

00:08:33,330 --> 00:08:37,510

this we can instantiate a view controller from the storyboard with an ID.



122

00:08:37,530 --> 00:08:43,470

Now to get this to work properly to actually have it be a true instance of pop VC we need to cast it



123

00:08:44,070 --> 00:08:45,590

as pop VC.



124

00:08:46,130 --> 00:08:47,270

OK so there's that.



125

00:08:47,280 --> 00:08:54,150

But if this fails else we need to just return we need to leave this function so that we don't cause



126

00:08:54,150 --> 00:08:55,430

a crash.



127

00:08:55,440 --> 00:09:02,280

So assuming it works though we have a nice instance of pop B C and now we can call pop B C in it.



128

00:09:02,280 --> 00:09:03,850

Data for image.



129

00:09:04,050 --> 00:09:10,740

And we can get that specific image by calling image array and pulling out the item at the specific index



130

00:09:10,740 --> 00:09:11,890

path we selected.



131

00:09:12,090 --> 00:09:21,110

So go ahead and type image array and then call index path dot row and that'll send the exact image we



132

00:09:21,110 --> 00:09:24,290

tapped to this instance of the view controller.



133

00:09:24,290 --> 00:09:29,330

And once that data is there we are good to present this view controller so go ahead and call present



134

00:09:30,950 --> 00:09:36,560

and pass in a View Controller to present which is pop you see animated of course because that just looks



135

00:09:36,560 --> 00:09:40,190

nice and when it's done we don't need to do anything specifically.



136

00:09:40,310 --> 00:09:41,170

That's it.



137

00:09:41,180 --> 00:09:46,640

We have now created an instance of poppys C we've passed it a photo and we're now going to present it



138

00:09:46,670 --> 00:09:49,340

when we select it collection view item.



139

00:09:49,610 --> 00:09:50,590

I want to go test this out.



140

00:09:50,590 --> 00:09:52,550

Let's build and run it and let's see how we did



141

00:09:56,120 --> 00:09:58,970

our simulators opening up here.



142

00:09:59,030 --> 00:10:00,230

There we go.



143

00:10:00,640 --> 00:10:01,030

And.



144

00:10:01,030 --> 00:10:01,280

OK.



145

00:10:01,290 --> 00:10:04,010

So to review we should be able to drop a pin.



146

00:10:04,010 --> 00:10:10,640

Our view will animate up the images will load as we select an image it should pop up our view controller



147

00:10:10,640 --> 00:10:11,830

with our image past right.



148

00:10:11,840 --> 00:10:13,160

So let's give it a shot.



149

00:10:13,280 --> 00:10:19,750

Dropping a pin the simulator's a little slow at the animations but it's going to go ahead and download



150

00:10:19,780 --> 00:10:23,700

all the images that we need.



151

00:10:23,700 --> 00:10:24,760

Very cool.



152

00:10:25,660 --> 00:10:27,160

It's taken its time.



153

00:10:29,140 --> 00:10:31,590

It's almost done.



154

00:10:31,810 --> 00:10:32,320

All right cool.



155

00:10:32,360 --> 00:10:35,880

So if I click on an image let's see Hey.



156

00:10:35,980 --> 00:10:37,270

It's kind of weird.



157

00:10:37,420 --> 00:10:41,740

I guess someone likes to take photos in the doctor in a way but look at that the photo we selected gets



158

00:10:41,740 --> 00:10:47,590

passed into this view controller and it's nice and we're using aspect fill so we don't have any issues



159

00:10:47,590 --> 00:10:50,760

with the photo being stretched or anything like that.



160

00:10:50,770 --> 00:10:51,660

So this is awesome.



161

00:10:51,670 --> 00:10:53,740

But you know what it says double tap to dismiss.



162

00:10:53,740 --> 00:10:58,140

And if I double tap nothing happens so we're going to go fix that.



163

00:10:58,150 --> 00:11:01,630

Now we're going to go ahead and head back to Pop visi.



164

00:11:02,110 --> 00:11:08,800

And in pop b c we need to go ahead and create a tap gesture recognizer and we need to go ahead and add



165

00:11:08,800 --> 00:11:10,320

it to the view.



166

00:11:10,390 --> 00:11:16,300

So let's go ahead and do that by entering or you know what let's try to function actually that's a little



167

00:11:16,550 --> 00:11:17,920

a little better way to do it.



168

00:11:17,920 --> 00:11:24,870

So let's go ahead and call or write phunk add double tap.



169

00:11:25,210 --> 00:11:32,940

And now let's go ahead and create an instance of you I'd tap gesture recognizer let double tap lips



170

00:11:34,360 --> 00:11:37,260

equals you tap gesture recognizer.



171

00:11:37,540 --> 00:11:41,070

And of course we've done this before you know the target needs to be self.



172

00:11:41,090 --> 00:11:47,920

That's this view controller and the action is going to be a function that we need to write below.



173

00:11:47,920 --> 00:11:57,460

So when we call a selector selector it is looking for a function to pass in here and basically whenever



174

00:11:57,460 --> 00:12:00,490

the double tap is called it calls that function.



175

00:12:00,490 --> 00:12:07,850

So let's go ahead and write that function now and let's just call it screen was double tapped.



176

00:12:08,530 --> 00:12:08,920

OK.



177

00:12:08,950 --> 00:12:15,220

And inside of screen was double tap let's just dismiss the view controller and we don't need to do anything



178

00:12:15,220 --> 00:12:15,940

when it's complete.



179

00:12:15,940 --> 00:12:18,060

So let's just give it nil for the completion.



180

00:12:18,430 --> 00:12:23,760

But the selector here we need to call screen was double tapped.



181

00:12:24,100 --> 00:12:28,930

OK supercool that functions in there that means that when we double tap it's going to call this function



182

00:12:28,930 --> 00:12:31,050

which dismisses our view.



183

00:12:31,180 --> 00:12:35,860

We're getting an error which we've had every single time and that's because we have not yet exposed



184

00:12:35,860 --> 00:12:37,150

this method to Objective-C.



185

00:12:37,150 --> 00:12:38,500

So quick fix.



186

00:12:38,620 --> 00:12:43,550

It adds an O B C and it allows you I tap gesture recognizer to play nicely.



187

00:12:43,720 --> 00:12:44,630

OK.



188

00:12:44,680 --> 00:12:46,090

Easy is that.



189

00:12:46,090 --> 00:12:50,770

So now let's go ahead and let's set up our double tap so that it requires two taps.



190

00:12:50,890 --> 00:12:58,620

We can do that by calling double tap number of taps required and set it to be equal to 2.



191

00:12:58,660 --> 00:13:03,370

Then of course in order to get this to work we need to set the delegate of our double tap to be this



192

00:13:03,370 --> 00:13:04,260

view controller.



193

00:13:04,270 --> 00:13:11,590

So go ahead and type double tap delegate equal self ok and then we're going to go ahead and add this



194

00:13:11,590 --> 00:13:13,460

gesture recognizer to the view.



195

00:13:13,540 --> 00:13:20,140

So go ahead and type view add gesture recognizer and we're going to pass it double tap.



196

00:13:20,140 --> 00:13:25,450

So we have now successfully added it to our view and whenever we double tap it's going to go ahead and



197

00:13:25,450 --> 00:13:29,880

call screen was double tapped which dismisses the view controller.



198

00:13:29,920 --> 00:13:35,010

So we're getting an error here and that's because we have not yet conformed to you I gesture recognize



199

00:13:35,020 --> 00:13:38,170

or delegate but we can do that right at the top.



200

00:13:38,380 --> 00:13:45,410

You gesture recognizer delegate build it and you'll notice that the error goes away.



201

00:13:45,430 --> 00:13:46,600

Very very cool.



202

00:13:46,600 --> 00:13:50,240

So let's go try it now and see if this view controller dismisses.



203

00:13:50,260 --> 00:13:55,240

And if it does then this video will be done and will be moving on to the last video where we're going



204

00:13:55,240 --> 00:14:00,850

to add 3D touch capabilities so that we can peek at the images to see what they are and push a little



205

00:14:00,850 --> 00:14:03,760

bit harder to pop them onto the next few controller.



206

00:14:03,760 --> 00:14:04,360

It's very cool.



207

00:14:04,360 --> 00:14:10,860

So let's go ahead let's double tap here to drop a pin and we'll wait to see if the photos load.



208

00:14:11,050 --> 00:14:18,210

After that we will select it and then we'll try to dismiss the view controller.



209

00:14:18,260 --> 00:14:18,500

All right.



210

00:14:18,500 --> 00:14:20,170

Looks like we're almost there.



211

00:14:21,000 --> 00:14:21,480

All right cool.



212

00:14:21,490 --> 00:14:27,740

So if I click on an image it pops up if I double tap nothing happens.



213

00:14:27,740 --> 00:14:28,910

Interesting.



214

00:14:28,910 --> 00:14:30,640

Oh guys I'm so sorry.



215

00:14:30,650 --> 00:14:34,610

That's because we never called add double tap from our view to load.



216

00:14:34,660 --> 00:14:35,560

Let's do that.



217

00:14:35,610 --> 00:14:38,180

Double tap build and run one more time.



218

00:14:38,180 --> 00:14:42,860

Sorry guys sometimes it's the smallest things that get you caught up.



219

00:14:43,100 --> 00:14:44,360

OK let's try that one more time.



220

00:14:44,360 --> 00:14:45,860

Drop a pin.



221

00:14:45,860 --> 00:14:46,960

There we go.



222

00:14:48,430 --> 00:14:49,000

Sweet.



223

00:14:49,000 --> 00:14:49,210

All right.



224

00:14:49,210 --> 00:14:50,070

Looks good.



225

00:14:50,350 --> 00:14:55,540

And we should get some photos here we should be able to select one and double tap to dismiss it.



226

00:14:56,020 --> 00:14:59,700

Let's just wait to see when this finishes and then we will test that out.



227

00:15:02,550 --> 00:15:02,980

All right.



228

00:15:02,980 --> 00:15:04,090

Looks like we're done.



229

00:15:04,090 --> 00:15:04,780

There we go.



230

00:15:04,780 --> 00:15:05,780

Very cool.



231

00:15:06,100 --> 00:15:07,730

OK so let's choose a photo.



232

00:15:07,730 --> 00:15:08,260

There's that.



233

00:15:08,260 --> 00:15:15,040

And if I double tap awesome it dismisses perfect so you can go check out the photos see what's in there



234

00:15:16,160 --> 00:15:16,800

and.



235

00:15:16,970 --> 00:15:17,510

Oh my.



236

00:15:17,510 --> 00:15:18,180

Who.



237

00:15:18,230 --> 00:15:19,380

Scary.



238

00:15:19,420 --> 00:15:23,710

Anyway you can see what's in there you can double tap and dismiss them.



239

00:15:23,730 --> 00:15:24,580

Oh that's nice.



240

00:15:24,580 --> 00:15:26,180

Nice little barbecue.



241

00:15:26,210 --> 00:15:27,680

Very cool.



242

00:15:27,680 --> 00:15:29,830

And you guys that is working.



243

00:15:29,830 --> 00:15:36,420

That's great our tap gesture dismisses our pop VC is receiving images from our collection view.



244

00:15:36,560 --> 00:15:37,790

Yeah this is awesome.



245

00:15:37,790 --> 00:15:43,070

Let's go ahead and move on to our final video where we're going to add in 3-D touch and we're going



246

00:15:43,070 --> 00:15:50,080

to enable users with 3D touch enabled devices to push on an image to preview it or to peek at it.



247

00:15:50,090 --> 00:15:53,620

They say and then push harder to pop it on to the next controller.



248

00:15:53,630 --> 00:15:56,280

Nicely done with this video and we'll see in the next one.