Thumb Nail Gallery?

Question

Hi am curious how I would go about implementing a view like (See below) Similar to the one used for the iPhone photo application. My initial idea was a table view with each cell holding 4 images, can anyone point me in the right direction. I am particularly interesting in using APIs from Apple so not too bothered about 3rd party APIs / Controllers at this stage.

Answer 1

I would suggest Three20 API. This is the API used to build the Facebook iPhone app and has a very very large collection of UI elements, including many photo management UIs.

The thumbnail viewer looks like (from their site):

Answer 2

Yup, as you say, a table view would work, with each of the 4 things (/row) being an UIButton with a custom image. You have to make sure that the table row itself isn't selectable though. (http://stackoverflow.com/questions/812426/uitableview-setting-some-cells-as-unselectable) Make sure to use table view cell caching if you're going to have a lot of rows.

The actual table view cell could be a UITableViewCell subclass or just the normal one, with some subviews added to its contentView.

Answer 3

On the iOS, this work is mostly done for you. Check Apple's docs for MPMediaPickerController.

Answer 4

AQGridView is FOSS and is used in many high profile applications like the Kobo reader and Netflix Actors.

Answer 5

You need to use UIScrollView and with a bunch of UIImageViews or UIButtons(with image as background image). this code uses Buttons on scroll view. Also u wud need a function to generate thumbnails, unless ur using the asset library in which case the function is already there.

    [scrollview setContentSize:CGSizeMake(320, (items*itemWidth)];

    for (int i = 0; i < [items count]; i++) {

        if (i % 4 == 0) {

            y+=1;
            x = 0;
        }


        UIButton *myButton = [UIButton buttonWithType:UIButtonTypeCustom];
        [myButton setBackgroundImage:[UIImage imageWithCGImage:[items objectAtIndex:i]] forState:UIControlStateNormal];
        CGRect rect2 = myButton.frame;
        rect2.size.height = kScrollObjHeight2;
        rect2.size.width = kScrollObjWidth2;
        rect2.origin.y = 10 + (y * 70) + (y *5);
        rect2.origin.x = 8 + (x * kScrollObjWidth2) + (x *8);
        myButton.frame = rect2;
        myButton.tag = i;   // tag our images for later use when we place them in serial fashion
        x = x + 1;


        [myButton addTarget:self action:@selector(clickFunction:) forControlEvents:UIControlEventTouchUpInside];
        [self.view addSubview:myButton];


        [scrollview addSubview:myButton];

    }

};


[scrollview setBackgroundColor:[UIColor blackColor]];
[scrollview setCanCancelContentTouches:NO];
scrollview.indicatorStyle = UIScrollViewIndicatorStyleWhite;
scrollview.clipsToBounds = YES;     // default is NO, we want to restrict drawing within our scrollview
scrollview.scrollEnabled = YES;

scrollview.pagingEnabled = YES;