UIImageView inside a scrollView with screen rotation

Question

Its been 2 days working on this problem and i just can't figure it out.

I have a UIScrollView stretched in all my view and i am adding to it as subViews a random number of UIImageViews, and i am enabling paging so it will look like a gallery app.

My problem is when i rotate the screen, the images frames stays the same (this is probably because of the constraints) so i tried to give the images constraints and it worked they would rotate perfectly but then a problem appeared where the scroll view wont scroll anymore and the images are on top of each other ..

This is my code :

-(void)setupScrollView
{
    for(int i = 0 ; i < [_arrayOfImages count] ; i++)
    {
        UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(self.view.frame.size.width*i, 0, self.view.frame.size.width, self.view.frame.size.height)];
        [imageView setImage:[[_arrayOfImages objectAtIndex:i] getImageForImageView:imageView]];
        [imageView setUserInteractionEnabled:YES];
        [imageView setContentMode:UIViewContentModeScaleAspectFit];

        [imageView setTranslatesAutoresizingMaskIntoConstraints:NO];

        [_scrollView addSubview:imageView];

        [self.view addConstraint:[NSLayoutConstraint constraintWithItem:imageView attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeading multiplier:1.f constant:0.f]];
        [self.view addConstraint:[NSLayoutConstraint constraintWithItem:imageView attribute:NSLayoutAttributeTrailing relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTrailing multiplier:1.f constant:0.f]];
        [self.view addConstraint:[NSLayoutConstraint constraintWithItem:imageView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1.f constant:0.f]];
        [self.view addConstraint:[NSLayoutConstraint constraintWithItem:imageView attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeBottom multiplier:1.f constant:0.f]];
    }
    [_scrollView setContentSize:CGSizeMake(self.view.frame.size.width*[_arrayOfImages count], self.view.frame.size.height)];
}

Can anyone help me please ? thanks

Is there a special reason why don't you use UICollectionView ? — Sabrican Ozan, Sep 05 '15 at 12:42
i need to add zoom on image .. can i do that with `UICollectionView` ? @SabricanOzan — user3783005, Sep 05 '15 at 12:44
I think it depends on what gesture you are gonna use. There is a thread about zooming in here :http://stackoverflow.com/questions/13485617/make-uicollectionview-zoomable you can get some ideas :) — Sabrican Ozan, Sep 05 '15 at 12:51
All you constrains is related to self.view. If you would like to make gallery, constrains should be related from one image to another. — Andrey, Sep 05 '15 at 13:11
i think i get your point .. and how can i do that ? any example .. @AndreySapunov — user3783005, Sep 05 '15 at 13:12
You can try to create an NSMutableArray, add pointer to each UIImageView to this array, and for all imageView's after first change toItem:self.view to toItem:[imageViewArray objectAtIndex:i-1] — Andrey, Sep 05 '15 at 13:15
please can you write me an answer ? thanks i really appreciate it @AndreySapunov — user3783005, Sep 05 '15 at 13:53

Arben Pnishi · Accepted Answer · 2015-09-07T08:47:52.387

2

You need to change the frame of UIScrollView and the UIImageViews in Autorotate delegate methods. After that you have to change the ContentSize of UIScrollView.

- (BOOL) shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientat‌ion{}
  //ios 7
   -(void)willRotateToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrient‌ation{}
   duration:(NSTimeInterval)duration -
   -(void)didRotateFromInterfaceOrientation:(UIInterfaceOrientation)fromInterfaceOri‌entation{}
   //ios 8 
-(void)viewWillTransitionToSize:(CGSize)size
   withTransitionCoordinator:(id<UIViewControllerTransitionCoordinator>)coordinator{
   if (size.width > size.height) { 
      // Positions for Landscape 
   } else {
     // Positions for Portrait 
   }
}

edited Sep 07 '15 at 08:47

answered Sep 07 '15 at 08:01

Arben Pnishi

591
5
11

thank you ! gonna try this but i think this is what i needed thank you – user3783005 Sep 07 '15 at 08:50
You are welcome :). I had the same problem and this is the way I fixed it, hope you'll make it. – Arben Pnishi Sep 07 '15 at 09:10
it actually did .. Thanks a lot ! no need for constraints – user3783005 Sep 07 '15 at 09:30

score 0 · Answer 2 · answered Sep 05 '15 at 14:04

I'am not really sure, because I need to see all application, but you can try following code

-(void)setupScrollView
{
    for(int i = 0 ; i < [_arrayOfImages count] ; i++)
    {
        UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(self.view.frame.size.width*i, 0, self.view.frame.size.width, self.view.frame.size.height)];
        [imageView setImage:[[_arrayOfImages objectAtIndex:i] getImageForImageView:imageView]];
        [imageView setUserInteractionEnabled:YES];
        [imageView setContentMode:UIViewContentModeScaleAspectFit];

        [imageView setTranslatesAutoresizingMaskIntoConstraints:NO];

        [_scrollView addSubview:imageView];
        [imageViewArray addObject:imageView]

        if (i == 0) {
            [self.view addConstraint:[NSLayoutConstraint constraintWithItem:imageView attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeading multiplier:1.f constant:0.f]];
            [self.view addConstraint:[NSLayoutConstraint constraintWithItem:imageView attribute:NSLayoutAttributeTrailing relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTrailing multiplier:1.f constant:0.f]];
            [self.view addConstraint:[NSLayoutConstraint constraintWithItem:imageView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1.f constant:0.f]];
            [self.view addConstraint:[NSLayoutConstraint constraintWithItem:imageView attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeBottom multiplier:1.f constant:0.f]];
        } else {
            UIImageView * previousView = [imageViewArray objectAtIndex:i-1];

            [self.view addConstraint:[NSLayoutConstraint constraintWithItem:imageView attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:previousView attribute:NSLayoutAttributeLeading multiplier:1.f constant:0.f]];
            [self.view addConstraint:[NSLayoutConstraint constraintWithItem:imageView attribute:NSLayoutAttributeTrailing relatedBy:NSLayoutRelationEqual toItem:previousView attribute:NSLayoutAttributeTrailing multiplier:1.f constant:0.f]];
            [self.view addConstraint:[NSLayoutConstraint constraintWithItem:imageView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:previousView attribute:NSLayoutAttributeTop multiplier:1.f constant:0.f]];
            [self.view addConstraint:[NSLayoutConstraint constraintWithItem:imageView attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:previousView attribute:NSLayoutAttributeBottom multiplier:1.f constant:0.f]];
        }
    }

    [_scrollView setContentSize:CGSizeMake(self.view.frame.size.width*[_arrayOfImages count], self.view.frame.size.height)];
}

Also, you need to declare imageViewArray as NSMutableArray:

add to @interface:

NSMutableArray * imageViewArray;

and in viewDidLoad:

imageViewArray = [[NSMutableArray alloc] init];

You shouldn't relate all 4 constraints to the previous item. Depending if the gallery is horizontal or vertical, either top/bottom should be related to the container or the leading/trailing. — Alistra, Sep 06 '15 at 09:31
Also you should change constraints on the view's width/height after rotation — Alistra, Sep 06 '15 at 09:32
can you guide me and show me how ? its driving me crazy @Alistra — user3783005, Sep 06 '15 at 22:10

UIImageView inside a scrollView with screen rotation

2 Answers2