I'm developing an app that i need to load many images in a view using Xcode 4.5.2
So, At the top, I have a UIView, inside of this UIView, i have UIScrollView to display many images,i'm using this UIScrollView in pagingEnabled mode. As i have many images to load, i know that it cannot be possible to load at once. So, i decided to add or remove if need be.
When the app starts, i've loaded three images in UIScrollView, when user passes to image 2,
i want to remove image 0 from UIScrollView.When i try to remove the image 0,i got totally white screen.The funny part is that if i dont try to remove image 0,when user passes to image 3, i want to load a new image(image 4) to UIScrollView, and remove image 1.So far, I'm able to do this. Basically,my apps works just fine, but when i want to remove the first(at index 0)image,I got totally white screen on the screen.
Do you have any idea why i'm getting this behaviour ? I got neither warning,nor error. How is it possible that i'm able to remove all the other images but not the image 0 ?
Thank you.
-(void)scrollViewDidScroll:(UIScrollView *)scrollView
{
static NSInteger currentPage = 0 ;
CGFloat pageWidth = self.scrollView.frame.size.width ;
float fractionalPage = self.scrollView.contentOffset.x / pageWidth ;
NSLog(#"%f",fractionalPage);
if(fractionalPage == currentPage+1)
{
NSLog(#"Swipe Left");
currentPage++;
NSLog(#"Current page :%d",currentPage);
[self setLayoutImages:kLeft] ;
}
else if(fractionalPage+1 ==currentPage)
{
NSLog(#"Swipe Right");
currentPage--;
NSLog(#"Current page :%d",currentPage);
[self setLayoutImages:kRight];
}
}
-(void)setLayoutImages:(Direction )direction
{
int currentPage = self.scrollView.contentOffset.x / scrollViewWidth ;
if(direction == kLeft)
{
self.scrollView.contentSize = CGSizeMake(((currentPage+2) * scrollViewWidth), 350.0f);
if(![self.scrollView viewWithTag:currentPage+1])
{
NSString *imageName = #"iPhone.png" ;
UIImage *image = [UIImage imageNamed:imageName];
UIImageView *imageView = [[UIImageView alloc]initWithImage:image ] ;
imageView.tag = currentPage+1 ;
CGRect frame = imageView.frame ;
frame.size.height = imageHeight;
frame.size.width = scrollViewWidth ;
frame.origin.x = (currentPage+1) * scrollViewWidth ;
frame.origin.y = 0 ;
imageView.frame = frame ;
if (currentPage>2) { //To be able to remove the first image,i need to add equal here,but i got white screen.
[[self.scrollView viewWithTag:(currentPage -2)]removeFromSuperview ] ; }
[self.scrollView addSubview:imageView ] ;
}
}
else if(direction == kRight)
{
if(![self.scrollView viewWithTag:currentPage-1] && currentPage >0)
{
NSString *imageName = #"gs.jpeg";
UIImage *image = [UIImage imageNamed:imageName];
UIImageView *imageView = [[UIImageView alloc]initWithImage:image ];
imageView.tag = currentPage-1 ;
CGRect frame = imageView.frame ;
frame.size.height = imageHeight ;
frame.size.width = scrollViewWidth ;
frame.origin.x = (currentPage-1)*scrollViewWidth ;
frame.origin.y = 0 ;
imageView.frame = frame ;
[[self.scrollView viewWithTag:currentPage+2]removeFromSuperview ] ;
[self.scrollView addSubview:imageView ];
}
}
}
Try making your views start with a tag of 1 not 0, as 0 is the default for an untagged view if i remember correctly, and this might be causing the problem
You can Give each one of three deferant Tag and reuse it by [[view viewWithtag:tag] removeFromSuperView] or you can try ready project called iCarousel made by nicklockwood it is an wonderful project.
it can be horizontal and vertical
Related
I have UIScrollview that contains different UITableviews. You can scroll through these UITableviews using a UIPagecontrol.
This is how I add my UITableview to the UIScrollview
- (void)loadPage:(NSInteger)page {
if (page < 0 || page >= self.pageStages.count) {
// If it's outside the range of what we have to display, then do nothing
return;
}
// Load an individual page, first seeing if we've already loaded it
UIView *pageView = [self.pageViews objectAtIndex:page];
if ((NSNull*)pageView == [NSNull null]) {
CGRect frame = self.scrollView.bounds;
//frame.size.width = 280.0f;
frame.size.height = self.scrollView.bounds.size.height;
float offset=20;
frame.size.width = frame.size.width-(2*offset);
frame.origin.x = (326 * page)+offset;
frame.origin.y = 0;
UITableView *tableStage = [[UITableView alloc]initWithFrame:frame];
tableStage.backgroundColor = [UIColor colorWithRed:(250/255.0) green:(248/255.0) blue:(247/255.0) alpha:100];
tableStage.contentMode = UIViewContentModeScaleAspectFit;
tableStage.delegate = self;
tableStage.dataSource = self;
tableStage.tag = page;
tableStage.contentMode = UIViewContentModeScaleAspectFit;
[self.scrollView addSubview:tableStage];
[self.pageViews replaceObjectAtIndex:page withObject:tableStage];
}
}
Now I want that user can jump to a certain UITableview from another UIViewController. Therefore I have a variable pageNumber. When I set the pageNumber I call a method jumpToPage3 and I give the pageNumber with it. This is how the function looks like.
-(void)jumpToPage3:(NSNumber *)page{
NSLog(#"jump to page 3");
float offset=30;
float height = self.scrollView.bounds.size.height;
float width = 320 - (2*offset);
int pagee = [page intValue] - 1;
float x = (320 * pagee) + offset;
[self.scrollView scrollRectToVisible:CGRectMake(x, 0, width , height) animated:NO];
}
The problem is that it is not jumping to the correct page. It stays on the first page.
Can someone help me with this?
When you add content to the scroll view you also have to tell increase the contentSize
I'm new in iOS. Now I want to load view images from URL to page control using scroll view. When I run the program the first image is shown but when I try to slide to next image or I move to another page program is not responding. My guess is probably related to the size of image.
The following is my code to load the image. I put this code in -(void) viewDidLOad...
CGRect screenShot = screenView.frame;
screenShot.origin.y = description.frame.origin.y + description.frame.size.height + 30;
screenView.frame = screenShot;
pageControlBeingUsed = NO;
for (int i = 0; i < [myArrayImagesURL count]; i++) {
CGRect frame;
frame.origin.x = self.scrollView.frame.size.width * i;
frame.origin.y = 0;
frame.size = self.scrollView.frame.size;
UIImageView *iv = [[[UIImageView alloc] initWithFrame:CGRectMake(scrollView.bounds.size.width * i, 0, scrollView.bounds.size.width, scrollView.bounds.size.height)] autorelease];
iv.image = [UIImage imageWithData:[NSData dataWithContentsOfURL:
[NSURL URLWithString:[myArrayImagesURL objectAtIndex:i]]]];
[self.scrollView addSubview:iv];
[iv release];
}
self.scrollView.contentSize = CGSizeMake(self.scrollView.frame.size.width * [myArrayImagesURL count], self.scrollView.frame.size.height);
self.pageControl.currentPage = 0;
self.pageControl.numberOfPages = [myArrayImagesURL count];
It looks like you have set the imageView to autorelease and the released it. This should be wrong. Try removing the autorelease tag when you create the imageView. It should be properly retained now.
UIImageView *iv = [[UIImageView alloc] initWithFrame:CGRectMake(scrollView.bounds.size.width * i, 0, scrollView.bounds.size.width, scrollView.bounds.size.height)];
I've implemented an infinite UIScrollView that contains UIViews. When scrolling in iOS5 (simulator and iphone) it works beautifully. But in iOS 4.3 (sim and phone) it kinda goes a bit crazy and scrolls passed more views than it should (about 10-15x more views than in iOS5). And to make it more strange it works as expected if I drag slowly so it doesn't continue scroll after I release.
The setup is kinda simple, I extend the UIScrollView class. And add UIView with a width of about 1500pt, in this I add my UIViews I want to scroll over. When scrolling the views are added and removed if they are off screen.
I think my problem lies with in this code:
- (void)recenterIfNecessary {
CGPoint currentOffset = [self contentOffset];
CGFloat contentWidth = [self contentSize].width;
CGFloat centerOffsetX = (contentWidth - [self bounds].size.width) / 2.0;
CGFloat distanceFromCenter = fabs(currentOffset.x - centerOffsetX);
UIView *image;
if (distanceFromCenter > (contentWidth / 4.0)) {
// Recenter the ScrollView so we never reach the edge
self.contentOffset = CGPointMake(centerOffsetX, currentOffset.y);
// Move visiblePhotos to new position to adjust to new contentOffset
for (image in visiblePhotos) {
CGPoint center = image.center;
center.x += (centerOffsetX - currentOffset.x);
image.center = center;
}
}
}
recenterIfNecessary is invoked here:
- (void)layoutSubviews {
[super layoutSubviews];
[self recenterIfNecessary];
[self tileImagesFromMinX:minVisibleX toMaxX:maxVisibleX];
//....
}
I've tried logging positions and offsets to try find a pattern with the difference between iOS4 & 5 with luck.
I got the concept and some code from http://developer.apple.com/videos/wwdc/2011/#advanced-scrollview-techniques (they use iOS5).
EDIT
Photos (that are put in the visiblePhotos array) are created with this methods:
- (CGFloat)placeNewImageOnRight:(CGFloat)rightEdge {
imageIndex = imageIndex < 0 ? ([reportItems count] - 1) : (imageIndex >= [reportItems count] ? 0 : imageIndex);
UIView *image = [self createItemContainer:[reportItems objectAtIndex:imageIndex]];
[visiblePhotos addObject:image];
CGRect frame = [image frame];
frame.origin.x = rightEdge;
frame.origin.y = [imageContainerView bounds].size.height - frame.size.height;
[image setFrame:frame];
imageIndex += 1;
return CGRectGetMaxX(frame);
}
- (CGFloat)placeNewImageOnLeft:(CGFloat)leftEdge {
imageIndex = imageIndex < 0 ? ([reportItems count] - 1) : (imageIndex >= [reportItems count] ? 0 : imageIndex);
UIView *image = [self createItemContainer:[reportItems objectAtIndex:imageIndex]];
[visiblePhotos insertObject:image atIndex:0];
CGRect frame = [image frame];
frame.origin.x = leftEdge - frame.size.width;
frame.origin.y = [imageContainerView bounds].size.height - frame.size.height;
[image setFrame:frame];
imageIndex -= 1;
return CGRectGetMinX(frame);
}
[self createItemContainer:[reportItems objectAtIndex:imageIndex]] creates a UIVeiw that contains a photo`.
The left and right methods are basically the same and are invoked by the method below. And tileImagesFromMinX is invoked on every frame by - (void)layoutSubviews.
- (void)tileImagesFromMinX:(CGFloat)minVisibleX toMaxX:(CGFloat)maxVisibleX {
if ([visiblePhotos count] == 0) {
[self placeNewImageOnRight:minVisibleX];
}
UIView *lastImage = [visiblePhotos lastObject];
CGFloat rightEdge = CGRectGetMaxX([lastImage frame]);
while (rightEdge < maxVisibleX) {
rightEdge = [self placeNewImageOnRight:rightEdge];
}
UIView *firstImage = [visiblePhotos objectAtIndex:0];
CGFloat leftEdge = CGRectGetMinX([firstImage frame]);
while (leftEdge > minVisibleX) {
leftEdge = [self placeNewImageOnLeft:leftEdge];
}
lastImage = [visiblePhotos lastObject];
while ([lastImage frame].origin.x > maxVisibleX) {
[lastImage removeFromSuperview];
[visiblePhotos removeLastObject];
lastImage = [visiblePhotos lastObject];
}
firstImage = [visiblePhotos objectAtIndex:0];
while (CGRectGetMaxX([firstImage frame]) < minVisibleX) {
[firstImage removeFromSuperview];
[visiblePhotos removeObjectAtIndex:0];
firstImage = [visiblePhotos objectAtIndex:0];
}
}
I've done a bunch of investigating and determined that you can't just set self.contentOffset = ...; and expect the scroll view to scroll/decelerate properly in iOS 4.3. So, even without the image tiling (and in fact you will notice this more clearly if you remove your images and just put a background on your image container view), your implementation of recenterIfNecessary will not work under 4.3 (this also affects the sample code on the developer site!).
Unfortunately, it seems the only way to work around this is to override -setContentOffset: and modify the offset there before calling super. Have a look at this question for some guidance on how to get that working correctly. I hope for your sake that this method will also work in iOS 5...
I need to create a horizontal UIScrollView which to hold hundreds of thumbnail images, just like a slide of thumbnails.
For example, there will be 10 thumbnails showing in a single screen, each of them are horizontally adjacent to each other.
My problem is that I don't know how to make a horizontal UIScrollView to hold the multiple thumbnails which showing at the same time ?
A sample photo is as below. See the bottom part of the screen.
Thanks.
You can add all the thumbnails programatically to your scrollview and use the setContentSize method of UIScrollView. you have to pass 2 values in contentOffset. 1 for width and 1 for height. Please follow link to explore more on this. If you need further help please leave a comment.
Hope it helps.
Please consider Following example.
- (void)setupHorizontalScrollView
{
scrollView.delegate = self;
[self.scrollView setBackgroundColor:[UIColor blackColor]];
[scrollView setCanCancelContentTouches:NO];
scrollView.indicatorStyle = UIScrollViewIndicatorStyleWhite;
scrollView.clipsToBounds = NO;
scrollView.scrollEnabled = YES;
scrollView.pagingEnabled = YES;
NSUInteger nimages = 0;
NSInteger tot=0;
CGFloat cx = 0;
for (; ; nimages++) {
NSString *imageName = [NSString stringWithFormat:#"image%d.jpg", (nimages + 1)];
UIImage *image = [UIImage imageNamed:imageName];
if (tot==15) {
break;
}
if (4==nimages) {
nimages=0;
}
UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
CGRect rect = imageView.frame;
rect.size.height = 40;
rect.size.width = 40;
rect.origin.x = cx;
rect.origin.y = 0;
imageView.frame = rect;
[scrollView addSubview:imageView];
[imageView release];
cx += imageView.frame.size.width+5;
tot++;
}
self.pageControl.numberOfPages = nimages;
[scrollView setContentSize:CGSizeMake(cx, [scrollView bounds].size.height)];
}
I suggest you to look at nimbus
Check out bjhomer's HSImageSidebarView project. It lets you load a scrollview horizontally or vertically and load in the images. Super easy to implement.
First of all, at storyboard drag and drop the scroll view and make the outlet of scrollview named scrollView. Two array one is mutable and one is immutable.
#property(nonatomic,strong)IBOutlet UIScrollView *scrollView;
#property(nonatomic,strong)NSMutableArray *images;
#property(nonatomic,strong)NSArray *imagesName;
The immutable array only store the images which we want to show on the scroll view.Make sure UIscrollview delegate is defined.
In viewcontoller.m file in didload function do following code:
imagesName = [[NSArray alloc]initWithObjects:#"centipede.jpg",#"ladybug.jpg",#"potatoBug.jpg",#"wolfSpider.jpg", #"ladybug.jpg",#"potatoBug.jpg",#"centipede.jpg",#"wolfSpider.jpg",nil];
// mutable array used to show the images on scrollview dynamic becaus after one
// image when scroll other will come
images = [[NSMutableArray alloc]init];
scrollView.delegate = self;
scrollView.scrollEnabled = YES;
int scrollWidth = 120;
scrollView.contentSize = CGSizeMake(scrollWidth,80);
int xOffset = 0;
//the loop go till all images will load
for(int index=0; index < [imagesName count]; index++)
{
UIImageView *img = [[UIImageView alloc] init];
// make the imageview object because in scrollview we need image
img.frame = CGRectMake(5+xOffset, 0, 160, 110);
// the offset represent the values, used so that topleft for each image will
// change with(5+xOffset, 0)and the bottomright(160, 110)
NSLog(#"image: %#",[imagesName objectAtIndex:index]);
img.image = [UIImage imageNamed:[imagesName objectAtIndex:index]];
// The image will put on the img object
[images insertObject:img atIndex:index];
// Put the img object at the images array which is mutable array
scrollView.contentSize = CGSizeMake(scrollWidth+xOffset,110);
//scroll view size show after 125 width the scroll view enabled
[scrollView addSubview:[images objectAtIndex:index]];
// set images on scroll view
xOffset += 170;
}
You can calculate content size width of the scrollview as width = number of images * size of each image. Then set contentSize of the scrollview to this width and the height that you want (scrollView.contentSize = CGSizeMake(width, height))
I'm ATTEMPTING to learn UIScrollview using Apple's Docs and their sample code http://developer.apple.com/iphone/library/samplecode/Scrolling/index.html but something SO simple is escaping me.
How do you tell what image is currently on the screen, so that if I selected one of the images in the horizontal scrolling view, how would I get the filename of the image, or even a pointer in the array, to then do something further with the image?
I thought with Page Control enable I might be able to find a page # and map it to the image. I thought about counting deceleration to count pages, but a flick no full enough will increment it and give a false number.
The last thing I could think of is to get contentOffSet and divide by image size which will give a 1, 2, 3 and I could point to the array (too tired to try tonight... thought I might ask before I waste a lot more time ;-) ).
Any other ideas? I thought there would be a method somewhere that they use in the photo album app.
PS: Here's the code:
- (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)];
}
- (void)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:#"Card %d.png", 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
This was easy after a good sleep!
CGPoint p = scrollView1.contentOffset;
NSLog(#"x = %f, y = %f", p.x, p.y);
Now just divide by 320 (if horizontal and full screen image) and add 1 (because it starts at 0).
Hope this helps someone else!
Paul