Adding subviews to screen issue

Question

I have a large amount of image buttons being added to the screen in an iPhone app. Everything is working fine with my code.

The problem is the subviews are not displaying until every one of the subviews are ready to display. So for example I have 48 subviews, I don't want to wait until every subview is ready, I want to visibly be able to see each one appearing on the screen as they are loading.

I hope this makes sense. The issue is getting larger as i add more images to the collection.

This is my code for you to see:

for (int i = 0; i < imgNumbers.count; i++) {
    myButton = [UIButton buttonWithType:UIButtonTypeCustom];
    CGRect buttonValue = [[btn9Locations objectAtIndex:location] CGRectValue];
    myButton.frame = buttonValue;
    NSString *imagePart1 = [[NSString alloc] initWithFormat:@"%@", imgNumbers[i]];

    [myButton addTarget:self action:@selector(buttonClick:) forControlEvents:UIControlEventTouchDownRepeat];

    NSURL *tmpDirURL = [NSURL fileURLWithPath:NSTemporaryDirectory() isDirectory:YES];
    NSURL *fileURL = [tmpDirURL URLByAppendingPathComponent:imagePart1];

    NSString *imageLocation = [[NSString alloc]initWithFormat:@"%@", [fileURL path]];
    UIImage * image = [UIImage imageWithContentsOfFile:imageLocation];

    [myButton setBackgroundColor:[UIColor colorWithRed:0.94 green:0.39 blue:0.13 alpha:0.0]];
    [myButton setBackgroundImage:image forState:UIControlStateNormal];
    [myButton setTitle:[imageNames[i] uppercaseString] forState:UIControlStateNormal];
    [myButton.titleLabel setFont:[UIFont fontWithName:@"Helvetica-Light" size:20]];
    [myButton setContentHorizontalAlignment:UIControlContentHorizontalAlignmentRight];
    [myButton setContentVerticalAlignment:UIControlContentVerticalAlignmentBottom];
    [myButton setTitleColor:[UIColor colorWithRed:1.0 green:1.0 blue:1.0 alpha:0.5] forState:UIControlStateNormal];
    myButton.imageView.layer.cornerRadius = 7.0f;
    myButton.layer.shadowRadius = 3.0f;
    myButton.layer.shadowColor = [UIColor blackColor].CGColor;
    myButton.layer.shadowOffset = CGSizeMake(0.0f, 1.0f);
    myButton.layer.shadowOpacity = 0.5f;
    myButton.layer.masksToBounds = NO;
    [buttons addObject:myButton];
    [scrollview addSubview:myButton];  }

Hope this makes sense, I have seen apps that when you scroll down each item fades onto the screen but I don't seem to be able to sort this part first!

Thanks

score 3 · Answer 1 · answered Sep 16 '13 at 17:17

Try to move initialisation code into background queue and only addSubview call on main queue.

dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_HIGH, 0), ^{
        for (int i = 0; i < imgNumbers.count; i++) {
            myButton = [UIButton buttonWithType:UIButtonTypeCustom];
            CGRect buttonValue = [[btn9Locations objectAtIndex:location] CGRectValue];
            myButton.frame = buttonValue;
            NSString *imagePart1 = [[NSString alloc] initWithFormat:@"%@", imgNumbers[i]];

            [myButton addTarget:self action:@selector(buttonClick:) forControlEvents:UIControlEventTouchDownRepeat];

            NSURL *tmpDirURL = [NSURL fileURLWithPath:NSTemporaryDirectory() isDirectory:YES];
            NSURL *fileURL = [tmpDirURL URLByAppendingPathComponent:imagePart1];

            NSString *imageLocation = [[NSString alloc]initWithFormat:@"%@", [fileURL path]];
            UIImage * image = [UIImage imageWithContentsOfFile:imageLocation];

            [myButton setBackgroundColor:[UIColor colorWithRed:0.94 green:0.39 blue:0.13 alpha:0.0]];
            [myButton setBackgroundImage:image forState:UIControlStateNormal];
            [myButton setTitle:[imageNames[i] uppercaseString] forState:UIControlStateNormal];
            [myButton.titleLabel setFont:[UIFont fontWithName:@"Helvetica-Light" size:20]];
            [myButton setContentHorizontalAlignment:UIControlContentHorizontalAlignmentRight];
            [myButton setContentVerticalAlignment:UIControlContentVerticalAlignmentBottom];
            [myButton setTitleColor:[UIColor colorWithRed:1.0 green:1.0 blue:1.0 alpha:0.5] forState:UIControlStateNormal];
            myButton.imageView.layer.cornerRadius = 7.0f;
            myButton.layer.shadowRadius = 3.0f;
            myButton.layer.shadowColor = [UIColor blackColor].CGColor;
            myButton.layer.shadowOffset = CGSizeMake(0.0f, 1.0f);
            myButton.layer.shadowOpacity = 0.5f;
            myButton.layer.masksToBounds = NO;
            [buttons addObject:myButton];
            dispatch_async(dispatch_get_main_queue(), ^{
               [scrollview addSubview:myButton]; 
            });
        }
    });

Thanks for your reply. But this made the screen take 5 times as long and still all appeared at the same time. Any other ideas :) — RichAppz, Sep 17 '13 at 11:30
I have been playing with this idea, I have labels that go under each button, oddly enough if I move the position of the dispatch_async(dispatch_get_main_queue(), ^{ the labels come up almost instantly but the buttons with images are still taking longer than before. hope someone can help me...!! — RichAppz, Sep 17 '13 at 13:28

Adding subviews to screen issue

1 Answers1