Scrolling of Images using UIScrollView and ImageView in iPhone - iphone

I am working one of the app, In that app,there is only one view that has an image on it. I want to be able to swipe left or right and have the first image go out of the view and the second image to come in. The images are different and I want it to look like they are connected. I have used UIScrollView and UIImageView on xib files below is my code which i am using in view did load method. When i run the app, only last image is showing in scrollview.
NSMutableArray *images = [[NSMutableArray alloc] initWithObjects:[UIImage imageNamed:#"iPad.png"],[UIImage imageNamed:#"iPadMini.png"],[UIImage imageNamed:#"iPhone4.png"],[UIImage imageNamed:#"iPhone5.png"], nil];
for (int i = 0; i < [images count]; i++) {
CGRect frame;
frame.origin.x = self.scrollView.frame.size.width * i;
frame.origin.y = 0;
frame.size = self.scrollView.frame.size;
imgView.frame = frame;
imgView.image = [images objectAtIndex:i];
[scrollView addSubview:imgView];
}
self.scrollView.contentSize = CGSizeMake(self.scrollView.frame.size.width * images.count, self.scrollView.frame.size.height);

Try with this block of code...
NSMutableArray *images = [[NSMutableArray alloc] initWithObjects:[UIImage imageNamed:#"iPad.png"],[UIImage imageNamed:#"iPadMini.png"],[UIImage imageNamed:#"iPhone4.png"],[UIImage imageNamed:#"iPhone5.png"], nil];
for (int i = 0; i < [images count]; i++)
{
UIImageView *imgView = [[UIImageView alloc] init];
imgView.frame = CGRectMake(100*i, 0, 100, self.scrollView.frame.size.height);
imgView.image = [images objectAtIndex:i];
[scrollView addSubview:imgView];
}
self.scrollView.contentSize = CGSizeMake(self.scrollView.frame.size.width * images.count, self.scrollView.frame.size.height);

Try this..
NSMutableArray *images = [[NSMutableArray alloc] initWithObjects:[UIImage imageNamed:#"iPad.png"],[UIImage imageNamed:#"iPadMini.png"],[UIImage imageNamed:#"iPhone4.png"],[UIImage imageNamed:#"iPhone5.png"], nil];
for (int i = 0; i < [images count]; i++) {
UIImageView *imgView = [[UIImageView alloc]init];
CGRect frame;
frame.origin.x = self.scrollView.frame.size.width * i;
frame.origin.y = 0;
frame.size = self.scrollView.frame.size;
imgView.frame = frame;
imgView.image = [images objectAtIndex:i];
[scrollView addSubview:imgView];
}
self.scrollView.contentSize = CGSizeMake(self.scrollView.frame.size.width * images.count, self.scrollView.frame.size.height);
Hope it helps...

Related

Grid Of image with paging in iphone sdk [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I want to display grid of image in scrollview with paging.All images are from server .
I know to use scrollview with paging.But how can we show images in scrollview with paging.
Can i get idea for how to do this?
Better to use your own logic to arrange the images in scroll view
Create a UiScrollView with paging enabled.. to do this please refer this link
Create a for-loop with adjusting X and Y coordinates of your imageView
From the above link ,these two below method will help you to achieve the functionality
- (void)scrollViewDidScroll:(UIScrollView *)sender {
// Update the page when more than 50% of the previous/next page is visible
CGFloat pageWidth = self.scrollView.frame.size.width;
int page = floor((self.scrollView.contentOffset.x - pageWidth / 2) / pageWidth) + 1;
self.pageControl.currentPage = page;
}
- (IBAction)changePage {
// update the scroll view to the appropriate page
CGRect frame;
frame.origin.x = self.scrollView.frame.size.width * self.pageControl.currentPage;
frame.origin.y = 0;
frame.size = self.scrollView.frame.size;
[self.scrollView scrollRectToVisible:frame animated:YES];
}
Here you go:
// an array of uiimageviews (will be easier to deal with than UIImages
NSMutableArray * images = [[NSMutableArray alloc] init];
[images addObject:[[UIImageView alloc] initWithImage:[UIImage imageNamed:#"image.jpg"]]];
[images addObject:[[UIImageView alloc] initWithImage:[UIImage imageNamed:#"image.jpg"]]];
[images addObject:[[UIImageView alloc] initWithImage:[UIImage imageNamed:#"image.jpg"]]];
[images addObject:[[UIImageView alloc] initWithImage:[UIImage imageNamed:#"image.jpg"]]];
[images addObject:[[UIImageView alloc] initWithImage:[UIImage imageNamed:#"image.jpg"]]];
[images addObject:[[UIImageView alloc] initWithImage:[UIImage imageNamed:#"image.jpg"]]];
[images addObject:[[UIImageView alloc] initWithImage:[UIImage imageNamed:#"image.jpg"]]];
[images addObject:[[UIImageView alloc] initWithImage:[UIImage imageNamed:#"image.jpg"]]];
[images addObject:[[UIImageView alloc] initWithImage:[UIImage imageNamed:#"image.jpg"]]];
//we're going to split them into groups of four
NSMutableArray * groupsOfFour = [[NSMutableArray alloc] init];
for(NSInteger i = 0; i < [images count]; i+=4)
{
NSRange theRange;
theRange.location = i;
theRange.length = 4;
if( [images count] - i < 4)
{
theRange.length = [images count] - i;
}
if([images subarrayWithRange:theRange])
[groupsOfFour addObject:[images subarrayWithRange:theRange]];
}
//groupsOfFour will now contain arrays of groups of 4 images
//from that we can work out the content width of out scrollview
float contentWidth = 320*[groupsOfFour count];
//make the scrollview
UIScrollView *scroll = [[UIScrollView alloc] initWithFrame:CGRectMake(0,0,320,480)];
scroll.contentSize = CGSizeMake( contentWidth , 480);
scroll.showsHorizontalScrollIndicator = YES;
scroll.pagingEnabled = YES; //set paging enabled
[self.view addSubview:scroll];
//no we loop through the groups of 4 and add each image we find into a uiview
//this is important because then each group will be separate,
//and so the paging will automatically lock to them
for(NSInteger i = 0; i < [groupsOfFour count]; i++)
{
NSMutableArray * thisGroup = [groupsOfFour objectAtIndex:i];
UIView * groupOfFourView = [[UIView alloc] initWithFrame:CGRectMake(i*320, 0, 320, 480)];
UIImageView*topLeft = [thisGroup objectAtIndex:0];
topLeft.frame = CGRectMake(0, 0, 160, 240);
[groupOfFourView addSubview:topLeft];
//these if statements check that there is an image for this position
//(the last page is likely to have only 1 or 2 images on it)
if([thisGroup count] > 1)
{
UIImageView*topRight = [thisGroup objectAtIndex:1];
topRight.frame = CGRectMake(160, 0, 160, 240);
[groupOfFourView addSubview:topRight];
}
if([thisGroup count] > 2)
{
UIImageView*bottomLeft = [thisGroup objectAtIndex:2];
bottomLeft.frame = CGRectMake(0, 240, 160, 240);
[groupOfFourView addSubview:bottomLeft];
}
if([thisGroup count] > 3)
{
UIImageView*bottomRight = [thisGroup objectAtIndex:3];
bottomRight.frame = CGRectMake(160, 240, 160, 240);
[groupOfFourView addSubview:bottomRight];
}
//finally add the group of four to our scrollview
[scroll addSubview:groupOfFourView];
}

Pie Chart Not Showing Inside ScrollView in iPhone

I am creating pie chart in Scrollview which is the subview of the main view and then i am adding the pieChart as a subview of scroll view but it does not show pie chart
I have following code
-(void)loadNews{
NSArray *graphs = [[NSArray alloc] initWithObjects:#"1", nil];
NSInteger numberofPages=[graphs count];
for (int i = 0; i < [graphs count]; i++) {
CGRect frame;
frame.origin.x = self.scrollView.frame.size.width * i;
frame.origin.y = 0;
frame.size = self.scrollView.frame.size;
UIView*subView=[[UIView alloc ]initWithFrame:frame];
[self.scrollView addSubview:subView];
//PieClass *myPieClass=[[PieClass alloc]initWithFrame:CGRectMake(250,450,320,230)];
PieClass *myPieClass=[[PieClass alloc]initWithFrame:CGRectMake(327,470,320,230)];
//myPieClass.backgroundColor=[UIColor clearColor];
myPieClass.backgroundColor=[UIColor blackColor];
myPieClass.itemArray=[[NSArray alloc]initWithObjects:valueOne,valueTwo,valueThree,valueFour, nil];
myPieClass.myColorArray=[[NSArray alloc]initWithObjects:[UIColor blueColor],[UIColor redColor],[UIColor greenColor],[UIColor brownColor], nil];
myPieClass.radius=100;
[subView addSubview:myPieClass];
}
self.scrollView.contentSize = CGSizeMake(self.scrollView.frame.size.width * graphs.count, self.scrollView.frame.size.height);
[pageControl setNumberOfPages:numberofPages];
[pageControl setActivePageColor:[UIColor colorWithRed:36/255.0 green:71/255.0 blue:113/255.0 alpha:1.0]];
[pageControl setInactivePageColor:[UIColor lightGrayColor]];
}
In CGRectMake(327,470,320,230)
You are setting the origin of 327,470
Try something like CGRectMake(100,100,320,230).

How to change the image on UIScrollView

I have a scroll view with multiple images. The images are scrollable.
I am using the following code:
scrollView = [[UIScrollView alloc]initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height)];
scrollView.pagingEnabled = YES;
scrollView.delegate = self;
scrollView.showsVerticalScrollIndicator = NO;
scrollView.showsHorizontalScrollIndicator = NO;
NSInteger numberOfViews = [arrayImage count];
for (int i = 0; i < numberOfViews; i++)
{
CGFloat yOrigin = i * scrollView.frame.size.width;
imageView = [[UIImageView alloc]initWithFrame:CGRectMake(yOrigin +30, 0, self.view.frame.size.width-60 , self.view.frame.size.height)];
imageView.image = [UIImage imageNamed:[arrayImage objectAtIndex:i]];
[scrollView addSubview:imageView];
[imageView release];
}
scrollView.contentSize = CGSizeMake(scrollView.frame.size.width * numberOfViews,0);
[self.view addSubview:scrollView];
[scrollView release]
The application will work with iPad orientations, but the images are not properly scrolled in the landscape mode.
It works fine with portrait mode, but the images merge in landscape mode.
If somebody has any idea, please share....
Try this one...
scrollView.delegate = self;
scrollView.scrollEnabled = YES;
int scrollWidth = 120;
scrollView.contentSize = CGSizeMake(scrollWidth,80);
int xOffset = 0;
imageView.image = [UIImage imageNamed:[imagesName objectAtIndex:0]];
for(int index=0; index < [imagesName count]; index++)
{
UIImageView *img = [[UIImageView alloc] init];
img.bounds = CGRectMake(10, 10, 50, 50);
img.frame = CGRectMake(5+xOffset, 0, 50, 50);
NSLog(#"image: %#",[imagesName objectAtIndex:index]);
img.image = [UIImage imageNamed:[imagesName objectAtIndex:index]];
[images insertObject:img atIndex:index];
scrollView.contentSize = CGSizeMake(scrollWidth+xOffset,110);
[scrollView addSubview:[images objectAtIndex:index]];
xOffset += 70;
}
Set this...
imagesName = [[NSArray alloc]initWithObjects:#"image1.jpg",#"image2.jpg",#"image3.jpg",#"image4.jpg",#"image5.jpg",#"image6.png",#"image7.png",#"image9.png",nil];
images = [[NSMutableArray alloc]init];
You have to set the image frame for that purpose everytime the interface orientation changes or you have to redraw the images again after the change in orientation

Pagination in scrollview

_
viewdidload
{
NSArray *colors = [NSArray arrayWithObjects:[UIColor redColor], [UIColor greenColor], [UIColor blueColor], nil];
for (int i = 0; i < colors.count; i++) {
CGRect frame;
frame.origin.x = self.scrollView.frame.size.width * i;
frame.origin.y = 0;
frame.size = self.scrollView.frame.size;
UIView *subview = [[UIView alloc] initWithFrame:frame];
subview.backgroundColor = [colors objectAtIndex:i];
[self.scrollView addSubview:subview];
[subview release];
}
self.scrollView.contentSize = CGSizeMake(self.scrollView.frame.size.width * colors.count, self.scrollView.frame.size.height);
self.pageControl.currentPage = 0;
self.pageControl.numberOfPages = colors.count;
}
- (void)scrollViewDidScroll:(UIScrollView *)sender {
if (!pageControlBeingUsed) {
// Switch the indicator when more than 50% of the previous/next page is visible
CGFloat pageWidth = self.scrollView.frame.size.width;
int page = floor((self.scrollView.contentOffset.x - pageWidth / 2) / pageWidth) + 1;
self.pageControl.currentPage = page;
}
}
i am using this code for displaying pagination in scrollview with different colors,for identification,i just want to replace it with images instead of colors.i am using this code
NSArray *colors = [NSArray arrayWithObjects:[UIImage imageNamed:#"h1#2x"], [UIImage imageNamed:#"h2#2x"], [UIImage imageNamed:#"h2.1#2x"], nil];
for (int i = 0; i < colors.count; i++) {
CGRect frame;
frame.origin.x = self.scrollView.frame.size.width * i;
frame.origin.y = 0;
frame.size = self.scrollView.frame.size;
UIImageView*subview = [[UIView alloc] initWithFrame:frame];
UIImage *imggg = [colors objectAtIndex:i];
[subview setBackgroundColor:[UIColor colorWithPatternImage:imggg]];
[self.scrollView addSubview:subview];
[subview release];
}
But i get only two view, and the image is not size to fit it is delocated.How to set images with the above code.Please help me to solve this problem.
Thanks in advance.
I got the answer by reducing the size of the images in the array to exactly the size of the scrollview. My scrollview size is 320,424, and I slice the size of the images to 320,424. It works perfectly. Thanks.
UIView *subview = [[[UIView alloc] initWithFrame:frame] autorelease];
[subview setBackgroundColor:[colors objectAtIndex:i]];
[[self scrollView] addSubview:subview];
this looks like what your code is trying to do...
If you want images on each page though:
UIImage *img = [UIImage imageNamed:#"nameOfImageFile"];
UIImageView *imageView = [[[UIImageView alloc] initWithImage:img] autorelease];
[[self scrollView] addSubview:imageView];
to have multiple images for each page, just use an array of UIImages for the page.
NSArray *imageNames = [NSArray arrayWithObjects:#"image1Name", #"image2name", #"image3Name", nil];
UIImage *img = [UIImage imageNamed:[imageNames objectAtIndex:pageNumber]];
UIImageView *imageView = [[[UIImageView alloc] initWithImage:img] autorelease];
[[self scrollView] addSubview:imageView];
#import <UIKit/UIKit.h>
#interface ViewController : UIViewController
{
IBOutlet UIScrollView *scrollView;
}
#end
#import "ViewController.h"
#interface ViewController ()
#end
#implementation ViewController
- (void)viewDidLoad
{
[super viewDidLoad];
NSArray *colors = [NSArray arrayWithObjects:[UIImage imageNamed:#"chiranjeevi.jpeg"], [UIImage imageNamed:#"AR.jpeg"], [UIImage imageNamed:#"sachin.jpeg"], nil];
scrollView.contentSize = CGSizeMake(scrollView.frame.size.width*colors.count,scrollView.frame.size.height);
for (int i = 0; i <[colors count]; i++)
{
UIImage *imggg = [colors objectAtIndex:i];
CGRect frame;
frame.origin.x =scrollView.frame.size.width * i;
frame.origin.y = 0;
frame.size = scrollView.frame.size;
UIImageView *subview = [[UIImageView alloc] initWithFrame:frame];
subview.image=imggg;
[scrollView addSubview:subview];
}
}
- (void)viewDidUnload
{
[super viewDidUnload];
// Release any retained subviews of the main view.
}
- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
return (interfaceOrientation != UIInterfaceOrientationPortraitUpsideDown);
}
#end

How can i recive Selected Index Page in UIScrollView

I'm a beginner at iPhone development. I set 95 pages with (320, 480) pixels in scrollView content size.
I want to get the selected index when I scroll in the UIScrollView.
(void)viewDidLoad {
[super viewDidLoad];
NSLog(#"Selected page %d",scrollView.contentOffset.x) ;
scrollView.pagingEnabled = YES;
NSUInteger i;
for (i = 1; i <= kNumImages; i++)
{
NSString *imageName = [NSString stringWithFormat:#"page (%d).png", i];
UIImage *image = [UIImage imageNamed:imageName];
UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
CGRect rect = imageView.frame;
rect.size.height = kScrollObjHeight;
rect.size.width = kScrollObjWidth;
imageView.frame = rect;
imageView.tag = i;
NSLog(#"Selected page %d",scrollView.contentOffset.x) ;
[scrollView addSubview:imageView];
[imageView release];
}
[self layoutScrollImages];
}
what do you want to do after getting that selected index number.because you can
check the condition like if sender.tag==5 if you want to use at other place as you have assigned tag to each page or you can implement scrollview with paging.check this
example
https://github.com/ykyuen/ScrollViewWithPaging