Dynamically add image view in Custom cell and assign image to it - iphone

Question

I am facing lots of problem.. i am new to ios development so any help is appreciated.
Problem 1st
I want to display N number of image-view+label over yellow and blue image In custom cell.
I have to parse that how many Number of Image view will be shown on every row and according to that i have to assign image to every image-view in my custom cell. how can i do that?
I fetch image links from database and store it into array but how can i apply links to particular image-view in row.
Just need hints to build above User Interface in iOS.
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *CellIdentifierLeft = #"lefthand";
static NSString *CellIdentifierRight = #"righthand";
if (indexPath.row % 2 == 1) // to get two custom cell vice versa.
{
LeftCell = [tableView dequeueReusableCellWithIdentifier:CellIdentifierLeft];
if (LeftCell == nil)
{
LeftCell = [[customCellLeft alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifierLeft row:indexPath.row];
LeftCell.scrollView = [[cellScrollViewClass alloc] initWithFrame:CGRectMake(0,14,1024,187)];
}
LeftCell.videoImageView1.tag=[ImageLinkArray objectAtIndex:indexPath.row];
LeftCell.label1.text=[TitleArray objectAtIndex:indexPath.row];
return LeftCell;
}
else
{
RightCell = [tableView dequeueReusableCellWithIdentifier:CellIdentifierRight];
if(RightCell == nil)
{
RightCell =[[customCellRight alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifierRight];
RightCell.scrollView = [[cellScrollViewClass alloc] initWithFrame:CGRectMake(0,14,1024,187)];
}
RightCell.videoImageView1.tag=[ImageLinkArray objectAtIndex:indexPath.row];
RightCell.label1.text=[TitleArray objectAtIndex:indexPath.row];
return RightCell;
}
Custom cell class code...
- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier row:(int)row
{
self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
if (self) {
int indexNumber; // variable to store Array index number
int VideoNumber=3; // imageview in particular cell + Train Engine.
scrollView = [[cellScrollViewClass alloc] initWithFrame:CGRectMake(33,14,958,187)]; // Scrollview
scrollView.scrollEnabled=YES;
scrollView.userInteractionEnabled=YES;
scrollView.showsHorizontalScrollIndicator=NO;
scrollView.contentSize = CGSizeMake((335*VideoNumber),187); // To make ContentSize for item to scroll
for (int i = 0; i < VideoNumber; i++)
{ // for loop to add 2 wagon view and 1 engine view on Left hand side Custom cell.
if(i==0) // to check first item must be train Engine
{
CGRect frame;
frame.origin.x = 0;
frame.origin.y = 18;
frame.size.width=186;
frame.size.height= 162;
UIView *EngineView = [[UIView alloc]initWithFrame:frame];
UIImageView *engineImageView = [[UIImageView alloc]initWithFrame:CGRectMake(0, 6, 186, 162)];
UIImage *Image = [UIImage imageNamed:#"loco_left.png"];
engineImageView.image = Image;
[EngineView addSubview:engineImageView];
[scrollView addSubview:EngineView]; // add 1st imageview that is Train Engine to first of scrollview
}
else
{ // else it must be wagon of train.
indexNumber=row*(VideoNumber-1)+(i-1);// to get Index Number of array to to display Images as per cell number
NSLog(#"at Normal row index number is %d",indexNumber);
CGRect frame;
frame.origin.x = (385*i)-432;
frame.origin.y = 18;
frame.size.width=385;
frame.size.height= 163;
UIView *wagon = [[UIView alloc]initWithFrame:frame];
UIImageView *wagonImage = [[UIImageView alloc]initWithFrame:CGRectMake(230, 6, 385, 163)];
UIImage *Image = [UIImage imageNamed:#"wagon_left.png"];
wagonImage.image = Image;
[wagon addSubview:wagonImage];
UIView *videoviewContainer = [[UIView alloc]initWithFrame:CGRectMake(15, 30, 190 , 200)];
videoImageView2 = [[UIImageView alloc]initWithFrame:CGRectMake(0,0, 190, 100)];
UIImage *bgImage = [UIImage imageNamed:#"video.png"];
videoImageView2.image = bgImage;
videoviewContainer.contentMode = UIViewContentModeLeft; // set Video Image view to left hand side of wagon UIView
videoImageView2.tag=indexNumber;
[videoviewContainer addSubview:videoImageView2];
UITapGestureRecognizer *video = [[UITapGestureRecognizer alloc] initWithTarget:self action:#selector(VideoItemOne:)];
[videoImageView2 addGestureRecognizer:video];
[videoImageView2 setMultipleTouchEnabled:YES];
[videoImageView2 setUserInteractionEnabled:YES];
UIView *textUiView = [[UIView alloc]initWithFrame:CGRectMake(208,28, 150 , 187)];
textUiView.contentMode = UIViewContentModeRight;
label2 = [[UILabel alloc]initWithFrame:CGRectMake(28,10, 150 , 87)];
label2.text=[TitleArray objectAtIndex:indexNumber];
label2.backgroundColor = [UIColor clearColor];
label2.textColor=[UIColor redColor];
label2.numberOfLines = 4;
[textUiView addSubview:label2];
[wagonImage addSubview:textUiView];
[wagonImage addSubview:videoviewContainer];
[scrollView addSubview:wagon];
}
}
[self.contentView addSubview:scrollView];
}
return self;
}
-(void)populateWithImage:myImage andText:myText
{
[videoImageView2 setImageWithURL:[NSURL URLWithString:myImage]
placeholderImage:[UIImage imageNamed:#"video.png"]];
}

Answer 1

Your custom cell should have the following: (note, you have to use a better naming convention and i am just giving an example)
Background Imageview (bgImage)
Main image View (mainImage)
UI Label (mainLabel)
In the init for this cell, based on the indexpath.row, either assign the left or right train image.
Also set the frames for main image view and the label.
MYCustomCell * cell;
if(indexPath.row %2)
{
cell = [tableView dequeueReusableCellWithIdentifier:"OddCell"];
if (cell == nil)
{
cell = [[MYCustomCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifierLeft row:indexPath.row];
}
}
else {
cell = [tableView dequeueReusableCellWithIdentifier:"EvenCell"];
if (cell == nil)
{
cell = [[MYCustomCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifierLeft row:indexPath.row];
}
}
[cell populateWithImage:myImage andText:myText]; //myImage and myText are to be gotten from the data source which in your case is ImageLinkArray and TitleArray
return cell;