add image to uitableview cell - ios

I have a tableview, how can I add image to the left of this cells?

cell.imageView.image = [UIImage imageNamed:#"image.png"];
UPDATE:
Like Steven Fisher said, this should only work for cells with style UITableViewCellStyleDefault which is the default style. For other styles, you'd need to add a UIImageView to the cell's contentView.

Try this code:--
UIImageView *imv = [[UIImageView alloc]initWithFrame:CGRectMake(3,2, 20, 25)];
imv.image=[UIImage imageNamed:#"arrow2.png"];
[cell addSubview:imv];
[imv release];

Standard UITableViewCell already contains UIImageView that appears to the left to all your labels if its image is set. You can access it using imageView property:
cell.imageView.image = someImage;
If for some reason standard behavior does not suit your needs (note that you can customize properties of that standard image view) then you can add your own UIImageView to the cell as Aman suggested in his answer. But in that approach you'll have to manage cell's layout yourself (e.g. make sure that cell labels do not overlap image). And do not add subviews to the cell directly - add them to cell's contentView:
// DO NOT!
[cell addSubview:imv];
// DO:
[cell.contentView addSubview:imv];

For my fellow Swift users, here is the code you will need:
let imageName = "un-child-rights.jpg"
let image = UIImage(named: imageName)
cell.imageView!.image = image

Swift 4 solution:
cell.imageView?.image = UIImage(named: "yourImageName")

Swift 5 solution
cell.imageView?.image = UIImage.init(named: "yourImageName")

All good answers from others. Here are two ways you can solve this:
Directly from the code where you will have to programmatically control the dimensions of the imageview
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "xyz", for: indexPath)
...
cell.imageView!.image = UIImage(named: "xyz") // if retrieving the image from the assets folder
return cell
}
From the story board, where you can use the attribute inspector & size inspector in the utility pane to adjust positioning, add constraints and specify dimensions
In the storyboard, add an imageView object in to the cell's content view with your desired dimensions and add a tag to the view(imageView) in the attribute inspector. Then do the following in your viewController
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "xyz", for: indexPath)
...
let pictureView = cell.viewWithTag(119) as! UIImageView //let's assume the tag is set to 119
pictureView.image = UIImage(named: "xyz") // if retrieving the image from the assets folder
return cell
}

Related

Can't make ImageView a circle in a Custom Table View Cell

I am trying to display a rounded image for every custom cell in a table view. I am already changing its cornerRadius, but for some reason the image still will appear fully - even when the ImageView's borders are already set round.
Here's a piece of the code:
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> CustomTableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "celda", for: indexPath) as! CustomTableViewCell
cell.imgView.layer.borderWidth = 1
cell.imgView.layer.borderColor = UIColor.black.cgColor
cell.imgView.layer.cornerRadius = cell.imgView.frame.height/2
//...the rest of function
//image is added to imgView eventually
}
And here is the result in the sim
I tried putting the code in override func awakeFromNib in the cell file but I had the same result.
Any advice is welcome :)
Please try this code by following step:
step1:
Make the height and width same of image view. Add the 1:1 ratio in storyboard in image view for equal height and width.
step2:
cell.imgView.layer.cornerRadius = cell.imgView.frame.height/2
cell.imgView.clipsToBounds = true
It may helps you.Thank you.

Swift: Images placed in a tableviewcell are not visible

public func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = UITableViewCell(style: UITableViewCellStyle.default, reuseIdentifier: "approve_cell");
let event = self.events[indexPath.row];
cell.textLabel?.text = event.name;
return cell;
}
I placed 2 images and a label in tableviewcell. When i run the app, images are not visible. What could be the reason?
Check that you are not using the basic style of the UITableViewCell because if you are then that style only includes labels.. no image views. Change it to subtitle or one of the details.
For reference, see: https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/TableView_iPhone/TableViewCells/TableViewCells.html
You probably forgot to set AutoLayoutConstraints of your image view. You could either add constraints to that image view through storyboard or through code. The other method is setting the frame of your image view in -(void)viewDidLayoutSubviews, because when you're using auto-layout, the layout of those views will be undefined if its constraints doesn't fulfill system's computing need. So you should either set right constraints or give a specific frame to those undefined views after all of the others has-constraints-views are arranged.
You creat cell in storyboard but you never use this cell created from storyboard. instead you manually creat it by UITableViewCell's designated initializer without override layout method of it.
public func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "approve_cell", for: indexPath)
let event = self.events[indexPath.row];
cell.textLabel?.text = event.name;
return cell;
}
You need to set either Autolayout or used Autoresizing. For autolayout just pinned the proper leading, trailing, top and bottom constraint.

Getting desired size of UIButton (that contains an image) in a Table View

