I have to pinch zoom multiple images. I have added each of the UIImageView to UIView and added the UIView to UIScrollView. and returning the UIView image viewForZoomingInScrollView: delegate method, but images are not zooming as expected. is there any better way?
#define VIEW_FOR_ZOOM_TAG (1)
#implementation [SVViewController][1]
- (void)viewDidLoad {
[super viewDidLoad];
UIScrollView *mainScrollView = [[UIScrollView alloc] initWithFrame:self.view.bounds];
mainScrollView.pagingEnabled = YES;
mainScrollView.showsHorizontalScrollIndicator = NO;
mainScrollView.showsVerticalScrollIndicator = NO;
CGRect innerScrollFrame = mainScrollView.bounds;
for (NSInteger i = 0; i < 3; i++) {
UIImageView *imageForZooming = [[UIImageView alloc] initWithImage:[UIImage imageNamed:
[NSString stringWithFormat:#"page%d", i + 1]]];
imageForZooming.tag = VIEW_FOR_ZOOM_TAG;
UIScrollView *pageScrollView = [[UIScrollView alloc] initWithFrame:innerScrollFrame];
pageScrollView.minimumZoomScale = 1.0f;
pageScrollView.maximumZoomScale = 2.0f;
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 < 2) {
innerScrollFrame.origin.x += innerScrollFrame.size.width;
}
}
mainScrollView.contentSize = CGSizeMake(innerScrollFrame.origin.x +
innerScrollFrame.size.width, mainScrollView.bounds.size.height);
[self.view addSubview:mainScrollView];
}
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView {
return [scrollView viewWithTag:VIEW_FOR_ZOOM_TAG];
}
- (NSUInteger)supportedInterfaceOrientations {
return UIInterfaceOrientationMaskPortrait;
}
- (BOOL)shouldAutorotate {
return NO;
}
#end
[1]: http://www.lyricspoints.com
Check the minimum and maximum zoom scale properties of the scroll view. (max should be greater than min for zoom to happen)
make sure that you are returning the corresponding UIImageView and not the UIView
Make sure that you have set the scroll view delegate as the object to which you want the delegate messages of the scroll view to be sent, like viewForZoomingInScrollView:
Related
I want to zoom in/out UIScrollView that contains a UIImageView. With my code below I am only able to scroll the scroll view contents but cannot zoom it.
My view hierarchy looks like this:
- (UIView *) containerView
-- (UIView *) contentView
--- (UIScrollView *) scrollView
---- (UIImageView *) self.imageView
Code:
UIView *previousContentView = nil;
for (NSInteger i = 0; i < 2; i++) {
contentView = [self addRandomColoredView];
[containerView addSubview:contentView];
[containerView.topAnchor constraintEqualToAnchor:contentView.topAnchor].active = true;
[containerView.bottomAnchor constraintEqualToAnchor:contentView.bottomAnchor].active = true;
scrollView = [self addRandomScrollView];
[contentView addSubview:scrollView];
self.imageView = [[UIImageView alloc] init];
[self.imageView setImage:[imagesArray objectAtIndex:i]];
[self.imageView setTranslatesAutoresizingMaskIntoConstraints:false];
[scrollView addSubview:self.imageView];
if (previousContentView) {
[VerticalSeparatorView addSeparatorBetweenView:previousContentView secondView:contentView];
NSLayoutConstraint *width = [contentView.widthAnchor constraintEqualToAnchor:previousContentView.widthAnchor];
width.priority = 250;
width.active = true;
} else {
[containerView.leadingAnchor constraintEqualToAnchor:contentView.leadingAnchor].active = true;
}
[contentView.topAnchor constraintEqualToAnchor:scrollView.topAnchor].active = true;
[contentView.bottomAnchor constraintEqualToAnchor:scrollView.bottomAnchor].active = true;
[contentView.leadingAnchor constraintEqualToAnchor:scrollView.leadingAnchor].active = true;
[contentView.trailingAnchor constraintEqualToAnchor:scrollView.trailingAnchor].active = true;
[scrollView.topAnchor constraintEqualToAnchor:self.imageView.topAnchor].active = true;
[scrollView.bottomAnchor constraintEqualToAnchor:self.imageView.bottomAnchor].active = true;
[scrollView.leadingAnchor constraintEqualToAnchor:self.imageView.leadingAnchor].active = true;
[scrollView.trailingAnchor constraintEqualToAnchor:self.imageView.trailingAnchor].active = true;
previousContentView = contentView;
}
[containerView.trailingAnchor constraintEqualToAnchor:previousContentView.trailingAnchor].active = true;
- (UIView *)addRandomColoredView
{
UIView *someView = [[UIView alloc] init];
someView.translatesAutoresizingMaskIntoConstraints = false;
[someView setBackgroundColor:[UIColor blackColor]];
return someView;
}
-(UIScrollView *)addRandomScrollView
{
UIScrollView *scrollView = [[UIScrollView alloc] init];
[scrollView setDelegate:self];
[scrollView setTranslatesAutoresizingMaskIntoConstraints:false];
[scrollView setBackgroundColor:[UIColor colorWithRed:arc4random_uniform(256)/255.0 green:arc4random_uniform(256)/255.0 blue:arc4random_uniform(256)/255.0 alpha:1.0]];
[scrollView setMaximumZoomScale:2.5f];
[scrollView setMinimumZoomScale:0.5f];
[scrollView setZoomScale:scrollView.minimumZoomScale];
return scrollView;
}
#pragma mark - UIScrollViewDelegate
-(UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
{
return self.imageView;
}
I believe the scrollView is getting its contentSize because it is showing the image and I can scroll. Why can't I zoom in or zoom out?
You have to specify a delegate for your scroll view, and then implement viewForZoomingInScrollView to tell it to zoom the image view:
- (UIView *)addScrollViewWithImageView {
UIScrollView *scrollView = [[UIScrollView alloc] init];
scrollView.translatesAutoresizingMaskIntoConstraints = false;
scrollView.maximumZoomScale = 200.0;
scrollView.minimumZoomScale = 0.1;
scrollView.delegate = self;
UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"test.png"]];
imageView.translatesAutoresizingMaskIntoConstraints = false;
[self.view addSubview:scrollView];
[scrollView addSubview:imageView];
[NSLayoutConstraint activateConstraints:#[
[imageView.topAnchor constraintEqualToAnchor:scrollView.topAnchor],
[imageView.leftAnchor constraintEqualToAnchor:scrollView.leftAnchor],
[imageView.rightAnchor constraintEqualToAnchor:scrollView.rightAnchor],
[imageView.bottomAnchor constraintEqualToAnchor:scrollView.bottomAnchor]
]];
return scrollView;
}
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView {
return scrollView.subviews.firstObject;
}
And then to populate these zoomable scroll views with image views, your viewDidLoad might look like:
- (void)viewDidLoad {
[super viewDidLoad];
UIView *previousContentView = nil;
for (NSInteger i = 0; i < 3; i++) {
UIView *contentView = [self addScrollViewWithImageView];
[self.view.leadingAnchor constraintEqualToAnchor:contentView.leadingAnchor].active = true;
[self.view.trailingAnchor constraintEqualToAnchor:contentView.trailingAnchor].active = true;
if (previousContentView) {
[HorizontalSeparatorView addSeparatorBetweenView:previousContentView secondView:contentView];
NSLayoutConstraint *height = [contentView.heightAnchor constraintEqualToAnchor:previousContentView.heightAnchor];
height.priority = 250;
height.active = true;
} else {
[self.view.topAnchor constraintEqualToAnchor:contentView.topAnchor].active = true;
}
previousContentView = contentView;
}
[self.view.bottomAnchor constraintEqualToAnchor:previousContentView.bottomAnchor].active = true;
}
Try MWPhotoBrowser. It has built in scroll and zoom functionality. You will get more than you need. Good Luck.
I'm simply trying to place an image into scroll view which is in a main view using purelayout.
And what i'm taking right now is;
Note that view with red background is scroll view. And also the image is not scrollable.
- (void)loadView {
self.view = [[UIView alloc] init];
[self.scrollView addSubview:self.photoView];
[self.view addSubview:self.scrollView];
[self.view setNeedsUpdateConstraints];
}
- (void)updateViewConstraints {
if (!_didSetupConstraints) {
...
...
...
[self.photoView autoPinEdgeToSuperviewEdge:ALEdgeTop];
[self.photoView autoPinEdgeToSuperviewEdge:ALEdgeBottom];
[self.photoView autoPinEdgeToSuperviewEdge:ALEdgeLeft];
[self.photoView autoPinEdgeToSuperviewEdge:ALEdgeRight];
self.didSetupConstraints = YES;
}
[super updateViewConstraints];
}
- (UIImageView *)photoView {
if (!_photoView) {
_photoView = [UIImageView newAutoLayoutView];
_photoView.backgroundColor = [UIColor whiteColor];
}
return _photoView;
}
- (UIScrollView *)scrollView {
if (!_scrollView) {
_scrollView = [UIScrollView newAutoLayoutView];
_scrollView.backgroundColor = [UIColor redColor];
_scrollView.maximumZoomScale = 2.0;
_scrollView.minimumZoomScale = 0.5;
}
return _scrollView;
}
Ok, it seems working well with two changes i did.
Firstly i set self.photoView size manually.
[self.photoView autoSetDimensionsToSize:CGSizeMake([HelperModel screenWidth], [HelperModel screenHeight] -[HelperModel viewHeight:self.navigationController.navigationBar] -20.0)];
HelperModel.m
#implementation HelperModel
+ (CGFloat)screenWidth {
return [[UIScreen mainScreen] bounds].size.width;
}
+ (CGFloat)screenHeight {
return [[UIScreen mainScreen] bounds].size.height;
}
+ (CGFloat)viewHeight:(UIView *)view {
return CGRectGetHeight(view.frame);
}
+ (CGFloat)photoDetailHeight {
return [HelperModel screenHeight] -20;
}
#end
Secondly,
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
for zooming feature and if the zoomed image exceeds the bounds of scroll view, then the image can be scrolled properly.
I am trying to do a simple scroll, but the views do not move after a touch, I am not sure why, the scrollview should handle the gesture, but something might be missing. Would someone know where?
Here is the code : I create a small horizontal scroll view, with some views inside. The views appear well, I am testing it on a device for the touch :
- (void)viewDidLoad {
[super viewDidLoad];
//horizontal scroll view
HorizScroll *ho = [[HorizScroll alloc] initWithFrame:CGRectMake(0, 0, 500, 100)];
for ( int i=0; i<3; i++){
MyView* mv = [[MyView alloc] init];
[ho addSubview:mv];
}
//ho.zoomScale = 0.3f;
[self.view addSubview:ho];
}
#implementation HorizScroll
- (instancetype)initWithFrame:(CGRect)frame
{
if (self = [super initWithFrame:frame]) {
}
return self;
}
-(void)addSubview:(UIView *)view{
[super addSubview:view];
NSUInteger numSubviews = self.subviews.count;
[view setFrame:CGRectMake(CGRectGetWidth(view.bounds)*(numSubviews),
0,
CGRectGetWidth(view.bounds),
CGRectGetHeight(view.bounds) )];
[self setContentSize:CGSizeMake(CGRectGetWidth(view.bounds)*(numSubviews),
CGRectGetHeight(view.bounds) )];
}
#implementation MyView
-(int)getRandomNumberBetween:(int)from to:(int)pto {
return (int)(from + arc4random() % (pto-from+1));
}
-(instancetype)init{
if ( self = [super init] ){
CGFloat red = [self getRandomNumberBetween:1 to:255];
self.backgroundColor = [UIColor colorWithRed:red/256.0
green:[self getRandomNumberBetween:1 to:255]/256.0
blue:[self getRandomNumberBetween:1 to:255]/256.0
alpha:1.0];
}
return self;
}
-(instancetype)initWithFrame:(CGRect)frame{
if ( self = [super initWithFrame:frame] ){
self.frame = CGRectMake(counterX, 0, 100, 100);
counterX += 50;
}
return self;
}
You need to set contentSize of scrollview to be larger than its frame size. so add this line after [self.view addSubview:ho].
ho.contentSize = CGSizeMake(501.f, 100.f);
or before [self.view addSubview:ho] and comment out the line:
[self setContentSize:CGSizeMake(CGRectGetWidth(view.bounds)*(numSubviews),
CGRectGetHeight(view.bounds))];
which is not necessary since you can set it after all subviews are added.
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.
I have a UIScrollView that loads three different pages.When i zoom in on a page, and zoom back out to the original size, the application stops letting me scroll between the pages, as if paging is disabled. What can i do to re-enable paging when zoomed out to the original size (Scale == 1)?
This is my code
- (void)viewDidLoad
{
[ScView setMaximumZoomScale : 2.0f];
[ScView setMinimumZoomScale : 1.0f];
ScView.contentSize = CGSizeMake(1024*3, 1.0);
ScView.pagingEnabled = YES;
ScView.clipsToBounds = YES;
ScView.delegate = self;
ScView.showsHorizontalScrollIndicator = NO;
ScView.showsVerticalScrollIndicator = NO;
[super viewDidLoad];
[self returnImages];
}
-(void)returnImages{
for (pageNumber = 1; pageNumber <= 3; pageNumber++) {
imagen = [[UIImageView alloc] initWithImage:[UIImage imageNamed:[NSString stringWithFormat:#"%d.png",pageNumber]]];
imagen.frame = CGRectMake((pageNumber-1)*1024, 0, 1024, 768);
[ScView addSubview:imagen];
}
}
//
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView{
return ScView;
// return [imagen initWithImage:[UIImage imageNamed:[NSString stringWithFormat:#"%d.png",pageNumber]]];
}
- (void)scrollViewWillBeginZooming:(UIScrollView *)myScrollView withView:(UIView *)view
{
NSLog(#"Scroll Will Begin");
ScView.scrollEnabled = YES;
}
- (void)scrollViewDidEndZooming:(UIScrollView *)myScrollView withView:(UIView *)view atScale:(float)scale
{
if(scale == 1)
{
ScView.scrollEnabled = YES;
ScView.pagingEnabled = YES;
[self returnImages];
NSLog(#"Scrolol will end");
//ScView.maximumZoomScale = 2.0f;
// [super viewDidLoad];
[self returnImages];
}
}
Any ideas will be highly appreciated..
To get proper paging and zooming you have to embed UIScrollView for each page into your parent UIScrollView. This combination will allow you to use simultaneously paging and internal scrolling.
Here is the example of UIViewController with parent scroll view and three embedded zoomable pages.
#define VIEW_FOR_ZOOM_TAG (1)
#implementation SVViewController
- (void)viewDidLoad {
[super viewDidLoad];
UIScrollView *mainScrollView = [[UIScrollView alloc] initWithFrame:self.view.bounds];
mainScrollView.pagingEnabled = YES;
mainScrollView.showsHorizontalScrollIndicator = NO;
mainScrollView.showsVerticalScrollIndicator = NO;
CGRect innerScrollFrame = mainScrollView.bounds;
for (NSInteger i = 0; i < 3; i++) {
UIImageView *imageForZooming = [[UIImageView alloc] initWithImage:[UIImage imageNamed:[NSString stringWithFormat:#"page%d", i + 1]]];
imageForZooming.tag = VIEW_FOR_ZOOM_TAG;
UIScrollView *pageScrollView = [[UIScrollView alloc] initWithFrame:innerScrollFrame];
pageScrollView.minimumZoomScale = 1.0f;
pageScrollView.maximumZoomScale = 2.0f;
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 < 2) {
innerScrollFrame.origin.x += innerScrollFrame.size.width;
}
}
mainScrollView.contentSize = CGSizeMake(innerScrollFrame.origin.x + innerScrollFrame.size.width, mainScrollView.bounds.size.height);
[self.view addSubview:mainScrollView];
}
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView {
return [scrollView viewWithTag:VIEW_FOR_ZOOM_TAG];
}
- (NSUInteger)supportedInterfaceOrientations {
return UIInterfaceOrientationMaskPortrait;
}
- (BOOL)shouldAutorotate {
return NO;
}
#end
I follow #NikNarmo 's solution, write a small swift xcode project to demo the zooming and paging function.
Hope to help anyone who want to do the same task.
Some code is from UIScrollView Tutorial: Getting Started http://www.raywenderlich.com/76436/use-uiscrollview-scroll-zoom-content-swift,
and some from A Beginner’s Guide to UIScrollView http://www.appcoda.com/uiscrollview-introduction/.
Using Xcode 7.0 and Swift 2.0
override func viewDidLoad() {
super.viewDidLoad()
mainScrollView = UIScrollView(frame: self.view.bounds)
mainScrollView.pagingEnabled = true
mainScrollView.showsHorizontalScrollIndicator = false
mainScrollView.showsVerticalScrollIndicator = false
pageScrollViews = [UIScrollView?](count: photos.count, repeatedValue: nil)
let innerScrollFrame = mainScrollView.bounds
mainScrollView.contentSize =
CGSizeMake(innerScrollFrame.origin.x + innerScrollFrame.size.width,
mainScrollView.bounds.size.height)
mainScrollView.backgroundColor = UIColor.redColor()
mainScrollView.delegate = self
self.view.addSubview(mainScrollView)
configScrollView()
addPageControlOnScrollView()
}
and the magic is in the func scrollViewWillEndDragging, when the contentSize is equal to the mainScrollViewContentSize or not, if it is mainScrollViewController, then do paging, otherwise do nothing.
func scrollViewWillEndDragging(scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>) {
let targetOffset = targetContentOffset.memory.x
let zoomRatio = scrollView.contentSize.height / mainScrollViewContentSize.height
if zoomRatio == 1 {
// mainScrollViewController
let mainScrollViewWidthPerPage = mainScrollViewContentSize.width / CGFloat(pageControl.numberOfPages)
let currentPage = targetOffset / (mainScrollViewWidthPerPage * zoomRatio)
pageControl.currentPage = Int(currentPage)
loadVisiblePages()
}
else {
// pageScorllViewController
}
}
And here is the project code https://github.com/Charles-Hsu/ScrollViewDemo