Prison Cells? Customizing IOS Table View Cells - objective-c

I have the following code
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
static NSString *CellIdentifier = #"Cell";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
UIImage * i1 = [UIImage imageNamed: #"inc_01.png"];
UIImage * i2 = [UIImage imageNamed: #"inc_02.png"];
UIImage * i3 = [UIImage imageNamed: #"inc_04.png"];
UIImage * i5 = [UIImage imageNamed: #"inc_05.png"];
UIImage * i6 = [UIImage imageNamed: #"inc_06.png"];
UIImage * i7 = [UIImage imageNamed: #"inchd.png"];
if (cell == nil) {
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
}
if(indexPath.row == 0)
{
UIImageView * header= [[UIImageView alloc] initWithImage: i1];
cell.backgroundView = header;
// Configure the cell…
}
else if (indexPath.row == 2)
{
UIImageView *backgroundCellImage=[[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 280, 11)];
backgroundCellImage.image=[UIImage imageNamed:#"inc_06.png"];
[cell.contentView addSubview:backgroundCellImage];
}
else
{
// Configure the cell…
UIImageView *imageView = [[UIImageView alloc] initWithImage: i3];
cell.textLabel.text = #"text";
UIImageView *backgroundCellImage=[[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 57, 46)];
backgroundCellImage.image=[UIImage imageNamed:#"inc_02.png"];
UIImageView *backgroundCellImage2=[[UIImageView alloc] initWithFrame:CGRectMake(223, 0, 57, 46)];
backgroundCellImage2.image=[UIImage imageNamed:#"inc_04.png"];
UILabel * label = [[UILabel alloc] initWithFrame:CGRectMake(57, 0, 166, 46)];
label.text = #"wow";
[cell.contentView addSubview:backgroundCellImage];
[cell.contentView addSubview:backgroundCellImage2];
[cell.contentView addSubview:label];
}
return cell;
}
that basically creates a table view and puts an image to the left and right of each cell. I want it so that people can click on the left or right image in each cell, and something different happens based on the cell number.
So if they click on the left image for cell in row 1, a function gets call with the row number they clicked on, and an indicator telling me they clicked on the left image and not the right image.
How can I do that using objective-c?

Make a custom prototype cell as follows
---------------------------------------
| Button 1 | Text | Button 2 |
---------------------------------------
Call different methods for both the buttons.
Alternatively, you can have a look at this official documentation which explains cells in detail
Add right image as an accessory view and left image as an editing control

Related

xCode: TableView cant see/acces all cells

When I press a button called "AllOK" I want the object.selectedIndex to be 0. This works perfectly with the cells that is visible. But it won't acces the cells which isn't viewable on the app / screen. If you scroll down and get vision of them, it will check them, but i want it to do it, without having to scroll down.
Do anyone know how to get the tableview to know that it "also" got the cells that it cannot see?
My code for my tableview and for the button:
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:#"FancyCell"];
cell = nil;
if (!cell) {
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:#"FancyCell"];
cell.accessoryType = UITableViewCellAccessoryDetailDisclosureButton;
// add the segmentedControl when you create a new cell
UIImage *correctImageGreen = [[UIImage imageNamed:#"green.png"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
UIImage *correctImageGul = [[UIImage imageNamed:#"gul.png"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
UIImage *correctImageRed = [[UIImage imageNamed:#"red.png"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
UIImage *correctImageGray = [[UIImage imageNamed:#"gray.png"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
NSArray *itemArray = [NSArray arrayWithObjects: correctImageGreen, correctImageGul, correctImageRed, correctImageGray, nil];
UISegmentedControl *segmentedControl = [[UISegmentedControl alloc] initWithItems:itemArray];
segmentedControl.frame = CGRectMake(310, 7, 150, 30);
[cell.contentView addSubview:segmentedControl];
// add an action so we can change our model if the view changes
[segmentedControl addTarget:self action:#selector(didChangeSegmentedControl:) forControlEvents:UIControlEventValueChanged];
// use a tag so we can retrieve the segmentedControl later
segmentedControl.tag = 42;
}
// either if the cell could be dequeued or you created a new cell,
// segmentedControl will contain a valid instance
UISegmentedControl *segmentedControl = (UISegmentedControl *)[cell.contentView viewWithTag:42];
UIImage *comment = [UIImage imageNamed:#"Checkmark-hvid"];
UIImage *imageRef = [UIImage imageNamed:#"Checkmark-hvid"];
UIImageView *commentView = [[UIImageView alloc] initWithImage: comment];
UIImageView *imageRefView = [[UIImageView alloc] initWithImage: imageRef];
commentView.frame = CGRectMake(625, 5, 30, 30);
imageRefView.frame = CGRectMake(515, 5, 30, 30);
commentView.tag = 98;
imageRefView.tag = 99;
NSUserDefaults *defaults = [NSUserDefaults standardUserDefaults];
boolean_t didGetStates = [defaults boolForKey:#"didGetStates"];
MBFancyObject *object = _objects[indexPath.row];
if (didGetStates) {
// State
NSDictionary *dic = [tableData objectAtIndex:indexPath.row];
if (object.beingEdited == -1) {
int selectedState = [[dic valueForKey:#"State"] intValue];
object.selectedIndex = selectedState;
}
// Comment & ImageRef
int comment = [[dic valueForKey:#"Comment"] intValue];
int imageRef = [[dic valueForKey:#"Foto"] intValue];
if (comment == 0) {
[cell.contentView addSubview:commentView];
}
else {
[[cell.contentView viewWithTag:98]removeFromSuperview];
}
if (imageRef == 0) {
[cell.contentView addSubview:imageRefView];
}
else {
[[cell.contentView viewWithTag:99]removeFromSuperview];
}
}
cell.textLabel.text = object.title;
cell.selectionStyle = UITableViewCellSelectionStyleNone;
segmentedControl.selectedSegmentIndex = object.selectedIndex;
object.currentIndexRow = indexPath.row;
cell.backgroundColor = [UIColor clearColor];
cell.textLabel.textColor = [UIColor whiteColor];
return cell;
}
- (IBAction)allOK:(id)sender {
for (MBFancyObject *object in _objects) {
object.selectedIndex = 0;
object.beingEdited = 0;
}
[[self tableView] reloadData];
}
So I hadn't noticed this at my first comment, but your problem here is obvious. You are not properly dequeueing cells from the cell pool, and therefore when you scroll, you are creating a brand new cell EVERY time, which causes them not to have your selected index the way you want. I am pretty sure that your solution lies right here:
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:#"FancyCell"];
cell = nil;
if (!cell) {
You are dequeuing a cell properly, but then immediately setting it to nil, meaning it will ALWAYS go through the !cell check and will ALWAYS create a new cell. Try removing this line and working with the dequeued cell.
Edit:
Since that didn't do it, this is what else I would try:
Create a call to the method willDisplayCell:forRowAtIndexPath:, and in this call check a boolean flag that you set to see if the segmented control at that index should be at index 0 or not. So basically whenever a cell is about to be shown, you check if it's segmented control should be set to index 0, and if it should, set it's index to 0.

Custom tableview cell with 6 imageviews

I have a very difficult problem. This is how my custom cell looks like.
|--------------------------------------------------------------------------|
| |
| |
| Imageview1 Imageview2 Imageview3 Imageview4 imageview5 |
| |
| |
| |
|--------------------------------------------------------------------------|
I have a core database with 20 images. What I want to do is to fill up all these imageviews with my images. So at the and I should have 5 rows with in each imageview a different image.
Here is my code for my cellforrowAtIndexpath
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *CellIdentifier = #"Cell";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil) {
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
}
for(int i=0;i<5;i++)
{
float xCoord = 0.0;
Team *team = [self.fetchedResultsController objectAtIndexPath:indexPath];
NSData* imageData = [[NSData alloc] initWithContentsOfURL:[NSURL URLWithString:team.image]];
UIImage* image = [[UIImage alloc] initWithData:imageData];
UIImageView* imgView = [[UIImageView alloc] initWithImage:image];
[imgView setFrame:CGRectMake(xCoord,0,imgView.frame.size.width, imgView.frame.size.height)];
[cell.contentView addSubview:imgView];
xCoord += imgView.frame.size.width;
}
return cell;
}
This is how far i got. I don't now how to fill up this tableview correctly. The other imageviews are name img_Player2,img_Player3,img_Player4,img_Player5.
Can anybody help?
Thank you
SCREENS WITH WHAT I WANT TO ACHIEVE
This is what I want to achieve:
And at the moment I have this.
You need to add the UIImageViews to the contentView of the UITableViewCell. Let's assume your 5 images are loaded in an NSArray called imagesArray. For simplicity I'm assuming each of your images is 64 (320/5) pixels wide and 44 pixels high.
Your code inside cellForRowAtIndexPath should roughly look like this:
float xCoord = 0.0;
for (UIImageView *imgView in imagesArray)
{
[imgView setFrame:CGRectMake(xCoord,0,imgView.frame.size.width, imgView.frame.size.height)];
[cell.contentView addSubview:imgView];
xCoord += imgView.frame.size.width;
}
Your code will be this:
float xCoord = 0.0;
for(int i=0;i<5;i++)
{
Team *team = [self.fetchedResultsController objectAtIndexPath:indexPath];
NSData* imageData = [[NSData alloc] initWithContentsOfURL:[NSURL URLWithString:team.image]];
UIImageView* imgView = [[UIImageView alloc] initWithImage:[UIImage imageWithData:imageData]];
[imgView setFrame:CGRectMake(xCoord,0,imgView.frame.size.width, imgView.frame.size.height)];
[cell.contentView addSubview:imgView];
xCoord += imgView.frame.size.width;
}

UITableViewCell with images in different dimensions

I'm trying to use my ReusableCell for cells with images in different dimensions. The images are put inside a 220x150 black box with with scaling UIViewContentModeScaleAspectFit.
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *CellIdentifier = #"NewsTableViewCell";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil) {
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
}
NewsItem *item = [self.fetchedResultsController objectAtIndexPath:indexPath];
NSData *data = [NSData dataWithContentsOfURL:[NSURL URLWithString:item.imageUrl]];
[cell.imageView setImage:[[UIImage alloc] initWithData:data]];
[cell.imageView setBackgroundColor:[UIColor blackColor]];
[cell.imageView setContentMode:UIViewContentModeScaleAspectFit];
CGRect imageViewFrame = cell.imageView.frame;
imageViewFrame.size.width = 220;
imageViewFrame.size.height = 150
[cell.imageView setFrame:imageViewFrame];
[cell.textLabel setText:item.title];
return cell;
}
The above code results in a layout like below and the images are sometimes changing when scrolling in the table view.
Instead of this unstructured layout, I would like the images to be aligned like this:
What am I doing wrong with this ReusableCell?
EDIT1:
I'm trying to create an imageView and add this imageView as a superview to cell.contentView.
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *CellIdentifier = #"NewsTableViewCell";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil) {
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
}
NewsItem *item = [self.fetchedResultsController objectAtIndexPath:indexPath];
UIImage *placeholderImage = [UIImage imageNamed:#"ImagePlaceholderThumb"]; //220x150
UIImageView *imageView = [[UIImageView alloc] initWithImage:placeholderImage];
NSData *data = [NSData dataWithContentsOfURL:[NSURL URLWithString:item.imageUrl]];
[imageView setImage:[[UIImage alloc] initWithData:data]];
[imageView setBackgroundColor:[UIColor blackColor]];
[imageView setContentMode:UIViewContentModeScaleAspectFit];
CGRect imageViewFrame = imageView.frame;
imageViewFrame.size.width = placeholderImage.size.width;
imageViewFrame.size.height = placeholderImage.size.height;
[imageView setFrame:imageViewFrame];
[cell.contentView addSubview:imageView];
[cell.textLabel setText:item.title];
return cell;
}
The above code results in the following:
It is like some of the images are visible in two cells. It seems that they are not keeping the size I've set in the imageViewFrame. Do you know why?
A quick fix would be using content mode UIViewContentModeScaleAspectFill. Images will be stretched in one or both dimensions to fill up the whole image view bounds.
You really need subclassing UITableViewCell to do this right.
Thre is a lazy solution adding a new UIImageView and using a spacer, as Keller told you in his answer (feel free to accept his answer, this is just the missing code).
Extract of tableView:cellForRowAtIndexPath::
...
cell.textLabel.text = [NSString stringWithFormat:#"Cell #%i", indexPath.row];
cell.imageView.image = [UIImage imageNamed:#"spacer.png"]; /* spacer is 64 x 44 */
/* image view width should be ~ 64 px, otherwise it will overlap the text */
UIImageView *iv = [[UIImageView alloc] initWithFrame:(CGRect){.size={64, tableView.rowHeight}}];
switch (indexPath.row) {
case 0:
iv.image = [UIImage imageNamed:#"waterfall.png"];
break;
/* etc... */
}
if (indexPath.row < 3) {
/* add black bg to cell w/ images */
iv.backgroundColor = [UIColor blackColor];
}
iv.contentMode = UIViewContentModeScaleAspectFit;
[cell.contentView addSubview:iv];
...
The table will look like this:
You need to set the placeholder (spacer.png above) in the existing cell image view. It will push the text label to the right.
You can use aspect fill and remove the background color bit:
iv.contentMode = UIViewContentModeScaleAspectFill;
The table will look wrong because the image is drawn outsite the bounds:
Just clip to bounds to get a better result:
iv.clipsToBounds = YES;
Create a UIImageView subview for each cell and it to the contentView. Each UIImageView contains an image with a consistent frame but with option UIViewContentModeScaleAspectFit. Then just Set the background color of the UIImageView to black.
I just confirmed this works, but you need to also create a placeholder spacer image to make sure the textLabel moves out of the way. Just make it the same dimensions of your image (with the letter boxing).
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *CellIdentifier = #"Cell";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil) {
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
//spacer
cell.imageView.image = [UIImage imageNamed:#"placeholder"];
//imageview
UIImageView *thumbnail = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 80, 44)];
thumbnail.tag = kThumbTag;
thumbnail.backgroundColor = [UIColor blackColor];
thumbnail.contentMode = UIViewContentModeScaleAspectFit;
[cell.contentView addSubview:thumbnail];
}
// Configure the cell...
cell.textLabel.text = [NSString stringWithFormat:#"Cell %d", indexPath.row];
cell.imageView.frame = CGRectMake(0, 0, 80, 44);
UIImageView *thumb = (UIImageView*)[cell.contentView viewWithTag:kThumbTag];
if (indexPath.row == 0) {
[thumb setImage:[UIImage imageNamed:#"image1.png"]];
} else {
[thumb setImage:[UIImage imageNamed:#"image2.png"]];
}
return cell;
}
Obviously, this example isn't lazy loading the images (I didn't realize you were loading them from a URL). For that, I would use a subclass with EGOImageView or something of the like.

image getting overlaped in table view cell

I m parsing a json feed and populating my table view.if my parsed value is "1" and if its for the first four rows of table view cell.i got to make a green checkmark and if its not for the first four rows the checkmark got to be grey check.if my parsed value is null.i got to make no checkmark.everthng works fine.but if i scroll my table view .the check mark images gets overlaped.below is the screen shot and the code.
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
//[tableView setSeparatorStyle:UITableViewCellSeparatorStyleNone];
static NSString *CellIdentifier = #"Cell";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil) {
cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:CellIdentifier] autorelease];
}
NSDictionary *boy=[self.media1 objectAtIndex:indexPath.row];
NSString *str=[[NSString alloc]initWithFormat:#"%#",boy];
if ([str isEqualToString:#"1"])
{
if(indexPath.row==0||indexPath.row==1||indexPath.row==2||indexPath.row==3)
{
CGRect starFrame = CGRectMake(260, 18, 50, 40);
UIImageView *starImage = [[[UIImageView alloc] initWithFrame:starFrame] autorelease];
starImage.image = [UIImage imageNamed:#"tic.png"];
[cell.contentView addSubview:starImage];
}
else
{
CGRect starFrame1 = CGRectMake(260, 18, 50, 40);
UIImageView *starImage1 = [[[UIImageView alloc] initWithFrame:starFrame1] autorelease];
starImage1.image = [UIImage imageNamed:#"brrr.png"];
[cell.contentView addSubview:starImage1];
}
}
cell.textLabel.text=[story objectAtIndex:indexPath.row];
return cell;
}
You are reusing the cell. So, tableView will return used cell once they are not visible.
To avoid this problem, you should right below code.
if ([str isEqualToString:#"1"])
{
if(indexPath.row==0||indexPath.row==1||indexPath.row==2||indexPath.row==3)
{
CGRect starFrame = CGRectMake(260, 18, 50, 40);
UIImageView *starImage = [[[UIImageView alloc] initWithFrame:starFrame] autorelease];
starImage.image = [UIImage imageNamed:#"tic.png"];
starImage.tag = 1000;
[cell.contentView addSubview:starImage];
}
else
{
CGRect starFrame1 = CGRectMake(260, 18, 50, 40);
UIImageView *starImage1 = [[[UIImageView alloc] initWithFrame:starFrame1] autorelease];
starImage1.image = [UIImage imageNamed:#"brrr.png"];
starImage.tag = 1000;
[cell.contentView addSubview:starImage1];
}
}
else
{
UIImageView *starImage1 = [cell.contentView viewWithTag:1000];
starImage1.image = nil;
}
Use the following code,
if ([str isEqualToString:#"1"])
{
if(indexPath.row==0||indexPath.row==1||indexPath.row==2||indexPath.row==3)
{
CGRect starFrame = CGRectMake(260, 18, 50, 40);
UIImageView *starImage = [[[UIImageView alloc] initWithFrame:starFrame] autorelease];
starImage.image = [UIImage imageNamed:#"tic.png"];
starImage.tag = 1000;
[cell.contentView addSubview:starImage];
}
else
{
CGRect starFrame1 = CGRectMake(260, 18, 50, 40);
UIImageView *starImage1 = [[[UIImageView alloc] initWithFrame:starFrame1] autorelease];
starImage1.image = [UIImage imageNamed:#"brrr.png"];
starImage1.tag = 1000;
[cell.contentView addSubview:starImage1];
}
}
else
{
UIImageView *starImage = [cell.contentView viewWithTag:1000];
if (starImage) {
[starImage removeFromSuperview];
}
}

Programmatically Add Image to TableView Cell

I have a UITableView that gets information from a server and publishes the data into a table view. Inside of each cell is the information from the server.
For the purpose of this example, let's say the information we get from the server are numbers: 1, 2, 3, 4.
What I want to do is add an image (programmatically because there are if statements involved, etc) to the left side of the cell, and the text (1, 2, etc) right next to it.
Basically, I want each cell to look like this:
_____________________________________
| (IMAGE) (TEXT) | --CELL 0
--------------------------------------
_____________________________________
| (IMAGE) 2 | --CELL 1
--------------------------------------
Please excuse my crude illustration. :)
here you go:
cell.imageView.image = [UIImage imageNamed:#"image.png"];
Swift:
cell.imageView?.image = UIImage(named: "image.png")
You can add both the image and the text to the UITableViewCell in your UITableViewController subclass like so:
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
static NSString *CellIdentifier = #"Cell";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil) {
cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier] autorelease];
}
[[cell imageView] setImage:anImage];
[[cell textLabel] setText:[NSString stringWithFormat:#"%d",[indexPath row]];
return cell;
}
There are a few "built-in" properties to UITableViewCell that you can take advantage of, such as the imageView, textLabel, and detailTextLabel. For more information, check out the Table View Programming Guide.
The Swift 2.0 version of the first answer is:
cell.imageView?.image = UIImage(named: "image.png")
UITableViewCell objects have an imageView property; you can just set this image view's image and it will automatically display the image in the right place with the title next to it.
// create a rectangle box for image view
UIImageView *iconImage = [[UIImageView alloc] init];
iconImage.frame = CGRectMake(12,4,53.5,53.5);
// Create a label for cells
UILabel *cellName = [[UILabel alloc] initWithFrame:CGRectMake(75,18,200,20)];
cellName.font = [self fontForBodyTextStyle];
NSString *cellNameStr = [NSString stringWithFormat:#"%#",self.tableCellNames[indexPath.row]];
// Select path row tab actions
switch (indexPath.row) {
case 0:
cellName.text = cellNameStr;
iconImage.image = [UIImage imageNamed:#"condition.png"];
[cell.contentView addSubview:iconImage];
[cell.contentView addSubview:cellName];
break;
case 1:
cellName.text = cellNameStr;
iconImage.image = [UIImage imageNamed:#"videos.png"];
[cell.contentView addSubview:iconImage];
[cell.contentView addSubview:cellName];
break;
case 2:
cellName.text = cellNameStr;
iconImage.image = [UIImage imageNamed:#"provider.png"];
[cell.contentView addSubview:iconImage];
[cell.contentView addSubview:cellName];
break;
case 3:
cellName.text = cellNameStr;
iconImage.image = [UIImage imageNamed:#"info.png"];
[cell.contentView addSubview:iconImage];
[cell.contentView addSubview:cellName];
break;
default:
NSAssert(NO, #"Unhandled value in cellForRowAtIndexPath");
break;
}