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.
Related
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.
I am somewhat new to iOS, but am experienced in Android.
I have an app I am working on and it needs to populate a page with your "history" of past people you've interacted with, and it shows their picture, name, rating, and some other information.
This needs to populate in a vertical list, maybe a table? See the image below...
Now, in android, I would create a custom class with a layout that houses the picture, name, information, rating, and what not in one xml file, and in the activity I would call that class in a for loop, grabbing all the users and then programmatically it would add each view one after another, with their own unique user information until there is no more users to populate with.
How exactly can I do this in iOS and xcode? Do I need to make an XIB and add the picture, name, rating, and info place holders in that, and create a custom class for it that I would use to run in a for loop as well? I am a little stuck on how to do this with iOS.
Any help is much appreciated, and I can provide any additional information! Thanks :)
In iOS, you probably want to use a UITableView, with each row being a custom subclass of UITableViewCell. You can either create the layout for those cells in a separate XIB, or put the whole lot, tableView and "prototype" cells in a storyboard. You can achieve a lot without even subclassing, so fire up a dummy project in XCode and play (using one of Apple's templates gives you a good start). Enjoy.
What you probably want is to use a UITableView.
You don’t do the for-loop yourself. What you do is implement a set of delegate methods that the table view calls back to.
You can create your prototype cell in your XIB or Storyboard. When you add a Table View to the layout, you can then add a cell to that table view, and that cell will be your prototype. It looks like you only need one prototype cell, but you can create as many as you need. In Interface Builder you give the prototype cell a “reuse identifier”, which is just an arbitrary tag you use to refer to the prototype in your code. Your prototype cell can be your own subclass of UITableViewCell, or if you don’t need any custom code in it, you can just use UITableViewCell.
Then you implement several delegate methods. One is where you set the number of sections in the table view; it looks like you will only have on section.
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tv
{
return 1;
}
Then you tell it how many items are in the table view. Assuming you have the objects you want to display in an array, you just return the length of the array.
- (NSInteger)tableView:(UITableView *)tv numberOfRowsInSection:(NSInteger)section
{
return self.objects.count;
}
Then, for each item in the array, cellForRowAtIndexPath will be called. Make that method return the actual cell. You call dequeueReusableCellWithIdentifier to retrieve your prototype cell, using the reuse identifier you assigned in Interface Builder. Then use the corresponding object to set up the UI elements in your cell.
- (UITableViewCell *)tableView:(UITableView *)tv cellForRowAtIndexPath:(NSIndexPath *)i
{
UITableViewCell *cell = [tv dequeueReusableCellWithIdentifier:#"Cell" forIndexPath:i];
Thingy *item = self.objects[i.row];
cell.textLabel.text = item.name;
return cell;
}
That should be enough to get you started with the documentation, now that you have the overview of what you need to implement.
The first thing you have to do in switching from Android to iOS is to learn the terminology. Then you'll know what to search for on Google, SO, etc.
What's you're looking to do is create a UITableView.
Here is a link to a super basic 'how-to' to get you started with tableviews.
http://www.appcoda.com/uitableview-tutorial-storyboard-xcode5/
Once you've got the basics down, you'll want to take that a step further with learning how to customize the UITableViewCell within your tableview, so you can accomplish the look you've detailed in the question.
http://www.appcoda.com/customize-table-view-cells-for-uitableview/
I'm not sure I can help anymore than that at the moment. Jump in, learn tableviews, and start searching on OS to answer the million other questions you'll have a long the way.
Good luck!
I am making an interface which have UITableView with four custom UITableViewCell's. And every other UITableViewCell have also UITableView. This mean I have TableView inside a TableView.
Let me call first tableView - ParentTableView and nested tableView - ChildTableView. So I implemented method didSelectRowAtIndexPath on both tableView's. But when the app is running, only the method of the ChildTableView is being called. I need to know inside the ParentTableView, which cell is being tapped.
How can I transfer that information further from ChildTableView to ParentTableView.
This may be a silly question, but I can not find any reliable solution so far, so please help me.
Thank You in advance, kind Sir
First, I think nested table views is a bad idea. But I don't know your use case, so it might be an exception.
The table view controller class used inside a cell have its own #protocol definition and set the outer table view as its delegate. In the inner didSelectRowAtIndexPath: it can inform the outer table view about the selected indexPath, its own indexPath and any other information you might want to transmit.
Try using collection views. You can do a layout that works like a regular table view and then in the cells that need to have a table, you can make those separate cells with another collection view inside or a table view inside of it.
As mentioned before, it's not easy doing table views inside of cells, and it can be very tricky to get things to work correctly.
This is an old tutorial I wrote which may help and be of guidance. But since then there's been collection views and auto layout, so keep in mind it's very old.
In my app, I have a login-register-forgotpasword wireframe. Each step of the process is implemented in a separate UIViewController, all of them inside the same Storyboard, and transitions between each controller are animated. So far so good.
Now we've changed the design, so all views have the same background elements and a header (not exactly a UINavigationBar), and I don't like the feel of the animation to a view that always looks to be actually the same, but just showing a different form. So I'm considering different approaches to, instead of pushing whole controllers, just showing/hiding its views, but staying in the same controller.-
1) My first try was instantiating the controller which view I want to show, and add it to the current view. Something like.-
- (IBAction)btnRegisterPressed:(id)sender {
_viewHome.hidden = YES;
RegisterController *controller = [self.storyboard instantiateViewControllerWithIdentifier:#"registerNewUser"];
[self.view addSubview:controller.view];
}
This one would be perfect, as I'm using static UITableViews for my forms, so as far as I know I'd need a UITableViewController for each one. But it seems IBOutlets and IBActions got broken. Is this approach possible in some way? If so, it's considered a bad practice?
2) My second option is just creating all the views inside one controller, and properly showing/hiding them. This would one be hard to maintain, and chances are I'd have to forget about static UITableViews.
Could anyone give me some advice of which option would be better, or point me to any other possible approach I'm missing?
Your option #1 is not appropriate as written but close to an approach you should probably consider. You can add nest the views of different UIViewControllers however when you do so you should use the methods described in Managing Child View Controllers in a Custom Container so that the parent controller correctly manages its child controllers.
You can use as many tableviews as you want for the same controller. The delegate methods contains the object that fired the method itself.
Following this approach (which i wouldn't recommend) you can probably tag your tableviews and then do:
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath;
{
if (tableView.tag == 1) {
doStuff;
} else if (tableView.tag == 2) {
doOtherStuff;
}
}
Well, personally, I feel we should keep things simple and straight forward for end user to quickly gel up with your app. Animations plays an important role in this. Tapping on cell of a tableview pushes another table view and there are different UI widgets like chevron that indicates the transition and user is not surprised.
Showing everything on single screen and hiding/unhiding them based on user's action is fine as long as you have proper animation. For instance, you might have seen TableView sections collapsing/expanding on tap.
You need to make a trade off and see what best suits based on your application. Whatever you decide my suggestion would be to add nice animations instead of simple hide/unhide.
I am trying to set up a UITableView inside of a UIViewController. I'm doing this because it allows me to add a top bar with save and cancel buttons. I'm using storyboard and static cells to model the tableview to get input from the user (think of the create new event in Apple's calendar app). I have the view in Xcode, but when running it on my phone or the simulator, the tableview does not display. Here is the simple view in Xcode:
And this is how it displays when running it:
I've read about adding delegates and setting the datasource and such, but really this is all just going to be static cells with text fields, no data being loaded. Why is this happening and what can be done to fix it? Thanks!
#Made2k It looks like you found a solution, but for others who come across this with the same issue, note that you can only use a UITableView with static cells inside of a UITableViewController. This is not a well-documented fact, but apparently only UITableViewController knows how to handle the layout of static cells, whereas a regular UIViewController just needs to implement the UITableViewDelegate and UITableViewDataSource protocols in order to handle display of content in a UITableView added either programmatically or via Storyboard/Nib.
Hopefully this will save someone some time. #Made2k's solution is fine, but does make your storyboard unnecessarily busy. If you don't need to use a UIViewController, then just do your work inside a regular UITableViewController and save yourself a headache.
If you want to use a UITableView in a UIViewController you have to make the ViewController a data source and a delegate of the TableView and then implement methods
-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
In case of a static table, in the cellForRowAtIndexPath you'd return outlets of the static cells. For a detailed description check out this answer:
https://stackoverflow.com/a/19110821/3110536
I ended up thinking about this in a different kind of way. The problem I thought I was having was I wanted all the features that a navigation controller provides, but I needed this to be the base of the controller, i.e. nothing to go back to. I was thinking that the only way to do this was to create a UIViewController and add the table view and such in there, but what I came up with is to simply just create a new navigation controller and now this view shows up as the root view like so:
I don't know if this is the best practice, but hopefully it can help somebody else if they are having this problem.
Man, following Hack really works!
You should give it a try!
In my requirement I wanted to add buttons in my Static cells too!and Toggle the visibility of the TableView
[self.tableView setHidden:YES/NO];
and Reload it with new data
[self.tableView reloadData];
and so many things is possible with that way of doing it!
https://stackoverflow.com/a/19110821/1752988
Hope the above link would help you! (Y)