CODEWITHSUNDEEP
iphoneobjective-cios5uitableview
Rox
Rox

Reputation: 909

Display images in a TableView

I want to display images in a TableView. I can display one image in one cell, but I want to display four images instead of one image in every row like a photo library and when I select any image, it will open as a slide show as it happened in the photo library.

My images are stored in Document Directory. How can I do this?

-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *CellIdentifier = @"Cell";
    UITableViewCell *cell = [tablView dequeueReusableCellWithIdentifier:CellIdentifier];
    if(cell == nil)
    {
        cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
    }

    //Adjust your imageview frame according to you
    UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(0.0, 0.0, 470.0, 80.0)];

    [imageView setImage:[arrayOfImages objectAtIndex:indexPath.row]];
    [cell.contentView addSubview:imageView];
    return cell;
}

Upvotes: 2

Views: 1864

Answers (5)

janusfidel
janusfidel

Reputation: 8106

You have to set your data first. Maybe an array of arrays would be a good approach.

-(void)prepareData
{
    NSMutableArray *finalArray = [[NSMutableArray alloc]init];

    int dataPerCell = 4;
    int remainingData = [allImagesData count] % dataPerCell;
    int pagesForData = [allImagesData count] / dataPerCell;

    NSMutableArray *arrayToAdd = [[NSMutableArray alloc]init];
    for (int j = 0; j<[allImagesData count]; j++)
    {
        [arrayToAdd addObject:[allImagesData objectAtIndex:j]];

        //Check if dividing the array is needed
        if ([allImagesData count] > dataPerCell)
        {
            if ([arrayToAdd count] == dataPerCell)
            {
                NSMutableArray *finalArray = [[NSMutableArray alloc]initWithArray:arrayToAdd];
                [arrayToAdd removeAllObjects];
                [finalArray addObject:finalArray];
            }
            else if([arrayToAdd count] == remainingData && [finalArray count] == pagesForData)
            {
                NSMutableArray *finalArray = [[NSMutableArray alloc]initWithArray:arrayToAdd];
                [arrayToAdd removeAllObjects];
                [finalArray addObject:finalArray];
            }
        }
        else if([allImagesData count] <= dataPerCell)
        {
            NSMutableArray *finalArray = [[NSMutableArray alloc]initWithArray:arrayToAdd];
            if ([finalArray count] == [allImagesData count])
            {
                [finalArray addObject:finalArray];
            }
        }
    }
}

The code above will give you an array (finalArray) of another array, each array has four data.

You can create a class subclass of UITableViewCell, and add property to it, like four UIImageViews, and put them to places. I assume in your case, place them horizontally.

 -(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
 {
      return [finalArray count];
 }

-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *CellIdentifier = @"Cell";
    CustomCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if(!cell)
    {
        cell = [[[CustomCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier]autorelease];
    }

    //This will throw an exception if [allImagesData count] < 4 OR your [allImagesData count]  % 4 != 0
    [cell.imageVw1 setImage:[UIImage imageNamed:[[finalArray objectAtIndex:indexPath.row ] objectAtIndex:0]]];
    [cell.imageVw2 setImage:[UIImage imageNamed:[[finalArray objectAtIndex:indexPath.row ] objectAtIndex:1]]];
    [cell.imageVw3 setImage:[UIImage imageNamed:[[finalArray objectAtIndex:indexPath.row ] objectAtIndex:2]]];
    [cell.imageVw4 setImage:[UIImage imageNamed:[[finalArray objectAtIndex:indexPath.row ] objectAtIndex:3]]];

    return cell;
}

NOTE: the code is not tested.

Upvotes: 0

Omar Abdelhafith
Omar Abdelhafith

Reputation: 21221

You will need to create a custom cell subclass - see the tutorial Custom UITableViewCells with Interface Builder . Also, I would recommend to do some further study and research about Cocoa Touch framework. Good luck.

Upvotes: -1

TheTiger
TheTiger

Reputation: 13354

Now I'm just explaining how to show an image like iPhone library. Use UIScrollView instead of UITableView. I think this will be better!

After getting all images in an array, try this code:

-(void)loadImagesOnScrollView
{
    myScrollView = [[UIScrollView alloc]initWithFrame:CGRectMake(0.0, 0.0, 320.0, 416.0)];
    myScrollView.delegate = self;
    myScrollView.contentSize = CGSizeMake(320.0, 416.0);
    myScrollView.backgroundColor = [UIColor whiteColor];
    [self.view addSubview:myScrollView];

    float horizontal = 8.0;
    float vertical = 8.0;

    for(int i=0; i<[imageArray count]; i++)
    {
        if((i%4) == 0 && i!=0)
        {
            horizontal = 8.0;
            vertical = vertical + 70.0 + 8.0;
        }

        buttonImage = [UIButton buttonWithType:UIButtonTypeCustom];
        [buttonImage setFrame:CGRectMake(horizontal, vertical, 70.0, 70.0)];
        [buttonImage setTag:i];
        [buttonImage setImage:[imageArray objectAtIndex:i] forState:UIControlStateNormal];
        [buttonImage addTarget:self action:@selector(buttonImagePressed:) forControlEvents:UIControlEventTouchUpInside];
        [myScrollView addSubview:buttonImage];

        horizontal = horizontal + 70.0 + 8.0;
    }

    [myScrollView setContentSize:CGSizeMake(320.0, vertical + 78.0)];
}

And you can handle each image like this

-(void)buttonImagePressed:(id)sender
{
    NSLog(@"you have pressed : %d button",[sender tag]);
}

(Note: First of all, this is up to you and your logics so please make your logic strong. Nobody can write everything here. If you are a beginner then please do study for sometime "All The Very Best")

Upvotes: 5

Ab&#39;initio
Ab&#39;initio

Reputation: 5418

Implement a table view with four images per row, tag each image according to the row. Add tap recognizer to each image, and based on the image tag execute the code you wanted. Following is the code,

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
   static NSString *cellidentifier=@"cell";
   UITableViewCell *cell=(UITableViewCell *)[tableView dequeueReusableCellWithIdentifier:cellidentifier];

   if(cell==nil)
   {
       cell=[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:cellidentifier];
   }
   int x=0;

    //configure the cell 
    for(int i=0;i<4;i++)
    {
       UIImage *image=[UIImage imageNamed:@"hh.jpg"];
       UIImageView *im=[[UIImageView alloc]initWithImage:image];
       im.frame=CGRectMake(0+x, 0, 60, 60);
       x=x+61;

       im.tag=(indexPath.row*10)+i;
       im.userInteractionEnabled = YES;
       UITapGestureRecognizer *tapGesture = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tapAction:)];
       [im addGestureRecognizer:tapGesture];
       [cell addSubview:im];
    }

   //cell.backgroundView=img;
   [[cell textLabel] setBackgroundColor:[UIColor clearColor]];
   [[cell detailTextLabel] setBackgroundColor:[UIColor clearColor]];

return cell;
}

- (void) tapAction:(UIGestureRecognizer *)recognizer
{
     NSLog(@"Clicked Button With Tag =%i",recognizer.view.tag);
}

Upvotes: 0

Damien
Damien

Reputation: 2421

You'll need to create and layout a new UIView and add your images to that. Then you can add that view to the cell's contentView, instead of the UIImageView (that only holds one image) that you are currently adding.

Upvotes: 0

Related Questions