UIScrollView with page control - iphone

Have three different page view controllers using as views in uiscrollview. UIScrollView with pagecontrol is displaying only third page as current page but not displaying two other pages. Pagecontrol is also not visible.
- (void)viewDidLoad
{
[super viewDidLoad];
PageOne *pageOne = [[PageOne alloc] init];
pageOne.view.frame = CGRectMake(0, 0, 320, 420);
PageTwo *pageTwo = [[PageTwo alloc]init];
pageTwo.view.frame = CGRectMake(0, 0, 320, 420);
PageThree *pageThree = [[PageThree alloc] init];
pageThree.view.frame = CGRectMake(0, 0, 320, 420);
scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height)];
[scrollView setContentSize:CGSizeMake(self.view.frame.size.width * 3, self.view.frame.size.height)];
[scrollView setDelegate:self];
[scrollView setPagingEnabled:YES];
[scrollView setShowsHorizontalScrollIndicator:YES];
[scrollView addSubview:pageOne.view];
[scrollView addSubview:pageTwo.view];
[scrollView addSubview:pageThree.view];
[self.view addSubview:scrollView];
_pageControl = [[UIPageControl alloc] init];
[_pageControl setCurrentPage:0];
[_pageControl setNumberOfPages:3];
[_pageControl sizeToFit];
[_pageControl setFrame:CGRectMake((scrollView.frame.size.width / 2) - (_pageControl.frame.size.width / 2), scrollView.frame.size.height - _pageControl.frame.size.height, _pageControl.frame.size.width, _pageControl.frame.size.height)];
[self.view addSubview:self.pageControl];
[super viewDidLoad];
}
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
_pageControl.currentPage = lround(scrollView.contentOffset.x / scrollView.frame.size.width);
}
Right now it is displaying only pageThree. Why not displaying pageOne and pageTwo.
Why not displaying PageOne, pageTwo and then pageThree in series.
Thanks for help.

You are dividing your contentOffset by the full width of the scroll view instead of the width of each page (which I would have thought would result in page1 always showing not page3). The result is that the offset for page2 is 320, the width of the scrollView is 960, and 320/960 is 0.333
Also, because you have paging enabled you should implement
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
And set the currentPage of the pageControl there, that way you will only be calling it exactly at the edges of each page and not every point in between(no need for rounding).
try commenting out your scrollViewDidScroll method and instead use
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
[pageControl setCurrentPage:scrollView.contentOffset.x/320];
}
this has always worked for me in the past.

My first answer addressed the wrong thing...You can only see page 3 because all three pages are added on top of each other. Try:
page1 CGRectMake(0,0,320,420)
page2 CGRectMake(320,0,320,420)
page3 CGRectMake(640,0,320,420)
then they will be in the scroll view next to each other instead of on top of each other.

Related

How to show multiple images inside UIScrollView in iOS

