Scrollview Scrolling with dynamic images on them and vertical/horizontal scrolling but one at a time - iphone

I am able to achieve horizontal scrolling with dynamic addition of images on them, with infinite scrolling and lazy loading of images as well.
Actually, I am kind of stuck, about how to proceed with vertical scrolling of image in regards to horizontal image being displayed.
For Eg: I pull down some images from server, those are random pics, and those pics are associated to some albums of a user on my server.
So, when user scrolls left to right (horizontal) then scrollview should display all the downloaded bunch of images, but when user scroll up/down then scrollview should display other images associated to album of current image (from horizontal mode). Say I downloaded image 1,2,3 and 4. and When I scroll up/down then say for index 2, it should display 2.1, 2.2 etc which is nothing but linked to the album.
I have the json with me for both vertical and horizontal screens. however, I am not sure how to modify my current flow (infinite scrolling+lazy load) with albums kinda view.
Thanks for the help.

Create vertical ScrollViews inside your horizontal ScrollView. Each vertical ScrollView represents an album. Fill all images in that album to this vertical ScrollView. Set direction lock to yes for all ScrollViews. The whole structure should like below.
------------- -------------
| | | |
| ------- | | ------- | > Vertical ScrollViews
| | | | | | | | with images inside
| | | | | | | |
| | | | | | | |
| | | | | | | |
| ------- | | ------- |
| | | |
-------------------------------------------------------------------------------
| | | | | |
| | ------- | | ------- | |
| | | | | | | | | |
| | | | | | | | | |
| | | | | | | | | Horizontal ScrollView |
| | | | | | | | | with vertical Scrolls |
| | ------- | | ------- | |
| | | | | |
| ------------- ------------- |
-------------------------------------------------------------------------------

For solve this issue you have to create touch method for horizontal scroll and according to touch update the vertical scroll Scrollview data.If you need then I also post some tips of code.
if(CGRectContainsPoint([imgView frame], [touch locationInView:scrollView]))
{
[self ShowDetailView:imgView];
break;
}
}
}
-(void)ShowDetailView:(UIImageView *)imgView
{
selectOther_ImageView.image = imgView.image;
}

Related

How to create subheaders in scroll panel on GWT?

I am trying to create sub headers for the scroll table but not able to specify row span and col span.
I want to create a table like this through the scroll table.
+---------------------------------------------------------------+
| Heading1 | Heading2 | Heading3 |
| |-----------------------------| |
| |subhead1| subhead2 |subhead3 | |
| | | | | |
+---------------------------------------------------------------+
| |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
+---------------------------------------------------------------+
Anybody know how to create like this ?
I think Flex table is what you are looking for. FlexTable's FlexCellFormatter has setColSpan and setRowSpan methods that should allow you to create the headings you desire.
Haven't tested this, but the following code should set the first row as you described:
flexTable.getFlexCellFormatter().setRowSpan(0, 0, 2);
flexTable.getFlexCellFormatter().setColSpan(0, 1, 3);
flexTable.getFlexCellFormatter().setColSpan(0, 2, 2);
See the FlexTable example for source code.

iOS collapse header section in UITableView?

I have a UITableView that has a header view that I want to use to display content. When no content exists, I want to hide the header view (which is a UIView class) and have the TableView Cells slide to the top of the view.
It's like
____________
| ---------- |
| | | |
| | header | |
| | | |
| ---------- |
| ---------- |
| | cell | |
| ---------- |
| |
When I call
[theHeaderView setHidden:YES]
The content in the header view disappears but the cells of my TableView remain halfway down the screen to where the header had pushed them. so i wind up with:
____________
| |
| EMPTY |
| SPACE |
| |
| |
| ---------- |
| | cell | |
| ---------- |
| |
What is the proper way to hide the header view and have the table view cells move to the top of the screen?
and then i want to reopen my header later on with new content and push the cells down again.
thanks!
You need to change the tableView:heightForHeaderInSection: rather than just making the header view hidden. I don't recall if this will animate when you reload the table (reloadSections:withRowAnimation:).

What is the best way to "paginate" a loooong SVG file on iOS?

I am facing an interesting problem with SVG and iOS.
I need to render very long SVG files (up to about 5mb large), which hasn't been a problem using UIWebView. I also haven't had a problem scrolling them smoothly with JS, but since I'm waiting on my developer program application to be approved I haven't tested the performance on an actual device.
I'm now trying to achieve a page-turning effect like how the iBooks app flips pages. It doesn't have to be as elaborate and intricate, the gist of the idea is that the next section of the svg will "wipe over" the last.
Reason being, I need both "pages" of content to remain static to ease the reading of the content during the "flipping" process. Scrolling very quickly makes the contents of the SVG difficult to read.
Here is a graphic representation of what I would like to achieve:
---------------------------
| |
| |
| |
| 1 |
| |
| |
| |
| |
---------------------------
---------------------------
| | |
| | |
| | |
| 2 | 1 |
| |-> |
| | |
| / |
| / |
---------------------------
---------------------------
| | |
| | |
| | |
| 2 | 1 |
| |-> |
| | |
| / |
| / |
---------------------------
---------------------------
| |
| |
| |
| 2 |
| |
| |
| |
| |
---------------------------
Looking forward to some interesting ideas from you veterans!
I haven't rut to such needs, but from what I know, it could be made by two UIViews (or any of their subclasses). All you have to do is a custom animation on flip(a simple one if you interested in flip only, a harder one if you need the animation actually to go one with the finger). And of course you'll need to put corresponding part of your file to those views. Actually I would suggest using 3 views, so you'll be able to put content of the next "page" while it still offscreen. That will make your animation smoother.

