Quantcast

Best approach for horizontal thumbnail image view scrolling

classic Classic list List threaded Threaded
11 messages Options
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Best approach for horizontal thumbnail image view scrolling

sisnaz
Hi, I'm fairly new to the monotouch world and have a question for anyone out there.

I have web service that returns a jpeg stream to my iPad app. My web service returns the desired jpeg size I specify in my API call. Initially I create a call to the service to give me a thumbnail sized image. So for each thumbnail image, I would like to add the image to some kind of horizontal scrolling viewer. The idea is the user scrolls through the thumbnails, taps the one they want to see, and the iPad app displays a larger view of it.

Kind of like this:
Horizontal scrollable images

I want the scrollable area to be on docked on the bottom, while I have static web view above it.

I guess my first question is: What control (or view) would you recommend?
The UITableView would be a great candidate, but can you make the items (or cells) scroll horizontal instead of vertical? Also any code examples would be helpful if possible.

Thanks in advance.
John
There was only 1 trilogy
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Best approach for horizontal thumbnail image view scrolling

bamagrad03
UIScrollView and add your imageview to its subview.

I just did this same thing it works perfectly I can show you my app if you'd like to see how it works.

On Wed, Oct 26, 2011 at 4:10 PM, sisnaz <[hidden email]> wrote:
Hi, I'm fairly new to the monotouch world and have a question for anyone out
there.

I have web service that returns a jpeg stream to my iPad app. My web service
returns the desired jpeg size I specify in my API call. Initially I create a
call to the service to give me a thumbnail sized image. So for each
thumbnail image, I would like to add the image to some kind of horizontal
scrolling viewer. The idea is the user scrolls through the thumbnails, taps
the one they want to see, and the iPad app displays a larger view of it.

Kind of like this:
http://www.youtube.com/watch?v=VNvkJ4vLHys Horizontal scrollable images

I want the scrollable area to be on docked on the bottom, while I have
static web view above it.

I guess my first question is: What control (or view) would you recommend?
The UITableView would be a great candidate, but can you make the items (or
cells) scroll horizontal instead of vertical? Also any code examples would
be helpful if possible.

Thanks in advance.
John

--
View this message in context: http://monotouch.2284126.n4.nabble.com/Best-approach-for-horizontal-thumbnail-image-view-scrolling-tp3942332p3942332.html
Sent from the MonoTouch mailing list archive at Nabble.com.
_______________________________________________
MonoTouch mailing list
[hidden email]
http://lists.ximian.com/mailman/listinfo/monotouch


_______________________________________________
MonoTouch mailing list
[hidden email]
http://lists.ximian.com/mailman/listinfo/monotouch
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Best approach for horizontal thumbnail image view scrolling

sisnaz
AWESOME!! Thanks for the fast response :)
I would love to see a demo if it's not an inconvenience.
There was only 1 trilogy
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Best approach for horizontal thumbnail image view scrolling

bamagrad03
http://itunes.apple.com/us/app/kansas-jayhawks-basketball/id473777579?ls=1&mt=8

Sorry I don't have a video for it but you can get the picture. The navigation at the bottom is basically a scroll view set to take up the full screen with a 640 pixel wide (I think) content view. (I have 8 buttons but only show 4 at a time)

At first I added individual images side by side, but then ended up doing one big nav image in an imageview, adding it to the scroll view, then adding the individual buttons on top of that to the scroll view's subview.

It scrolls like a champ. REALLY responsive. I can add some code when I get home if you need it.

On Wed, Oct 26, 2011 at 4:27 PM, sisnaz <[hidden email]> wrote:
AWESOME!! Thanks for the fast response :)
I would love to see a demo if it's not an inconvenience.

--
View this message in context: http://monotouch.2284126.n4.nabble.com/Best-approach-for-horizontal-thumbnail-image-view-scrolling-tp3942332p3942388.html
Sent from the MonoTouch mailing list archive at Nabble.com.
_______________________________________________
MonoTouch mailing list
[hidden email]
http://lists.ximian.com/mailman/listinfo/monotouch


_______________________________________________
MonoTouch mailing list
[hidden email]
http://lists.ximian.com/mailman/listinfo/monotouch
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Best approach for horizontal thumbnail image view scrolling

sisnaz
Thanks a lot Daniel, I really appreciate it. I'm jumping on a prototype right now. I'll give you a shout if I get stuck. Thanks again!

... and very nice looking app btw.
There was only 1 trilogy
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Best approach for horizontal thumbnail image view scrolling

Nic Wise
I've done the same in Nearest Bus - the whole screen scrolls, but
there is no reason why it couldn't be just a section of the screen.
You can control the page size and the like, too.



Happy to share the code I use to set it up. I got it out of a book, so
I can't claim it (I think I got it from this one:
http://www.peachpit.com/store/product.aspx?isbn=0321719689 )


https://gist.github.com/1319168


On Wed, Oct 26, 2011 at 22:43, sisnaz <[hidden email]> wrote:

