Share Photo Caption
Instagram Firebase
With a selected photo now available in our app, let's work on the next page where a user fills out the caption of their post. We'll start by adding a top section for the selected image and caption text using a UIImageView and UITextView. Next we need to somehow send in the selected image from the previous screen into this UIImageView. In order to do this, we'll look back into how our large size header image is being rendered out and add in some logic.

Comments (22)
johnrm9
6 years ago
I like to initially put a print(#function) in handlers to check if they are triggered. Print (#function) (Swift 3) prints the function name (signature).
Brian Voong
6 years ago
Codename
6 years ago
Hi Brian, What are the key differences between a method and a function? Are they the same thing? Thanks,
Brian Voong
6 years ago
Codename
6 years ago
Ok, thanks for getting back to me!
omari
6 years ago
There exist a difference between methods and functions: Functions are self-contained chunks of code that perform a specific task. You give a function a name that identifies what it does, and this name is used to “call” the function to perform its task when needed. Methods are functions that are associated with a particular type. Classes, structures, and enumerations can all define instance methods, which encapsulate specific tasks and functionality for working with an instance of a given type.
omryno1
6 years ago
Hi Brian, I've noticed in the real Instagram app whenever I select an image from the grid the "header" just drops down instead of scrolling all the way to the top, it could be a little frustrating if you drag all the way down and accidentally tap on an image, Do you know how can I implement the same idea ?
Brian Voong
6 years ago
Kilian Hiestermann
6 years ago
I'm not sure what you mean, but if you want to have the header in place: http://stackoverflow.com/questions/27316263/uicollectionview-sticky-header-in-swift
Christopher Lee
5 years ago
Hey omryno1, I managed to implement the sticky header like the real instagram in a few steps. All the changes are in PhotoSelectorController.swift. Step 1: In viewDidLoad(), add the below code. This makes your header sticky let layout = collectionView?.collectionViewLayout as?UICollectionViewFlowLayout layout?.sectionHeadersPinToVisibleBounds = true Step 2: In didSelectItemAt, I removed the code that scrolls to the top everytime you select a photo. At this point, you'll notice that when you scroll the headerCell does not have a bottom border. So let's add that border Step 3: In viewForSupplementaryElementOfKind, create the bottom border with the below code and add it right after you deque the header cell. let bottomBorder = CALayer() bottomBorder.frame = CGRect(x: 0, y: header.frame.height - 1, width: header.frame.width, height: 1) bottomBorder.backgroundColor = UIColor.white.cgColor header.layer.addSublayer(bottomBorder) Step 4: To make it perfect you can remove the insetForSectionAt so that the you get an even border when you're at the very top. Sorry this reply is super late but I just started the course and was curious as to how to implement a sticky header as well. Of course, I am not sure if it's the best way but I got it working so far and selection still seems to work fine. Hope this helps! Cheers, Chris
Clive Wong Toh Soon
6 years ago
Hi Brian I couldn't get the preferStatusBarHidden to work. My status bar still shows up.
smiller193
6 years ago
Is anyone having an issue with the input accessory view getting stuck at the bottom? When exiting comment screen
Adam El-Kadi
5 years ago
Hey Brian, I have a question can you teach us how to send a message to the user that someone liked their photo please you can do that here or in a youtube episode. Thanks its because I searched all over the web and couldn't find anything
Matuk
5 years ago
When shall we the pushViewController vs. present controller? What is the difference in using the one over the other?
Brian Voong
5 years ago
Adam El-Kadi
5 years ago
Hey Brian, I was looking at the final project and I was wondering is removing all posts and then re-fetching them the most efficent way of refreshing the news feed. It seems to crash everytime I refresh, also when I refresh all my posts are posted twice (other posts are not)
Adam El-Kadi
5 years ago
Can you please help with that?
Brian Voong
5 years ago
stevezhou
5 years ago
Since topLayoutGuide has been deprecated in iOS11, we need to use view.safeAreaLayoutGuide.topAnchor for the containerView topAnchor?
Brian Voong
5 years ago
Esat Kemal Ekren
5 years ago
We mentioned in anchor extension in this lesson i just want to share for the new iphone x interface i researched and get result of the improve this code with help of course maybe we can use this extension more efficiently. I hope it'll helps. I added boolean value for the check screen size for the iphone x or not let know me if there any fix in these code extension UIView { func anchor (top: NSLayoutYAxisAnchor?, left: NSLayoutXAxisAnchor?, bottom: NSLayoutYAxisAnchor?, right: NSLayoutXAxisAnchor?, paddingTop: CGFloat, paddingLeft: CGFloat, paddingBottom: CGFloat, paddingRight: CGFloat, width: CGFloat, height: CGFloat, enableInsets: Bool) { var topInset = CGFloat(0) var bottomInset = CGFloat(0) if #available(iOS 11, *), enableInsets { let insets = self.safeAreaInsets topInset = insets.top bottomInset = insets.bottom print("Top: \(topInset)") print("bottom: \(bottomInset)") } translatesAutoresizingMaskIntoConstraints = false if let top = top { self.topAnchor.constraint(equalTo: top, constant: paddingTop+topInset).isActive = true } if let left = left { self.leftAnchor.constraint(equalTo: left, constant: paddingLeft).isActive = true } if let right = right { rightAnchor.constraint(equalTo: right, constant: -paddingRight).isActive = true } if let bottom = bottom { bottomAnchor.constraint(equalTo: bottom, constant: -paddingBottom-bottomInset).isActive = true } if height != 0 { heightAnchor.constraint(equalToConstant: height).isActive = true } if width != 0 { widthAnchor.constraint(equalToConstant: width).isActive = true } } }
Mauricio Figueroa Olivares
5 years ago
what enableInsets mean?
Abhishesh
5 years ago
you could even give default values to the parameters so you dont have to specify nil/0 if you don't need them. func anchor(top: NSLayoutYAxisAnchor? = nil, left: NSLayoutXAxisAnchor? = nil, bottom: NSLayoutYAxisAnchor? = nil, right: NSLayoutXAxisAnchor? = nil, paddingTop: CGFloat = 0, paddingLeft: CGFloat = 0, paddingBot: CGFloat = 0, paddingRight: CGFloat = 0, width: CGFloat = 0, height: CGFloat = 0 ){
Derik Malcolm
5 years ago
Hi Brian, I was just curious why you decided to use a reference to the header to get the image instead of using the selectedImage variable we already created? Thanks!
Derik Malcolm
5 years ago
Never mind, I forgot that selectedImage was a lower quality image.
Michael Evans
5 years ago
Hi Brian When you push the sharePhotoViewController on to the stack, could you just set sharePhotoViewController.imageView.image = header.photoImageView.image Wouldn't that create a reference that you could use to send to Firebase? (I'm assuming that comes next). I've been trying to complete each section before watching the tutorial to see how close I can come. I come pretty close and mine solution seems to work, but i usually have fewer variables or steps. Am I just using a style that I'll run into problems with later on if I have to refactor the code? For example: I created a selectedIndex variable to reference the position of the image in the [images ] rather than a reference to the selected image. I didnt need to get the index from the image in order to provide the index for the [assets]
amosnistrian
5 years ago
I see you changed fetch limit to 15. What if we wanted to fetch all the photos in the users photo library?
rehan1531
5 years ago
remove this line of code " fetchOptions.fetchLimit = 15 " and you are good to go for fetching all the photos :-)
OfftheCode
5 years ago
won't it lag the app forever with big album/gallery? or is it clever enough be default to load only photos presented currently on the screen?
edison1
5 years ago
Could we also do this the opposite way? Handling text and then passing it onto another view in which we select the picture?
Jaylon22
5 years ago
Hi Brian, I want to show the sharePhotoController first so they can post a status then they could be able to pick their picture if they want. Only problem is if they pick the picture and return to the sharePhotoController it make a new "post" and they have to redo the status all over again. And if i press back it goes back to the photoSelector class then if i press back to the original sharePostController class. Do you have any tips.
Brian Voong
5 years ago
Jaylon22
5 years ago
Hey brian, I think to better explain my question, i want to build a twitter type status View Controller, for twitter you are allowed to add a photo to the status. I want to do the same but when i choose the photo and pass the data, it seems like it creates a new version of the view controller with the photo. How could i push the data to the already given status view controller? Could you please help.
petar7
5 years ago
Hy brian can you please tell me could it be done with custom delegation and can you give quick example , now learn I custom delegation and I am so confused about it.
Brian Voong
5 years ago
petar7
5 years ago
I thought for imageView I wanted only to know what function in protocol should I write to set image on containerView in SharePhotoController when tapping on cell imageview if you have time could you please write that quickly. Thank your for answering anyways.
anantangad
4 years ago
Hey Brian, When I click some images in the grid it works perfectly fine and shows the image in the header, but for some images I've noticed that when you click them, it scrolls up but all i see is the cyan color on the header and no image. My target size is 600,600.
Brian Voong
4 years ago
Dino32
4 years ago
Hi Brain! One fix for IOS 11 and older. We have to use view.safeAreaLayoutGuide.topAnchor instead of LayoutGuide containerView.anchor(top: view.safeAreaLayoutGuide.topAnchor, left: view.leftAnchor, bottom: nil, right: view.rightAnchor, paddingTop: 0, paddingLeft: 0, paddingBottom: 0, paddingRight: 0, width: 0, height: 100)
malrhex
4 years ago
How to get to the max size of the simulator?
malrhex
4 years ago
Hi Brian, How do the SharePhotoController knows that if he dismisses the VC will go back to the HomeController if they are separed on the mainTabBar?
Brian Voong
4 years ago
malrhex
4 years ago
But if you see, nothing is presenting it. Just the MainTabBar I mean, the begining of photoSelector. and In this video we can see how the dismissal of ShareController goes for HomeController. Refer to the next episode #15 between the timeLine of 20:20 and 20:21. Looking for the clarification.
malrhex
4 years ago
#16. btw.
Brian Voong
4 years ago
Clint Larenz Nurse
4 years ago
Please help, if I do not add a caption and leave the placeHolder " Add a caption..." I get [GatekeeperXPC] Connection to assetsd was interrupted or assetsd died Am I suppose to hide the placeHolder somehow if the text is empty?
Brian Voong
4 years ago
Clint Larenz Nurse
4 years ago
When I add a caption, the image uploads fine, If I do not add a caption, I get the error. I added a label to the textView to give it a placeHolder. Am I suppose to do something similar like you did with the commentsTextView? Where if you do not add text, and click share. The comment is empty? I have no idea how to do this with the caption for a share image
Brian Voong
4 years ago
Clint Larenz Nurse
4 years ago
Do you mean bypass " guard let caption = captionTextView.text else { return }" If I add let placeHolder = " Add a caption" and subview it to captionTextView, " " Add a caption" will be the caption if I do not add text. Basically I want it to be empty if a user does not add a caption, but the placeHolder still be there. Just not shared as the caption. I hope I am making sense
Clint Larenz Nurse
4 years ago
Oh did you mean guard let caption = captionTextView.text, !caption.isEmpty else { return } ?
Clint Larenz Nurse
4 years ago
Okay, bypassing the checking of caption text worked.. Will I have an issue with doing that later on?
HELP & SUPPORT