How can I build an UITableView like App Store? [closed] - ios

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I whant do build an table view like App Store.
eg:
As we can see, App Store app enables the user to drag the rows down and the header keeps on top...
and ... when you slide up the rows, table's the header moves out the screen...
and its possible to slide the heander like so...
Here ive create an projec that aims to accomplish that.
source
If someone can help me I appreciate it.
Thanks a lot!

*
You aren't clear about what behavior you are looking for. Do you want the header to stay or not? You have also not shown any code, so we don't know anything about your table
here's some things found by simple search:
link
That behavior is only common when the UITableViewStyle property of the table is set to UITableViewStylePlain. If you have it set to UITableViewStyleGrouped, the headers will scroll up with the cells.
link
Actually the tableHeaderView scrolls with table. This is not the case for section header views. If you have only one section then you can have the header view as tableHeaderView.
table.tableHeaderView = aUiView;
If you have more than one sections and all of them have their own header views, then you have no choice than leaving the header views behave in their own ways. Or, you can imitate the header view by making/configuring/customizing the first row of each section look like header view and remove the actual section header views.
link
I think the best approach would be to use a plain UITableView with Header and Footer set, and "skin"/theme your custom UITableViewCells to look like grouped UITableViewCells.
you'd might want to have a look over here for some pointers on how to achieve this.
*
The cells you are referencing are table and section headers
You can include a custom header for every table section by implementing the UITableViewDelegate method
tableView:viewForHeaderInSection:
There are equivalent properties and methods for the table and section footers. (this is a good reference)
Create custom UIViews to assign to the headers and footers.
For the Horizontal scrolling behavior, you should place a TableView in the header/footer and rotate the table by 90 degrees; then in the cell of the rotated table, apply the rotation in reverse to the actual content. Now you have a cell that displays horizontally scrolling images etc.
In the code for the header/footer, create a TableView and transform the table
self.horizontalTableView.transform = CGAffineTransformMakeRotation(-M_PI * 0.5);
Then, in the cells of this table, you apply the transform in reverse on the content of the cell.
CGAffineTransformMakeRotation(M_PI * 0.5)
Voila, Horizontal Scrolling (see this tutorial:http://www.raywenderlich.com/4723/how-to-make-an-interface-with-horizontal-tables-like-the-pulse-news-app-part-2)

You are referring to UITableView as well as UITableViewDataSource and UITableViewDelegate classes. (easier than it sounds) They work together to create dynamic table views.
UITableViewDelegate
Serving as a table's delegate means you provide answers to requests about the layout of the table and about actions the user performs on the tableView. Layout methods include the tableView asking about the height of rows, headers, and footers, what the buttons should look like, etc. Action methods include the user selecting a row and beginning and ending the editing of a row.
UITableViewDatasource
Serving as a table's "datasource" means you provide data for the sections and rows of a table and you act on messages that change a table's data. The "datasource" is asked for the data for a cell when the table is drawn, is told that the user has asked to delete a row, and is told the new value of a row that the user has edited.
There is a great tutorial on tableviews treehouse.com seen "Here".
Don't take the title literally just choose piece by piece the lines of code you can imagine using for your application! It even covers the feature you outlined in which the alphabetical header is displayed while scrolling using the tableViewDatasource and tableViewDelegate classes.
Also there are probably great repositories on "github" (didn't they just receive 100 million dollar funding?) Try finding or 'hacking' some of there code to make it easier.
Nice images BTW. Very high quality

Related

UITableView for a list of Controls [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
I am trying to understand when one should/should not use a UITableView.
I do know, if there is a table of information UITableView would be the perfect fit. But what if there are rows of "controls" ?
See the image below.
What are some of the advantages and disadvantages of using a UITableView to achieve layout above?
What alternatives to a UITableView exist for achieving such a layout?
This comes down to the question of how many controls/rows you will have and what they represent.
Dynamic Number of Controls Based on Model
A tableview is the perfect solution. The complications with having controls in a table view cell that is dynamically generated:
1) You cannot add IBActions for controls in table view cells. You will need to add a target/action to each control when the cell is generated.
2) Your action method will need a way to determine which element in your model the cell is displaying when selected (since cells are reused, controls will correspond to many model objects). To do this you need the index path in your model corresponding to the selected control. This can be done as follows (assuming a button but should work for any control):
Determine the control's position in the tableview:
let buttonPosition = button.convertPoint(.zero, toView: tableView)
Find the index path
let indexPath = self.indexPathForRowAtPoint(buttonPosition)
Then query your model for the object at the index path and respond accordingly.
Finite Number of Controls
The above is needlessly complex if you have a finite and known number of controls at runtime. In that case the above layout can be easily achieved with a UIStackView.
See StackView Documentation
Having controls in tableViews is perfectly fine.
You may want to know that tableviews have scrollable content and selectable cells, so your interactions will be slightly different than if you directly put your controls in a view.
Row selection and bouncing bounds can be annoying, as well as the delayed tap while touching inside a scroll view.
But if you need your controls to be dynamically shown depending on your settings, it can be done with the tableview data source or delegate methods.

Insert cells into a section of an already statically created table

I am creating an iOS app that has a form to create a certain 'event'. This form is wrapped in a tableview. This tableview consists of static cells. But there is one section in the table that can be used to add persons to this event and thus on a button press a new tableview cell needs to be inserted at that section. To demonstrate this see the following image:
What I want to know is how to insert cells into a static table. And also how to grab them when the user submits the form, since, as far as I'm concerned, you can't grab a specific section of a table.
I already looked at this kind of concept but this does not apply on adding cells:
Mixing static and dynamic sections in a grouped table view
Thanks,
I think there are (at least) 2 workarounds for this:
You could add a dynamic UITableView as a child to the UITableViewCell. See this stack overflow question about this.
An other solution would be to bypass the table functionality in that cell and change the height of the cell and add the extra controls manually.
It's not possible to add or remove cells at runtime, you'll need to use a data source for your tableview. I asked a similar question here, with no luck.
In response to your second question, you can always grab cells using the cellForRowAtIndexPath: method on UITableView.

When to use UICollectionView instead of UITableView?

I found that UICollectionView is like an upgraded version of UITableView introduced in iOS6, but when should I choose UICollectionView instead of UITableView?
There are still Apps using UITableView, if UICollectionView can do anything UITableView can do , why people still use UITableView? Is there a difference as far as performance is concerned?
Thanks!
That depends on the requirements. How the application flows determines which type of UI to integrate into the application.
People mainly use the UICollectionview for creating types of UIs with multiple images shown in a grid. This would have complex logic using UITableView, but with UICollectionview, it would be easy.
When using UICollectionview, you don't need to set buttons with tags or other things by getting selected items values. You can simply get -(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath and in UITableViewDelegate:
`-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath`
You get the selected row instead of the item, so for creating grid or modified items, using UICollectionview is best.
For the listing details of each item, people use UITableView because it shows more info on each item.
Apple Docs:
UICollectionView Class Reference
The UICollectionView class manages an ordered collection of data items and presents them using customizable layouts. Collection views provide the same general function as table views except that a collection view is able to support more than just single-column layouts. Collection views support customizable layouts that can be used to implement multi-column grids, tiled layouts, circular layouts, and many more. You can even change the layout of a collection view dynamically if you want.
UITableView Class Reference
A table view displays a list of items in a single column. UITableView is a subclass of UIScrollView, which allows users to scroll through the table, although UITableView allows vertical scrolling only. The cells comprising the individual items of the table are UITableViewCell objects; UITableView uses these objects to draw the visible rows of the table. Cells have content—titles and images—and can have, near the right edge, accessory views. Standard accessory views are disclosure indicators or detail disclosure buttons; the former leads to the next level in a data hierarchy and the latter leads to a detailed view of a selected item. Accessory views can also be framework controls, such as switches and sliders, or can be custom views. Table views can enter an editing mode where users can insert, delete, and reorder rows of the table.
Here's my criteria:
If a UITableView can do it, use it
If a UITableView needs lots of code to do it or can't do it at all, use UICollectionView.
You have to consider the restrictions on UITableView before making a decision: It's a single column. And you can only customize the cells, but not section backgrounds and such. So if you have a straight-up list of things with no extra frills - that looks like a bog standard iOS view, basically - then use UITableview. If you have custom insets, or a border around each section, use UICollectionView.
I'm actually considering UICollectionView for all things simply because it's very expensive when you start developing your view as a table view, then later find out it can't do that one thing that you need it to do. 1st hand experience ;)
Edit after even more experience with the two: Disregard that last paragraph. UICollectionView requires a lot of boilerplate code to make it work like a UITableView. Use UICollectionView only when really needed. ;)
For simple lists and forwards/backwards navigtaion, use UITableView.
If you need a high degree of customisability, use UICollectionView.
Generally speaking, in software development, it's best to choose the approach which represents "The Simplest Possible Thing".
EDIT: As of iOS 14, UICollectionView can now do lists as well and is now the recommended approach. See this session from WWDC20 for more information and implementation details: https://developer.apple.com/videos/play/wwdc2020/10026/
According to my point of view main difference between collectionView and tableView is that
TABLEVIEW --> show list of items in only one column.
COLLECTION-VIEW -->show list of items in multiple column.
Hope it will help you.
If you choose UITableView for iPhone, make sure you have considered your iPad strategy first. If you want an iPad-specific layout, you may want that single-column layout to become a grid.
Although it's not required, I always use a collectionview. That way I can easily adapt how my collections are presented for differing resolutions. A plus is that it's ready to quickly add new types of cells when refactoring in the future.
I see no point of tableviews. It's very simple to use a collection view to represent a table. IMO.
From my personal experience the two elements should only be compared loosly.
TableView
A TableView is a UI element designed for showing data in a list format. There is certain functionality that comes as standard with a UITableView, such as:
Accessory View
Cell Selection Style
Editting Style (Delete and edit buttons).
The above elements enhance the usability of data when displaying and interacting in a list format. Such as viewing emails.
CollectionView
A CollectionView is a UI element designed for showing content using a custom layout (usually anything that isn't a list). CollectionViews improve functionality of displaying data in completely bespoke layout styles and also dynamically changing layouts on the fly. Some examples are:
Horizonal Lists
Photo Galleries
Thumbnail views
Carousels
Dials
Laying out elements on a map
etc.
CollectionViews also allow for multiple selections.
Conclusion
As you can see from the above, both have completely different use cases and are designed for enhancing the development and usability of their own specific data sets.
If you are looking at displaying anything in a list style with the followin interactions:
- Adding
- Deleting
- Re-ordering
Then a UITableView will simplify this process by providing the support straight out of the box.
Anything else, you should leverage the benefits of CollectionView as you have more flexibility.
Its totally dependent on how your data to be shown.
As mentioned by many above, if you require only single set of data and that too not complex, go for UITableView else use UICollectionView.
UICollectionView is customization friendly.
If you are dealing with multiple cell heights or so, then go for UICollectionView.
Both are depends on the requirements. Table Views also have support for a variety of editing scenarios. This support has not been implemented in the Collection View classes.
If you are converting from a Table View that relies on these methods, expect to do a little extra heavy lifting in the Collection View.
Collection View section headers can be placed anywhere within the view.
and UITableView don't need to set buttons with tags or other things by getting selected items values.
In practice, everyone uses UICollectionView that I've come across, when they only need a UITableView. "It's one-dimensional. It goes up and down. Why are you adding unnecessary delegate methods for layout AND data?". I once spent an extra 2 hours helping a startup find out why their UICollectionViewCell got squished because the owner, who didn't read the Animations manual, nor HIG, nor the UICollectionView guide, decided to use it and add variable heights and anims. Needless to say, he gave himself a headache and much lost time on a non-business-critical issue he could have avoided by simply using a table cell, since there's no extra layout delegate + Nib.
Let me get this straight, I am all for UICollectionView's when your data and display need it. They're very powerful. But in practice, most people I've seen have been using them on lists.
This brings up another flaw. They're also used on short, constant lists that won't change, ever. In this case, just make a Xib. Or write a custom view that stacks them. Why? Because you don't need the memory management for 5 sets of labels with a button or switch. If they might change, then yes, use a list. If you want physics, then UICollectionView works well with a some cool effects. But do you really need to add 5 delegate methods and a layout system for 5 labels that will never move?
Also, I'm not forgetting that iOS has a native stacking view now too. I can never get it to deform how I want, even though I'm quite adept at the 2D and animation systems, so I never use the built-in one.
All I'm saying is, define your requirements. Maybe you don't need either of these, if your UI isn't adding/removing items and refreshing itself. Or maybe you want to write a Card Game and throw them out virtually on a table, then use UICollectionView with a physics system for its layout guide.
Personally I think the UICollectionView can do most of the work which UITableview can do. well, at the same time, it's more complex to use.
I suggest you use UICollectionView as TableView just in case your manager change requirements in the future.
Based on our need we are choosing TableView or CollectionView.
Example:
For phone contacts tableView is best option.
For photo gallery, collection view will be best option.
I had this issue in my current project. Which to use. In my case it was simple really. I needed both. I needed my view to look like UITableView and also to change its change / layout. So, UICollectionView was used. I also use UITableView everywhere I don't need any extra customisation. Since UiTableView comes with a default layout that includes images and text - I use it for simplicity.
Based on our requirement we choose UITableView or UICollection view.
If we want to display images or items in grid type or if we need more customisability we use UICollectionview.
For listing each item with details and subdetails we use UITableView.
UICollectionView:
The UICollectionView class manages an ordered collection of data items and presents them using customizable layouts. Collection views provide the same general function as table views except that a collection view is able to support more than just single-column layouts.
UITableView: A table view displays a list of items in a single column. UITableView is a subclass of UIScrollView, which allows users to scroll through the table, although UITableView allows vertical scrolling only.
As per my view for Grid View display use UI Collection View.All other list view use UITable View

Giving a grouped UITableView "First Crack" at touches when using a section header view containing a control

I am using a standard grouped style UITableView that returns a custom header view for one of it's sections (using the tableView's delegate method viewForHeaderInSection:). The view that is returned for the section header contains a control. It displays an image and is a control so it can tapped to let the user change the image. My desired UI is similar to the photo for a contact in the Apple Contacts app (a floating imageView-like control in a grouped style table).
The problem I'd like to solve is that touches on the tableView section header go straight to the control. I'd like the table to get a chance to determine if the touch is actually the beginning of a scroll gesture. If not, then the table can pass the event to the section header view for processing.
This is how all the rows in the table behave since I have "delaysContentTouches" for the table on. I suspect the problem is because the section header view is not in the table's view hierarchy. So everything is probably working per spec. just not the way I want.
I want the section header view to behave regarding touches just like rows do (table gets first chance to process).
BTW I am not placing this control in a table row (which would solve the problem) because I want the rounded rect grouped style for all table rows, but not for this one UI element. This control is in the center of my table (header for section 1) which is why I want drags on it to scroll the table.
OK, so apparently this is simulator issue only. On a device my tableView gets the first chance at the event. So I guess I need to listen to the Apple mantra of "always test on an actual device" before posting to StackOverflow. Sorry friends... may my error be helpful to others who, like me, probably spend too much time in the simulator.

UITableViewCell- controlling movement

When editing my UITableView, I give the option to move cells to reorder the data. However, The top two cells in the table are cells that give information about all of the cells in the table, and I dont want the user to be able to move information cells into that section. Here is a picture of the problem:
The user shouldn't be able to drag the cell titled 'This is bad!!!' into the section with the 'Total:' and 'New Group...' cells. Is there a way to control this functionality? I haven't seen a delegate method that does this, but I could have missed one.
Edit: oops! I just saw that someone else has asked the same question on SO, so I'm going to post the link and close this question. Thanks #fzwo for your help.
How to limit UITableView row reordering to a section
tableView:targetIndexPathForMoveFromRowAtIndexPath:toProposedIndexPath: from UITableViewDelegate is what you're looking for.
In your concrete case, you could also display the header information in the actual tableView.tableHeaderView. This scrolls like an ordinary cell, but isn't a cell. It would probably also make sense from a UI perspective, because it is something different than your ordinary cell content.

Resources