How to implement ViewController with CollectionView inside? - ios

I am trying to implement a "profile" page in my app which is similar to Instagram profile page
But the problem I have is the Cell from UICollectionView below get loaded by -collectionView:cellForItemAtIndexPath
But it load every cells at once ,it does not just load the visible cell as it should. And this is because it is inside scroll view ,the make every cell loads immediately.
The image for cell will be sent from server via API and I want to do a loading when user scroll to 2/3 of page. And this can be done easily in UICollectionViewController.But I want to know how to do that in ViewController that contain collectionView in lower path.
Please help. I think using Header of CollectionView as an upper part of page might solve the problem. But I also want to implement that when user tap the button and then the display below change ( just like instagram page). So I am not sure what direction should I go . Should it be a custom container VC or something else ?
TIA

UICollectionView is very versatile. It can handle the entire view, including the upper part that pertains to the user's profile.The trick is to make use of a "supplementary view" in collection view terms (like a header view in table view terms).
I suggest that you throw away the scroll view and make the collection view do all the work for you. Just like you register classes for cells, register a view for the user profile portion of your UI using:
- (void)registerClass:(Class)viewClass forSupplementaryViewOfKind:(NSString *)elementKind withReuseIdentifier:(NSString *)identifier
And respond to the datasource method:
- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath
By answering the that user profile view.

Related

UICollectionViewCell not displaying in UICollectionView

I am new to iOS and just trying to build a template view for future use.
I designed a view in Main.Storyboard with a UICollectionView - with several (hardcoded, I guess?) UICollectionViewCells. The UICollectionView displays when I test the app (background of that portion changes color), but I am not sure how to get the UICollectionViewCells to display.
All I have done so far is connect the view to the appropriate view controller, but I am very confused as to where to go from here.
My Main.Storyboard : http://imgur.com/a/aXy3O
If possible - is there a way to quickly add a function to trigger an alert when any UICollectionViewCell is clicked?
Thanks.
UICollectionView have very similar structure like UITableView.
So if you check its delegate methods you will find what you need.In this case you need to implement this method:
- (void)collectionView:(UICollectionView *)collectionView
didSelectItemAtIndexPath:(NSIndexPath *)indexPath

Is it possible to go to the next page using Collection View and display data?

I'm the middle doing some project that involve CollectionView and property list. I want to do the image grid in the Collection View, and the image is the significance to proceed to the next page.
Here I want to do:
1) User click image in the collection view
2) Image will redirect to the next page and display the data that stored in the property list. The data is display according to the image that they click.
I'm using Xcode 6.
How can I perform such process?
Here is the almost similar example give by Apple. It will give you a good point of reference.
UICollectionView has a delegate which provides a method
- (void)collectionView:(UICollectionView *)collectionView
didSelectItemAtIndexPath:(NSIndexPath *)indexPath
When an item is tapped, the function above is called. Based on indexPath you can determine which item was selected.
In your storyboard, create a new UIViewController and create a segue from your UICollectionView to this UIViewController and make the segue as Push and name it 'collectionViewToUIViewController'.
In your didSelectItemAtIndexPath, call method
[self performSegueWithIdentifier:#"collectionViewToUIViewController"]
Also implement prepareForSegue where you tell the UIViewController what to display.

Child view controller in UICollectionViewCell

Suppose I want to achieve Pinterest's pin page, like this one:
This is my approach:
make a UICollectionViewController, pin's page is a UICollectionViewCell
cell is make of two components: pin info child vc && waterfall child vc
Then comes the problem: How can I reuse child view controller?
Some pseudo code:
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:#"Cell" forIndexPath:indexPath];
Pin *pin = self.dataSource[indexPath.row];
// i have to create a new childVC, based on different indexPath.
UITableViewController *pinInfoViewController = [[pinInfoViewController alloc] initWithPin:pin];
[cell updatePinViewWithPin:pin];
[self addChildViewController:pinInfoViewController];
// Add waterfall view controller
}
Every time this method is called, a new child view controller will be created, is it ok, or how to improve it?
I've run across a similar situation recently and struggled choosing between various solutions like those detailed in UIViewController within UICollectionView. It appears that there's an open source project that encapsulates this pattern available now: https://github.com/zats/Voltron. If your problem might be best solved by having a UICollectionView of UIViewControllers then it's easier to accomplish than trying to roll your own.
The way I would approach this is to subclass UICollectionViewCell and add the UI components you need to it as iVars. When you need to update the UI with new data you would grab the cell object like you are now in the pseudo code and then call a method you declare, could be updateCellWithModel: and pass it the model that is held in the datasource. In this method you would do some simple checks for if the UI elements are created or not and create them if needed, its always a good idea to have sanity checks in these types of methods but the elements should be created in the init method and will always be there.
EDIT: I believe I answered your question but it still confuses me, please add more info so I can edit my answer if needed.
I don't think they're using a collection view cell with an embedded table view here. It looks like a normal view controller that is dedicated to a pin. The data pulled from the server for said pin probably contains information about the name of the pin, a link to the pin, maybe an image, all the people who have added the pin, who the original pinner was, likes, favorites, etc., and the view controller parses that data accordingly. The controller uses that data to update the UI and that's that.
I do see a table view and collection view that Pinterest could have used for the implementation of this view controller, but it doesn't look like they embedded all of this data into a collection view cell.

How can I test whether the UICollectionView header is currently in the view rect?

I need to know if the UICollectionView header supplementary view is currently in view in order to force it to refresh/update when an app setting/preference is changed.
If the header is not in view, once scrolled to, the header will get drawn appropriately but right now that only happens on load and if the user scrolls off the header then back.
If the header is in view, I need it to update but I don't really want to have to reload the entire 0th section every time this setting changes (just when the header is in view...).
You could do something like keep a property around when the view gets dequeued. Then change it when it disappears using:
- (void)collectionView:(UICollectionView *)collectionView didEndDisplayingSupplementaryView:(UICollectionReusableView *)view forElementOfKind:(NSString *)elementKind atIndexPath:(NSIndexPath *)indexPath;
Depending on how you want your update to occur you could either keep a bool isVisible around or start an NSTimer when it appears and stop the timer when it disappears.
Unfortunately it doesn't look like there's a visibleSupplementaryViews method.

Button Displays Under Cells in Custom UITableViewCell

I have an app that uses a custom UITableViewCell to display detail information after a user clicks on a given row in a table. I can't seem to figure out why the "Reply" button located in the cell is inactive and appears behind the table itself. I can't click on it, select it, or do anything. I used Interface Builder to add the button rather than programmatically add it.
I've tried changing a number of things including the cell's class and File's Owner, but can't seem to get the button to be active and working. I think the button is linked up properly with a connection to a method in the code.
Here's a minimal, complete example of the code:
https://www.dropbox.com/s/atcof58ciqbaojr/CustomCell.zip
Apparently I needed to tell the table view how high the cell was. This is what fixed it:
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath;
{
return 157.0;
}

Resources