a little new to Swift but as mentioned I have Table View in which each cell contains a button (in the form of an image) but I'm having trouble getting the correct cell size. The cell's height is always way to high, here's a picture of what I'm seeing.
as you can see the button's image / cell is elongated. How can I get each cell/button to be a more appropriate size?
Here's the code where I'm creating the cells
override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCellWithIdentifier("SportsCell", forIndexPath: indexPath) as! SportTableViewCell
let index = mlbLogos.startIndex.advancedBy(indexPath.row)
cell.logoButton.setImage(mlbLogos.values[index], forState: UIControlState.Normal)
cell.logoButton.contentMode = UIViewContentMode.ScaleAspectFit
cell.logoButton.frame = CGRect(x: 0,y: 0,width: 32,height: 32)
return cell
}
EDIT: As far as storyboard constraints, I'm simply centering the UIButton in the prototype cell and expanding the button to be as large as the cell, then I just use the suggested constraints

How to redesign horizontal cells to vertical cells

This is what all of my cells look like. With some information displayed on right hand side of the cell. Instead of this design with a circular radius image on the left hand side and information on the right hand.I want my cells to be an Image and the information to be on top of that image.
This is the type of style I want on my cells to have, without the space in between images, I gave this an attempt by removing the information labels and using a horizontal Stack View on the cell.
But this is what the cells ended up looking like. For the radius of the image I didn't do it programatically I did trough the Identity Inspector
Keypath layer.cornerRadius
Type Number
Value 30
which makes the images round. Other than that there's no much code involved in the tableView, It's all mostly done trough the Main.StoryBoard, below I added some code showing how I configured the cells. Any tips or ideas on how I can accomplish this?
override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
let cellIdentifier = "Cell"
let cell = tableView.dequeueReusableCellWithIdentifier(cellIdentifier, forIndexPath: indexPath) as! RestaurantTableViewCell
//* Configure the cell...
cell.nameLabel.text = restaurants[indexPath.row].name
cell.thumbnailImageView.image = UIImage(named: restaurants[indexPath.row].image)
cell.locationLabel.text = restaurants[indexPath.row].location
cell.typeLabel.text = restaurants[indexPath.row].type
cell.accessoryType = restaurants[indexPath.row].isVisited ? .Checkmark : .None
return cell
}
If you want the cell to show an image and then show text on top of that image, I'd suggest you set the image as the cell background view (rounding the corners if needed) and then populate your labels and accessory view as you are already doing.
override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
let dictData : NSDictionary = arrayOfData.objectAtIndex(indexPath.row) as! NSDictionary
let cell = tableView.dequeueReusableCellWithIdentifier("Cell", forIndexPath: indexPath)
cell.textLabel?.text = "THIS IS SOME TEXT"
if let image = dictData.objectForKey("Image"){
cell.backgroundColor = UIColor.clearColor()
let imageView = UIImageView(image: image as? UIImage)
imageView.layer.cornerRadius = 30.0
imageView.clipsToBounds = true
cell.backgroundView = imageView
}
return cell
}
That will give you text on top of an image :
So it looks like you use AutoLayout problem here is that you have right constraint. You can try removing constraint and set fixed width.
Step 1: Add UITableView and add constraints
Step 2: Add UIImageView and set it to "Aspect Fill" Otherwise your rounded corner image will not cover whole cell. (You can also set it to "Aspect fit" if you want). And add constraints as shown in image.
Step 3: Add labels and other information and also add constraints according to your requirement.

Trying to get full-size cell images on table view

So I have this going on by using regular image views and buttons to work:
But now I want it to bounce as the user scrolls, any ideas on how to get this going? I've tried using the table view but I can't figure out how to get the images to be the background. Any perks between using a table view and the current method I'm using? This is a learning experience for me, and that's the whole point of the project. Any help would be appreciated, thanks in advance.
Here is one way to achieve what you want (change image names accordingly):
cell.contentView.backgroundColor = UIColor(patternImage: UIImage(named: "NewYork")!)
For example:
override func tableView(tableView: UITableView, willDisplayCell cell: UITableViewCell, forRowAtIndexPath indexPath: NSIndexPath) {
switch indexPath.row{
case 0:
cell.contentView.backgroundColor = UIColor(patternImage: UIImage(named: "NewYork")!)
case 1:
cell.contentView.backgroundColor = UIColor(patternImage: UIImage(named: "LA")!)
case 2:
cell.contentView.backgroundColor = UIColor(patternImage: UIImage(named: "Miami")!)
default:
cell.contentView.backgroundColor = UIColor(patternImage: UIImage(named: "default")!)
}
}
You can also set it inside of cellForRowAtIndexPath the same way.
The disadvantage of this is the image either needs to be a repeating pattern or fit the cell size exactly which isn't very flexible for different size devices.
Another option is to use a custom table cell and create a UIImageView the same size as the cell. Here is a tutorial link describing how to create a custom cell. Now you can just set the image in your cellForRowAtIndexPath similar to this:
override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCellWithIdentifier("MyCustomCell", forIndexPath: indexPath) as! CustomTableViewCell
switch indexPath.row{
case 0:
cell.img_Thumbnail?.image = UIImage(named: "NewYork")
case 1:
cell.img_Thumbnail?.image = UIImage(named: "LA")
case 2:
cell.img_Thumbnail?.image = UIImage(named: "Miami")
default:
cell.img_Thumbnail?.image = UIImage(named: "default")
}
return cell
}

Resources