how to do infinite scrolling images using cocoa touch - iphone

I want to add infinite scrolling images and there is no end for images scrolling:
const CGFloat kScrollObjHeight = 200.0;
const CGFloat kScrollObjWidth = 320.0;
const NSUInteger kNumImages = 17;
- (void)layoutScrollImages
{
UIImageView *view = nil;
NSArray *subviews = [scrollview1 subviews];
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);
}
}
[scrollview1 setContentSize:CGSizeMake((kNumImages * kScrollObjWidth), [scrollview1 bounds].size.height)];
}
-(void)viewDidLoad
{
self.view.backgroundColor = [UIColor viewFlipsideBackgroundColor];
[scrollview1 setBackgroundColor:[UIColor blackColor]];
[scrollview1 setCanCancelContentTouches:NO];
scrollview1.indicatorStyle = UIScrollViewIndicatorStyleWhite;
scrollview1.clipsToBounds = YES;
scrollview1.scrollEnabled = YES;
scrollview1.pagingEnabled = YES;
for(int i=0;i< kNumImages;i++)
{
NSString *imgName=[[NSString alloc] initWithFormat:#"head%d.png",i];
UIImage *img=[UIImage imageNamed:imgName];
UIImageView *imageView=[[UIImageView alloc] initWithImage:img];
[imageView setFrame:CGRectMake(i* kScrollObjWidth, 0, kScrollObjWidth,kScrollObjHeight)];
[scrollview1 addSubview:imageView];
[imageView release];
[imgName release];
}
scrollview1.contentSize= CGSizeMake(kScrollObjWidth* kNumImages, kScrollObjHeight);
[self layoutScrollImages];
[super viewDidLoad];
}

Just make a simple new project with .h file as
#import <UIKit/UIKit.h>
#interface scrollableImageViewController : UIViewController {
IBOutlet UIScrollView *sview;
}
#end
and the .m file with this method
- (void)viewDidLoad {
[super viewDidLoad];
for(int i=0;i<10;i++)
{
NSString *name=[[NSString alloc] initWithFormat:#"images%d.png",i];
NSLog(#"%#",name);
[name release];
UIImage *img=[UIImage imageNamed:#"img.png"];
UIImageView *imageView=[[UIImageView alloc] initWithImage:img];
[imageView setFrame:CGRectMake(i*57, 0, 57, 57)];
[sview addSubview:imageView];
[imageView release];
}
sview.contentSize= CGSizeMake(57*10, 57);
}
and check the result

You can check out Apples sample code PhotoScroller.
It's the code they introduced at WWDC 11
in Session 104 - Advanced ScrollView Techniques. You can watch this video (and the corresponding PDF) for free if you are a registered Apple developer.

Related

Array of Images display in UIScrollview and Paging successfully but cannot properly zoom-in images in scrollview

I am working on UIScrollview with ImageArray. Scrolling and paging are working but I not able to zoom each image. My code of image Scrollview is below :-
#define IMAGE_WIDTH 320
#define IMAGE_HEIGHT 360
- (void)viewDidLoad
{
[super viewDidLoad];
// TODO – fill with your photos
NSArray *photos = [[NSArray arrayWithObjects:
[UIImage imageNamed:#"photo1m.jpg"],
[UIImage imageNamed:#"photo2m.jpg"],
[UIImage imageNamed:#"photo3m.jpg"],
[UIImage imageNamed:#"photo4m.jpg"],
nil] retain];
// note that the view contains a UIScrollView in aScrollView
int i=0;
for ( NSString *image in photos )
{
UIImage *images = [photos objectAtIndex:i];
imageView = [[UIImageView alloc] initWithImage:images];
imageView.contentMode = UIViewContentModeScaleAspectFit;
imageView.clipsToBounds = YES;
imageView.frame = CGRectMake( IMAGE_WIDTH * i++, 0, IMAGE_WIDTH, IMAGE_HEIGHT);
[self.scrollViewimages addSubview:imageView];
[imageView release];
}
self.scrollViewimages.contentSize = CGSizeMake(IMAGE_WIDTH*i, IMAGE_HEIGHT);
self.scrollViewimages.delegate = self;
}
Need to help for implementing pinch zoom of every images. Please help !
for ( NSString *image in photos )
{
UIImage *images = [photos objectAtIndex:i];
imageView = [[UIImageView alloc] initWithImage:images];
imageView.contentMode = UIViewContentModeScaleAspectFit;
imageView.clipsToBounds = YES;
imageView.tag = 1;
UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake( IMAGE_WIDTH * i++, 0, IMAGE_WIDTH, IMAGE_HEIGHT)];
scrollView.delegate = self;
scrollView.maximumZoomScale = 3.0f
imageView.frame = scrollView.bounds;
[scrollView addSubview:imageView];
[imageView release];
[self.scrollViewimages addSubview:scrollView];
}
And Implement the delegate method in UIScrollViewDelegate
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView {
return [scrollView viewWithTag:1];
}
#define IMAGE_FOR_ZOOM_TAG (1)
Call following custom method
-(void) setupProductImageViewContainerUI
{
UIWindow *window = [[[UIApplication sharedApplication] delegate] window];
if(self.dimView)
{
for(UIView *subView in self.dimView.subviews)
[subView removeFromSuperview];
[self.dimView removeFromSuperview]; self.dimView = nil;
}
self.dimView = [[UIView alloc] initWithFrame:window.bounds];
self.dimView.backgroundColor = [[UIColor blackColor] colorWithAlphaComponent:.5];
self.dimView.userInteractionEnabled = YES;
[window addSubview:self.dimView];
self.imgContainerView = [[UIView alloc] init];
self.imgContainerView.frame = CGRectMake(0, 0, window.frame.size.width, window.frame.size.height);
self.imgContainerView.backgroundColor = [UIColor whiteColor];
[self.dimView addSubview:self.imgContainerView];
UIScrollView *mainScrollView = [[UIScrollView alloc] initWithFrame:window.bounds];
mainScrollView.pagingEnabled = YES;
mainScrollView.delegate = self;
mainScrollView.showsHorizontalScrollIndicator = NO;
mainScrollView.showsVerticalScrollIndicator = NO;
[self.imgContainerView addSubview:mainScrollView];
CGRect innerScrollFrame = mainScrollView.bounds;
IndexOfSlidingPhoto = 0;
for(int i = 0 ; i < listOfImages.count; i++)
{
UIImage *imgProduct = [GeneralClass getImageForSreenFromScreenTable:#"" orCustomTable:#"" OrDefaultImga:[listOfImages objectAtIndex:i]];
UIImageView *imageForZooming = [[UIImageView alloc] initWithImage:imgProduct];
imageForZooming.frame = CGRectMake(0, 0, window.frame.size.width, window.frame.size.height);
imageForZooming.tag = IMAGE_FOR_ZOOM_TAG;
imageForZooming.contentMode = UIViewContentModeScaleAspectFit;
UIScrollView *pageScrollView = [[UIScrollView alloc] initWithFrame:innerScrollFrame];
pageScrollView.minimumZoomScale = 1.0f;
pageScrollView.maximumZoomScale = 20;
pageScrollView.zoomScale = 1.0f;
pageScrollView.contentSize = imageForZooming.bounds.size;
pageScrollView.delegate = self;
pageScrollView.showsHorizontalScrollIndicator = NO;
pageScrollView.showsVerticalScrollIndicator = NO;
[pageScrollView addSubview:imageForZooming];
[mainScrollView addSubview:pageScrollView];
if (i < listOfImages.count -1)
innerScrollFrame.origin.x += innerScrollFrame.size.width;
mainScrollView.contentSize = CGSizeMake(innerScrollFrame.origin.x + innerScrollFrame.size.width, mainScrollView.bounds.size.height);
[window bringSubviewToFront:self.dimView];
}
#pragma Mark -
#pragma Mark - UIScrollView Delegate Methods
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
{
return [scrollView viewWithTag:IMAGE_FOR_ZOOM_TAG];
}

how to add sounds while uiscrollview is scrolling [duplicate]

This question already has answers here:
How to add sound while UIScrollview is scrolling in iphone sdk?
(2 answers)
Closed 3 years ago.
-(void)layoutScrollImages
{
UIImageView *view = nil;
NSArray *subviews = [scrollView1 subviews];
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);
}
}
[scrollView1 setContentSize:CGSizeMake((kNumImages * kScrollObjWidth), [scrollView1 bounds].size.height)];
}
-(void)viewDidLoad
{
self.view.backgroundColor = [UIColor clearColor];
[scrollView1 setBackgroundColor:[UIColor whiteColor]];
[scrollView1 setCanCancelContentTouches:NO];
scrollView1.indicatorStyle = UIScrollViewIndicatorStyleWhite;
scrollView1.clipsToBounds = YES;
scrollView1.scrollEnabled = YES;
scrollView1.pagingEnabled = YES;
NSUInteger i;
for (i = 1; i <= kNumImages; i++)
{
NSString *imageName = [NSString stringWithFormat:#"snap%d.jpg", 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;
[scrollView1 addSubview:imageView];
[imageView release];
[self layoutScrollImages];
}
[super viewDidLoad];
}
add UIScrollViewDelegate to your interface and then do your task in
scrollViewWillBeginDragging or `scrollViewDidEndDragging`
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView // called on start of dragging (may require some time and or distance to move)
{
//add your code here
}
now this method will be called whenever you drag the scrollview

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

Zooming problem in UIScrollView

I am using UIScrollView.In that scrollview I placing UIImageViews in serial order.Zooming is not working .This is my code
- (void)viewDidLoad
{
self.view.backgroundColor=[UIColor blackColor];
NSArray *imageArray=[[NSArray alloc]initWithObjects:[UIImage imageNamed:#"test1.png"],[UIImage imageNamed:#"test2.png"],[UIImage imageNamed:#"test3.png"], nil];
scrollView_=[[UIScrollView alloc]initWithFrame:CGRectMake(0, 0, self.view.frame.size.width+20, self.view.frame.size.height)];
[scrollView_ setCanCancelContentTouches:NO];
scrollView_.indicatorStyle = UIScrollViewIndicatorStyleWhite;
scrollView_.clipsToBounds = NO;
scrollView_.scrollEnabled = YES;
scrollView_.pagingEnabled = YES;
scrollView_.delegate=self;
scrollView_.showsHorizontalScrollIndicator=NO;
scrollView_.showsVerticalScrollIndicator=NO;
scrollView_.contentSize = CGSizeMake([imageArray count]*self.scrollView_.frame.size.width, self.scrollView_.frame.size.height);
[scrollView_ setMaximumZoomScale:3.0];
[scrollView_ setMinimumZoomScale:1];
[scrollView_ setZoomScale:1];
[scrollView_ setBouncesZoom:YES];
[scrollView_ setBounces:YES];
for(int i=0;i<[imageArray count];i++)
{
UIImageView *imageView=[[UIImageView alloc]initWithImage:[imageArray objectAtIndex:i]];
imageView.frame=CGRectMake((i*320)+(i*20), 0, 320, 480);
[imageView_ setTag:i];
[scrollView_ addSubview:imageView];
[imageView release];
}
[self.view addSubview:scrollView_];
}
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
{
return [scrollView_ viewWithTag:page_];
}
- (void)scrollViewDidScroll:(UIScrollView *)_scrollView
{
CGFloat pageWidth = _scrollView.frame.size.width;
int page = floor((_scrollView.contentOffset.x - pageWidth / 2) / pageWidth) + 1;
self.page_=page;
}
Thanks in advance..
Where have you set -
[self.mainScroll setZoomScale:(float)];
I guess by default this is 1. So no zoom happens...
Create a container view, and add imageViews into the container view,
then use the container view as zoomview.
- viewDidLoad {
// ---
self.containerView =[[[UIView alloc] init] autorelease];
self.containerView.frame = CGRectMake(0, 0, [imageArray count]*self.scrollView_.frame.size.width, self.scrollView_.frame.size.height);
[scrollView_ addSubView:self.containerView];
for(int i=0;i<[imageArray count];i++)
{
UIImageView *imageView=[[UIImageView alloc]initWithImage:[imageArray objectAtIndex:i]];
imageView.frame=CGRectMake((i*320)+(i*20), 0, 320, 480);
[imageView_ setTag:i];
[self.containerView addSubview:imageView];
[imageView release];
}
// --
}
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
{
return self.containerView;
}

UIPageControl bug: showing one bullet first and then showing everything

I have some strange behavior using a UIPageControl:
First it appears showing only one bullet, then when I move the scroll view all the bullets appear correctly. Is there something I'm missing before I add it as a subview?
Here is my code imageScrollView.h :
#interface ImageScrollView : UIView <UIScrollViewDelegate> {
NSMutableDictionary *photos;
BOOL *pageControlIsChangingPage;
UIPageControl *pageControl;
}
#property (nonatomic, copy) NSMutableDictionary *photos;
#property (nonatomic, copy) UIPageControl *pageControl;
#end
Here is the code for imageScrollView.m:
#import "ImageScrollView.h"
#implementation ImageScrollView
#synthesize photos, pageControl;
- (id)initWithFrame:(CGRect)frame {
if ((self = [super initWithFrame:frame])) {
// Initialization code
}
return self;
}
- (void) drawRect:(CGRect)rect
{
[self removeAllSubviews];
UIScrollView *scroller = [[UIScrollView alloc] initWithFrame:CGRectMake(0,0,self.frame.size.width,self.frame.size.height)];
[scroller setDelegate:self];
[scroller setBackgroundColor:[UIColor grayColor]];
[scroller setShowsHorizontalScrollIndicator:NO];
[scroller setPagingEnabled:YES];
NSUInteger nimages = 0;
CGFloat cx= 0;
for (NSDictionary *myDictionaryObject in photos)
{
if (![myDictionaryObject isKindOfClass:[NSNull class]]) {
NSString *photo =[NSString stringWithFormat:#"http://www.techbase.com.mx/blog/%#",[myDictionaryObject objectForKey:#"filepath"]];
NSDictionary *data = [myDictionaryObject objectForKey:#"data"];
UIView *imageContainer = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height - 30)];
TTImageView *imageView = [[TTImageView alloc] initWithFrame:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height - 30)];
imageView.urlPath=photo;
[imageContainer addSubview:imageView];
UILabel *caption = [[UILabel alloc] initWithFrame:CGRectMake(0,imageView.frame.size.height,imageView.frame.size.width,10)];
[caption setText:[NSString stringWithFormat:#"%#",[data objectForKey:#"description"]]];
[caption setBackgroundColor:[UIColor grayColor]];
[caption setTextColor:[UIColor whiteColor]];
[caption setLineBreakMode:UILineBreakModeWordWrap];
[caption setNumberOfLines:0];
[caption sizeToFit];
[caption setFont:[UIFont fontWithName:#"Georgia" size:10.0]];
[imageContainer addSubview:caption];
CGRect rect = imageContainer.frame;
rect.size.height = imageContainer.size.height;
rect.size.width = imageContainer.size.width;
rect.origin.x = ((scroller.frame.size.width - scroller.size.width) / 2) + cx;
rect.origin.y = ((scroller.frame.size.height - scroller.size.height) / 2);
imageContainer.frame=rect;
[scroller addSubview:imageContainer];
[imageView release];
[imageContainer release];
[caption release];
nimages++;
cx +=scroller.frame.size.width;
}
}
[scroller setContentSize:CGSizeMake(nimages * self.frame.size.width, self.frame.size.height)];
[self addSubview:scroller];
pageControl = [[UIPageControl alloc] initWithFrame:CGRectMake(self.frame.size.width/2, self.frame.size.height -20, (self.frame.size.width/nimages)/2, 20)];
pageControl.numberOfPages=nimages;
[self addSubview:pageControl];
[scroller release];
}
-(void)dealloc {
[pageControl release];
[super dealloc];
}
-(void)scrollViewDidScroll:(UIScrollView *)_scrollView{
if(pageControlIsChangingPage){
return;
}
CGFloat pageWidth = _scrollView.frame.size.width;
int page = floor((_scrollView.contentOffset.x - pageWidth /2) / pageWidth) + 1;
pageControl.currentPage = page;
}
-(void)scrollViewDidEndDecelerating:(UIScrollView *)_scrollView{
pageControlIsChangingPage = NO;
}
#end
Since you're drawing the UIPageControl in the drawRect method, you need to call the setNeedsLayout method of this control after you initialize it. Otherwise it won't render itself properly until an event that forces this redrawing is called.
pageControl = [[UIPageControl alloc] initWithFrame:CGRectMake(self.frame.size.width/2, self.frame.size.height -20, (self.frame.size.width/nimages)/2, 20)];
pageControl.numberOfPages=nimages;
[pageControl setNeedsLayout];
[self addSubview:pageControl];