> Thanks a lot Daniel, I really appreciate it. I'm jumping on a prototype right
> now. I'll give you a shout if I get stuck. Thanks again!
>
> ... and very nice looking app btw.
>
> --
> View this message in context: http://monotouch.2284126.n4.nabble.com/Best-approach-for-horizontal-thumbnail-image-view-scrolling-tp3942332p3942433.html
> Sent from the MonoTouch mailing list archive at Nabble.com.
> _______________________________________________
> MonoTouch mailing list
> [hidden email]
> http://lists.ximian.com/mailman/listinfo/monotouch
>



--
Nic Wise
t.  +44 7788 592 806 | @fastchicken | http://www.linkedin.com/in/nicwise
b. http://www.fastchicken.co.nz/

Nearest Bus: find when the next bus is coming to your stop. http://goo.gl/Vcz1p
mobileAgent (for FreeAgent): get your accounts in your pocket.
http://goo.gl/IuBU
Trip Wallet: Keep track of your budget on the go: http://goo.gl/ePhKa
London Bike App: Find the nearest Boris Bike, and get riding! http://goo.gl/Icp2
_______________________________________________
MonoTouch mailing list
[hidden email]
http://lists.ximian.com/mailman/listinfo/monotouch
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Best approach for horizontal thumbnail image view scrolling

sisnaz
Hi Nic, I'd love to see what you got if you wouldn't mind.
There was only 1 trilogy
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Best approach for horizontal thumbnail image view scrolling

Nic Wise
It's here :)

https://gist.github.com/1319168



On Thu, Oct 27, 2011 at 16:53, sisnaz <[hidden email]> wrote:

> Hi Nic, I'd love to see what you got if you wouldn't mind.
>
> --
> View this message in context: http://monotouch.2284126.n4.nabble.com/Best-approach-for-horizontal-thumbnail-image-view-scrolling-tp3942332p3944993.html
> Sent from the MonoTouch mailing list archive at Nabble.com.
> _______________________________________________
> MonoTouch mailing list
> [hidden email]
> http://lists.ximian.com/mailman/listinfo/monotouch
>



--
Nic Wise
t.  +44 7788 592 806 | @fastchicken | http://www.linkedin.com/in/nicwise
b. http://www.fastchicken.co.nz/

Nearest Bus: find when the next bus is coming to your stop. http://goo.gl/Vcz1p
mobileAgent (for FreeAgent): get your accounts in your pocket.
http://goo.gl/IuBU
Trip Wallet: Keep track of your budget on the go: http://goo.gl/ePhKa
London Bike App: Find the nearest Boris Bike, and get riding! http://goo.gl/Icp2
_______________________________________________
MonoTouch mailing list
[hidden email]
http://lists.ximian.com/mailman/listinfo/monotouch
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Best approach for horizontal thumbnail image view scrolling

sisnaz
Thanks again Nic... so I've been beating my head on this; I can get 1 image in the scroll viewer but nothing more. I'm not really sure where to go from here. What do you suggest as a container for an array of thumbnail images? I evaluated the page control, but I don't think that's the effect I'm after.

There was only 1 trilogy
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Best approach for horizontal thumbnail image view scrolling

Nic Wise
A container? Just put a UIView (derivative) on there, and add
UIImageView's to it :)

Then put a load of them on there, next to each other. Works for me :)

On Thu, Oct 27, 2011 at 22:28, sisnaz <[hidden email]> wrote:

> Thanks again Nic... so I've been beating my head on this; I can get 1 image
> in the scroll viewer but nothing more. I'm not really sure where to go from
> here. What do you suggest as a container for an array of thumbnail images? I
> evaluated the page control, but I don't think that's the effect I'm after.
>
>
>
> -----
> There was only 1 trilogy
> --
> View this message in context: http://monotouch.2284126.n4.nabble.com/Best-approach-for-horizontal-thumbnail-image-view-scrolling-tp3942332p3946104.html
> Sent from the MonoTouch mailing list archive at Nabble.com.
> _______________________________________________
> MonoTouch mailing list
> [hidden email]
> http://lists.ximian.com/mailman/listinfo/monotouch
>



--
Nic Wise
t.  +44 7788 592 806 | @fastchicken | http://www.linkedin.com/in/nicwise
b. http://www.fastchicken.co.nz/

Nearest Bus: find when the next bus is coming to your stop. http://goo.gl/Vcz1p
mobileAgent (for FreeAgent): get your accounts in your pocket.
http://goo.gl/IuBU
Trip Wallet: Keep track of your budget on the go: http://goo.gl/ePhKa
London Bike App: Find the nearest Boris Bike, and get riding! http://goo.gl/Icp2
_______________________________________________
MonoTouch mailing list
[hidden email]
http://lists.ximian.com/mailman/listinfo/monotouch
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Best approach for horizontal thumbnail image view scrolling

sisnaz
Thanks Nic, I was finally able to get it to work and it looks great :)

My biggest problem (aside from being new to this framework) was this:

scroll.ContentSize.Width = this.View.Frame.Size.Width * totalWidth;

but that must be a struct, because I finally realized the ContentSize.Width wasn't getting set.
This fixed my issue:

scroll.ContentSize = new SizeF(myView.Frame.Size.Width, this.View.Frame.Size.Height);

Thanks for your input and helpful tips!
There was only 1 trilogy
Loading...