Yelp has this View show up when you click on a specific restaurant or some event:
In the picture above there is the Cascal label, then Write a Review button, then three buttons (Photo or Video, Check in, Bookmark) all in a row, then a map, and some cells underneath (Directions, Call, Explore the menu, etc.).
How can you make a complex scrolling view similar to this (do you have to use a collection view or table view?)? Since in both a tableview and collectionview you are reusing the same cells again and again (with the same layout) so it is difficult to create a view with so many heterogeneous elements like in the picture above.
Use a table view and a bunch of different cell classes each with their unique design (XIB or Storyboard) and height.
Select the cell class and height depending on index path and let table view delegate methods return accordingly.
Very basic stuff actually.
You only reuse cell classes if you need to. In the Yelp example the Directions, Call, Explore the Menu and More Info cells may have used the same design because the layout seems to be identical, only the image and text differs.
Related
New to Swift. I am trying to write a recipe-sharing app for fun. One of the features is to let users create a new recipe. On this page, users should be able to give an intro to the recipe to be created, upload an image THEN add a LIST of ingredients dynamically (as we have no idea how many ingredients in total beforehand).
I have created a UIViewController, which includes a UIViewTable, an image view and a "add another ingredient" button. I have created a class for the ingredient. And when the "add" button is pressed, a new "Ingredient" cell will be added to the table. However, I found that adjusting the UIViewTable height dynamically is quite hard.
I want my table to adjust its height according to the number of cells (rows). I haven't found much useful info online.
Or maybe I should've not even used this structure. Instead, just use UITableController (The entire page is a table)? But I got confused that some of the elements (image view, submit a recipe button, recipe-intro textfield etc) will be only created once. Why do I bother making them as prototype cells and add them to my view programmatically?
Thanks in advance!
First of all, welcome to Swift!
You put a few questions together, I will try to answer them one by one. Let's start with the simple stuff.
Don't try to change the height of UITableView based on the number of items. If you want to achieve similar functionality, take a look at UIStackView. Set fixed size for the tableView, ideally with constraints using auto layout.
UITableView is supposed to fill specified space and scroll items inside or show cell on top if there are not enough cells to cover all space.
UITableView is highly optimized to scroll over huge amount of cells as the cells are reused on the background. If you are new to the iOS world, take a look at this function https://developer.apple.com/documentation/uikit/uitableviewcell/1623223-prepareforreuse it can save you hours of debugging (I have been there)
UITableView vs UITableController
UITableController can save you a few lines of code, but using UITableView inside of UIViewController can give you more freedom and save you refactoring if your app is likely to change in the future. There is no specific advantage of UITableController
If you want to provide the extra elements (image view, submit button, text field etc), you can use several methods and this is where the UIViewController with your own UITableView comes in handy.
You can put some buttons, like a plus icon or "Done" button into the navigation bar, as the native Calendar app does.
You can put the static content (intro text field, image view) above the table view (visible always). Use constraints to place the static content on the viewController.view and constraint the table view under your static content. The table view will take less space on the view keeping the space for your content.
Insert your static content as a table view header (will scroll out with the content). Search "HeaderView" here on stack overflow to see how to achieve that.
Place your content over the tableView. If your button is small (rounded), you can place it over the tableView, eg. Twitter uses this for a new tween button.
Hope this answer your questions. Cheers!
I'm currently creating an update of my iOS application and I'm a bit stuck. I've tried to googling around but cannot find a decent answer on this.
I've a menu which links to different views. And I'm not really sure if I've done it the best method.
I've created a view, and added the links into a stack view. Should I considering changing it all to a tableview? or a collection view? Or maybe there's another way?
The current look:
Should I change this to a tableview? collection view? or something else? Or just let it stay as it is?
If the number of items in your menu changes at runtime and is large, you should use a table view, because a table view is good for efficiently displaying a screen's worth of items from a large list of items.
If the contents of your menu is small (under maybe two screenfuls of items) and fixed at compile time and you are using a storyboard, then you could use a table view with static cells, if you can make it look the way you want.
If the contents of your menu is small, then you can use a stack view (inside a scroll view) if that is easier for you. There is no particular advantage to using a table view over a stack view to display a small amount of content, unless you need other features of the table view (like the ability to select/deselect rows).
Based on the screen shot you posted, I'd either use a table view with static cells (since the screen shot is from a storyboard) or a stack view, depending on whether I can get the appearance I want from a table view. If, as in the screen shot, the buttons must be centered vertically, I'd use a stack view, because it's easier to vertically center the content with a stack view.
Look, the fact of have many itens on your screen is clear on the mobile applications, to make it easy, we have collecions view like UITableView and UICollectionView. On the UITableView's case, this implements the scrolling and have methods do handle the operations' list, you can see the documentation to check these methods: https://developer.apple.com/documentation/uikit/uitableview.
Main reasons to use UITableView
Implements scroll behavior.
Independent of size screen you can access all itens.
Easy to detect interactions like tap on cell.
Easy to make changes, like insert and remove content.
The UITableView exists precisely to solve problems like you has.
I noticed in the Airbnb app when you click on a specific cell on the home screen, they have a complex collection view displaying various items in different looking collection view cells. I have attached 4 pics below:
In those pictures you have different sections like About your host, Availability, Reviews, Group size up to 2 guests, Guest requirement, Contact Host, etc. How does one go about organizing a view like this?
Is this just a bunch of different cells in a TableView or CollectionView? Since every single item I click on the home screen has a very similar layout with the exact same sections. Or are these just views placed on a scrollview?
It's probably a UITableView or UICollectionView with a set of different cells. So their cellForRowAtIndexPath: cellForItemAtIndexPath: functions would return a different cell class for each different section.
They'll have an AboutYourHostCell class, an AvailabilityCell class, a ReviewsCell class, etc.
It would be possible to do this by adding Views into a UIScrollView, but it would be a lot of work, and you'd lose some nice behaviour that UITableView or UICollectionView provides - like highlighting cells when you press and hold, and animating changes.
I have to showcase some image with a little information like title and subtitle which will be horizontally swipeable. Basically, it will be like Airbnb app which shows the category and elements in it with horizontal swipe. The only difference is that in my case number of category(row) is fixed, which is 2. DataSource is same for both rows. I have two approach first is using two CollectionView and second one is by using a TableView and nesting the CollectionView inside tableview cell. Googled and get only the implementation part for both approach not the comparison or use cases for the approach. So my question here is, which process should I follow and why?
1) Using nested Collection view will make the code complex.Generally used only when cannot be implementable using table view.
2) Table view is similar to collection view just that it can be scrollable vertical not horizontal. This make table view easy to implement.
3) In your case collection in table view will work great. Row is fixed in that case you can use static table view.
I'm looking for a method to page or slide through up to 6 different views in one table view cell. What's the best approach to do that?
I already experiment with a Collection View and a Page View Control. But the diagrams are represented by different classes, so that the standard tutorials setting up a label, are not working for me.
Thank for any feedback on this topic.
Based on what you are doing, I would use a UICollectionView with different UICollectionViewCells for your different diagrams. That should allow you to use different classes for the content of each cell.
So first go and create a UICollectionViewCell for each diagram.
Then you are going to want to go into your UICollectionViewController (or wherever you are implementing your collection view) and in the cellForItemAtIndexPath method tell it which cell to display for each indexPath.