I am making one iPhone app in which i need to show some images inside UIScrollView, on left and right there will be two buttons user can click on button and it will show the next or previous image. Also at the bottom there is one button, when user will click on that button it will show the image which we have selected in scrollview.I would like to know how do we show multiple images inside that scrollview and while selecting bottom button, how to find which image was there inside scrollview.
An example from danielbeard.wordpress.com
In case your image names aren't just numbers:
UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height)];
[scrollView setPagingEnabled:YES];
[scrollView setAlwaysBounceVertical:NO];
NSArray *imagesArray = [NSArray arrayWithObjects:#"img1.png", #"img2.png", #"img3.png", nil];
for (int i = 0; i < [imagesArray count]; i++)
{
CGFloat xOrigin = i * scrollView.frame.size.width;
UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(xOrigin, 0, scrollView.frame.size.width, scrollView.frame.size.height)];
[imageView setImage:[UIImage imageNamed:[imagesArray objectAtIndex:i]]];
[imageView setContentMode:UIViewContentModeScaleAspectFit];
[scrollView addSubview:imageView];
}
[scrollView setContentSize:CGSizeMake(scrollView.frame.size.width * [imagesArray count], scrollView.frame.size.height)];
have look on to this example:
http://danielbeard.wordpress.com/2012/09/17/adding-a-uiscrollview-to-a-uiview-ios/
Apple.developer 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.
CATiledLayer is used to increase the performance of paging, panning, and zooming with high-resolution images or large sets of photos.
you just simply first
create a new view on runtime and image and assign tag all views like 1000 or 100 and increment on tag value and then add this view to scrollview and two buttons for left and right moving and make their outlet actions and add all the scrollview sub views in to an mutable array like this
indexStart=100;
UIView *AddView=[[UIView alloc]initWithFrame:CGRectMake(55, 0, 100, 100)];
AddView.tag=indexStart;
btnTap.tag=indexStart;
UIImageView *imgview=[[UIImageView alloc]initWithFrame:CGRectMake(0, 0, 100, 100)];
[AddView addSubview:imgview];
imgview.image=image;
imgview.tag=1000;
[ScrollView addSubview:AddView];
[imgArray addObject:AddView];
you use loop to do this and on left and right button you use this code and in this code editImgeView is the image view inbetween left and right button where you show the image you just simple indexstart ++ or -- if user choose right or left button
for (int index = 0; index < [imgAddArrayAfter count]; index ++ ) {
NSLog(#"index %d",index);
UIView *vc=[imgArray objectAtIndex:index];
NSLog(#"view tag %d",vc.tag);
if(vc.tag == indexStart)
{
UIImageView *modalView=(UIImageView *) [vc viewWithTag:1000];
editImgeView.image=modalView.image;
}
}
i hope you understand ;-)
- (void)viewDidLoad
{
[super viewDidLoad];
UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height)];
scrollView.contentSize = CGSizeMake(320, 465);
[scrollView setScrollEnabled:YES];
[scrollView setPagingEnabled:YES];
[scrollView setAlwaysBounceVertical:NO];
[self.view addSubview:scrollView];
NSMutableArray *arrImage = [NSMutableArray arrayWithObjects:#"food1.jpeg", #"food2.jpeg", #"food3.jpeg",#"food4.jpeg", #"food5.jpeg", #"food6.jpeg",#"food7.jpeg", #"food8.jpeg", #"foo9.jpeg",#"food10.jpeg", #"food11.jpeg", #"food12.jpeg",#"food13.jpeg", #"food14.jpeg", #"food15.jpeg", #"food16.jpeg", nil];
for (int i = 0; i < [arrImage count]; i++)
{
CGFloat xOrigin = i * scrollView.frame.size.width;
UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(xOrigin, 0, scrollView.frame.size.width, scrollView.frame.size.height)];
[imageView setImage:[UIImage imageNamed:[arrImage objectAtIndex:i]]];
[imageView setContentMode:UIViewContentModeScaleAspectFit];
[scrollView addSubview:imageView];
}
[scrollView setContentSize:CGSizeMake(scrollView.frame.size.width * [arrImage count], scrollView.frame.size.height)];
}
I know this thread is old, but I think the problem with loading lot's of images in the scroll view still exists. If you ever want to load images in the scroll view you will face a problem of memory usage. The images most likely will consume most of your device's memory. The only way of doing is to create reusable scroll view that works similar to the uitableview - the scroll view that has pool of views (with images) ready to display. This can be quite complex to create.
I have created open source project to support reusable loading images in the scroll view. It is very easy to implement. You need to call couple of delegate and data source methods and that's it. There is also sample project for obj-c and swift in order to make easy to understand. Please feel free to contribute. I hope it will be useful.
here is a source: https://github.com/sumofighter666/ReusableScrollView

