I created a custom UITableViewCell with textfield, but I would like to use the imageview of cell, instead insert one in my custom cell.
This is my code:
import UIKit
class TextFieldTableViewCell: UITableViewCell, UITextFieldDelegate {
#IBOutlet weak var textField : UITextField!
override func awakeFromNib() {
super.awakeFromNib()
// Initialization code
}
override func setSelected(_ selected: Bool, animated: Bool) {
super.setSelected(selected, animated: animated)
// Configure the view for the selected state
}
}
This is the xib
In View Controller:
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
if indexPath.row == 0 {
let cell : TextFieldTableViewCell! = tableView.dequeueReusableCell(withIdentifier: "textFieldCell", for: indexPath) as! TextFieldTableViewCell
cell!.textField.text = "William Stevenson"
cell!.textField.tag = indexPath.row
cell!.imageView?.image = UIImage.init(icon: .FAUser, size: CGSize(width: 35, height: 35), textColor : UIColor.gray)
return cell
}
}
But the textfield goes under the picture
I try insert imageView in my custom cell
but the first separator line has a different width
How can I fix the problem?
Thank you!
The reason for having separator lines with two different widths is, when you put imageView outside of custom cell initially, it's on top of the image has covered the separator line. When you put imageview inside the separator is visible. Looks like images are having white background so that they are masking separator line. If my guess is correct, please check your icons background. If it's white in colour change them to transparent. Otherwise give some padding between imageview and cell bottom
I solved using my imageview ad set "Separator", in IB of my xib, with "Custom insets" left value equals to 65.
Related
I have a UITableView which has a UITableViewCell which contains a UIImageView.
The constraints are setup such that the UIImageView has padding 20 points at the top and sides, and a size ratio of 1:1, so the UIImageView will always be square regardless of the device width.
I apply a cornerRadius to the UIImageView so the image is circular.
However.... the autolayout doesn't seem to work on the first load. But after the first load, it works perfectly.
I have tried every known combination of setNeedsLayout or layoutIfNeeded - both inside the UITableViewCell and in the UITableView code. Nothing works the first time it loads.
Please help!
Code looks like this:
class CircularProfileCell: UITableViewCell {
#IBOutlet weak var circularView: UIView!
func setup() {
circularView.layer.cornerRadius = circularView.bounds.height / 2
}
}
class CircularProfileVC: UITableViewController {
override func viewDidLoad() {
super.viewDidLoad()
self.tableView.separatorStyle = .none
self.tableView.register(UINib(nibName: "CircularProfileCell", bundle: nil), forCellReuseIdentifier: "CircularProfileCell")
}
override func numberOfSections(in tableView: UITableView) -> Int {
return 1
}
override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return 1
}
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "CircularProfileCell", for: indexPath) as! CircularProfileCell
cell.setup()
return cell
}
}
Setup looks like this:
Because corner radius is a layer property it does not always play well with auto layout. In addition, I guess you set it up with frame properties of the view (i.e imageView.layer.cornerRadius = imageView.bounds.height/2).
Hence you should try and set the corner radius on the layoutSubviews() function of the cell. This will make sure to render the correct size
override func layoutSubviews() {
super.layoutSubviews()
imageView.layer.cornerRadius = imageView.bounds.height/2
...
}
This only happens when the tableView.separatorStyle = .none
So to fix it I simply leave the separator on, but set the separator color to clear
self.tableView.separatorStyle = .singleLine
self.tableView.separatorColor = UIColor.clear
Thanks to #CloudBalacing for the help. More info about this problem here
I have a tableview controller, that I am designing using Storyboard. The prototype cell is very basic, it just has two labels. A name label, and a date label.
When I run my program, the style is there (font, etc.), but it seems like the constraints aren't working? Also, the cell color doesn't show (only the tableview background shows), and the cell dividers are missing. The labels overlap each other, and when I set the cell height to 75, it doesn't appear that tall.
This is what my cell looks like compiled:
See tableview here
I made a model for the table view cell as shown here (IdeaCell is properly set on the prototype cell in storyboard):
class IdeaCell: UITableViewCell {
#IBOutlet weak var ideaNameLbl: UILabel!
#IBOutlet weak var ideaDateLbl: UILabel!
override func awakeFromNib() {
super.awakeFromNib()
}
override func setSelected(_ selected: Bool, animated: Bool) {
super.setSelected(selected, animated: animated)
if selected {
self.layer.backgroundColor = UIColor(white: 1, alpha: 0.2).cgColor
} else {
self.layer.backgroundColor = UIColor.clear.cgColor
}
}
func configureCell(idea : CoreIdea) {
let name = idea.name
ideaNameLbl.text = name
let date = idea.date
ideaDateLbl.text = date
}
}
And my tableview view controller relevant code is here (reuse identifier (ideaCell) is properly set on the prototype cell in storyboard):
class IdeaVC: UITableViewController {
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
if let cell = tableView.dequeueReusableCell(withIdentifier: "ideaCell", for: indexPath) as? IdeaCell {
let idea = ideas[indexPath.row]
cell.configureCell(idea: idea)
return cell
} else {
return UITableViewCell()
}
}
}
UPDATE:
After adding the heightForRowAt function, my cells are the proper height, and constraints are working as they should be. For some reason the cell background color is missing, and the cell divider is not appearing (the font, and font color work). They were all set in the storyboard.
Here is a screenshot of my cells:
missing cell style
UPDATE 2:
I set the divider and background like this:
self.tableView.backgroundColor = UIColor.black
self.tableview.separatorColor = UIColor.white
Hope this helps someone! I honestly don't know why my values from storyboard didn't work, but setting them in the viewDidLoad worked great.
Have you told your tableview the height of the tableviewcell? If not try this. Its one of your tableviews delegate methods.
func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
return 75.0 //Set your cell height that you want to appear in your tableview
}
i think you must override the number of Item , and height for row at function. and set the constraint on UITableViewCell between name and date label.
I'm new to iOS programming, and I'm mainly been using the interface builder to adjust cell layouts.
Currently I have a custom TableView cell with an ImageView and Label.
I would like to:
1) Have the ImageView Width = 1/3 size of cell ( It doesn't seem like I can do this via storyboard)
2) Have the cell height dynamically adjust as the aspect ratio of image is maintained. I've already added constraints for the UIImageView to equal cell height.
I searched StackOverflow but some of the answers got really complicated, so I couldn't really understand how to fit it to my case.
I played around with constraints, but it seems I have to do this programmatically?
Here is what I currently have for cell methods:
extension FirstTableViewController: UITableViewDelegate, UITableViewDataSource{
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return dataCells.count
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let folderCell = dataCells[indexPath.row]
print(folderCell)
let cell = tableView.dequeueReusableCell(withIdentifier: "cell") as! FirstTableViewCell
cell.setCell(cell:folderCell)
return cell
Here is my cell class:
class FirstTableViewCell: UITableViewCell {
#IBOutlet weak var ImageView: ScaledHeightImageView!
#IBOutlet weak var FolderLabel: UILabel!
override func awakeFromNib() {
super.awakeFromNib()
//print(FolderLabel)
}
func setCell (cell : FolderCell){
self.ImageView.image = cell.image
self.FolderLabel.text = cell.label
}
}
You can do it from storyboard by adding equal width with superview, then change it's Multiplier to be 0.3
The Issue
I am attempting to use a collection view in a view controller for cards. When a user taps on a card, it expands. At all times, I have a tableview in each card, whether it is expanded or not. I have the data loading in the table views, but only when I tap on a card to expand it or if I scroll collection view cards offscreen and back onscreen. What is a cleaner workflow to doing this that puts tableviews in each collection view cell?
This is in my main view controller:
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "productionBinderCell", for: indexPath) as? ProductionBinderCollectionViewCell
let suck = cell?.detailsTableView.cellForRow(at: IndexPath(row: 0, section: 0)) as? DescriptionTableViewCell
suck?.descriptionText.text = productions[indexPath.row].productionDescription
cell?.detailsTableView.reloadData()
cell?.layer.shouldRasterize = true
cell?.layer.rasterizationScale = UIScreen.main.scale
let title = productions[indexPath.row].productionTitle
let luck = productions[indexPath.row].productionImage
let zuck = UIImage(data:luck!)
cell?.productionTitle.text = title
cell?.productionFeaturedImage.image = zuck
cell?.productionColorTint.tintColor = UIColor.blue
let backbtn = cell?.viewWithTag(1)
backbtn?.isHidden = true
return cell!
}
This is in a subclass of the tableview:
override func layoutSubviews() {
super.layoutSubviews()
self.dataSource = self
self.delegate = self
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "productionDescription", for: indexPath) as? DescriptionTableViewCell
return cell!
}
This is in a subclass of the tableview cell I am concerned with. It only shows the uilabel text when scrolling offscreen or tapping on the collection view cell:
class DescriptionTableViewCell: UITableViewCell {
#IBOutlet var descriptionText: UILabel!
override func awakeFromNib() {
super.awakeFromNib()
}
override func setSelected(_ selected: Bool, animated: Bool) {
super.setSelected(selected, animated: animated)
// Configure the view for the selected state
}
}
Maybe I shouldn't be using a tableview at all? Thank you very much to all who help. I am very open to criticism and love learning from my mistakes (a little too often). :)
What you need, first of all, is clear definition of views and cells.
UICollectionview is a collection of UICollectionViewCell objects
UITableView is a collection of UITableViewCell objects
Do you need to embed entire table view within each card? There you have your answer. You have parent-child relationship between your UICollectionViewCell and UITableView derived classes:
Derive from UICollectionViewCell - MyCollectionViewCell - this step is mandatory.
Inside xib for MyCollectionViewCell, insert a tableview, with horizontal scrolling enabled. (this is an option inside xib attribute editor)
If needed to customize, also derive from UITableViewCell - MyTableViewCell. This step is optional.
Inside MyCollectionViewCell class file, have implementation for table view datasource and delegate methods. That way, each card will have all its table view cell children in one place
If present, define custom logic inside MyTableViewCell class file
There is no need to subclass UITableView here. Everything that needs to be customized can be done using subclassing cells.
I got some serious problems with my collectionview.
So I fetch async. some data from an api and set the data variable, than I reload my collectionview. My collectionview contains basicly some cells with data from the api and one cell extra with a plus icon. The cells shape and layout is the same, so I used the same collectionviewcell class for both.
I calculate my number of items like this:
func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return data.count + 1
}
And do my cell stuff like this:
func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCellWithReuseIdentifier(reuseIdentifier, forIndexPath: indexPath) as! OverviewUserCell
if(indexPath.row == data.count) {
cell.userImageView.image = UIImage(named: "plus")!
//some additional coloring and stuff
} else {
cell.userImageView.image = UIImage(named: "oma")!
//some additional coloring and stuff
}
cell.contentView.frame = cell.bounds
cell.contentView.autoresizingMask = [UIViewAutoresizing.FlexibleWidth, UIViewAutoresizing.FlexibleHeight]
cell.layer.cornerRadius = 8
return cell
}
My cell itself contains a round image and a Label:
class OverviewUserCell: UICollectionViewCell {
#IBOutlet weak var nameLabel: UILabel!
#IBOutlet weak var userImageView: UIImageView!
override func layoutSubviews() {
super.layoutSubviews()
self.makeItCircle()
}
func makeItCircle() {
self.userImageView.layer.masksToBounds = true
self.userImageView.layer.cornerRadius = CGFloat(roundf(Float(self.userImageView.frame.size.height/2.0)))
}
}
Somehow (maybe because different image sizes) the frame of the imageview changes, or something like this, because the plus image is not round, but I want it to stay the same. I added constraints to every element in the cell. If I don't load the data, the image is perfectly round, but when the data is loaded and the collectionview reloaded, the plus image is not round anymore.
The images should be same sized and same position.
Instead of setting corner radius of cell, try setting corner radius of UIImageView. But before that make sure that your UIImage view should have height equal to width.
And before setting imageview.layer.cornerRadius = 8;
add this line: imageview.layoutIfNeeded();