UITableView row with image and label - ios

I'm a new programmer and I'd like to start with a app where to show a table with an image and a label (dynamic). I can do it wist static table but now I'd like to know how to make it with swift. I'm following various tutorial but all say a easy table only array with text...
I'm sure your help will be useful many new as me...
Tutorial, code, are good accept...
import UIKit
class FirstViewController: UIViewController,UITableViewDelegate {
#IBOutlet weak var smilefoto: UIImageView!
var cellContent = ["Rob", "Kirsten", "Tommy", "Ralphie"]
func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return cellContent.count
}
func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
let cell = UITableViewCell(style: UITableViewCellStyle.Default, reuseIdentifier: "tabella")
cell.textLabel?.text = cellContent[indexPath.row]
return cell
}
}

What you'll have to do is create a custom UITableViewCell class, where you can create an imageview and label and anything else.
You should check this tutorial out:
https://www.youtube.com/watch?v=JG_AMY_gSDQ
And when you've done this, you'll have access of every object in that cell through that class:
func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCellWithIdentifier("ProgramCell", forIndexPath: indexPath) as YourCustomTableViewCell
cell.yourCellImage = cellContent[indexPath.row].yourImage
return cell
}
Also dont forget to link the tableView outlet from the storyboard to this viewController and set the DataSource to self (inherits from UITableViewDataSource)

Related

Adding label to a prototype cell

I need to add a label to a prototype cell but I am getting the error "Value of type 'UITableViewCell' has no member 'movieTitleLabel'.
import UIKit
class FirstTableView: UITableViewController {
let model = MovieModel()
override func viewDidLoad() {
super.viewDidLoad()
}
override func numberOfSections(in tableView: UITableView) -> Int {
// #warning Incomplete implementation, return the number of sections
return 1
}
override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
// #warning Incomplete implementation, return the number of rows
return model.MovieArray.count
}
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "movieCells", for: indexPath) as! TableViewCell
cell.movieTitleLabel?.text = model.movieArray[indexPath.row]
return cell
}
I have the FirstTableView set as the delegate and datasource, in the editor.
I created a new subclass named: TableViewCell, linked the label to that class. Now I am at at loss as to how to output the movieArray to that label.
You forgot to downcast cell to your UITableViewCell subclass so you have reference just to superclass UITableVoewCell and this superclass hasn’t any movieTitleLabel.
To fix this, add as! YourTableViewCellSubclass to the end of the line where you dequeue cell
let cell = tableView.dequeueReusableCell(withIdentifier: "movieCells", for: indexPath) as! YourTableViewCellSubclass
Look out into these points:
You have created an outlet of the label named as 'movieTitleLabel' in ViewController, but this label should be in TableCell class. Make correct reference of this label.
After the first point, now to access this label, follow this code:
Code:
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "YourTableCellIdentifier", for: indexPath) as! YourTableCellClass
cell.movieTitleLabel.text = "Text" // Set your text here now
return cell
}
Your prototype cell should have specified an implementation class - this must be a subclass of UITableViewCell. If you've done this, downcast the result of dequeueReusableCell to this class.
You should also have connected the movieTitleLabel outlet in that class to the label in the storyboard. It looks from the above as if you've connected it to the UITableViewController instead (#IBOutlet weak var movieTitleLabel: UILabel!). You should remove this from the VC and only have it in the UITableViewCell class.

Custom height not being applied to UITableView Prototype Cell

