3

Willing to award a +500 bounty for a working example.

The YouTube interface for iPad is pretty interesting, the grid of videos. eBay on iPad has a similar type of grid interface.

I am interested in knowing what that style is called? Are there any example projects that demonstrate how to achieve this, or is it pretty simple to write?

alt text

or

alt text

Also, what other apps out there for iPad have this type of interface?

WrightsCS
  • 50,551
  • 22
  • 134
  • 186

4 Answers4

2

I've used AQGridView in a few projects and highly recommend it.

https://github.com/AlanQuatermain/AQGridView

You'll need to do some subclassing to get it to do exactly what you want, but it's a good start.

Domestic Cat
  • 1,434
  • 11
  • 18
1

They're most likely just writing their own UIScrollView subclass to show a grid of views. I've made one myself, and there are others available as open source.

It's not too tricky to write your own, depending on whether or not you want to support re-using the cells (and you probably will, if you have long lists).

Also, it's a fantastic way of learning your way around UIScrollView.

You might be interested in this one.

jbrennan
  • 11,943
  • 14
  • 73
  • 115
1

I would do this one similarly to the way I would do the iPad document view. See my answer there. That said, naturally, there are some differences, since you want different results.

Since you want a grid, the subclassed object will have a smaller frame. Also, the X and Y properties of the tile will be based on the index of the tile in your array. You might want a multidimensional array to keep track of your objects, and then use the indeces of the array/tile object to position the object.

Edit:

For the grid, make a multidimensional array. Pretend you have 75 cells and that you want rows of five cells each. So:

Make an array containing arrays (also called a multidimensional array or a 3D array). Then, loop through it, like so:

for(NSInteger i=0; i<[cells count]; i++){
  for(NSInteger j=0; j < [[cells objectAtIndex:i] count]; j++){
   //lay out cells based on i and j values times height and width of cell
  }
}
Community
  • 1
  • 1
Moshe
  • 57,511
  • 78
  • 272
  • 425
  • But are there any known examples of how to accomplish these? I mean, obviously, the cell is easy to re-create, just the concept of the cells and grids is the hard part. – WrightsCS Jan 03 '11 at 06:52
  • The cells are also easy. Make a multidimensional array and loop through it. Multiply the indices of the loop by the width of the cell and the height of the cell, which gives you your offsets. – Moshe Jan 03 '11 at 09:08
  • Re formatting on iPad etc; in this case you can just indent 4 spaces; for inline code blocks `like this`, press *and hold* the ' glyph until ` appears – Marc Gravell Jan 03 '11 at 10:17
0

I'd just use a UITableViewController. I'd use a subclass of UITableCell that accepts an array of videos (this array could be nil, for those rows that just have the "Load more.." cell). The number of rows would be the number of videos divided by 4+1. Clicking "Load more.." would make a call for more data; the simplest way to refresh the data (eg, add more videos) would be to add to the videos array and make the call to refresh the table view. (sorry for the lack of formatting, I'm on a phone) This is the pattern that the three20 library uses for the thumbnails view.

Hope this helps!

donkim
  • 13,119
  • 3
  • 42
  • 47