iOS - UIScrollView is not working (it doesn't scroll at all - the image stays fixed)

I would like to display an image (width: 320 pixels, height: 1250 pixels) in an image view.
When I compile the application I get no scrolling at all. The view stays fixed.
What I did:
Added an UIScrollView via Interface Builder to my view.
Added an UIImageView via Interface Builder to my view.
Verified that UIImageView is below UIScrollView in Interface Builder.
Set the size of the UIScrollView with ViewDidLoad.
How do I do this?
Code:
- (void)viewDidLoad
{
[super viewDidLoad];
scrollView.contentSize = CGSizeMake(320, 1250);
}
Screenshots:
ImageView:
ScrollView:
I just have done the same task..
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;
}
Also set this one....
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];
So for me the problem was that setting the content size didn't work in viewDidLoad(). I tried everything and I didn't understand why it wouldn't want to work, and then I tried the same stuff in viewDidAppear() and it magically worked...
From you last screenshot and from your comments it looks like your scrollView is way to big.
The scrollview must be visible on screen completely. For example a full screen UIScrollView on iPhone would have a size of 320 x 460.
If the scrollview is the same size as its content you can't scroll.
The greenish rectangle shows the size of your scrollview, the pinkish the size of your content (your image):
Xcode 11+, Swift 5
You can find the complete solution here.
I came across this same issue on iOS6 and the solution was to programmatically adjust the ContentSize.
So I will just quote from Raja (above) to show this:
CGSize scrollViewContentSize = CGSizeMake(320, 400);
[self.scrollView setContentSize:scrollViewContentSize];
NOTE: I was not having this issue on iOS5.. seems like iOS6 decided to do alot of prank just like the rotation/orientation saga
Since Xcode 5 it does not work like before. Also scrolling to the end of a scrollable text field makes problems. There are also differences between doing it on iPhone or iPad. On iPhone it worked without delayed timer.
This worked for me:
- (void)viewDidLoad
{
[super viewDidLoad];
NSTimer *timerforScrollView;
timerforScrollView =[NSTimer scheduledTimerWithTimeInterval:0.1
target:self selector:#selector(forScrollView)userInfo:nil repeats:NO];
}
- (void) forScrollView {
[scrollviewPad setScrollEnabled:YES];
[scrollviewPad setContentSize:CGSizeMake(768, 1015)]; // must be greater then the size in Storyboard
}
I found I had a similar problem but none of the above code worked. The issue was due to autolayout. I found that if I turned off autolayout by going to the storyboard clicking on Utilities -> File Inspector and unchecked Use Autolayout the scrolling did work (I also set scroll.contentSize = ...).
Sometimes autoLayout checkbox is ticked in the xib. That also creates this issue in xcode 5. Which makes the UIScrollView scrolling off.
Don't forget to add the category protocol to the interface, like this
#interface MyViewController : <UIScrollViewDelegate>
If you don't, you will not be able to set the scroll view delegate to self
(i.e. [MyScrollView setDelegate:self];)
If you do this, it should work.
My code is:
-(void)viewDidAppear:(BOOL)animated {
[super viewDidAppear:animated];
[contentScrollView setDelegate:self];
[contentScrollView setScrollEnabled:YES];
contentScrollView.contentSize = CGSizeMake(310, 500);
contentScrollView.frame = CGRectMake(5, 188, 310, 193);
}
Did you assign the scroll's view delegate? Always remember these:
[self.scrollView setDelegate:self];
[self.scrollView setScrollEnabled:YES];
The image view has to be a subview (so inside AND below) of the scrollview. From your description it seems they are paralell
You forgot one line. Add this to your view load function:
[scrollView setScrollEnabled:YES];
You could try disabling AutoLayout. In XCode 5 I tested all the above answers and I could only scroll it by disabling autolayout and activating all autosizing masks under the Size Inspector. The following code was used too:
self.scrollView.contentSize = CGSizeMake(320, 900);
self.scrollView.delegate = self;
self.scrollView.scrollEnabled = YES;
self.scrollView.frame = self.view.frame;
CGRect scrollViewFrame = CGRectMake(0, 0, 320, 400);
self.scrollView = [[UIScrollView alloc] initWithFrame:scrollViewFrame];
[self.view addSubview:self.scrollView];
CGSize scrollViewContentSize = CGSizeMake(320, 400);
[self.scrollView setContentSize:scrollViewContentSize];
scrollView.delegate = self;
[self.scrollView setBackgroundColor:[UIColor blackColor]];
[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;
}
[scrollView setContentSize:CGSizeMake(cx, [scrollView bounds].size.height)];
Assuming that scrollView is a subview of view and fills it entirely you can use the following in viewDidLoad:
[scrollView setContentSize: CGSizeMake(self.view.frame.size.width, self.view.frame.size.height)];
I had a UIScrollView that was not scrolling and this allowed it to scroll.
Just add code
scrollView.contentSize = CGSizeMake(WIDTH,HEIGHT);
to method -(void)viewDidLayoutSubviews.
For more information checkout Stanford CS193p Lecture No 8 to understand View Controller Life cycle.
I had the same issue and was looking for the answer in this thread. I tried all the stuff, but nothing works. Then I found this:
.
You just need to deselect "Use Auto Layout" in File Inspector of your ViewController. Ta-Da, it works immediately for me. Enjoy.

Detecting which UIView is being displayed within a pagingEnabled UIScrollView

I'm using the code from this tutorial to create a UIScrollView which allows scrolling through pages. Put in another way, the user can drag the screen to switch from one UIView to another. The code basically looks like this:
- (void)loadView {
[super loadView];
self.view.backgroundColor = [UIColor redColor];
UIScrollView *scroll = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height)];
scroll.pagingEnabled = YES;
NSInteger numberOfViews = 3;
for (int i = 0; i < numberOfViews; i++) {
CGFloat yOrigin = i * self.view.frame.size.width;
UIView *awesomeView = [[UIView alloc] initWithFrame:CGRectMake(yOrigin, 0, self.view.frame.size.width, self.view.frame.size.height)];
awesomeView.backgroundColor = [UIColor colorWithRed:0.5/i green:0.5 blue:0.5 alpha:1];
[scroll addSubview:awesomeView];
[awesomeView release];
}
scroll.contentSize = CGSizeMake(self.view.frame.size.width * numberOfViews, self.view.frame.size.height);
[self.view addSubview:scroll];
[scroll release];
}
My question is how can I detect which page the user is on? Like logging "1" for page 1, "2" for page 2, etc.
Thanks!
You can get the current page number by using the scroll view's content offset and its width.
int currentPage = (scrollView.contentOffset.x / scrollView.frame.width) + 1;
NSLog(#"current page: %d", currentPage);
You should take y offset into account if the scrolling is done vertically.
if you want to know on which page the user is while he scrolls you should add your object as Delegate object (UIScrollViewDelegate) you can then use the
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
call and calculate the page like in emptystacks answer.
btw. the calculation is float, if you need to know when exactly the page is fully scrolled you should use float.
Actually, it's even better to use int currentPage = (scrollView.contentOffset.x / scrollView.frame.width) + 1.5;
That extra .5 means the page change happens when the pages are halfway across the view rather than being rounded left.

UIScrollView Scrolling problem

i want Newsweek i pad app like scrolling on detail news.I have done like that but it's scrolling only.for e.g if you have 10 articles. on first page you click on article 3 then it show 3rd articles detail news and scrolls left upto 10 but not scrolls right side 3 ,2
same Question again.... never mind
(1) Create View Controller and add scroll view from IB and link it with outlet variable
-(void)createScrollView
{
myScroll = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, 320, 440)];
myScroll.pagingEnabled = YES;
myScroll.showsHorizontalScrollIndicator = YES;
myScroll.showsVerticalScrollIndicator = YES;
myScroll.scrollsToTop = NO;
myScroll.delegate = self;
int n = [array count];
myScroll.contentSize = CGSizeMake((320 * n), 440);
for (int i = 0 , X = 0; i < [photoArray count]; i++ , X += 320)
{
UIImageView *img =[[UIImageView alloc]initWithFrame:CGRectMake(X,0, 320, 480)]; //here web view for you
CGRect frame;
frame.size.width=320; frame.size.height=240;
frame.origin.x=0; frame.origin.y=88;
[img addSubview:asyncImage];
img.contentMode=UIViewContentModeScaleAspectFit;
[myScroll addSubview:img];
}
}
- (void) viewDidLoad
{
[self createScrollView];
[myScroll scrollRectToVisible:CGRectMake(320*photoNumber, 0, 320 , 240) animated:NO];
[self.view addSubview:myScroll];
}
its a sample code .... try it with changes... hope that finally work for you...
pass the value to the photoNumber.. E.g for 3rd article 3..

