asynchronously loading images in swift - ios

I have an image that I want shown at the top of the view in a table view cell.
I have the following code that asynchronously loads that image and adds it to the cell:
if let image = value?["image"] {
let bookImageUrl = URL(string: image as! String)
let data = try? Data(contentsOf: bookImageUrl!) //make sure your image in this url does exist, otherwise unwrap in a if let check / try-catch
DispatchQueue.main.async {
if data != nil {
let imageView = UIImageView(image: UIImage(data: data!));
imageView.frame = CGRect(x: 0,
y: 95,
width: cell.frame.size.width,
height: 150)
imageView.contentMode = .scaleAspectFill
imageView.isUserInteractionEnabled = false
cell.addSubview(imageView)
let label = UILabel(frame: CGRect(x: 10,
y: cell.frame.size.height-60,
width: cell.frame.size.width,
height: 50));
label.textColor = UIColor.black
label.backgroundColor = UIColor.init(red: 1, green: 1, blue: 1, alpha: 0.5)
label.font = UIFont(name: "CeraPro-Bold", size: 16)
label.text = " \(title)"
cell.addSubview(label)
}
}
}
Unfortunately, sometimes the image does not get loaded. Am I doing something wrong?

If you are using tableView.dequeueReusableCell(withIdentifier: "cellIdentifier", for: indexPath) in func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell, here UITableView do reusing of those cells dequeueReusableCell(withIdentifier:)
So as with the problem you mentioned is with some times the images do not get shown, this might be because of the UITableView is reusing the cells, so, it will be better if you use else for every if statement. Or you can use something like, SDWebImage or Kingfisher for image caching.
Also note that, as the UITableView does reuse every cell so it will be better to remove all subviews or create a variable in class for 'UITableViewCell' before adding any view over programmatically, as in your code cell.addSubview(imageView) and cell.addSubview(label) the imageView and label is getting initialized and added over and over for every reuse and every URL check, Here what you can do is create a variable for label and imageview in the cell and initialize only if the variable is nil and assign the image afterwards.

Related

Swift 5 - UIButtons Side by side in tableView footer with original separator line

