Swift Animations: Hit Testing Facebook Like (Ep 2)

[@jackshihtaken]

fixedYLocation - what a cool trick! For those who are having a bit difficulty figuring it out, basically you hit test all the points along a line, and the line is right in the middle of the iconsContainerView (x: pressedLocation.x, y: iconsContainerView.frame.height / 2.0), wherever your finger / cursor goes, all you are looking for is the x value of the hit test point (pressedLocation) to determine which icon to activate, the y value is always set to the one of the points on the line right in the middle of the stack view / iconsContainerView. Cool cool cool!!!

[@LetsBuildThatApp]

Good to hear you were able to figure out the logic there. There are always nice tricks to apply to your code to get the job done easier.

[@javishfri]

Finally after a long wait, got the remaining session from you brian, learned a lot in every single video of you, thank you so much

[@mitulpokiya]

it's really amazing. we loved it.

[@SudhanshuSrivastavaIndia]

I was eagerly waiting for this second part. It’s really amazing the way you teach. I love it.

[@mikehobi]

Great video. It's no coincidence that this video is longer than Ep 1. The styling and finesse always takes longer than the initial setup

[@jeffa.2378]

Easy to follow, and great. Many thanks Brian.

[@akshayarora133]

Hey Brian...you're an amazing iOS instructor, always love your videos. Please make some videos on vehicle tracking with firebase and some new stuff related to this. Thanks

[@caseywest4695]

Brian!!! Useful as always, I have a request for a video I think would be awesome! Instagram's latest update added a filtering horizontal collectionview (my guess). I've tried to do something similar but have always struggled with the best way to do this with firebase. One vote for a tutorial on it :)

[@mrvfino]

Wow, that fixedYLocation trick was so cool.

[@Dennisvm82]

Wonderful video, Brian :D using map to create the array of subviews really made my day! I moved the .ended state animation to a fileprivate function as well, just to make the code look cleaner :-)

[@LetsBuildThatApp]

Excellent, I also like the idea of using map, makes code much cleaner and easier to write.

[@45vineet]

awesome animations...fan of your coding style...also would love a tutorial video on UIViewControllerContextTransitioning..thanks and keep it going

[@TeslaModelYdaho]

Excellent tutorial. To take this a step further, how do we detect when an emoji has been selected and then assign an action to that selection?

[@syedsadrulullahsahad4971]

Thank you man. That was incredible and you showed the very easy way to do this. It was fun. So,for one little understanding how the stackview's width increasing based on number of subviews where there was a fixed frame equal to it's parent also there was no auto layout.

[@LetsBuildThatApp]

If I were to write this out as a contractor, I would go for auto layout of the stackview.

[@syedsadrulullahsahad4971]

Thanks, you are awesome. i want to understand how in this case it is increasing based on subviews? Is the isLayoutMarginsRelativeArrangement property increasing it's width?

[@LetsBuildThatApp]

No, the width is a calculation based on the count of subviews in your arrangedSubviews array. Perhaps I need to be more explicit on what width is.

[@syedsadrulullahsahad4971]

containerView's frame is fixed here and stackView.frame = containerView.frame; That's why i am thinking how it's width changing.

[@LetsBuildThatApp]

What do you mean its fixed? It's clearly a changing width based on the count of subviews right?

[@alialnaghmoush]

Many information and tactics, thanks Brian

[@ferney3064]

Brian please Build the Ebay app!

[@oceanvvl]

Brian I like your video tutorials. Could you suggest any course from your playlists collection to learn iOS programming? Did your Firebase 3 Social Logins, but don't know what to proceed with further. I saw in some comments that you had Kindle clone tutorial for beginners, but don't see it at your site, only payed intermediate and advance ones, with some free ones. Thank you for your very nice content.

[@srikanth1992]

Excellent animation brother.. thank you so much for the tutorial... :)

[@slash0t5]

Is there a way to know which icon was selected? Otherwise this is an excellent video.

[@dieselbstlosesuchenachwahr8151]

Can you make a video about using OperationQueue() and Operation() for doing Async Networking? Would be awesome! Unfortunately, there is not much about it out there.

[@KSwizzleDrizzle]

Shifu Brian! Love the new video!

[@shingetzu88]

Hi Brian, Thank you for the great vid. I like how you break down what needs to be done and handle it one at a time. It helps to remind me not to be overwhelmed when doing something and just cut it down to smaller, manageable tasks first. I have a question though, in your example, the images takes up the whole area of the UIView/UIImageView. I am making something similar for the iPad and the size of the stackview changes depending on the screen size. What if I want to put a label under the image and have some spacing from the image and label to the UIView (center the image and the label under the image)? How should I go about it? Do I need to put it in another stackview first? How will I create the spacing to the UIView? Thank you.

[@LetsBuildThatApp]

You’ll have to try a bunch of different ways of getting your views laid out correctly. The technique shown in this video took about 5 hours to make.

[@mrmr8223]

