CODEWITHSUNDEEP
iosobjective-cimageuiscrollview
jerik
jerik

Reputation: 5777

UIScrollView with images, images width is not correct

I have UIScrollView setup which loads images from the web. The UIImageView in the scrollview has a width of 320px, but somehow the images are smaller or bigger then this width and interfere as they are visible in the other imageviews.

How that each image in the scrollview is exactly 320px and does not interfere the other pictures

enter image description here

I use the following code:

CollectionViewController.m

#pragma mark - ScrollView Pics
- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath {

    UICollectionReusableView *reusableview = nil;

    if (kind == UICollectionElementKindSectionHeader) {

        UIView *headerView =[collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"HeaderView" forIndexPath:indexPath];

        reusableview = (UICollectionReusableView*)headerView;
        [self addSlideShow:reusableview at:indexPath];
    }

    return reusableview;
}

-(void)addSlideShow:(id)reusableView at:(NSIndexPath *)indexPath {

    int spacing = 4;
    int headerSpacing = (indexPath.section == 0) ? spacing : 8; // 8 = spacing + spacing
    int topSpacing = headerSpacing - spacing;


    float headHeight = self.customLayout.headerReferenceSize.height - headerSpacing;
    float pControlHeight = 20;

    self.myScrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, topSpacing, self.view.frame.size.width, headHeight)];
    self.myScrollView.showsHorizontalScrollIndicator = NO;
    self.myScrollView.delegate = self;

    [reusableView addSubview:self.myScrollView];

    self.myPageControl = [[UIPageControl alloc] initWithFrame:CGRectMake(0, headHeight - pControlHeight, self.view.frame.size.width, pControlHeight)];
    self.myPageControl.numberOfPages = 4; 
    self.myPageControl.enabled = TRUE;
    self.myPageControl.highlighted = TRUE;

    [reusableView addSubview:self.myPageControl];

    [self myScrollingAt:(int)indexPath.section];
    pageControlBeingUsed = NO;

}


-(void)myScrollingAt:(int)section {

    self.myScrollView.pagingEnabled = YES;
    [self.myScrollView setIndicatorStyle:UIScrollViewIndicatorStyleWhite];

    int numberOfViews = 4; 

    for (int i=0; i < numberOfViews; i++) {
        CGFloat xOrigin = i * self.myScrollView.frame.size.width;
        UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(xOrigin, 0, self.myScrollView.frame.size.width, self.myScrollView.frame.size.height)];

        imageView.contentMode = UIViewContentModeScaleAspectFill;
        imageView.userInteractionEnabled = YES;

        int itemOfScrollView = [self getItem:i atSection:section];

        if (self.sshare.coData.count > 0 && itemOfScrollView < self.sshare.coData.count) {

            [self setPhotos:imageView onItem:itemOfScrollView];
        }

        imageView.tag = 4000 + itemOfScrollView; // create tag to get the item to navigate to the detailView
        [self addTap:imageView];
        DLog(@"imageview %d: %@", i, imageView);

        [self.myScrollView addSubview:imageView];

    }    
    self.myScrollView.contentSize = CGSizeMake(numberOfViews * self.myScrollView.frame.size.width, self.myScrollView.frame.size.height);
}

- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView {
    pageControlBeingUsed = NO;
}

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
    pageControlBeingUsed = NO;
}

- (int)getItem:(int)item atSection:(int)section {
    return item + (section * 4); // return the positon where I have to look in my array
}

- (void)addTap:(id)view {
    UITapGestureRecognizer *myTap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tapToDetailView:)];
    paidTap.numberOfTapsRequired = 1;
    [view addGestureRecognizer:myTap];
}
-(void)setPhotos:(UIImageView *)imageView onItem:(int)item{
    NSString *imageUrl = [self.sshare myImage:item];
    [imageView setImageWithURL:[NSURL URLWithString:[self.sshare myImage:item]]];
}

Debugger output

[742:60b] -[ViewController myScrollingAt:] [Line 293] imageview 0: <UIImageView: 0x155502e0; frame = (0 0; 320 222.976); tag = 4000; gestureRecognizers = <NSArray: 0x15550680>; layer = <CALayer: 0x15550360>>
[742:60b] -[ViewController myScrollingAt:] [Line 293] imageview 1: <UIImageView: 0x1565fe30; frame = (320 0; 320 222.976); tag = 4001; gestureRecognizers = <NSArray: 0x1565f650>; layer = <CALayer: 0x15660260>>
[742:60b] -[ViewController myScrollingAt:] [Line 293] imageview 2: <UIImageView: 0x155508a0; frame = (640 0; 320 222.976); tag = 4002; gestureRecognizers = <NSArray: 0x155509a0>; layer = <CALayer: 0x155506b0>>
[742:60b] -[ViewController myScrollingAt:] [Line 293] imageview 3: <UIImageView: 0x155509d0; frame = (960 0; 320 222.976); tag = 4003; gestureRecognizers = <NSArray: 0x15550c00>; layer = <CALayer: 0x15550a50>>

Upvotes: 0

Views: 108

Answers (1)

DarkDust
DarkDust

Reputation: 92414

Since you're using UIViewContentModeScaleAspectFill, you want to clip the images:

imageView.clipsToBounds = YES;

Aspect-fill scales the images (retaining their aspect ratio) to completely fill the visible area when drawing. If the image view is not set to clip, it may draw outside its bounds.

Upvotes: 2

Related Questions