How can I build an UITableView like App Store?

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...

enter image description here

and its possible to slide the heander like so...

enter image description here

Here ive create an projec that aims to accomplish that.

source

If someone can help me I appreciate it.

Thanks a lot!

This site is not here to review your project and tell you how to make it work. Update your question with relevant code and point out what issue you are having with it. — rmaddy, May 24 '14 at 23:00
Im just asking for help to accomplish this behavior and I just send the code to illustrate better my case. — Antonio Carlos, May 25 '14 at 01:17
Please click the help link and read about how to ask a good question here. — rmaddy, May 25 '14 at 01:23

score 2 · Answer 1 · edited May 23 '17 at 12:30

* 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)

Hi thanks by your reply. I know about tableView:viewForHeaderInSection and I've used it to build a custom view that holds my images to slide horizontaly, my problem is: when I scroll's down the rows, tables header scrolls too and I whant it to stay at the top. — Antonio Carlos, May 25 '14 at 01:21
you should try to be more specific in your post ... see my edit. best, — amac, May 25 '14 at 06:53
What I want is, when I drag the rows of my table the header keeps on to of the screen like App Store app. I know I can build an custom view for my header, I've done that before, I just need to slice my header from the table rows when the rows get scrolled down and when I scrolls up my rows, the header moves out of the screen. — Antonio Carlos, May 25 '14 at 20:01

score 0 · Answer 2 · edited May 25 '14 at 11:14

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

Thanks by your reply! – Antonio Carlos May 25 '14 at 12:24 — Antonio Carlos, May 25 '14 at 12:24

How can I build an UITableView like App Store?

2 Answers2