I am building a table view scene and I have defined a custom height for the prototype cell. I have created a file for the custom cell and added an image and two labels via IBOutlets in that file. I have wired the table view and the table is calling in the information, however the height is not being applied. Here is my syntax for the cell class and the cellForRow method.
TableView Article Object:
import Foundation
import UIKit
class FeedItem {
var feedItemTitle: String
var feedItemImage: UIImage
var feedItemExcerpt: String = "Lorem ipsum dolor amet flexitarian art party skateboard, ethical pop-up drinking vinegar readymade humblebrag hot chicken. Retro kogi quinoa..."
var feedItemLike: UIImage
var feedItemComment: UIImage
init(feedItemTitle: String, feedItemImage: UIImage, feedItemLike: UIImage, feedItemComment: UIImage) {
self.feedItemTitle = feedItemTitle
self.feedItemImage = feedItemImage
self.feedItemLike = feedItemLike
self.feedItemComment = feedItemComment
}
}
TableView Cell:
import UIKit
class FeedTableViewCell: UITableViewCell {
#IBOutlet weak var articleImageView: UIImageView!
#IBOutlet weak var articleTitleLabel: UILabel!
#IBOutlet weak var articleExcerptLabel: UILabel!
}
TableView Extension:
extension NewFeedViewController: UITableViewDelegate, UITableViewDataSource {
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return articlesArray.count
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "Article Cell", for: indexPath) as! FeedTableViewCell
cell.articleImageView.image = articlesArray[indexPath.row].feedItemImage
cell.articleTitleLabel.text = articlesArray[indexPath.row].feedItemTitle
cell.articleExcerptLabel.text = articlesArray[indexPath.row].feedItemExcerpt
return cell
}
}
Here is a screenshot of what the table view looks like when the app is ran:
Here is a screenshot of the Prototype cell and the Size Inspector in Xcode:
Use this property
self.table.estimatedRowHeight = 44.0
self.table.rowHeight = UITableViewAutomaticDimension
Or even you can use delegates also
func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
return UITableViewAutomaticDimension
}
func tableView(_ tableView: UITableView, estimatedHeightForRowAt indexPath: IndexPath) -> CGFloat {
return 44
}
You have to explicitly specify row height in delegate method. Just like this:
func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat
{
return 100.0;//Choose your custom row height
}
In viewDidLoad() use
tableView.rowHeight = 400
Hope it helps!
1- use dynamic tableView like that in viewDidLoad
tableView.estimatedRowHeight = 400;
tableView.rowHeight = UITableViewAutomaticDimension;
2- don't implement hightforCellAtIndexpath
3- adjust constraints properly in cell xib from top to bottom
4- regarding the collectionview , imageView and reply section give them all a height constraint of zero initially then, hook the height constraint for each on as IBOulet and change it's constant value in cellForRowAtIndexpath according to the current item manage the hide/show by changing the corresponding constant value of the constraint
5- before return cell do this
cell.layoutSubviews()
cell.layoutIfNeeded()
return cell
so cell can be relayouted to reflect the change of it's subviews's constraints
Use Delegate method with heightForRowAt of you UITableView -
func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat
{
return 130.0;
}

implementing UITextFieldDelegate