I am trying to add two buttons programmatically side by side (on the bottom left) in the tableView footer.
The issue that I am having is that I have to manually draw the separator line when defining the tableView footer because the separator line disappears.
How can I simply add two buttons to the bottom left of the tableView footer without loosing the original separator line?
var terms_button = UIButton()
var policy_button = UIButton()
func tableView(_ tableView: UITableView, viewForFooterInSection section: Int) -> UIView? {
//terms button
terms_button = UIButton(frame: CGRect(x: 70, y: 0, width: 100, height: 50))
terms_button.setTitle("Terms", for: .normal)
terms_button.setTitleColor(UIColor.black, for: .normal)
terms_button.titleLabel?.font = UIFont.roboto(size: 12, weight: .medium)
terms_button.titleLabel?.alpha = 0.38
terms_button.addTarget(self,action: #selector(didTapTermsButton),for: .touchUpInside)
//policy button
policy_button = UIButton(frame: CGRect(x: 0, y: 0, width: 100, height: 50))
policy_button.setTitle("Privacy Policy", for: .normal)
policy_button.setTitleColor(UIColor.black, for: .normal)
policy_button.titleLabel?.font = UIFont.roboto(size: 12, weight: .medium)
policy_button.titleLabel?.alpha = 0.38
policy_button.addTarget(self,action: #selector(didTapPolicyButton),for: .touchUpInside)
let result = UIView()
// recreate insets from existing ones in the table view
let insets = tableView.separatorInset
let width = tableView.bounds.width - insets.left - insets.right
let sepFrame = CGRect(x: insets.left, y: -0.5, width: width, height: 0.5)
// create layer with separator, setting color
let sep = CALayer()
sep.frame = sepFrame
sep.backgroundColor = tableView.separatorColor?.cgColor
result.layer.addSublayer(sep)
result.addSubview(policy_button)
result.addSubview(terms_button)
return result
}
When you are returning your own let result = UIView() view instance from viewForFooterInSection, you are discarding the original built-in default view provided by the iOS.
What you can attempt is -
delete the viewForFooterInSection implementation
try to use default built-in view provided by iOS
try to customize default view's appearance like following
func tableView(_ tableView: UITableView, willDisplayFooterView view: UIView, forSection section: Int) {
guard let footerView = view as? UITableViewHeaderFooterView else { return }
let contentView = footerView.contentView
// Try adding your buttons to this `contentView`
}
This is the only way to try to keep using built-in view with possible customizations. If this doesn't work reliably across different iOS versions, you would need to go back to viewForFooterInSection custom view implementation.

How do stop repeating images in TableView Cell

I created programmatically a ImageView in the cellForRowAt method and added also to the cell:
let imageName = "Default.png"
let image = UIImage(named: imageName)
let imageView = UIImageView(image: image!)
imageView.frame = CGRect(x: 29, y: 17, width: 14, height: 13)
cell.addSubview(imageView)
It works, there is nothing to grumble. Now I want to show this image only if the indexpath.row equals 2, so I added a simple if-statement:
if indexPath.row == 2 {
let imageName = "Default.png"
let image = UIImage(named: imageName)
let imageView = UIImageView(image: image!)
imageView.frame = CGRect(x: 29, y: 17, width: 14, height: 13)
cell.addSubview(imageView)
}
It works. But when I scroll down, some cells have the image too. I suspected there works something wrong in the cellForRowAt, so I added in the UITableViewCell the method prepareForReuse to hidden each imageView and only if the if-statement is true, the hide will be remove:
override func prepareForReuse() {
super.prepareForReuse()
self.imageView!.isHidden = true
}
if indexPath.row == 2 {
let imageName = "Default.png"
let image = UIImage(named: imageName)
let imageView = UIImageView(image: image!)
imageView.frame = CGRect(x: 29, y: 17, width: 14, height: 13)
imageView.isHidden = false
cell.addSubview(imageView)
}
Unfortunately it doesn't work and I have no idea what I could improve.
prepareForReuse in your cell's subclass is referencing the subclass' property imageView and setting it to hidden. However, in your if statement, you are creating a new image view and adding it to the cell's hierarchy. This is a bad idea as it'll never be removed and more and more will be added as you scroll around.
Instead, reference the cell's image view:
if indexPath.row == 2 {
let imageName = "Default.png"
let image = UIImage(named: imageName)
cell.imageView?.image = image
cell.imageView?.isHidden = false
}
In cellForRowAt add the else part with the empty imageView to solve this issue.
if indexPath.row == 2 {
let imageName = "Default.png"
let image = UIImage(named: imageName)
let imageView = UIImageView(image: image!)
imageView.frame = CGRect(x: 29, y: 17, width: 14, height: 13)
cell.addSubview(imageView)
} else { // ## Add this else methode.
let imageView = UIImageView()
imageView.frame = CGRect(x: 29, y: 17, width: 14, height: 13)
cell.addSubview(imageView)
}
Hi the problem with your code is when the cell is reused the imageView is still in the hierarchy, so in prepareForReuse remove the subviews that are of type image view simply also because the cell already had default imageview so create a new imageView class and remove of that specific type, Im adding code for it, Hope it helped :).
class CustomImageView : UIImageView { //CustomImageView
}
func removeCustomImageViewIfNeeded() {
self.subviews.forEach { (subView) in
if subView is CustomImageView {
subView.removeFromSuperview()
}
}
}
override func prepareForReuse() {
super.prepareForReuse()
removeCustomImageViewIfNeeded()
}
if indexPath.row == 2 {
let imageName = "Default.png"
let image = UIImage(named: imageName)
let imageView = CustomImageView(image: image!)
imageView.frame = CGRect(x: 29, y: 17, width: 14, height: 13)
imageView.isHidden = false
cell.addSubview(imageView)
}else {
removeCustomImageViewIfNeeded()
}

How to add UIImage and UILabel if UITableView has no data

I've looked into many answers but either it's only UILabel or UIImage not both. So after trying to implement it I finally found that we cannot do two tableView.backgroundView. Here is what I've done so far:
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int
{
let noDataLabel: UILabel = UILabel(frame: CGRect(x: 0, y: 0, width: tableView.bounds.size.width, height: tableView.bounds.size.height))
let image = UIImage(named: "noData")
let noDataImage = UIImageView(image: image)
noDataImage.frame = CGRect(x: 0, y: 10, width: 20, height: 20)
if allData.count == 0 {
noDataLabel.isHidden = false
noDataImage.isHidden = false
noDataLabel.text = "No data added. Add new entry \nby pressing the add icon on top right."
noDataLabel.textColor = UIColor.black
noDataLabel.numberOfLines = 3
noDataLabel.backgroundColor = UIColor.white
noDataLabel.textAlignment = .center
//what to do from here
tableView.backgroundView = noDataImage
tableView.backgroundView = noDataLabel
//end
tableView.separatorStyle = .none
return 0;
}
else {
noDataLabel.backgroundColor = UIColor.clear
noDataLabel.isHidden = true
noDataImage.isHidden = true
tableView.backgroundView = nil
return allData.count
}
I want to show an image and below that image I want to show a UILabel. How can I achieve this?
You need to create a view with subviews your image and label
var backgroundView =UIView(frame: CGRectMake(0, 0, your_width, your_height))
backgroundView.addSubview(noDataImage)
backgroundView.addSubview(noDataLabel)
tableView.backgroundView=backgroundView;
Note: Adjust the frame of noDataImage and noDataLabel as per your use.
backgroundView Property
The background view of the table view.
Declaration
Swift
var backgroundView: UIView?
Objective-C
#property(nonatomic, readwrite, retain) UIView *backgroundView
Discussion
A table view’s background view is automatically resized to match the size of the table view. This view is placed as a subview of the table view behind all cells, header views, and footer views.
You must set this property to nil to set the background color of the table view.

Swift - Customize view to show over an empty table cells

I am using Swift 3, Xcode 8.2.
I've been able to create a label to cover the empty table view cells when there are none to display.
My code is below and it is located in the subclass of UITableViewController.
override func numberOfSections(in tableView: UITableView) -> Int {
// if there are scans to display...
if items.count > 0 {
tableView.backgroundView = nil
tableView.separatorStyle = .singleLine
return 1
}
else { // otherwise, return 0, remove cell lines, and display a Label
let rect = CGRect(x: 0,
y: 0,
width: tableView.bounds.size.width,
height: tableView.bounds.size.height)
let noScanLabel: UILabel = UILabel(frame: rect)
noScanLabel.text = "No Scans"
noScanLabel.textColor = UIColor.gray
noScanLabel.font = UIFont.boldSystemFont(ofSize: 24)
noScanLabel.textAlignment = NSTextAlignment.center
tableView.backgroundView = noScanLabel
tableView.separatorStyle = .none
return 0
}
}
Here is the result.
Looks fine. But how, do I make it such that I include another line of text with a downward arrow pointing at the raised center button. Something like "Click here to start a scan"?
I've tried adding new line characters to the noScanLabel.text field but that didn't work out. Any pointers in the right direction would be helpful.
The simple solution is to set numberOfLines to 0 on noScanLabel. This way, the new lines will show.
let noScanLabel: UILabel = UILabel(frame: rect)
noScanLabel.text = "No Scans"
noScanLabel.textColor = UIColor.gray
noScanLabel.font = UIFont.boldSystemFont(ofSize: 24)
noScanLabel.numberOfLines = 0
noScanLabel.textAlignment = NSTextAlignment.center
Note than in such cases, I would recommend, for better maintainability, to actually remove the TableView from the UIViewController (hence not inherit from UITableViewController) and replace it with an empty view when you detect no scans are available. This will make each state more independent of each other and make maintenance easier.
There are a few ways achieve your goal. There is a well known library called DZNEmptyDataSet for handling empty tableviews and collectionviews . https://github.com/dzenbot/DZNEmptyDataSet
The other way would be to create a uiview with your specified rect and then add two labels to that uiview. One would be your noScanLabel and the other would be a label or image containing your arrow. You can set the layout constraints as required so that the arrow appears pointing down.
This code seems to work well. Change constraints if needed
let rect = CGRect(x: 0, y: 0, width: tableview.bounds.size.width, height: tableview.bounds.size.height)
let noDataView = UIView(frame: rect)
let noScanLabel = UILabel()
noScanLabel.text = "No Scans"
noScanLabel.textColor = UIColor.gray
noScanLabel.font = UIFont.boldSystemFont(ofSize: 24)
noScanLabel.textAlignment = NSTextAlignment.center
let arrowLabel = UILabel()
arrowLabel.text = "Add Arrow Image to this label"
arrowLabel.textColor = UIColor.gray
arrowLabel.font = UIFont.boldSystemFont(ofSize: 24)
arrowLabel.textAlignment = NSTextAlignment.center
noScanLabel.widthAnchor.constraint(equalToConstant: 100)
arrowLabel.widthAnchor.constraint(equalToConstant: 50)
noDataView.addSubview(noScanLabel)
noDataView.addSubview(arrowLabel)
arrowLabel.translatesAutoresizingMaskIntoConstraints = false
noDataView.translatesAutoresizingMaskIntoConstraints = false
noScanLabel.translatesAutoresizingMaskIntoConstraints = false
self.tableview.addSubview(noDataView)
noDataView.isHidden = false
noDataView.centerXAnchor.constraint(equalTo: self.tableview.centerXAnchor).isActive = true
noDataView.centerYAnchor.constraint(equalTo: self.tableview.centerYAnchor).isActive = true
noScanLabel.centerXAnchor.constraint(equalTo: noDataView.centerXAnchor).isActive = true
noScanLabel.topAnchor.constraint(equalTo: noDataView.centerYAnchor).isActive = true
arrowLabel.centerXAnchor.constraint(equalTo: noDataView.centerXAnchor).isActive = true
arrowLabel.topAnchor.constraint(equalTo: noScanLabel.bottomAnchor).isActive = true
The other option is to set number of lines to zero as mentioned already
noScanLabel.numberLines = 0
You can take UIView and add your all UILabel and arrow Image on UIView and then assign that UIView to backgroundView of TableView.
Like this.
override func numberOfSections(in tableView: UITableView) -> Int {
// if there are scans to display...
if items.count > 0 {
tableView.backgroundView = nil
tableView.separatorStyle = .singleLine
return 1
}
else { // otherwise, return 0, remove cell lines, and display a Label
let rect = CGRect(x: 0,
y: 0,
width: tableView.bounds.size.width,
height: tableView.bounds.size.height)
let messageBaseView = UIView(frame: rect)
//Add your first label..
let noScanLabel: UILabel = UILabel()
noScanLabel.text = "No Scans"
noScanLabel.textColor = UIColor.gray
noScanLabel.font = UIFont.boldSystemFont(ofSize: 24)
noScanLabel.textAlignment = NSTextAlignment.center
messageBaseView.addSubView(noScanLabel)
//Add your second label.. and your arrow image here on messageBaseView
//Assign messageBaseView to backgroundView of tableView
tableView.backgroundView = messageBaseView
tableView.separatorStyle = .none
return 0
}
}

Custom UIImageView added to UItableview cell doesnot shift on on x-axis?

I am trying to give some margin on x-axis for a imageView that is set inside a tableView cell. But the imageView does not move. And I also tried same for a label. It does shift to the value I gave.
func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell
{
// cell.textLabel?.font = UIFont(name: label.font.fontName, size: 22)
var cell : UITableViewCell = tableView.dequeueReusableCellWithIdentifier("myCell") as UITableViewCell
// cell.imageView?.image = UIImage(named: self.cellImgs[indexPath.row])
cell.textLabel?.text = self.cellTxtArrs[indexPath.row]
cell.textLabel?.textAlignment = NSTextAlignment.Right
cell.textLabel?.textColor = UIColor.whiteColor()
cell.backgroundColor = UIColor(red: 0.000, green: 0.400, blue: 0.404, alpha: 1.00)
cell.selectionStyle = UITableViewCellSelectionStyle.None
// var videoImgView:UIImageView = UIImageView(frame: CGRectMake(50, 10, 20, 30.0))
// let videoImage = UIImage(named: "accounts")
// videoImgView = UIImageView(image: videoImage)
// cell.contentView.addSubview(videoImgView)
var newLabel = UILabel(frame: CGRectMake(80, 0, 80, 30.0))
newLabel.text = "hello all"
newLabel.textColor = UIColor.redColor()
cell.contentView.addSubview(newLabel)
return cell
}
I have created a table view as
var tblView : UITableView = UITableView()
tblView.frame = CGRectMake(0, 168, 320-50 , 448)
tblView.separatorColor = UIColor.clearColor()
tblView.scrollEnabled = false
tblView.rowHeight = 39
self.addSubview(tblView)
tblView.delegate = self
tblView.dataSource = self
tblView.registerClass(UITableViewCell.self, forCellReuseIdentifier: "myCell")
1) your code will cell.contentView.addSubview everytime that cellForRowAtIndexPath is called. You are not reusing cell properly .
2) Subclass UITableViewCell and add your "logic View code" inside there (right place to do it)
3) look at this: http://www.objc.io/issue-1/lighter-view-controllers.html
Please try to use this one i hope it helps you.
videoImgView = UIImageView(image: videoImage)
videoImgView.frame = CGRectMake(100, 10, 20, 30.0)
cell.contentView.addSubview(videoImgView)

Resources