CODEWITHSUNDEEP
iphoneobjective-cxcode
Mustafa
Mustafa

Reputation: 775

UIScrollview containing many images

I'm using UIScrollview in Xcode 4.6. I want to insert around 30 images into the scrollview. Within the storyboard I can't add this many as it doesn't actually let you scroll down on the storyboard to add more images, hence all the images overlap each other.

The answer is probably quite simple so sorry if this is a dumb question. How do I add this many images to the scrollview, is there a way to code it like in Android xml? Or is there anyway to not have the images overlap?

Upvotes: 1

Views: 127

Answers (3)

Scarafone
Scarafone

Reputation: 116

So this is problem that I have solved before. There are a few ways that you could solve this I think the new preferred way at least in iOS 6.x you could opt to use UICollectionView.

UICollectionView View Apple Docs

This is a great tutorial site that has loads of helpful information

UICollectionView Tutorial

Also one solution I came up with was loading and placing the images manually. And then based on the size needed width wise I set my UIScrollView setcontentSize property.

//Clean Up and remove old buttons
for(int i=0; i < _localButtonArray.count; i++){
    [(CategoryButton*)[_localButtonArray objectAtIndex:i] removeFromSuperview];
}
[_localButtonArray removeAllObjects];

CGFloat baseX = 10,
        X = 0,
        Y = 0;
int xPadding = 20,
    yPadding = 12,
    index = 0,
    maxRow = 4,
    maxCol = 4,
    colCount = 0;
CGRect buttonFrame;

buttonFrame.size.height = 137;
buttonFrame.size.width  = 137;
buttonFrame.origin.y    = X;
buttonFrame.origin.x    = Y;



for(int i = 0;i < _localInfoArray.count ; i++){

    id object = [_localInfoArray objectAtIndex:i];

    if(index >= maxRow){
        index = 0;
        X = baseX;
        Y += buttonFrame.size.height + yPadding;
        if(colCount >= (maxRow * maxCol)){
            colCount=0;
            baseX += 637;
            Y = 0;
        }
    }
    X = baseX + (index * (buttonFrame.size.width + xPadding));
    index++;
    colCount++;

    buttonFrame.origin.x = X;
    buttonFrame.origin.y = Y + yPadding;
    /*
     * Custom button class
     */
    CategoryButton * categoryButton = [[CategoryButton alloc]initWithFrame:buttonFrame Object:object];



    //Add action
    [categoryButton addTarget:self action:@selector(categoryButtonPressed:) forControlEvents:UIControlEventTouchUpInside];

    [categoryButton.titleLabel setNumberOfLines:3];
    [categoryButton.titleLabel setLineBreakMode:NSLineBreakByWordWrapping];
    [categoryButton.titleLabel setFont:[UIFont fontWithName:@"Helvetica-Bold" size:19]];
    [categoryButton.titleLabel setTextAlignment:NSTextAlignmentCenter];
    [categoryButton setMultipleTouchEnabled:NO];

    [_localButtonArray addObject:categoryButton];
    [self.view addSubview:categoryButton];



}

There is a lot of other code that isn't here, but laying out the page is handled here. Even this isn't an optimal solution, but hopefully it will help you.

Best of luck ^_^

Upvotes: 1

Dave Batton
Dave Batton

Reputation: 8845

Also consider using a UITableView. It may be a more efficient way of handling that many images. You can load them as they're displayed, rather than all at once.

Upvotes: 2

Undo
Undo

Reputation: 25687

You won't want to do this in Interface Builder - that will make it a creation and maintenance nightmare.

Instead, do it in code. You'll want to Google UIScrollView tutorial to get started. It's really quite easy - much easier than dragging out a bunch of image views by hand.

Upvotes: 1

Related Questions