Creating a scrolling grid of different width cells on iOS - iphone

I am new to iOS/Mac and ObjectiveC development and need a bit of guidance if someone could be so kind, so please excuse my ignorance.
The issue I have is I need to create a Grid view for a TV Guide where you have a vertical list of channel logos on the left that scrolls up and down, and to its right we have a horizontally and vertically scrolling grid. Horizontal scrolling doesnt move the channel logos which is fixed on screen, but vertically scrolling grid also scrolls the logos as you would expect.
Now being new to ObjC and iOS Frameworks, I was wondering which methods I should go down to implement this, Quartz2D perhaps? Or are their alternative simpler methods?
Whatever method is used, it needs to be quick with thousands of 'cells' across up to 600 rows; it also has to be memory efficient with out of view cells being disposed/reused as needed.
I am not necessarily asking for specific code (although that would be nice lol), just some advice on what methods to use so i can concentrate my education on those areas; if that is possible
Thanks.

It seems you do not really need two different scroll views / table views left and right, as the two sides should always scroll with each other.
Thus, just use a UITableView with a custom cell (subclass UITableViewCell) that has the logo on the left, and another scroll view (for horizontal scrolling) on the right.
Read Apple's Table View Programming Guide, and you will be on your way.

Related

Vertical and horizontal scoll at a time in gridview with infinite scrolling IOS

How can one enable horizontal and vertical scrolling at same time in a grid view?
If I have a 4x4 grid of thumbnail images, I want to implement swiping in both directions, left/right and top/bottom. Currently I am done with left and right swipe, but if I select the second cell and swipe towards the top, the 2nd row should be scrolled like a Rubik's cube.
Please share if any one have any idea.
It's been quite a while since your question but as I've been struggling with the same thing I'm gonna answer it for future reference...
Sadly I could not find a good solution anywhere so after a lot of hours of experimenting I came up with this: https://github.com/AlvinNutbeij/DWGridController
It's still a work in progress but very usable for your purpose I'd say!
How have you currently implemented what you have? Your mention of 'cell' makes it sound like you are using a UITableView. You won't manage to make one of those scroll in both directions, you'll need to work with a UIScrollView.
I suggest you watch "Designing apps with Scroll Views" from WWDC 2010, then "Advanced Scrollview Techniques" from WWDC 2011. That'll teach you about how you implement tiling and infinite scrolling.
Essentially what you want to do is implement some kind of view recycling yourself, that works like the way UITableView recycles its cells. When things are scrolled off one side of the scroll view, you remove the views for the things that just scrolled off screen and put them in a queue. When things scroll onto the screen, you pull views out of the queue (or create new ones if the queue is empty) and lay those views out in the correct place.
To do the infinite scrolling, you fake it: when your scroll view gets near its edge, you reposition everything inside it, you move the scroll view's content offset to where you've repositioned the views, and then you continue from there: it's all done at once so the user never notices.
The videos will explain these techniques better than I can sum up here: watch those as your first point of call.

Better to use UIScrollView or UITableView for horizontal buttons?

I have a page enabled scrollview on an iPad. On the first page, I have a child scrollview that scrolls horizontally through image buttons. The buttons scroll the outer scroll view to the correct page. Its basically like a table of contents that jumps to the correct page.
My end goal is to be able to categorize the buttons seen in the child scroll view. So there would be a segmented control that changes what buttons you can see. So maybe one category would be ALL, and another category would be A-M, and another would be N-Z for example.
My question is, should I use a uiscrollview or a uitableview?
Right now I use a scrollview and it is really easy to get the buttons in. I could implement the different categories kind of gimmicky by having all of the buttons in the scrollview and then just showing or hiding the buttons accordingly. I feel that it'd be bad memory usage though.
For a uiscrollview i was looking at using EasyTableView, butI'm not 100% sure if this is compatible with what i want to do or if it'd even be better.
Any ideas for what the best way to implement this is? Specifically, I'm not sure of the best way to change the buttons when I change categories.
Thanks!
Use a tableview when you are dealing with data that is best expressed as sections and rows.
I think for your situation I'd have a UIView subclass that can display the images you need for a given category. Stick that on the outer scrollview as needed. You can keep memory low by only keeping the currently visible view and the ones on either side on the scrollview. When you scroll to a new location you can recreate the view needed for that page, and the ones surrounding it. Then you release the ones that are far away and let the system reclaim their memory if needed.

