Question

I am currently dynamically adding a UIImage to my UIScrollView object and everything is working as intended. I need to add extra functionality now (a UIActivityIndicator in the center of the image when it is loading from the internet, and a label underneath) so I thought why not create a custom View which has all of these laid out as I need them to be, and then just load it into the scrollView. I have encountered a problem though, when I add it to the scrollView, nothing shows up. Here is what I have:

NewsViewController.m:

imageScrollView.contentSize = CGSizeMake(320*numberOfPages, 303);
pageControl.numberOfPages = numberOfPages;
dispatch_queue_t imageDownload = dispatch_queue_create("imageDownload", NULL);
__block NSData *temp;
    CustomImageView *customImageView = [[CustomImageView alloc] initWithFrame:CGRectMake(0, 0, 320, 303)];
    [imageScrollView addSubview:customImageView];
    [[customImageView activityIndicator] startAnimating];
    dispatch_async(imageDownload, ^{
        temp = [[NSData dataWithContentsOfURL:[NSURL URLWithString:@"http://www.wlfarm.org/wp-content/uploads/2012/05/farm.jpg"]]retain];
        dispatch_async(dispatch_get_main_queue(), ^{
            customImageView.imageView.image = [[UIImage alloc] initWithData:temp];
            [[customImageView activityIndicator] stopAnimating];
            [customImageView setNeedsDisplay];
            customImageView.caption.text = @"HAHAHAHAHHAHA";
            [imageScrollView setNeedsDisplay];
            [temp release];
        });
    });

    dispatch_release(imageDownload);

CustomImageView.h:

#import <UIKit/UIKit.h>

@interface CustomImageView : UIView
{
    IBOutlet UIImageView *imageView;
    IBOutlet UILabel *caption;
    IBOutlet UIActivityIndicatorView *activityIndicator;
}

@property (nonatomic, retain) IBOutlet UIImageView *imageView;
@property (nonatomic, retain) IBOutlet UILabel *caption;
@property (nonatomic, retain) IBOutlet UIActivityIndicatorView *activityIndicator;
@end

CustomImageView.m

#import "CustomImageView.h"  
@interface CustomImageView ()

@end

@implementation CustomImageView

@synthesize caption, imageView, activityIndicator;

- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
{
    self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
    if (self) {
        // Custom initialization
    }
    return self;
}

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view from its nib.
}

 - (void)viewDidUnload
{
    [super viewDidUnload];
    // Release any retained subviews of the main view.
    // e.g. self.myOutlet = nil;
}

- (BOOL)shouldAutorotateToInterfaceOrientation:    (UIInterfaceOrientation)interfaceOrientation
{
    return (interfaceOrientation == UIInterfaceOrientationPortrait);
}

@end

I am including a screenshot of my XIB file, and the program running on the simulator. The first picture shows nothing in the scrollView(the attempt made by using my custom class), and the second page of the scroll view is the attempt made by adding a UIImageView to the UIScrollView(which worked). Can anyone point out what I am doing wrong? Am I not allowed to load a custom view into a UIScrollView? Thanks for your help!

IB Screenshot – https://i.stack.imgur.com/gz9UL.png

iOS Simulator No Image with CustomView Screenshot – https://i.stack.imgur.com/zhswq.png

iOS Simulator Image with UIImageView Screenshot – https://i.stack.imgur.com/97vmU.png

Answer 1

It looks as though CustomImageView is a subclass on UIViewController, not UIImageView or UIView. You can’t add a UIViewController as a subview like that. change it to subclass UIView and it should work.

To load a UIView from a .nib, you need to declare your IBOutlet properties as you would for a UIViewController. Define the correct custom class in IB and connect everything up, including the base view. Then override the following method inside your custom view class.

- (id)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
    // Initialization code.
    //
    [[NSBundle mainBundle] loadNibNamed:@"<NIB NAME HERE>" owner:self options:nil];
    [self addSubview:self.view];
    }
  return self;
}

It seems you have cut and pasted methods from a UIViewController subclass into you UIView subclass. Start by deleting all the methods you’ve pasted in between @synthesize and @end . A UIView subclass requires different methods to to load from a .nib, so you need to override the method shown above instead and use the line of code

[[NSBundle mainBundle] loadNibNamed:@"<NIB NAME HERE>" owner:self options:nil];

to load the nib.

Further to your comment about connecting the base view, here is what I mean:

After creating your custom class and nib file, open the nib and highlight “Files Owner” on the left, then on the top right hand side, select the icon 3rd from the left, looks like an ID card or something. In the “Class” box, add the name of your custom class.

In your customClass, add an IBOutlet UIView property called baseView, and add a UIView that covers the view in IB at the root level, connect these two. Then add everything else on top of that

you code would now look something like this:

CustomImageView.h

#import <UIKit/UIKit.h>

@interface CustomImageView : UIView
{
    IBOutlet UIView *baseView
    IBOutlet UIImageView *imageView;
    IBOutlet UILabel *caption;
    IBOutlet UIActivityIndicatorView *activityIndicator;
}
@property (nonatomic, retain) IBOutlet UIView *baseView;
@property (nonatomic, retain) IBOutlet UIImageView *imageView;
@property (nonatomic, retain) IBOutlet UILabel *caption;
@property (nonatomic, retain) IBOutlet UIActivityIndicatorView *activityIndicator;
@end

CustomImageView.m

#import "CustomImageView.h"  
@interface CustomImageView ()

@end

@implementation CustomImageView

@synthesize baseView, caption, imageView, activityIndicator;

- (id)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
    // Initialization code.
    //
    [[NSBundle mainBundle] loadNibNamed:@"<NIB NAME HERE>" owner:self options:nil];
    [self addSubview:self.baseView];
    }
  return self;
}

@end

Provided you connect it all up in IB it should work fine, just remember to add the baseView