Thank you for your tutorial. But how could I return index which icon was selected? I did research how to return index from hit test but I got nothing :(

[@shashikumar740]

Thanks for the animation tricks

[@邵佳杰-y6o]

Hi, Brian! Probably you wouldn't reply to or even see this comment, but in case you notice this. I am wandering how you made it to type out the icon images with autocomplete ? Any extension ? I've seen a lot of your episodes. You've done a really great job and that is of great help! Many thanks ;-)

[@LetsBuildThatApp]

Xcode doesnt allow for auto complete image assets anymore.

[@邵佳杰-y6o]

@@LetsBuildThatApp Thx. Really miss some of the old plugins ; -(

[@LetsBuildThatApp]

You can type image literal and select your asset

[@邵佳杰-y6o]

Brian, I have a question here. When I press down and a certain icon image pops up, I perform a swipe up gesture, indicating I select that icon. What if I wanna implement this requirement? I've tried to add a swipe up gesture recognizer and set both recognizers' requiresExclusiveTouchType property to false and the shouldRecognizeSimutaneouslyWith delegate method returned true. But the reality is when a longPress handler is called, the swipe handler is just ignored. However each sole gesture performed fine. Is my requirement reasonable? If the answer is yes, how should I implement it ? Thx, Brian ;-)

[@al8alb1al7azin]

Go ahead 👍 You are the best for me

[@ikechukwumichael1383]

Thanks for the awesome tutorial

[@masterlonghorn2490]

Hi, thanks for the awesome tutorials. Could you please do one on using web sockets in IOS app?

[@kinngjayesh]

Hello Sir I have a question as i am designing something like yours What if when the user taps on the top of the screen, the notch area How to manage that ??

[@nahalfirouzi8304]

my stackView doesn't fit in the containerView . what should I do?

[@sreekanthzyou]

@brian hitTestView is UIImageView is not working.. when i long press and scroll over the icons i get the break point but the image is not coming as type UIImageview. After sometime i figured it out that for images i need to set userIntercation enabled to get the hitTest.

[@LetsBuildThatApp]

Yeah I think I also say that people will forget to use that property even though I emphasize that

[@sreekanthzyou]

Brian can you do a video on Trait collection usage for chid viewcontroller in Universal App.

[@shingetzu88]

Hi Brian, I have a question, in your vid, the stackView was created inside the iconsContainerView declaration. What if I want to access stackView from a function? I need to do some animation but I don't know how to access the stackView from a function?

[@LetsBuildThatApp]

You can always create a variable that holds the reference to your stack view.

[@shingetzu88]

outside of the iconcontainerview declaration?

[@shingetzu88]

How can I do that when its only returning the containerview? Can you show me here how?

[@LetsBuildThatApp]

It's a little complicated, I suggest just creating the container view outside of a closure since it seems this might be too advanced. For example, just create everything in viewDidLoad.

[@ammarahmad9004]

cool job

[@MochammadIqbal29]

Awesome! Awesome! Awesome!

[@stevengao8345]

thanks for this super cool tutorial, can anyone tell me why facebook those little emoji faces can move eye or mouth , still png image vs gif or there are more animation involved ? where can we download those gif anyone knows ? thanks

[@yoellev5191]

Amazing!

[@mansoorjafari8309]

Thanks brian

[@JunaidKhan-ny8tu]

awesome man :-)

[@mukulbakshi28]

Love You bro. Thanks

[@umashankarkumar287]

How to implement emoji title

[@PaweLiczek]

Brian do you have any idea why my icons not change alpha value when im using hitTest? When i changed if hitTestView is UIView whole iconsContainer is disappear so its working but icons not disappearing dont have any idea why :/ -------------Edit---------- sorry i already know why i forget about iconView.isUserInteractionEnabled set to true. Now im sure i will never forget about it again.

[@LetsBuildThatApp]

Haha yeah I knew someone was going to forget to set that flag to true. Very easy mistake to make and took me a few mins to realize it myself

[@PaweLiczek]

Yeah but now im curious why iconContainerView changed alpha to 0. I never set it isUserInteractionEnable to true

[@LetsBuildThatApp]

By default, UIViews have it set to true. UIImageView defaults as false.

[@PaweLiczek]

Thanks Brian by one mistake and Your help I acquired new knowledge :)

[@rasheshbosamiya1482]

Awesome

[@kav04]

I added this line of code for the playing with code sake - stackView?.subviews.forEach({ (imageView) in if imageView.transform != .identity { imageView.transform = .identity } })

[@louiss146]

What Mac are you using?

[@LetsBuildThatApp]

I use a hackintosh

[@louiss146]

I noticed your iphone x simulator runs very smoothly compared to my macbook pro, but then again it might just be my hardware. Have you noticed any performance differences using xcode with custom hardware?

[@LetsBuildThatApp]

Nope

[@delmarz]

Hi brian may I know the full specs hardware on your hackintosh? I will plan to build soon for my workstation. I would be appreciated if you can send to my email. here's my email [e-mail] Thanks very much,

[@LetsBuildThatApp]

Its running on a i7 8700k, 32gb GSKill TridentZ, Gigabyte z370, Thermaltake TouchPower TPD-0750M, Corsair 1TB SSD. I can't remember the heat sink and case but they're recycled from other builds.

[@tieda]

niubi...

[@alidhuniya7733]

bro check your messanger

[@LetsBuildThatApp]

I don’t use messenger

[@ikechukwumichael1383]

please why?

[@LetsBuildThatApp]

Social media apps prevent me from focusing on producing video for everyone here. Thus I avoid messenger, twitter, ig when I'm at home.