How to get the area surrounding the visible rect of the mapview?

I can get the visible rect of a mapView with self.mapView.visibleMapRect, but how would I get a rect of the area which is slightly outside this rect?
---------------------
| |
| |
| ---------- | * the map shown on the screen
| | | |
| | * | |
| | | |
| ---------- |
| |
| | <- the rect that I want
---------------------
It depends what you mean by 'the rect that I want'. Are you talking about the parent view (or window)? If it's a parent view and you're accessing it from the view controller, you can use self.view.frame. You'd need to clarify what area it is that you're after.

Animating a UIImage or UIImageView?

I'm trying to animate an image's height (from height of 0 pixels to 480 pixels) to create the effect of the image being rendered top-down.
With an UIImageView i noticed that it appears correct in the Interface Builder. But when it runs in the simulator the size (width and height) is always set to whatever the size of the image is; meaning, if I set the height of the image view to be 50% the original height, the image is still rendered in full height.
I also tried do this effect with an UIImage. However, although the size of the image appears correct, the image is scaled to reflect the size/aspect-ratio.
Question:
How can i achieve this dynamic sizing (i.e. animation of an image's size) while NOT scaling the image? I thought about using CGImageCreateWithMask, but im pretty sure that would create huge performance hiccups.
* Update *
The effect that im looking for is this:
Animate an image by making it grow in height, from to-down (like a set of blinds being pulled on a window). This image cannot be scaled (as it would lose the visual effect of looking like a "blind"). This image must also be rendered on top of another image. So there are 2 images total.
* ANSWER *
For the top-most imageview, i set the content mode to Top (so it doesnt scale). Then in code, i set the clipsToBounds to True. Now i am able to animate the top-most imageview height thus giving me the effect i am looking for.
Use an animation block like so:
imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 320, 0)];
imageView.image = ...;
[imageView setClipsToBounds:YES];
[imageView setContentMode:UIViewContentModeTop];
[self.view addSubview:imageView];
[imageView release];
[UIView animateWithDuration:4.0f
delay:1.0f
options:UIViewAnimationOptionCurveEaseIn
animations:^(void) {
imageView.frame = CGRectMake(0, 0, 320, 480);
}
completion:NULL];
You may want to check out Animation Blocks. They're documented quite thoroughly here:
http://developer.apple.com/library/ios/#documentation/WindowsViews/Conceptual/ViewPG_iPhoneOS/AnimatingViews/AnimatingViews.html
All the code there is relevant, because UIImageView is a subclass of UIView.
Happy coding.
Just a suggestion, assume you have two images: A and X (the X-ray image):
+-------+ +-------+
| | | |
| | | |
| A | | X |
| | | |
| | | |
+-------+ +-------+
Dynamically you can create a one-pixel high image (temp), copy the content from X partially, put it on top of A:
+-------+ +-------+ +-------+
| | | temp1 | < | |
| | +-------+ | |
| A | | X |
| | | |
| | | |
+-------+ +-------+
In a loop, dynamically create/resize the temp image, and copy more content from X:
+-------+ +-------+ +-------+
| | | temp2 | < | |
| | | | | |
| A | +-------+ | X |
| | | |
| | | |
+-------+ +-------+
+-------+ +-------+ +-------+
| | | temp3 | < | |
| | | | | |
| A | | | | X |
| | +-------+ | |
| | | |
+-------+ +-------+
+-------+ +-------+ +-------+
| | | temp4 | < | |
| | | | | |
| A | | | | X |
| | | | | |
| | +-------+ | |
+-------+ +-------+
+-------+ +-------+ +-------+
| | | tempX | < | |
| | | | | |
| A | | | | X |
| | | | | |
| | | | | |
+-------+ +-------+ +-------+
As mentioned in the original post, here is the answer i seem to have stumbled upon:
For the top-most imageview, i set the content mode to Top (so it doesnt scale). Then in code, i set the clipsToBounds to True. Now i am able to animate the top-most imageview height thus giving me the effect i am looking for.
Try set your UIImageView's contentMode property to one of the following value. I think what you need is UIViewContentModeScaleAspectFit:
typedef enum {
UIViewContentModeScaleToFill,
UIViewContentModeScaleAspectFit, // contents scaled to fit with fixed aspect. remainder is transparent
UIViewContentModeScaleAspectFill, // contents scaled to fill with fixed aspect. some portion of content may be clipped.
UIViewContentModeRedraw, // redraw on bounds change (calls -setNeedsDisplay)
UIViewContentModeCenter, // contents remain same size. positioned adjusted.
UIViewContentModeTop,
UIViewContentModeBottom,
UIViewContentModeLeft,
UIViewContentModeRight,
UIViewContentModeTopLeft,
UIViewContentModeTopRight,
UIViewContentModeBottomLeft,
UIViewContentModeBottomRight,
} UIViewContentMode;
You should have a look on Flip Clock for iPad tutorial. It is with core animation, hence has a performance bonus.