Getting started with iOS development from samples (6) -- photo and album browsing

Myimagepicker demonstrates how to call the photo and album systems and browse them in a custom UI. This is also a popular requirement.

Let's take a look at the procedure of using this example:

For this sample, I mainly focus on two key points:

• Call the system photo and album
• Nesting and combination of UI Components

Call the system photo and album

IOS provides a class alassetslibrary to obtain resources (photo, album, video, etc.) under photo. Its main calling method is traversal and block callback:

NSUInteger groupTypes = ALAssetsGroupAlbum | ALAssetsGroupEvent | ALAssetsGroupFaces;[assetsLibrary enumerateGroupsWithTypes:groupTypes usingBlock:listGroupBlock failureBlock:failureBlock];

The above code traverses alassetsgroupalbum | alassetsgroupevent | alassetsgroupfaces resources and calls back the listgroupblock and failureblock Blocks During the traversal process. The following describes the implementation of these two blocks:

ALAssetsLibraryGroupsEnumerationResultsBlock listGroupBlock = ^(ALAssetsGroup *group, BOOL *stop) {        if (group) {        [groups addObject:group];    } else {        [self.tableView performSelectorOnMainThread:@selector(reloadData) withObject:nil waitUntilDone:NO];    }};ALAssetsLibraryAccessFailureBlock failureBlock = ^(NSError *error) {    AssetsDataIsInaccessibleViewController *assetsDataInaccessibleViewController = [[AssetsDataIsInaccessibleViewController alloc] initWithNibName:@"AssetsDataIsInaccessibleViewController" bundle:nil];        NSString *errorMessage = nil;    switch ([error code]) {        case ALAssetsLibraryAccessUserDeniedError:        case ALAssetsLibraryAccessGloballyDeniedError:            errorMessage = @"The user has declined access to it.";            break;        default:            errorMessage = @"Reason unknown.";            break;    }        assetsDataInaccessibleViewController.explanation = errorMessage;    [self presentModalViewController:assetsDataInaccessibleViewController animated:NO];    [assetsDataInaccessibleViewController release];};

The logic is very simple. In the traversal process, resources are placed into the groups array and the tableview is refreshed.

Nesting and combination of UI Components

The UI in this example is composed of various UI components nested, which also reflects the effective combination of IOS standardization and customization. First, let's look at the page in the middle. This page shows all photos under an album. Each line shows four photo thumbnail images. Click a thumbnail to transfer it to the next page, in this example, tableview nested custom tableviewcell is used, and four custom imageviews are nested in this cell. The Code is as follows:

// Customize the appearance of table view cells.- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {        static NSString *CellIdentifier = @"Cell";        AlbumContentsTableViewCell *cell = (AlbumContentsTableViewCell *)[tableView dequeueReusableCellWithIdentifier:CellIdentifier];    if (cell == nil) {        [[NSBundle mainBundle] loadNibNamed:@"AlbumContentsTableViewCell" owner:self options:nil];        cell = tmpCell;        tmpCell = nil;    }        cell.rowNumber = indexPath.row;    cell.selectionDelegate = self;        // Configure the cell...    NSUInteger firstPhotoInCell = indexPath.row * 4;    NSUInteger lastPhotoInCell  = firstPhotoInCell + 4;        if (assets.count <= firstPhotoInCell) {        NSLog(@"We are out of range, asking to start with photo %d but we only have %d", firstPhotoInCell, assets.count);        return nil;    }        NSUInteger currentPhotoIndex = 0;    NSUInteger lastPhotoIndex = MIN(lastPhotoInCell, assets.count);    for ( ; firstPhotoInCell + currentPhotoIndex < lastPhotoIndex ; currentPhotoIndex++) {                ALAsset *asset = [assets objectAtIndex:firstPhotoInCell + currentPhotoIndex];        CGImageRef thumbnailImageRef = [asset thumbnail];        UIImage *thumbnail = [UIImage imageWithCGImage:thumbnailImageRef];                switch (currentPhotoIndex) {            case 0:                [cell photo1].image = thumbnail;                break;            case 1:                [cell photo2].image = thumbnail;                break;            case 2:                [cell photo3].image = thumbnail;                break;            case 3:                [cell photo4].image = thumbnail;                break;            default:                break;        }    }        return cell;}

In the rightmost page, a photo is displayed, and the outermost layer is a uiscollview. This view is nested with a custom imageview to implement multi-touch functions in the Custom imageview. The Code is as follows:

- (void)viewDidLoad {        self.title = @"Photo";    UIScrollView *imageScrollView = (UIScrollView *)self.view;        [imageScrollView setBackgroundColor:[UIColor blackColor]];    [imageScrollView setDelegate:self];    [imageScrollView setBouncesZoom:YES];    ALAssetRepresentation *assetRepresentation = [asset defaultRepresentation];        UIImage *fullScreenImage = [UIImage imageWithCGImage:[assetRepresentation fullScreenImage] scale:[assetRepresentation scale] orientation:(UIImageOrientation)[assetRepresentation orientation]];    // add touch-sensitive image view to the scroll view    TapDetectingImageView *imageView = [[TapDetectingImageView alloc] initWithImage:fullScreenImage];    [imageView setDelegate:self];    [imageView setTag:ZOOM_VIEW_TAG];    [imageScrollView setContentSize:[imageView frame].size];    [imageScrollView addSubview:imageView];    [imageView release];        // calculate minimum scale to perfectly fit image width, and begin at that scale    float minimumScale = [imageScrollView frame].size.width  / [imageView frame].size.width;    [imageScrollView setMinimumZoomScale:minimumScale];        [imageScrollView zoomToRect:CGRectMake(0.0, 0.0, imageView.frame.size.width, imageView.frame.size.height) animated:NO];    }

In this example, we can learn how to flexibly nest and combine multiple UI components, and listen for events in delegate.