I want to use https://github.com/intuit/AnimatedFormFieldTableViewCell in my project but I can’t get my head around the steps for setting it up. So far, I’ve dragged the files from the folder and followed the steps as:
In order to use AnimatedFormFieldTableViewCell, all you have to do is:
1) Register the AnimatedFormFieldTableViewCell nib on the ViewController on which you are implementing your UITableView for your reuse identifier.
override func viewDidLoad() {
super.viewDidLoad()
self.tableView.registerCellNib(AnimatedFormFieldTableViewCell)
tableView.reloadData()
}
2) Dequeue your cell on CellForRowAtIndexPath as a AnimatedFormFieldTableViewCell.
func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
let cellIdentifier = "cell"
let cell = tableView.dequeueReusableCellWithIdentifier(cellIdentifier, forIndexPath: indexPath) as! AnimatedFormFieldTableViewCell
return cell
}
3) Change the placeholder's label text by calling setLabelText on the cell itself.
func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
let cellIdentifier = "cell"
let cell = tableView.dequeueReusableCellWithIdentifier(cellIdentifier, forIndexPath: indexPath) as! AnimatedFormFieldTableViewCell
cell.setLabelText("Enter title")
return cell
}
Notes:
1) You can still implement UITextFieldDelegate the same way you would implement on a regular UITextField, you just need to define the AnimatedFormFieldTableViewCell's delegate (there is no need to directly define the delegate for the embedded UITextField).
2) In order to access the embedded UITextField you can simply call the cell's cellTextField property.
I don’t get these last two steps.
If I run my app, I get the unexpectedly found nil on self.cellTextfield.delegate = self in the AnimatedFormFieldTableViewCell class.
What am I missing?
Hi waseefakhtar your code does not miss anything. just the only problem is you registered the nib with the wrong way that's why you got the unexpectedly found nil error on self.cellTextfield.delegate = self.
try this code:
let myNib = UINib.init(nibName: "AnimatedFormFieldTableViewCell", bundle: nil)
self.tableView.registerNib(myNib, forCellReuseIdentifier: "cell")
PS: just be aware that registerNib method syntax can differ depending on the swift version
My code is here, I don't know where you clerical error, but you can check my code to find out:
import UIKit
class ViewController2: UIViewController, UITableViewDelegate, UITableViewDataSource {
#IBOutlet weak var tableView: UITableView!
override func viewDidLoad() {
super.viewDidLoad()
// register a nib like below
let nib:UINib = UINib.init(nibName: "AnimatedFormFieldTableViewCell", bundle: nil)
self.tableView.register(nib, forCellReuseIdentifier: "AnimatedFormFieldTableViewCell")
}
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return 3
}
func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
return 88.0
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "AnimatedFormFieldTableViewCell", for: indexPath as IndexPath) as! AnimatedFormFieldTableViewCell
cell.setLabelText("Enter title")
return cell
}
func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
tableView.deselectRow(at: indexPath, animated: true)
}
}
The result:
So, just check the steps, where you go wrong.
The documentation notes this:
There is no need to directly define the delegate for the embedded UITextField
The instruction is to do the following:
You just need to define the AnimatedFormFieldTableViewCell's delegate
You'll want to set the AnimatedFormFieldTableViewCell's delegate rather than the cellTextField's delegate, so:
self.delegate = yourUITextViewDelegate
rather than self.cellTextField.delegate = yourUITextViewDelegate (this is wrong)
This is what the documentation describes
Edit: OP clarified that the delegate assignment code is not in their class; it's in the pod's class. I'm considering deleting this answer as I don't think it is solving the problem.

UITableViewCell basic style on Storyboard can't select

I have strange behavior with UITableView on Storyboard today. I have created UITableView on Storyboard. After that I drag a PrototyleCell to this table and choose style is Basic. And I implement DataSource and Delegate on my ViewController. It show to simulator normal. But I can't tap to table for select a cell and didSelectCellAtIndexPath don't work too. In Storyboard I have checked selectionStyle. If I change style to another style, It work normally.
So my question is: this is a bug or it is a behavior of UITableView? And anyone can give some explanation for it.
Here is my code: Problem Cell Code. I can't select when use it but when I set another style of cell on storyboard everything will ok.
Thanks in advance
No its neither bug nor normal behavior, you must be doing some basic mistake...
Try following code with tableview and prototype cell in storyboard, Everthing will work.
class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {
#IBOutlet weak var tableView: UITableView!
var dataSource = ["Ajay","Ajay","Ajay","Ajay","Ajay","Ajay"]
override func viewDidLoad() {
super.viewDidLoad()
}
func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
var cell = tableView.dequeueReusableCellWithIdentifier("cell") as UITableViewCell?
if cell == nil {
cell = UITableViewCell(style: .Value1, reuseIdentifier: "cell")
}
cell!.textLabel?.text = dataSource[indexPath.row]
return cell!
}
func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return dataSource.count
}
func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
print(indexPath.row)
} }
Have you added the
tableView: cellForRowAtIndexPath delegate method. This is a required delegate you must implement.

Why is my UITableView not displaying what I want it to display?

Numerous tutorials I've been through say the only code I need to display the array I want it to is:
import UIKit
class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {
#IBOutlet weak var chatListTableView: UITableView!
var friends = ["Anthony", "Antonio", "Andy"]
override func viewDidLoad() {
super.viewDidLoad()
}
func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return friends.count
}
func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
let cell : UITableViewCell = UITableViewCell(style: UITableViewCellStyle.Default, reuseIdentifier: "ChatListCell")
cell.textLabel.text = self.friends[indexPath.row]
return cell
}
}
However, when I run the app, the tableView is still blank. What am I doing wrong? I feel that I am missing something.
All I want to do is display the array in the tableView.
Check if the ViewController is the datasource and delegate of the tableview
As Aci says in his answer, you have to set the data source and delegate of the table view to your view controller. The easiest way to do that is in Interface Builder.

Resources