How to recreate a Pulse-like UI?

I was wondering how to make image display through a table like the application Pulse on iPhone. I used UIScrollView but it did not help much. It only displayed images in a nice array-like manner but you could not produce an event or click on the image.
What's the best way to produce a Pulse like application for displaying images and heading information in an array-like style?
use Ray Wenderlich tutorial about THIS topic
tutorial
The Ray Wenderlich pulse tutorial does have an issue where if the horizontal table view has not been scrolled (or its first element is aligned with the left of the screen) you can't drag right and have the content pull that way and then bounce back. This makes the scrolling experience feel pretty bad.
The simple solution though is to put the horizontal table view inside a scroll view and then everything just works.
It looks like a UITableView with rows that are composed of UIImageViews. Its got a nice touch where you can scroll horizontally within a row, like with Twitter's app. That's most likely done with a UIScrollView (scroll bars removed, with end bounce). Peter Boctor wrote a web blog post on how to do something similar, if I recall.
It's a UITableView with each row containing a UITableView that is rotated by 90°. The cells for the UITableView in each row are custom views that are likely either subclasses of UIImageView or just plain UIView.

Looking for a UI library to present Data horizontaly in iOS

Does anyone know of a UI Library for iOS, that acts like a horizontal UITabelView?
I want to scroll cells from right to left and not from up to down.
I had a similar requirement: Horizontally scrolling tables in cells of a normal, vertically scrolling table.
My solution: I put a standard UIiew in the outer table's cell. This view had its transform property set to turn by 90°, serving as a "hinge", turning its contents to the side.
In the hinge view was another UITableView. Since it is contained in the turned view, it appears horizontally on the screen. The cells of this inner table contained another hinge view, turning their contents -90°, back to the upright orientation.
This might sound a little confusing, but it gives you all advantages of table views, in horizontal orientation. It's less confusing if you leave out the outer table view with their cells which are not needed in your case.
Edit: to answer comment
Performance was definitely great. Actually, performance was the major reason to switch to this approach. Table views are especially great for displaying huge data sets, since they only instantiate visible views (cells) and reuse them after being scrolled out. By itself a table view is quite light weight and very optimized for its purpose. My data sets where middle size, I'd say (about 100 items in both dimensions) and scrolling was perfectly smooth.
The other thing besides performance I was concerned about was touch handling. It went out that the table views (which derive from scroll views) always detected the gesture correctly (scrolling a scroll view in a scroll view is not easy to get right). If you swiped vertically the outer table view would handle the events, if you swiped horizontally the inner table gets all the events. I was quite impressed of how well the framework handled this non standard situation.

How to implement UITableView with multiple columns and sideways scrolling

I'm thinking about how I could achieve this kind of UITableView: http://snapplr.com/c1x5
So it has multiple (separately selectable) columns in it which also differ in width. Apart from that it can also scroll sideways to see programs which broadcast later on the day.
Now, I'd like to know how you would implement this kind of feature. A scrollview wouldn't be enough, it has to somehow load newer data. And of course you need to be able to know what column in the cell has been selected.
Hope to hear some thoughts.
That is a custom view.
It's possible it could be a table view, with heavily customised cells, but that would have been a hell of a lot of work to get it scroll horizontally too.
It's more likely that it's a scroll view with a custom grid view type class that have support for arbitrary grid cell widths...
I'm sure if you write something like this you'll have a lot of interested people.
I just updated MDSpreadView, which is basically a UITableView that works both horizontally and vertically, floating headers and all, with an API very similar to UITableView.