I am adding many UIImageView's to UIScrollView,with paging enabled.I need to zoom only the image that i have tapped to zoom,rather than zooming the entire scrollview.Also zooming a particular image doesnot scale other subviews.
- (void)loadScrollViewWithImages {
scrollView.contentSize = CGSizeMake(self.view.bounds.size.width * imageList.count, self.view.bounds.size.height);
scrollView.pagingEnabled = YES;
UIView *mainView = [[UIView alloc] initWithFrame:self.view.bounds];
CGFloat xPos = 0.0;
for (UIView *subView in scrollView.subviews) {
[subView removeFromSuperview];
}
int i = 0;
for (NSDictionary *imageDetails in self.imageList) {
UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(xPos, 0.0, self.view.bounds.size.width, self.view.frame.size.height)];
imageView.contentMode = UIViewContentModeScaleAspectFill;
[imageView setClipsToBounds:YES];
[mainView addSubview:imageView];
xPos += self.view.bounds.size.width;
[imageView setImageWithURL:[NSURL URLWithString:[imageDetails objectForKey:#"media_path"]]];
[self.imageViewArray addObject:imageView];
if(self.selectedImageIndex == i) {
self.selectedImageView = imageView;
}
i++;
}
[mainView setFrame:CGRectMake(mainView.frame.origin.x, mainView.frame.origin.x,self.view.bounds.size.width * imageList.count, self.view.bounds.size.height)];
[scrollView addSubview:mainView];
}
I wanted to zoom only the selected index,but other subviews also add to the screen with no scaling.
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView {
return [[[scrollView.subviews objectAtIndex:0] subviews] objectAtIndex:0] ;;
}
for implementing this you have to take a main scrollview as you have taken and instead of displaying imageView in this scrollview you have to take another scrollview and display the image and when user tries to zoom the image then only the selected scrollview gets scrolled.
Related
I have main UIScrollView
mainScrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, 320, 440)];
mainScrollView.pagingEnabled = YES;
imageScrollView.contentSize = CGSizeMake(320 * [myImage count], 440);
, which contain many sub UIScrollView, and each sub UIScrollView contains UIImageView
for (int i = 0; i < [myImage count]; i++)
{
imageView = [[UIImageView alloc] init];
[imageView setAutoresizingMask:UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight];
NSString *strimage = [myImage objectAtIndex:i];
NSURL *imageUrl = [NSURL URLWithString:strimage];
[imageView setImageWithURL:imageUrl placeholderImage:[UIImage imageNamed:#"Placeholder"]];
imageView.frame = CGRectMake(0, 0, 320, 440);
subScrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(320 * i, 0, 320, 440)];
subScrollView.contentSize =
CGSizeMake(imageView.frame.size.width, imageView.frame.size.height);
subScrollView.pagingEnabled = YES;
subScrollView.showsHorizontalScrollIndicator = NO;
subScrollView.showsVerticalScrollIndicator = NO;
subScrollView.delegate = self;
subScrollView.bouncesZoom = YES;
subScrollView.clipsToBounds = YES;
subScrollView.maximumZoomScale = 3.0;
subScrollView.minimumZoomScale = 1.0;
subScrollView.zoomScale = 1.0;
[mainScrollView addSubview:subScrollView];
[subScrollView addSubview:imageView];
}
, and I implement
#pragma mark UIScrollViewDelegate methods
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView {
return imageView;
}
The problem is when I zoom in UIImageView, assume that there are 3 sub UIScrollView, the last sub UIScrollView can zoom UIImageView normally but the other 2 when I zoom in it , it zooms sub UIScrollView instead of UIImageView, and it effect the last sub UIScrollView to be also zoom, Did I do anything wrong?
I suspect that in viewForZoomingInScrollView, it's zoom only last UIImageView (last sub UIScrollView).
Thank you in advance :)
Finally I figured it out, I just need to update my UIImageView when I zoom in specific UIImageView
In - (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView like this:
#pragma mark -
#pragma mark UIScrollViewDelegate methods
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView {
for (UIImageView *iv in [scrollView subviews]) {
imageView = iv;
break;
}
return imageView;
}
Hope it may help someone, who struggle at this point as me, so you don't have to waste you time :).
I am looking for an example that show just vertical scrolling in iPhone.
The Apple supplied Scrolling example allows swiping of images left to
right.
Example Link
Example Link
I want to have my images scroll top to bottom like Instagram
App.
I research about it and found lots of example, but they all show
horizontal scrolling.
Example
Example
Example
Does anyone know how to do this?
I appreciate if you send me a link to a tutorial.
Hi i solved your problem with apple code,
just change the function with
- (void)layoutScrollImages
{
UIImageView *view = nil;
NSArray *subviews = [scrollView1 subviews];
// reposition all image subviews in a horizontal serial fashion
CGFloat curXLoc = 0;
for (view in subviews)
{
if ([view isKindOfClass:[UIImageView class]] && view.tag > 0)
{
CGRect frame = view.frame;
frame.origin = CGPointMake(0,curXLoc);
view.frame = frame;
curXLoc += (kScrollObjHeight);
}
}
// set the content size so it can be scrollable
[scrollView1 setContentSize:CGSizeMake(([scrollView1 bounds].size.width),kNumImages * kScrollObjHeight)];
}
or if you want sample then i will give you
For your purpose refer your link:
http://idevzilla.com/2010/09/16/uiscrollview-a-really-simple-tutorial/
There is a code like:
scroll.contentSize = CGSizeMake(self.view.frame.size.width * numberOfViews, self.view.frame.size.height);
For horizontal scrolling you need to set the width of contentSize property to a higher value than the scroll view's frame width. Likewise for vertical scrolling you need to set the height of contentSize property to a higher value than the scroll view's frame height.
Reference
In the above code it can be done like:
scroll.contentSize = CGSizeMake(self.view.frame.size.width, numberOfViews * self.view.frame.size.height);
You can use the following code to scroll images from top to bottom and vice versa.!!
- (void)viewDidLoad
{
//....
UISwipeGestureRecognizer *recognizer;
//for scrolling up
recognizer = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:#selector(SwipeUp)]; // calling method SwipeUp
[recognizer setDirection:(UISwipeGestureRecognizerDirectionUp)];
[[self view] addGestureRecognizer:recognizer];
//for scrolling down
UISwipeGestureRecognizer *recognizer1;
recognizer1 = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:#selector(SwipeDown)]; //calling method SwipeDown
[recognizer1 setDirection:(UISwipeGestureRecognizerDirectionDown)];
[[self view] addGestureRecognizer:recognizer1];
}
//Initialise and synthesise IBOutlet UIImageView *bgImage;
-(IBAction)SwipeUp
{
[bgImage setImage:[UIImage imageNamed:#"yourImage1"] ];
bgImage.opaque=YES;
[self.view addSubview:bgImage];
}
-(IBAction)SwipeDown
{
[bgImage setImage:[UIImage imageNamed:#"yourImage2"] ];
bgImage.opaque=YES;
[self.view addSubview:bgImage];
}
I don't know if I understood correctly what you want to accomplish but basically you can set the position of you scrollView using setContentOffset.
CGPoint bottomOffset = CGPointMake(0, scrollView.contentSize.height - self.scrollView.bounds.size.height);
[scrollView setContentOffset:bottomOffset animated:YES];
There are several ways of doing this for example:
Using the UITableView with Custom cell
Adding UIScrollingView & adding the content/images & increasing the
height of scrollview according to number of objects in array.
Here is the code snippet which creates a 2*2 Grid for images :
//Over here adding the image names into the Array
NSMutableArray *imageArray=[[NSMutableArray alloc]init];
[Arr addObject:[UIImage imageNamed:#"image_1.png"]];
[Arr addObject:[UIImage imageNamed:#"image_2.png"]];
[Arr addObject:[UIImage imageNamed:#"image_3.png"]];
[Arr addObject:[UIImage imageNamed:#"image_4.png"]];
[Arr addObject:[UIImage imageNamed:#"image_5.png"]];
// Initlaizing the ScrollView & setting the frame :
scrollView = [[UIScrollView alloc]initWithFrame:CGRectMake(0, 0,320, 460)];
[scrollView setBackgroundColor:[UIColor clearColor]];
scrollView.showsHorizontalScrollIndicator = NO;
scrollView.showsVerticalScrollIndicator = NO;
int row = 0;
int column = 0;
for(int i = 0; i < imageArray.count; i++) {
UIButton * button = [UIButton buttonWithType:UIButtonTypeCustom];
button.backgroundColor=[UIColor clearColor];
button.frame = CGRectMake(column*160+0,row*210+10, 160, 190);
[button setImage:[imageArray objectAtIndex:i] forState:UIControlStateNormal];
[button setBackgroundColor:[UIColor clearColor]];
[button addTarget:self action:#selector(chooseCustomImageTapped:) forControlEvents:UIControlEventTouchUpInside];
button.tag = i;
[view1 addSubview:button];
if (column == 1) {
column = 0;
row++;
} else {
column++;
}
}
[scrollView setContentSize:CGSizeMake(320, (row+1) * 210)];
[self.view addSubview:view1];
//Here is the method used for Tapping :
- (IBAction)chooseCustomImageTapped:(id)sender
{
}
Now,once the scrollView is ready for Vertical scrolling, you can do your own customization accordingly. I hope this would work for you.
Could somebody go over how to modify the Scrolling Project so that it shows one image with others partly showing to the left and right? Just like mobile safari when you go to the page manager...This is key so that the user knows there are more images if they scroll to the right. Both methods taken from Scrolling project.
METHOD TO SET UP SCROLLVIEW:
ViewDidLoad {
self.view.backgroundColor = [UIColor viewFlipsideBackgroundColor];
// 1. setup the scrollview for multiple images and add it to the view controller
//
// note: the following can be done in Interface Builder, but we show this in code for clarity
[scrollView1 setBackgroundColor:[UIColor blackColor]];
[scrollView1 setCanCancelContentTouches:NO];
scrollView1.indicatorStyle = UIScrollViewIndicatorStyleWhite;
scrollView1.clipsToBounds = YES; // default is NO, we want to restrict drawing within our scrollview
scrollView1.scrollEnabled = YES;
// pagingEnabled property default is NO, if set the scroller will stop or snap at each photo
// if you want free-flowing scroll, don't set this property.
scrollView1.pagingEnabled = YES;
// load all the images from our bundle and add them to the scroll view
NSUInteger i;
for (i = 1; i <= kNumImages; i++)
{
NSString *imageName = [NSString stringWithFormat:#"image%d.jpg", i];
UIImage *image = [UIImage imageNamed:imageName];
UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
// setup each frame to a default height and width, it will be properly placed when we call "updateScrollList"
CGRect rect = imageView.frame;
rect.size.height = kScrollObjHeight;
rect.size.width = kScrollObjWidth;
imageView.frame = rect;
imageView.tag = i; // tag our images for later use when we place them in serial fashion
[scrollView1 addSubview:imageView];
[imageView release];
}
[self layoutScrollImages]; // now place the photos in serial layout within the scrollview
}
METHOD TO SET LAYOUT:
- (void)layoutScrollImages
{
UIImageView *view = nil;
NSArray *subviews = [scrollView1 subviews];
// reposition all image subviews in a horizontal serial fashion
CGFloat curXLoc = 0;
for (view in subviews)
{
if ([view isKindOfClass:[UIImageView class]] && view.tag > 0)
{
CGRect frame = view.frame;
frame.origin = CGPointMake(curXLoc, 0);
view.frame = frame;
curXLoc += (kScrollObjWidth);
}
}
// set the content size so it can be scrollable
[scrollView1 setContentSize:CGSizeMake((kNumImages * kScrollObjWidth), [scrollView1 bounds].size.height)];
}
in my previous app i create image galley view where i put some custom button on scroll view, so user can see full image on click on that button.
here is code hope it will help you
UIScrollView *Sview = [[UIScrollView alloc]
initWithFrame:[[UIScreen mainScreen] bounds]];
int row = 0;
int column = 0;
for(int i = 0; i < self.data.getCustomers.count; ++i) {
customerToEdit = [self.data.getCustomers objectAtIndex:i];
NSURL* imgUrl = [NSURL URLWithString:#"your image url array objects"];
UIImage* thumb = [UIImage imageWithData:[NSData dataWithContentsOfURL:imgUrl]];
//UIImage *thumb = [_thumbs objectAtIndex:i];
UIButton * button = [UIButton buttonWithType:UIButtonTypeCustom];
button.frame = CGRectMake(column*100+24, row*80+10, 64, 64);
[button setImage:thumb forState:UIControlStateNormal];
[button addTarget:self
action:#selector(buttonClicked:)
forControlEvents:UIControlEventTouchUpInside];
button.tag = i;
[Sview addSubview:button];
if (column == 2) {
column = 0;
row++;
} else {
column++;
}
}
[view setContentSize:CGSizeMake(320, (row+1) * 80 + 10)];
self.view = view; // or u can [self.view addsubview:Sview];
well i working with to zoom image with UIScrollview..my UIScrollview size is fix so whenever i make a zoom of a image then it goes cut..i wanna do that as i zoom the image the UIScrollview also increse height and width as per image zoom..
any suggetions will be appreciated......
This should work :-)
Make a UIImage
Make a UIImageView holding the image
Put the UIImageView into a UIScrollView
Set the contentSize of the UIScrollView to the size of the UIImage
Remember to return the UIimageView in viewForZoomingInScrollView
Put this into your .h file:
UIImageView *imageView;
#property (nonatomic, retain) UIImageView *imageView;
And remember to synthesize and release imageView
Put this where you want to make your scroll view:
UIImage *image = [UIImage imageNamed:#"myImage.jpg"];
imageView = [[UIImageView alloc] initWithImage:image];
[imageView setFrame:CGRectMake(0, 0, image.size.width, image.size.height)];
UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height)];
[scrollView setMinimumZoomScale:0.5];
[scrollView setMaximumZoomScale:3.0];
[scrollView setContentSize:CGSizeMake(image.size.width, image.size.height)];
[scrollView setDelegate:self];
[scrollView addSubview:imageView];
[[self view] addSubview:scrollView];
[scrollView release];
Add the UIScrollView delegate method
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView {
return imageView;
}
UPDATE:
I misunderstood the question when adding the above solution. This should do it :-)
kScrollViewAddSize is a constant which defines the amount to add to the UIScrollView's size.
In your .h file you should add the following:
UIImageView *imageView;
UIScrollView *scrollView;
Remember to synthesize and release them.
- (void)viewDidLoad
{
[super viewDidLoad];
UIImage *image = [UIImage imageNamed:#"apple.jpg"];
imageView = [[UIImageView alloc] initWithImage:image];
[imageView setFrame:CGRectMake(kScrollViewAddSize / 2, kScrollViewAddSize / 2, image.size.width, image.size.height)];
int width = imageView.frame.size.width + kScrollViewAddSize;
int height = imageView.frame.size.height + kScrollViewAddSize;
scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake((self.view.frame.size.width - width) / 2, (self.view.frame.size.height - height) / 2, width, height)];
[scrollView setMinimumZoomScale:0.5];
[scrollView setMaximumZoomScale:3.0];
[scrollView setBackgroundColor:[UIColor redColor]];
[scrollView setContentSize:CGSizeMake(image.size.width, image.size.height)];
[scrollView setDelegate:self];
[scrollView addSubview:imageView];
[[self view] addSubview:scrollView];
}
- (void)scrollViewDidZoom:(UIScrollView *)_scrollView {
int width = imageView.frame.size.width + kScrollViewAddSize;
int height = imageView.frame.size.height + kScrollViewAddSize;
[scrollView setFrame:CGRectMake((self.view.frame.size.width - width) / 2, (self.view.frame.size.height - height) / 2, imageView.frame.size.width + kScrollViewAddSize, imageView.frame.size.height + kScrollViewAddSize)];
}
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)_scrollView {
return imageView;
}
Add the parth in viewDidLoad where you want to create your UIScrollView and add the two delegate methods.
I've searched and searched for a tutorial for this but none of them are what I'm looking for. I've tried Apple's sample but it is just colors and I don't know how to make it views. All I'm looking for is a screen that will page while showing the page control. Each time the scroll view pages i want it to show a completely different view with buttons, a lot like the home screen of the iPhone. I found the sample code below which works very well with just images, but I'd like to modify to work with separate views. Please Help! Thank you.
- (void)setupPage {
scrollView.delegate = self;
[self.scrollView setBackgroundColor:[UIColor clearColor]];
[scrollView setCanCancelContentTouches:NO];
scrollView.indicatorStyle = UIScrollViewIndicatorStyleWhite;
scrollView.clipsToBounds = YES;
scrollView.scrollEnabled = YES;
scrollView.pagingEnabled = YES;
NSUInteger nimages = 0;
CGFloat cx = 0;
for (; ; nimages++) {
NSString *imageName = [NSString stringWithFormat:#"image%d.jpg", (nimages + 1)];
UIImage *image = [UIImage imageNamed:imageName];
if (image == nil) {
break;
}
UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
CGRect rect = imageView.frame;
rect.size.height = image.size.height;
rect.size.width = image.size.width;
rect.origin.x = ((scrollView.frame.size.width - image.size.width) / 2) + cx;
rect.origin.y = ((scrollView.frame.size.height - image.size.height) / 2);
imageView.frame = rect;
[scrollView addSubview:imageView];
[imageView release];
cx += scrollView.frame.size.width;
}
self.pageControl.numberOfPages = nimages;
[scrollView setContentSize:CGSizeMake(cx, [scrollView bounds].size.height)];
}
I was experimenting with this just the other day. I'm still getting used to using a UIScrollView but here's how you can add views to your UIScrollView:
UIView *blueView = [[UIView alloc] init];
blueView.frame = CGRectMake(100, 0, 500, 1024);
blueView.backgroundColor = [UIColor colorWithRed:164.0/256 green:176.0/256 blue:224.0/256 alpha:1];
[scrollView addSubview:blueView];
[blueView release];
UIView *orangeView = [[UIView alloc] init];
orangeView.frame = CGRectMake(700, 0, 500, 1024);
orangeView.backgroundColor = [UIColor colorWithRed:252.0/256 green:196.0/256 blue:131.1/256 alpha:1];
[scrollView addSubview:orangeView];
[orangeView release];
Notice that I'm setting the x value in frame.origin of each view so that they're sitting adjacent to each other. You also have to set the content size of the UIScrollView with something like [scrollView setContentSize:CGSizeMake(1200, 1024)]; so that it knows how big its subviews are.
Then, if you need to control a UIPageControl, you would set its numberOfPages to 2 (for the example scrollview above) and change its currentPage property. You could do this by implementing scrollViewDidEndDecelerating:, which is a method in the UIScrollViewDelegate. You could check which "page" the scrollview is at by checking its contentOffset.x value.
Hope this helps!
Here's the Apple PageControl code with images. To use, just drag your images to the project. The default images are image1.jpg, image2.jpg, etc. If you need png, just change the extension to .png.
Then replace the MyViewController.m code with this code, and you've got pagecontrol with Images.
Cheers, Jordan
http://pastebin.com/raw.php?i=c3hS29sC
// Adding UIView to PageControl example
- (id)initWithPageNumber:(int)page {
UIScreen *screen = [UIScreen mainScreen];
CGRect frame = [screen applicationFrame];
frame.origin.y=0;
if (self = [super initWithNibName:#"MyView" bundle:nil]) {
UIView *view = [[UIView alloc] initWithFrame:frame];
[self.view addSubview:view];
// Add whatever you want to the view here.
[view release];
pageNumber = page;
}
return self;
}
Here's another answer...
NSArray* nibViews = [[NSBundle mainBundle] loadNibNamed:#"Views" owner:self options:nil];
infoView = [nibViews objectAtIndex:0];
[self.view addSubview:infoView];
Then you have your view.
Cheers