I have a view controller with outlets of scrollview (initial size: 390, 170) and page control. I need it to display an image per page from my array. But i have unexpected result (see image below).
Images are not full-width and after 2nd page scrollView ends.
Here is code
- (void)viewDidLoad {
[super viewDidLoad];
//Put the names of our image files in our array.
imageArray = [[NSArray alloc] initWithObjects:#"header1.jpg", #"header2.jpg", #"header3.jpg", nil];
[self.articlesPageControll setNumberOfPages:imageArray.count];
for (int i = 0; i < [imageArray count]; i++) {
//We'll create an imageView object in every 'page' of our scrollView.
CGRect frame;
frame.origin.x = 390 * i;
frame.origin.y = 0;
frame.size = self.articlesScrollView.frame.size;
UIImageView *imageView = [[UIImageView alloc] initWithFrame:frame];
[imageView setContentMode:UIViewContentModeScaleToFill];
imageView.image = [UIImage imageNamed:[imageArray objectAtIndex:i]];
[self.articlesScrollView addSubview:imageView];
}
//Set the content size of our scrollview according to the total width of our imageView objects.
self.articlesScrollView.contentSize = CGSizeMake(self.articlesScrollView.frame.size.width * [imageArray count], 170);
}
- (void)scrollViewDidScroll:(UIScrollView *)sender
{
// Update the page when more than 50% of the previous/next page is visible
CGFloat pageWidth = self.articlesScrollView.frame.size.width;
int page = floor((self.articlesScrollView.contentOffset.x - pageWidth / 2) / pageWidth) + 1;
self.articlesPageControll.currentPage = page;
}
UPD: 3rd page with image actually exists, but it's impossible to scroll to this page
Thanks in advance!
Solution self.articlesScrollView.contentSize = CGSizeMake(390 * [imageArray count], 170);
Related
I have created a simple image scrolling with UIPageControl and UIScrollView, I have three pages ! so what I need is when user scrolls page 0 to left , actually scroll should move to the page 3 and vice versa . I have checked Apple sample code but it was so complicated !, here is my codes :
- (void)setupScrollView {
_pageControl.currentPage = 0;
_pageControl.numberOfPages = 3;
[_scrollView setContentSize:CGSizeMake(_scrollView.frame.size.width * _pageControl.numberOfPages, _scrollView.frame.size.height)];
_scrollView.delegate = self;
[self createPageWithImage:_image1 forPage:0];
[self createPageWithImage:_image2 forPage:1];
[self createPageWithImage:_image3 forPage:2];
}
- (void)createPageWithImage:(UIImageView *)frameImage forPage:(int)page
{
UIView *newView = [[UIView alloc] initWithFrame: CGRectMake(_scrollView.frame.size.width * page, 0, _scrollView.frame.size.width, _scrollView.frame.size.height)];
[newView addSubview: frameImage];
[_scrollView addSubview: newView];
}
- (void)scrollViewDidScroll: (UIScrollView *) sView
{
CGFloat offset = _scrollView.contentOffset.x;
CGFloat pageSize = _scrollView.frame.size.width;
int page = floor((offset + (pageSize/2)) / pageSize);
_pageControl.currentPage = page;
}
- (IBAction)changeThePage
{
CGRect pageRect = CGRectMake(_pageControl.currentPage * _scrollView.frame.size.width, 0, _scrollView.frame.size.width, _scrollView.frame.size.height);
[_scrollView scrollRectToVisible: pageRect animated: YES];
}
Adding the methods which I have changed. I have commented wherever necessary.
- (void)setupScrollView {
_pageControl.currentPage = 0;
_pageControl.numberOfPages = 3 ;
//Add 2 more pages.
[_scrollView setContentSize:CGSizeMake(_scrollView.frame.size.width * (_pageControl.numberOfPages + 2), _scrollView.frame.size.height)];
_scrollView.delegate = self;
// Seriously recommend this for this type of apps.
_scrollView.pagingEnabled = YES;
// Do not instantiate imageviews. Send only image names as string.
// Add last image at beginning of scroll view.
[self createPageWithImageName:#"imageName3" forPage:0];
// Increase page number of existing images.
[self createPageWithImageName:#"imageName1" forPage:1];
[self createPageWithImageName:#"imageName2" forPage:2];
[self createPageWithImageName:#"imageName3" forPage:3];
//Add first image at end of scroll view
[self createPageWithImageName:#"imageName1" forPage:4];
// Show first image but present in second page.
[_scrollView setContentOffset:CGPointMake(_scrollView.frame.size.width, 0) animated:NO];
}
// Instead of sending image views, send image name. Create image view inside this method.
// This is because, since we are adding two more images, separate image view needs
// to be created. Otherwise, same image view will be used and one added at the end
// will be used as the frame of the image.
- (void)createPageWithImageName:(NSString *)imageName forPage:(int)page
{
UIView *newView = [[UIView alloc] initWithFrame: CGRectMake(_scrollView.frame.size.width * page, 0, _scrollView.frame.size.width, _scrollView.frame.size.height)];
UIImageView *imageView = [[UIImageView alloc] initWithFrame:newView.bounds];
imageView.image = [UIImage imageNamed:imageName];
[newView addSubview: imageView];
[_scrollView addSubview: newView];
}
- (void)scrollViewDidScroll: (UIScrollView *) sView
{
CGFloat offset = _scrollView.contentOffset.x;
CGFloat pageSize = _scrollView.frame.size.width;
int page = floor((offset + (pageSize/2)) / pageSize);
if (page == 0) {
page = _pageControl.numberOfPages - 1;
}
else if (page == _pageControl.numberOfPages + 1) {
page = 0;
}
else {
page = page - 1;
}
_pageControl.currentPage = page;
// If present in scroll view's first page, move it to second last page
if (offset < pageSize) {
[_scrollView setContentOffset:CGPointMake(pageSize * 3 + offset, 0) animated:NO];
}
// If present in scroll view's last page, move it to second page.
else if (offset >= pageSize * (_pageControl.numberOfPages + 1)) {
CGFloat difference = offset - pageSize * _pageControl.numberOfPages;
[_scrollView setContentOffset:CGPointMake(difference, 0) animated:NO];
}
}
The method of changeThePage is not needed for this code.
Hope this answer helps you.
My app continues to increase in 'live bytes' by about 600kb every time I scroll to a new image. I am loading my images lazily, meaning only 3 at a time, into a UIScrollView that pages horizontally. I have run Xcode instruments and I believe I have tracked the problem to this line:
newPageView = [[UIImageView alloc] initWithImage:[self.album objectAtIndex:page]];
Every page that gets loaded creates a new UIImageView instance, and for some reason, the space is held in memory. I am using ARC and XCode5. Since there is no way to 'dealloc' objects in ARC, what is the best way to free up this memory?
Here's a snapshot of my instruments showing the images that keep taking up the memory:
I have seen this question proposed in other areas online but could not find an answer that helped. I'm fairly new to coding but very willing to learn, any references would be greatly appreciated! thanks!
- (void)viewWillAppear:(BOOL)animated {
[super viewWillAppear:animated];
self.pageCount = self.album.count;
// Set up the array to hold the views for each page
self.pageViews = [[NSMutableArray alloc] init];
for (NSInteger i = 0; i < self.pageCount; ++i) {
[self.pageViews addObject:[NSNull null]];
}
NSInteger p = self.page;
CGFloat w = self.scrollView.bounds.size.width;
[self.scrollView setContentOffset:CGPointMake(p*w,0) animated:YES];
// Set up the content size of the scroll view
CGSize pagesScrollViewSize = self.scrollView.frame.size;
self.scrollView.contentSize = CGSizeMake(pagesScrollViewSize.width * self.pageCount, pagesScrollViewSize.height);
// Load the initial set of pages that are on screen
[self loadVisiblePages];
}
- (void)loadVisiblePages {
// First, determine which page is currently visible
CGFloat pageWidth = self.scrollView.frame.size.width;
NSInteger page = (NSInteger)floor((self.scrollView.contentOffset.x * 2.0f + pageWidth) / (pageWidth * 2.0f));
// Keeps track of which image is showing, for passing to child view controller
self.currentImage = [self.album objectAtIndex:page];
self.title =[NSString stringWithFormat:#"%d of %d", [self.album indexOfObject:self.currentImage]+1, self.pageCount];
// Work out which pages we want to load
NSInteger firstPage = page - 1;
NSInteger lastPage = page + 1;
// Purge anything before the first page
for (NSInteger i=0; i<firstPage; i++) {
[self purgePage:i];
}
for (NSInteger i=firstPage; i<=lastPage; i++) {
[self loadPage:i];
}
for (NSInteger i=lastPage+1; i<self.pageCount; i++) {
[self purgePage:i];
}
}
- (void)loadPage:(NSInteger)page {
if (page < 0 || page >= self.pageCount) {
// 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];
// create an instance of imageView to be used as the newPageView
UIImageView *newPageView;
if ((NSNull*)pageView == [NSNull null]) {
CGRect frame = self.scrollView.bounds;
frame.origin.x = frame.size.width * page;
frame.origin.y = 0.0f;
newPageView = [[UIImageView alloc] initWithImage:[self.album objectAtIndex:page]];
newPageView.contentMode = UIViewContentModeScaleAspectFit;
newPageView.frame = frame;
[self.scrollView addSubview:newPageView];
[self.pageViews replaceObjectAtIndex:page withObject:newPageView];
}
}
- (void)purgePage:(NSInteger)page {
if (page < 0 || page >= self.pageCount) {
// If it's outside the range of what we have to display, then do nothing
return;
}
// Remove a page from the scroll view and reset the container array
UIView *pageView = [self.pageViews objectAtIndex:page];
if ((NSNull*)pageView != [NSNull null]) {
[pageView removeFromSuperview];
[self.pageViews replaceObjectAtIndex:page withObject:[NSNull null]];
[self.album replaceObjectAtIndex:page withObject:[NSNull null]];
}
}
#pragma mark - UIScrollViewDelegate
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
[self loadVisiblePages];
}
ARC tries to release memory automatically so you don't have to worry about doing so.
However, you can kind of 'mark' objects so they can be released by 'niling' them:
yourobject = nil;
this kind of tells the IOS device that the object is not being used and can be released. If you're loading images into a scrollview, that means as the user scrolls down, there is content still in memory that is not on-screen and therefore is not needed. You can get rid of these images and then load them again when the scrollview gets near a certain point.
You might find an answer in this question (which is very similar to yours) helpful: Memory pressure in app
It's difficult to give an answer without see your code, but i suppose when you speak about "Lazy loading", you mean you only add your image to the scrollview when you need. But are you removing the images from the scrollview when they are not displayed?
I don't know which kind of display you want, but take a look on UICollectionView. Collection view manage the memory itself and only display cells when needed and UICollectionViewLayout allows you to customize the collection view.
I've changed my code to resize the images as they are loaded as followed:
- (void)loadPage:(NSInteger)page {
if (page < 0 || page >= self.pageCount) {
// 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];
// create an instance of imageView to be used as the newPageView
UIImageView *newPageView;
if ((NSNull*)pageView == [NSNull null]) {
CGRect frame = self.scrollView.bounds;
frame.origin.x = frame.size.width * page;
frame.origin.y = 0.0f;
self.resizeImage = [self.album objectAtIndex:page];
UIImage *theImage = [self resizeImage:self.resizeImage toWidth:320.0f andHeight:480.0f];
newPageView = [[UIImageView alloc] initWithImage:theImage];
newPageView.contentMode = UIViewContentModeScaleAspectFit;
newPageView.frame = frame;
[self.scrollView addSubview:newPageView];
[self.pageViews replaceObjectAtIndex:page withObject:newPageView];
}
}
- (UIImage *)resizeImage:(UIImage *)image toWidth:(float)width andHeight:(float)height {
CGSize newSize = CGSizeMake(width, height);
CGRect newRectangle = CGRectMake(0, 0, width, height);
UIGraphicsBeginImageContext(newSize);
[self.resizeImage drawInRect:newRectangle];
UIImage *resizedImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return resizedImage;
}
This seems to be holding the memory at a stable place with no permanent increase in memory consumption. I am not sure if this is the best way to solve this problem so if anyone has any better ideas, please provide help.
Trying to get the selected image from an array of images in a collection view to be the initial subview in a scrollview. Right now the scrollView loads the first image from the array, no matter which image is tapped on in the collection view. Please give some advice or websites with information on how to achieve this. Thanks!
for (int i = 0; i < self.album.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 = [[UIImageView alloc] initWithFrame:frame];
subview.image = [self.album objectAtIndex:i];
[self.scrollView addSubview:subview];
}
self.scrollView.contentSize = CGSizeMake(self.scrollView.frame.size.width * self.album.count, self.scrollView.frame.size.height);
}
At the time of creating scrollview add below line
self.scrollView.contentOffset = CGPointMake(self.scrollView.frame.size.width * self.selectedImage, self.scrollView.frame.size.height);
where self.selectedImage is the index of the image in the array
PD: Sorry for my english.
Can anybody help me with the sample code for embedding a zoomable scroll view within a paging scroll view so that each page can be zoomed and panned individually?
Also the navigation structure is like tab bar controller --> navigation controller with buttons (on push of the buttons) --> view controller where in the horizontal scrollview of images has to be implemented with pagination and zooming.
Here is the link to the tutorial that I followed: How To Use UIScrollView to Scroll and Zoom Content
The code I've implemented is following:
#import "ViewCorpBrochureController.h"
#interface ViewCorpBrochureController ()
#property (nonatomic, strong) NSArray *pageImages;
#property (nonatomic, strong) NSMutableArray *pageViews;
#property (nonatomic, strong) UIImageView *imageView;
- (void)loadVisiblePages;
- (void)loadPage:(NSInteger)page;
- (void)purgePage:(NSInteger)page;
- (void)centerScrollViewContents;
- (void)scrollViewDoubleTapped:(UITapGestureRecognizer*)recognizer;
- (void)scrollViewTwoFingerTapped:(UITapGestureRecognizer*)recognizer;
#end
#implementation ViewCorpBrochureController
#synthesize scrollView = _scrollView;
#synthesize pageControl = _pageControl;
#synthesize pageImages = _pageImages;
#synthesize pageViews = _pageViews;
#synthesize imageView = _imageview;
- (void)centerScrollViewContents {
CGSize boundsSize = self.scrollView.bounds.size;
CGRect contentsFrame = self.imageView.frame;
if (contentsFrame.size.width < boundsSize.width) {
contentsFrame.origin.x = (boundsSize.width - contentsFrame.size.width) / 2.0f;
} else {
contentsFrame.origin.x = 0.0f;
}
if (contentsFrame.size.height < boundsSize.height) {
contentsFrame.origin.y = (boundsSize.height - contentsFrame.size.height) / 2.0f;
} else {
contentsFrame.origin.y = 0.0f;
}
self.imageView.frame = contentsFrame;
}
- (void)scrollViewDoubleTapped:(UITapGestureRecognizer*)recognizer {
// Get the location within the image view where we tapped
CGPoint pointInView = [recognizer locationInView:self.imageView];
// Get a zoom scale that's zoomed in slightly, capped at the maximum zoom scale specified by the scroll view
CGFloat newZoomScale = self.scrollView.zoomScale * 1.5f;
newZoomScale = MIN(newZoomScale, self.scrollView.maximumZoomScale);
// Figure out the rect we want to zoom to, then zoom to it
CGSize scrollViewSize = self.scrollView.bounds.size;
CGFloat w = scrollViewSize.width / newZoomScale;
CGFloat h = scrollViewSize.height / newZoomScale;
CGFloat x = pointInView.x - (w / 2.0f);
CGFloat y = pointInView.y - (h / 2.0f);
CGRect rectToZoomTo = CGRectMake(x, y, w, h);
[self.scrollView zoomToRect:rectToZoomTo animated:YES];
}
- (void)scrollViewTwoFingerTapped:(UITapGestureRecognizer*)recognizer {
// Zoom out slightly, capping at the minimum zoom scale specified by the scroll view
CGFloat newZoomScale = self.scrollView.zoomScale / 1.5f;
newZoomScale = MAX(newZoomScale, self.scrollView.minimumZoomScale);
[self.scrollView setZoomScale:newZoomScale animated:YES];
}
#pragma mark -
- (void)loadVisiblePages {
// First, determine which page is currently visible
CGFloat pageWidth = self.scrollView.frame.size.width;
NSInteger page = (NSInteger)floor((self.scrollView.contentOffset.x * 2.0f + pageWidth) / (pageWidth * 2.0f));
// Update the page control
self.pageControl.currentPage = page;
// Work out which pages we want to load
NSInteger firstPage = page - 1;
NSInteger lastPage = page + 1;
// Purge anything before the first page
for (NSInteger i=0; i<firstPage; i++) {
[self purgePage:i];
}
for (NSInteger i=firstPage; i<=lastPage; i++) {
[self loadPage:i];
}
for (NSInteger i=lastPage+1; i<self.pageImages.count; i++) {
[self purgePage:i];
}
}
- (void)loadPage:(NSInteger)page {
if (page < 0 || page >= self.pageImages.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.origin.x = frame.size.width * page;
frame.origin.y = 0.0f;
UIImageView *newPageView = [[UIImageView alloc] initWithImage:[self.pageImages objectAtIndex:page]];
newPageView.contentMode = UIViewContentModeScaleAspectFit;
newPageView.frame = frame;
[self.scrollView addSubview:newPageView];
[self.pageViews replaceObjectAtIndex:page withObject:newPageView];
}
}
- (void)purgePage:(NSInteger)page {
if (page < 0 || page >= self.pageImages.count) {
// If it's outside the range of what we have to display, then do nothing
return;
}
// Remove a page from the scroll view and reset the container array
UIView *pageView = [self.pageViews objectAtIndex:page];
if ((NSNull*)pageView != [NSNull null]) {
[pageView removeFromSuperview];
[self.pageViews replaceObjectAtIndex:page withObject:[NSNull null]];
}
}
#pragma mark -
- (void)viewDidLoad {
[super viewDidLoad];
self.title = #"CorporateBrochure";
self.pageImages = [NSArray arrayWithObjects:
[UIImage imageNamed:#"CB1.jpg"],
[UIImage imageNamed:#"CB2.jpg"],
[UIImage imageNamed:#"CB3.jpg"],
[UIImage imageNamed:#"CB4.jpg"],
[UIImage imageNamed:#"CB5.jpg"],
[UIImage imageNamed:#"CB6.jpg"],
nil];
NSInteger pageCount = self.pageImages.count;
// Set up the page control
self.pageControl.currentPage = 0;
self.pageControl.numberOfPages = pageCount;
// Set up the array to hold the views for each page
self.pageViews = [[NSMutableArray alloc] init];
for (NSInteger i = 0; i < pageCount; ++i) {
[self.pageViews addObject:[NSNull null]];
}
/* If I use this the subview appears below the image
UIImage *image = self.imageView.image;
//UIImage *image = [UIImage imageNamed:#"CB2.jpg"];
self.imageView = [[UIImageView alloc] initWithImage:image];
self.imageView.frame = (CGRect){.origin=CGPointMake(0.0f, 0.0f), .size=image.size};
[self.scrollView addSubview:self.imageView];
self.scrollView.contentSize = image.size;
*/
UITapGestureRecognizer *doubleTapRecognizer = [[UITapGestureRecognizer alloc] initWithTarget:self action:#selector(scrollViewDoubleTapped:)];
doubleTapRecognizer.numberOfTapsRequired = 2;
doubleTapRecognizer.numberOfTouchesRequired = 1;
[self.scrollView addGestureRecognizer:doubleTapRecognizer];
UITapGestureRecognizer *twoFingerTapRecognizer = [[UITapGestureRecognizer alloc] initWithTarget:self action:#selector(scrollViewTwoFingerTapped:)];
twoFingerTapRecognizer.numberOfTapsRequired = 1;
twoFingerTapRecognizer.numberOfTouchesRequired = 2;
[self.scrollView addGestureRecognizer:twoFingerTapRecognizer];
}
- (void)viewDidAppear:(BOOL)animated
{
[super viewDidAppear:animated];
CGSize pagesScrollViewSize = self.scrollView.frame.size;
self.scrollView.contentSize = CGSizeMake(pagesScrollViewSize.width * self.pageImages.count, pagesScrollViewSize.height);
[self loadVisiblePages];
}
- (void)viewDidUnload {
[super viewDidUnload];
self.scrollView = nil;
self.pageControl = nil;
self.pageImages = nil;
self.pageViews = nil;
}
- (UIView*)viewForZoomingInScrollView:(UIScrollView *)scrollView {
// Return the view that we want to zoom
return self.imageView;
}
- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation {
return (interfaceOrientation == UIInterfaceOrientationMaskAll);
}
#pragma mark - UIScrollViewDelegate
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
// Load the pages which are now on screen
[self loadVisiblePages];
}
- (void)scrollViewDidZoom:(UIScrollView *)scrollView {
// The scroll view has zoomed, so you need to re-center the contents
[self centerScrollViewContents];
}
#end
Is there a specific issue you are having with Ray Wenderlich's tutorial?
Apple's documentation has a very good example of how to implement a paging scroll view, see the Photo Scroller sample code here. I would suggest starting there.
From the above link:
"PhotoScroller" demonstrates the use of embedded UIScrollViews and
CATiledLayer to create a rich user experience for displaying and
paginating photos that can be individually panned and zoomed.
Note: If your images are not overly large, you can get away with not using CATiledLayer.
EDIT 1: See my answer to this question about how to modify Apple's Photo Scroller code to make the UIPageViewController a subview of your own view controller (and not the rootViewController).
EDIT 2: See this sample project on github.
I have a UIScrollView paging option enabled with the next code:
- (void)viewDidLoad
{
[super viewDidLoad];
for (int i = 0; i < 6; i++) {
CGRect frame;
frame.origin.x = self.scrollView.frame.size.width * i;
frame.origin.y = 0;
frame.size = self.scrollView.frame.size;
[scrollView scrollRectToVisible:frame animated:YES];
UIView *subview = [[UIView alloc] initWithFrame:frame];
itemName.text = #"Samara";
[self.scrollView addSubview:subview];
[subview release];
}
self.scrollView.contentSize = CGSizeMake(self.scrollView.frame.size.width * 6, 1.0);
}
I have a number of elements (buttons, labels), added in storyboard to this ScrollView element, but in UI they're appeared only on the first page - the next pages are blank. How can I solve this?
Just reading through your code example - here is how to make your scrollview page, what you add inside those scrollview is up to you:
//Set your scrollView frame
[self.scrollView setFrame:CGRectMake(0,0,320,460];
//Will use this value to set the content width after the loop
CGFloat scrollWidth = 0;
CGFloat pageWidth = self.scrollView.frame.size.width;
CGFloat pageHeight = self.scrollView.frame.size.height;
for (int i = 0; i < 6; ++i)
{
//Create the page and make the origin.x i * pageWidth
UIView *page = [[UIView alloc] initWithFrame:CGRectMake((i * pageWidth),0,pageWidth,pageHeight)];
scrollWidth += page.width;
//Add the page
[self.scrollView addSubview:page];
}
//set the content size to the right edge of the last page (scrollWidth)
[self.scrollView setContentSize:CGSizeMake(scrollWidth,pageHeight)];
//Scroll to the last page - assuming you wanted this by looking at the code in your loop
[self.scrollView scrollRectToVisible:CGRectMake((scrollWidth - pageWidth),0,pageWidth,pageHeight)];
//Enable paging and scrolling (scrollEnabled should be YES by default)
self.scrollView.pagingEnabled = YES;
self.scrollView.scrollEnabled = YES;
Best I can do based on your code - hope it helps