Question

I would like to add a page number above the image such as “1 of 50” and description of the image below the image in the scrollview.

I have looked at this LINK but still couldn’t figure out how to make it happen.

here is my sample code of the images scrollview. Im trying to find a sample that can add text and scroll with the images

NSUInteger i;
        for (i = 1; i <= kNumImages; i++)
        {
                NSString *imageName = [NSString stringWithFormat:@"images%d.jpg", i];
                UIImage *image = [UIImage imageNamed:imageName];
                UIImageView *imageView = [[UIImageView alloc] initWithImage:image];

                // setup each frame to a default height and width, it will be properly placed when we call "updateScrollList"
                CGRect rect = imageView.frame;
                rect.size.height = kScrollObjHeight;
                rect.size.width = kScrollObjWidth;
                imageView.frame = rect;
                imageView.tag = i;  // tag our images for later use when we place them in serial fashion
                [scrollView1 addSubview:imageView];
                [imageView release];
        }

UPDATE:

const CGFloat kScrollObjHeight  = 320;
const CGFloat kScrollObjWidth   = 280.0;
const NSUInteger kNumImages     = 50;


- (void)layoutScrollImages
{
UIImageView *view = nil;
NSArray *subviews = [scrollView1 subviews];

// reposition all image subviews in a horizontal serial fashion
CGFloat curXLoc = 0;
for (view in subviews)
{
        if ([view isKindOfClass:[UIImageView class]] && view.tag > 0)
        {
                CGRect frame = view.frame;
                frame.origin = CGPointMake(curXLoc, 0);
                view.frame = frame;

                curXLoc += (kScrollObjWidth);
        }
}
- (void)viewDidLoad {

        self.view.backgroundColor = [UIColor viewFlipsideBackgroundColor];

        // 1. setup the scrollview for multiple images and add it to the view controller
        //
        // note: the following can be done in Interface Builder, but we show this in code for clarity
        [scrollView1 setBackgroundColor:[UIColor blackColor]];
        [scrollView1 setCanCancelContentTouches:NO];
        scrollView1.indicatorStyle = UIScrollViewIndicatorStyleWhite;
        scrollView1.clipsToBounds = YES;        // default is NO, we want to restrict drawing within our scrollview
        scrollView1.scrollEnabled = YES;

        // pagingEnabled property default is NO, if set the scroller will stop or snap at each photo
        // if you want free-flowing scroll, don't set this property.
        scrollView1.pagingEnabled = YES;

        // load all the images from our bundle and add them to the scroll view
        NSUInteger i;
        for (i = 1; i <= kNumImages; i++)
        {
                NSString *imageName = [NSString stringWithFormat:@"creative%d.jpg", i];
                UIImage *image = [UIImage imageNamed:imageName];
                UIImageView *imageView = [[UIImageView alloc] initWithImage:image];

                // setup each frame to a default height and width, it will be properly placed when we call "updateScrollList"
                CGRect rect = imageView.frame;
                rect.size.height = kScrollObjHeight;
                rect.size.width = kScrollObjWidth;
                imageView.frame = rect;
                imageView.tag = i;  // tag our images for later use when we place them in serial fashion
                [scrollView1 addSubview:imageView];
                [imageView release];
        }

        [self layoutScrollImages];

I wanted to put this but unable to find the correct position or right offset to display at the top

UILabel * topLabel = [[UILabel alloc] init];
            topLabel.text = [NSString stringWithFormat:@"%d of %d", i, kNumImages];
            rect.origin.x = offset;
            rect.size.height = 30; // however large you need the label to be
            topLabel.frame = rect;
            offset += 30;

Answer 1

I would think something like this would work:

    float offset = 0;
    for (NSUInteger i = 1; i <= kNumImages; i++)
    {
            // load up the image
            NSString *imageName = [NSString stringWithFormat:@"images%d.jpg", i];
            UIImage *image = [UIImage imageNamed:imageName];
            UIImageView *imageView = [[UIImageView alloc] initWithImage:image];

            // image.size is important here and used to determine placement
            CGRect rect = imageView.frame;
            rect.size = image.size;

            // create top label, just basic will need to configure other settings like font
            UILabel * topLabel = [[UILabel alloc] init];
            topLabel.text = [NSString stringWithFormat:@"%d of %d", i, kNumImages];
            rect.origin.x = offset;
            rect.size.height = 30; // however large you need the label to be
            topLabel.frame = rect;
            offset += 30; // adding the label height

            // set image frame since we now know the location below top label            
            rect.size = image.size;
            rect.origin.x += offset;
            imageView.frame = rect;
            imageView.tag = i;
            offset += image.size.height; // adding image height

            // add bottom label below image
            UILabel * bottomLabel = [[UILabel alloc] init];
            bottomLabel.text = imageName; // just a sample description
            rect.origin.x += offset;
            rect.size.height = 30; // however large you need the label to be
            bottomLabel.frame = rect;
            offset += 30; // adding the label height

            [scrollView1 addSubview:topLabel];
            [scrollView1 addSubview:imageView];
            [scrollView1 addSubview:bottomLabel];
            [imageView release];
            [topLabel release];
            [bottomLabel release];

            offset += 20; // arbitrary spacing between images
    }