How to Resize an Image within a Scrollview? - ios

I have searched for a while now, and can't find anything that is specific to my problem.
Basically, I have an image of a large map, I want users to be able to zoom in and out, and scroll through the map. I literally have all aspects of the zooming and scrolling working, although when I start up the app, the image (within the scroll view) is massive! The image is a large file (1200x1024) but it has to be so users can zoom right in without any pixelation.
My question is, how can I make it so when I start the app, that image (map) fits to the size of the screen, and then from there, users can zoom in and scroll and etc? Because right now is looks like this when I start up: http://i.stack.imgur.com/kq1en.png
Thank you heaps!
Current Code: (Under the 'FireViewController.m' file)
#synthesize scrollView, imageView;
-(UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView{ returnimageView;
}
- (void)viewDidLoad
{
[super viewDidLoad];
UIImageView *tempImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"Mezzanine Level"]];
self.imageView = tempImageView;
scrollView.maximumZoomScale = 3.0;
scrollView.minimumZoomScale = 0.3;
scrollView.clipsToBounds = YES;
scrollView.delegate = self;
[scrollView addSubview:imageView];
[scrollView setContentSize:imageView.frame.size];
}
- (void)didReceiveMemoryWarning
{
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
#end

Related

UIimage not appearing over scrollview in iOS

Need to scroll the scrollview horizontally and with images under it.
It is scrolling horizontally but cannot see my images over it even after the changing the background. Please find the code below :-
#import "ViewController.h"
#interface ViewController () <UIScrollViewDelegate>
#property (nonatomic , weak) IBOutlet UIScrollView *scrollView;
#end
#implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
for(int i=0; i<5; i++) {
UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake((self.view.window.frame.size.width/5)*i, 0, self.view.window.frame.size.width/5, 48)];
imageView.image = [UIImage imageNamed:#"t3"];
imageView.backgroundColor = [UIColor blackColor];
[_scrollView addSubview:imageView];
}
_scrollView.contentSize = CGSizeMake(self.view.window.frame.size.width, 48.0f);
[self.view addSubview:_scrollView];
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
#end
Set a break point in your loop and check the frames of your imageviews and check that you image "t3" is actually being loaded.
Other things you could change,
You don't need to use self.view.window.frame, just use self.view.frame.
You add your scrollview to your view, but it's an IBOutlet, you don't need to do this if you already have it in the hierarchy on the storyboard or xib.
If you still have problems please comment, good luck.
The problem is about self.view.window.
From Apple's document, is says that
This property is nil if the view has not yet been added to a window.
You have not added self.view to a window yet, so if you use
NSLog(#"self.view.window: %#", self.view.window);
the log will be
self.view.window: (null)
That is to say, the value of self.view.window.frame.size.width is 0.
So the solution is easy:
Use self.view.frame.size.width instead of self.view.window.frame.size.width.
OR use the code below to add self.view to a window
[[[[UIApplication sharedApplication] windows] firstObject] addSubview:self.view];

UIScrollView, magic scrollable area

A simple example is used for demonstration only strange features of the UIScrollView.
Have an instance of UIScrollView that occupies the entire screen area. An instance of UIView is placed on UIScrollView instance and entirely overlapping it.
ScrollView is configured so that all swipes on him transferred in the overlapping View and the scroll didn't happen. So it should work, all swipes redirected to the view, since it completely overlaps the ScrollView.
But there is a region located in the lower left corner of the screen, when you swipe where sometimes (not always) starts scrolling.
What is this magical area? How to avoid this behavior?
Repeated only on the device (tried on iPhone6, iPhone6+, iPad Air), on the simulator was not able to repeat.
That's how we create and custom views:
- (void)viewDidLoad
{
[super viewDidLoad];
MyScrollView *sv = [[MyScrollView alloc] initWithFrame:self.view.bounds];
sv.canCancelContentTouches = NO;
sv.delaysContentTouches = NO;
sv.multipleTouchEnabled = NO;
sv.contentSize = CGSizeMake(sv.bounds.size.width, sv.bounds.size.height + 300);
sv.backgroundColor = [UIColor redColor];
[self.view addSubview:sv];
UIView *topView = [[UIView alloc] initWithFrame:sv.bounds];
topView.backgroundColor = [UIColor greenColor];
[sv addSubview:topView];
}
MyScrollView has a single overridden method:
- (BOOL)touchesShouldBegin:(NSSet *)touches withEvent:(UIEvent *)event inContentView:(UIView *)view
{
return YES;
}
Thanks, sorry for my English.

Zooming out from content of UIscrollview

I used to use these two lines to zoom out on the content of my scrollview. However since iOS8, I can't zoom out anymore. It does nothing.
Can someone explain to me why. I have autolayout turned off.
[scrollView setZoomScale:0.3 animated:YES];
scrollView.contentSize = CGSizeMake(tempSize.width*0.3, tempSize.height*0.3);
I am not sure if this will help you, but this method works for me when zooming in iOS 8. In this code, an imageView is in the scroll view.
- (void)viewDidLoad {
[super viewDidLoad];
self.scrollView.minimumZoomScale = 0.5;
self.scrollView.maximumZoomScale = 6.0;
self.scrollView.contentSize = self.PhotoView.frame.size;
self.scrollView.delegate = self;
}
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
{
return self.PhotoView;
}
- (void)scrollViewDidEndZooming:(UIScrollView *)scrollView withView:(UIView*)view atScale:(CGFloat)scale{
}

UIScrollView can zoom, but cant pan

I have a UIScrollView with a UIView inside it, in side the UIView I made a button to add textLabels to it.
and ideally I would want a really big canvas and be able to put text on it and pan and zoom around. however with the UIScrollView it does zoom, but does not pan at all
It seems that when I remove the UIView that i add inside the UIScrollView it works fine.
heres viewDidLoad:
[super viewDidLoad];
CGFloat mainViewWidth = 700;
CGFloat mainViewHeight = 500;
//scrollView.contentSize = CGSizeMake(scrollView.frame.size.width * kNumberOfPages, scrollView.frame.size.height * kNumberOfPages);
//self.mainScrollView.bounds = CGRectMake(0., 0., 3000, 3000);
self.mainScrollView.scrollsToTop = NO;
self.mainScrollView.delegate = self;
self.mainScrollView.maximumZoomScale = 50.;
self.mainScrollView.minimumZoomScale = .1;
self.mainScrollView.autoresizingMask = UIViewAutoresizingFlexibleHeight;
self.mainView = [[UIView alloc] initWithFrame: CGRectMake(0, 0, mainViewWidth, mainViewHeight)];
[self.mainView setUserInteractionEnabled:NO];
self.mainView.backgroundColor = [[UIColor alloc] initWithRed:0.82110049709463495
green:1
blue:0.95704295882687884
alpha:1];
[self.mainScrollView setContentSize:CGSizeMake(5000, 5000)];
[self.mainScrollView insertSubview:self.mainView atIndex:0];
Edit:
Heres the all I have for UIScrollViewDelegate
#pragma mark - Scroll View Delegate
- (void)scrollViewDidScroll:(UIScrollView *)sender {
}
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
{
//
return self.mainView;
}
- (void)scrollViewDidEndZooming:(UIScrollView *)zoomedScrollView withView:(UIView *)view atScale:(float)scale
{
}
I just went through this exact same dilemma.
My UIScrollView exists within the storyboard, and if I add a UIView (containerView) within that storyboard to the UIScrollView, the image fails to pan. And all sorts of other centering weirdness occurs too.
But if I do it through code:
// Set up the image we want to scroll & zoom
UIImage *image = [UIImage imageNamed:#"plan-150ppi.jpg"];
self.imageView = [[UIImageView alloc] initWithImage:image];
self.containerView = [[UIView alloc] initWithFrame:self.imageView.frame];
[self.containerView addSubview:self.imageView];
[self.scrollView addSubview:self.containerView];
// Tell the scroll view the size of the contents
self.scrollView.contentSize = self.containerView.frame.size;
... then it works just fine.

UIScrollView costum pagination size

first take a look on this picture from localScope app :
i have 2 (simple?) questions :
how can i paginate my icons like this?
how can i detect witch icon is " selected "
thank you.
Answer to the first question: You have to make your scroll view as big as the page size, enable its pagingEnabled property, then somehow make it to display elements and respond to touches outside of its bounds. See this code and these links:
#interface SmallPagedScrollView: UIScrollView <UIScrollViewDelegate> {
UIEdgeInsets responseInsets;
NSMutableArray *items;
}
#implementation SmallPagedScrollView
#synthesize responseInsets;
- (id)init
{
if ((self = [super initWithFrame:CGRectMake(x, y, w, h)]))
{
self.backgroundColor = [UIColor clearColor];
self.pagingEnabled = YES;
self.showsHorizontalScrollIndicator = NO;
self.showsVerticalScrollIndicator = NO;
self.clipsToBounds = NO;
CGFloat hInset = 3 * self.width / 2;
self.responseInsets = UIEdgeInsetsMake(0.0f, hInset, 0.0f, hInset);
self.delegate = self;
items = [[NSMutableArray alloc] init];
}
return self;
}
- (void)dealloc
{
[items release];
[super dealloc];
}
- (BOOL)pointInside:(CGPoint)point withEvent:(UIEvent *)event
{
CGPoint parentLocation = [self convertPoint:point toView:self.superview];
CGRect responseRect = self.frame;
responseRect.origin.x -= self.responseInsets.left;
responseRect.origin.y -= self.responseInsets.top;
responseRect.size.width += self.responseInsets.left + self.responseInsets.right;
responseRect.size.height += self.responseInsets.top + self.responseInsets.bottom;
return CGRectContainsPoint(responseRect, parentLocation);
}
See also Paging UIScrollView in increments smaller than frame size (Split's answer)
Answer to the second question: you can calculate the selected page using this formula:
int selectedIndex = (scrollView.contentOffset + scrollView.size.width / 2) / scrollView.size.width;
Well one clean & memory efficient approach is to have a UINavigationController & UIToolBar like so -
When the user taps on any button in the UIToolBar invoke that particular viewController by popping and pushing them.
I hope its clear that the look and feel can be achieved close to what you are showing in the image, I am talking about the functionality.

Resources