UIScrollView and image thumbnails

I want to have a scroll view, where you display 5 thumbnails on the scroll view each time.
Basically it's a table with one row and in each row we have 5 thumbnails in it.
You slide your finger to the right then you display the next set of 5 thumbnails.
What do I need to do this?? Is it true that we need a scroll view to do this? How can I start?
In your UIView that will contain your UIScrollView, place (something like) this code in -viewDidLoad:
UIScreen *screen = [UIScreen mainScreen];
pageWidth = screen.bounds.size.height;
pageHeight = screen.bounds.size.width;
scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0.0f, 0.0f, pageWidth, pageHeight)];
[scrollView setAutoresizingMask:UIViewAutoresizingNone];
[scrollView setContentSize:CGSizeMake(numPages * pageWidth, pageHeight)];
[scrollView setContentOffset:CGPointMake(pageWidth, 0)];
[scrollView setPagingEnabled:YES];
[scrollView setDelaysContentTouches:YES];
[scrollView setDelegate:self];
[scrollView setClearsContextBeforeDrawing:NO];
[scrollView setOpaque:YES];
[self.view insertSubview:scrollView atIndex:0];
[scrollView release];
// iterate through your thumbnails - which are UIViews
thumbnailViews = [NSMutableArray array];
[thumbnailViews retain];
NSUInteger pageCounter = 0;
for (...)
{
ThumbnailView *thumbnailView = [[ThumbnailView alloc] initWithFrame:CGRectMake( pageCounter*pageWidth, 0, pageWidth, pageHeight )];
[thumbnailView setMultipleTouchEnabled:YES];
[thumbnailView setViewController:self]; // this may be necessary to push/pop on navigation controller stack.
[thumbnailView restoreState];
[scrollView thumbnailView];
[thumbnailViews thumbnailView];
++pageCounter;
}
In my case, pageWidth, pageHeight, thumbnailViews and scrollView are all ivars for my UIView subclass.
I just looked in here as I'm learning about UIScrollViews myself. I started to try and get westsider's code to work, but I noticed that it is practically gobblygook. It should be in a UIViewController that implements the <UIScrollViewDelegate> protocol, and things like [scrollView thumbnailView]; is meaningless as here thumbnailView is a method name. I believe http://www.codeproject.com/Articles/46556/How-To-Use-UIScrollView-in-Your-iPhone-App.aspx is more coherent.
To answer the question, I think you want to create a UIScrollView in a standard manner--such as in the link, and you want to create a subclass of UIView called, say, UIView5 that has 5 UIImageViews. Then, instead of adding a normal UIView to the UIScrollView, like [scrollView addSubview:standardUIView];, you add UIView5 objects.