CODEWITHSUNDEEP
iosobjective-cuitableviewuicollectionviewui-design
Subhash Sharma
Subhash Sharma

Reputation: 745

how create multiple image view design?

I need a view like in image in my app. I'm confused what to use for this, can i use a collection view or I have to design my self with view and imageViews and button. Any help or suggestion will be appreciated.

Upvotes: 1

Views: 131

Answers (2)

Prasanna
Prasanna

Reputation: 955

There is an alternative way to do this via custom cell ...

1.You need to take UIImageview as much as you want....(Here I took 4 in a row)

2.Take an array of image names.(which can be generated as we are getting)

Now you can refer the following UITableView DataSource code....

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{        
  return arrImage.count %4 ? arrImage.count /4 +1 :arrImage.count /4;
} 




- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{

 static NSString *strCellIdentifier = @"Cell";
 TableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:strCellIdentifier];
if (cell == nil) {

    cell = [[TableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:strCellIdentifier];
}
NSUInteger imageIndex = (indexPath.row*4);//indexPath.row *(number of images on a row)
//First image of the row
    cell.image1.image = [UIImage imageNamed:[arrImage objectAtIndex:imageIndex +0]];
//Second image of the row
if (arrImage.count > imageIndex+1){
    cell.image2.image = [UIImage imageNamed:[arrImage objectAtIndex:imageIndex +1]];
}
//Third image of the row
if (arrImage.count > (imageIndex+2)){
    cell.image3.image = [UIImage imageNamed:[arrImage objectAtIndex:imageIndex +2]];
}
//Fourth image of the row
if (arrImage.count > (imageIndex+3)){
    cell.image4.image = [UIImage imageNamed:[arrImage objectAtIndex:imageIndex +3]];
}
cell.backgroundColor = [UIColor redColor];
return cell;
}

Upvotes: 1

Jagat Dave
Jagat Dave

Reputation: 1645

Please implement the following code.

ViewController.m

static CGFloat EdgeInsets;
@property (strong, nonatomic) IBOutlet UICollectionView *collectionVeiw;
@property (strong, nonatomic) NSMutableArray *arrImages;

#pragma mark - View Life Cycle

- (void)viewDidLoad {
    [super viewDidLoad];
    EdgeInsets = 30;
    _arrImages = [NSMutableArray alloc]init];
}

#pragma mark - Collection View delegate methods

- (NSInteger)collectionView:(UICollectionView *)view numberOfItemsInSection:(NSInteger)section{
    return _arrImages.count;
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
    ImageCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"ImageCell" forIndexPath:indexPath];
    if (cell == nil)
        cell = [[[NSBundle mainBundle] loadNibNamed:@"ImageCell" owner:self options:nil] objectAtIndex:0];

    cell.imgView.image = [UIImage imageNamed:@"1.png"];
    [cell.btnDelete addTarget:self action:@selector(btnDeleteTapped:) forControlEvents:UIControlEventTouchUpInside];
    cell.btnDelete.tag = indexPath.row;
    return cell;
}

- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{

}

- (void)btnDeleteTapped:(UIButton*)sender{
    [_arrImages removeObjectAtIndex:sender.tag];
    [_collectionView reloadData];
}

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{
    CGFloat width = [UIScreen mainScreen].bounds.size.width-(EdgeInsets);
    return CGSizeMake(width/2, width/2);
}

May be this is helpful to you.

Upvotes: 0

Related Questions