How to change an image I set in tableView(_:willDisplayHeaderView:forSection:)? - ios

I set an image for each tableView's header section in tableView(_:willDisplayHeaderView:forSection:) in this way:
let image = UIImage(named: "arrow-down")
let imageView = UIImageView(image: image!)
imageView.frame = CGRect(x: 220, y: 12, width: 10, height: 5)
view.addSubview(imageView)
header.addSubview(imageView)
To try to change the image (it's a chevron I use to show the possibility to collapse the section) I tried in this way but it sets the top header only, instead I would like to replace the image in the specific section (I have got the section item Int):
let frame = CGRect(x: 220, y: 12, width: 10, height: 5)
let headerImageView = UIImageView(frame: frame)
let image: UIImage = UIImage(named: "arrow-up")!
headerImageView.image = image // sets the top header only
How can I change the image displayed at a specific section?
I read this question How to change button image added to TableView section header but I have not a button in the section.
I also found other similar questions but I don't know well Objective-C and can't convert the code easily in current Swift without to get errors.

If you know the specific position, you can do it at the moment when the table is loading the elements if what you want is to add an initial image (Option 1), if what you want is that when you touch the cell change the image you can do it the following way (Option 2)
-----------
Option 1
-----------
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
if(indexPath.row == //index of your cell){
let frame = CGRect(x: 220, y: 12, width: 10, height: 5)
let headerImageView = UIImageView(frame: frame)
let image: UIImage = UIImage(named: "arrow-up")!
headerImageView.image = image
}
}
-----------
Option 2
-----------
func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
if(indexPath.row == //index of your cell){
let frame = CGRect(x: 220, y: 12, width: 10, height: 5)
let headerImageView = UIImageView(frame: frame)
let image: UIImage = UIImage(named: "arrow-up")!
headerImageView.image = image
}
}

Related

Custom image and switch not showing in collection view controller at right place

My requirement is, I need to populate 10 cell's in collection view controller and I need to display in 6Th cell battery status and in 7th need to switch. The remaining cell is not required to show the battery status and switch. I am adding these two (battery status & switch) through programmatically.
override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath)
if indexPath.row == 6 {
let percentage: CGFloat = 0.4
let imageview:UIImageView=UIImageView(frame: CGRect(x: 10, y: 50, width: 30, height: 18))
let img : UIImage = UIImage(named:"batteryIcon")!
imageview.image = img
let batteryView = UIView.init(frame: CGRect(x: 10, y: 50, width: 30, height: 18))
cell.addSubview(batteryView)
let colorRect = CGRect(x: batteryView.bounds.origin.x, y: batteryView.bounds.origin.y, width: batteryView.bounds.width * percentage, height: batteryView.bounds.height)
let coloredView = UIView(frame: colorRect)
coloredView.backgroundColor = UIColor.green
batteryView.addSubview(coloredView)
cell.contentView.addSubview(imageview)
} else if indexPath.row == 7 {
let switchDemo = UISwitch(frame: CGRect(x: 10, y: 40, width: 37, height: 18))
switchDemo.isOn = true
switchDemo.setOn(true, animated: false)
switchDemo.transform = CGAffineTransform(scaleX: 0.70, y: 0.70)
switchDemo.addTarget(self, action: #selector(switchValueDidChange), for: .valueChanged)
cell.contentView.addSubview(switchDemo)
}
return cell
}
Here it is Working fine. But the problem is when I call "collectionView.reloadData()" Instead of showing battery status and switch 6Th and 7Th cells, Those two appearing in other cells also.
I am not getting, What mistake I am done.
For a better understanding of my requirement, I am sharing an image.

Resizing icon using imageView

I've got the following code (updated):
// Set cell row height
override func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat
{
return UITableViewAutomaticDimension // Auto-size cell based on content
}
// Set cell content
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath)
// Configure the cell...
let weatherObject = forecastData[indexPath.section]
// Convert UNIX time into readable format
let sunriseUNIX = weatherObject.sunriseTime
let sunriseDate = Date(timeIntervalSince1970: Double(sunriseUNIX))
let sunsetUNIX = weatherObject.sunsetTime
let sunsetDate = Date(timeIntervalSince1970: Double(sunsetUNIX))
let dateFormatter = DateFormatter()
dateFormatter.dateFormat = "h:mm a"
let sunriseConv = dateFormatter.string(from: sunriseDate)
let sunsetConv = dateFormatter.string(from: sunsetDate)
cell.textLabel?.text = weatherObject.summary
cell.detailTextLabel?.text = "Max: \(Int(round(weatherObject.temperatureMax))) °F / Min: \(Int(round(weatherObject.temperatureMin))) °F \nWill feel like \(Int(round(weatherObject.apparentTemperatureMax))) °F \nSunrise: \(sunriseConv) Sunset: \(sunsetConv) \nRelative Humidity: \(Int((weatherObject.humidity)*100))% \nMoon Phase: \(round(weatherObject.moonPhase))"
cell.detailTextLabel!.numberOfLines = 0
cell.imageView?.image = UIImage(named: weatherObject.icon)
cell.imageView?.frame = CGRect(x: 0, y: 0, width: 10, height: 10)
cell.imageView?.contentMode = .scaleAspectFit
cell.imageView?.clipsToBounds = true // clipping will help check actual frame of image
cell.layoutIfNeeded()
cell.setNeedsDisplay() // try to reset display, if not updating your image scale automatically
return cell
}
...(Still) yielding the following result:
I'm trying to get the 'icon' images sized 10 x 10 pixels, yet the above code doesn't work. Regardless of the values in CGRect, the 'icons' remain the same size.
Any pointers, alternatives would be appreciated!!
Thanks in advance.
You can use code as shown under:
var newImgThumb : UIImageView
newImgThumb = UIImageView(frame:CGRectMake(0, 0, 100, 70))
newImgThumb.contentMode = .ScaleAspectFit
Hope u got it!!!
You should set up the content mode of the images properly in order to scale them to the correct size.
cell.imageView.contentMode = .scaleAspectFit
Set content mode of cell image view as scaleAspectFit
cell.imageView?.image = UIImage(named: weatherObject.icon)
cell.imageView?.frame = CGRect(x: 0, y: 0, width: 50, height: 50)
cell.imageView?.contentMode = .scaleAspectFit
cell.imageView?.clipsToBounds = true // clipping will help check actual frame of image
cell.layoutIfNeeded()
//cell.setNeedsDisplay() // try to reset display, if not updating your image scale automatically
A good advice for you, Use Custom tableview cell and set all elements according to your choice/requirement.
Here is reference tutorial for Custom Tableview cell. Let me know, if you face any problem with Custom Tableview Cell.
Custom tableview cell, gives flexibility to arrange all cell elements according to your need.

UIImageView not resizing

I'm using Swift 3.0 with Xcode 8 and I'm having some problems with image resizing. Here is the code where i set my UIImage frame.
open func setData(_ data: Any?, image: String) {
self.textLabel?.font = UIFont.boldSystemFont(ofSize: 10)
self.textLabel?.textColor = UIColor(hex: "000000")
if let menuText = data as? String {
self.textLabel?.text = menuText
}
self.imageView?.contentMode = UIViewContentMode.scaleToFill
self.imageView?.frame = CGRect(x: 12, y: 8, width: 10, height: 10)
self.imageView?.image = UIImage(named: image)
self.imageView?.clipsToBounds = true
}
And here is where I call my function inside my tableView. I don't have any problem with setting the image, but ONLY with resize. When i use smaller images, the image is smaller, when i use bigger images, the image gets bigger, it doesnt resize.
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = BaseTableViewCell(style: UITableViewCellStyle.default, reuseIdentifier: BaseTableViewCell.identifier)
cell.setData(menus[indexPath.row], image: images[indexPath.row])
return cell
}
I have solved it by using this resize function to resize my image and then place in the ImageView
func imageResize(image:UIImage,imageSize:CGSize)->UIImage
{
UIGraphicsBeginImageContextWithOptions(imageSize, false, 0.0)
[image .draw(in: CGRect(x: 0, y: 0, width: imageSize.width, height: imageSize.height))]
let newImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext()
return newImage!
}
If you are using default image view of uitableview cell than you won't be able to resize it. Some default constraints are already there.
You have two options :
create a subclass of uitableview cell and use your own image view (don't create the outlet with name imageView, try something else).
Resize the image using https://stackoverflow.com/a/45100626/5383852

UICollectionView Data not displaying correctly

func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
let cell: MaterialCollectionViewCell = collectionView.dequeueReusableCellWithReuseIdentifier(reuseIdentifier, forIndexPath: indexPath) as! MaterialCollectionViewCell
let item = items()[indexPath.item]
//print(cell.contentView.subviews)
for view in cell.contentView.subviews{
view.removeFromSuperview()
}
//print(cell.contentView.subviews)
let colors = [UIColor.grayColor(), UIColor.darkGrayColor()]
cell.backgroundColor = colors[indexPath.item % 2]
let showTitle: UILabel = UILabel(frame: CGRect(x: 0, y: 0, width: cell.frame.width, height: cell.frame.height))
showTitle.text = item.title
showTitle.textAlignment = .Center
showTitle.font = UIFont(name: "HelveticaNeue", size: 25.0)
showTitle.textColor = MaterialColor.white
showTitle.center = cell.center
showTitle.hidden = true
//print(showTitle.text)
cell.contentView.addSubview(showTitle)
let imageView: UIImageView = UIImageView(frame: CGRect(x: 0, y: 0, width: cell.frame.width, height: cell.frame.height))
imageView.kf_setImageWithURL(NSURL(string: item.banner)!,
placeholderImage: nil,
optionsInfo: nil,
progressBlock: { (receivedSize, totalSize) -> () in
//print("Download Progress: \(receivedSize)/\(totalSize)")
},
completionHandler: { (image, error, cacheType, imageURL) -> () in
//print("Downloaded and set!")
if (image != nil) {
showTitle.removeFromSuperview()
}
else {
showTitle.hidden = false
}
}
)
cell.contentView.addSubview(imageView)
//print(cell.contentView.subviews)
return cell
}
this is the code I am using to display data into show title label. For the moment imageView doesn't ever show
issue with mine is the complete data is not displayed instead a part of it
current output
Should have shown these in the same order
Game of Thrones
Orange Is the New Black
Marco Polo (2014)
Person of Interest
Dark Matter
I think the problem is that the UILabel view and the UIImageView are overlapped 。 You should shrink the size of UILabel, and put the UIImageView behind the UILabel.

Image and scrollView rendering making my tableview choppy

There may be no good solution for my problem, but I want to ask just in case.
I have a tableview in which each cell contains a horizontal scrollview of variable width. The width of each cell's scrollview depends on the number and sizes of the images for that cell. Everything works pretty well, but the tableview scrolls less smoothly than it could. I'm using Parse to retrieve the images (and pfquertableviewcontroller), but this question should apply to tableviews in general.
Here is my tableview code:
override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath, object: PFObject?) -> PFTableViewCell? {
if var cell:MainFeedTableViewCell? = tableView.dequeueReusableCellWithIdentifier(self.cellIdentifier) as? MainFeedTableViewCell{
if(cell == nil) {
cell = NSBundle.mainBundle().loadNibNamed("MainFeedTableViewCell", owner: self, options: nil)[0] as? MainFeedTableViewCell
}
cell?.parseObject = object
return cell
}
}
override func tableView(tableView: UITableView, willDisplayCell cell: UITableViewCell, forRowAtIndexPath indexPath: NSIndexPath) {
if let c = (cell as? MainFeedTableViewCell){
c.setUpObject()//this is where images are set
}
}
override func tableView(tableView: UITableView, didEndDisplayingCell cell: UITableViewCell, forRowAtIndexPath indexPath: NSIndexPath) {
if let c = (cell as? MainFeedTableViewCell){
c.resetObject() //this sets most of the properties to nil
}
}
And here is the function in my cell where images are set
func setUpObject(){
//I left out several lines of code where label text is set from the parseObject that is set when the cell is created
//setting images **problems here**
if let numImages = self.parseObject?["numImages"] as? Int{
self.newWidth1 = self.parseObject?["width1"] as? CGFloat
self.newWidth2 = self.parseObject?["width2"] as? CGFloat
self.newWidth3 = self.parseObject?["width3"] as? CGFloat
self.newWidth4 = self.parseObject?["width4"] as? CGFloat
self.newWidth5 = self.parseObject?["width5"] as? CGFloat
if numImages == 1{
self.containerView = UIView(frame: CGRect(x: self.scrollView.frame.minX, y: self.scrollView.bounds.minY - 90, width: self.scrollView.frame.width, height: self.scrollView.frame.height))
self.image1 = PFImageView(frame: CGRect(x: self.scrollView.frame.minX , y: self.scrollView.frame.minY, width: self.scrollView.frame.width, height: self.scrollView.frame.height))
self.image1?.contentMode = UIViewContentMode.ScaleAspectFit
self.image1!.file = self.parseObject?["image"] as? PFFile
self.image1!.loadInBackground()
self.containerView!.addSubview(self.image1!)
self.scrollView.contentSize = self.containerView!.bounds.size
self.scrollView.addSubview(self.containerView!)
}
else if numImages == 2{
if self.newWidth1 + self.newWidth2 < self.scrollView.frame.width{
self.containerView = UIView(frame: CGRect(x: self.scrollView.frame.midX - (self.newWidth1 + self.newWidth2)/2, y: self.scrollView.bounds.minY - 90, width: (self.newWidth1 + self.newWidth2), height: self.scrollView.frame.height))
}
else{
self.containerView = UIView(frame: CGRect(x: self.scrollView.frame.minX, y: self.scrollView.bounds.minY - 90, width: (self.newWidth1 + self.newWidth2), height: self.scrollView.frame.height))
}
self.image1 = PFImageView(frame: CGRect(x: self.scrollView.frame.minX , y: self.scrollView.frame.minY, width: self.newWidth1, height: self.scrollView.frame.height))
self.image1!.file = self.parseObject?["image"] as? PFFile
self.image1!.loadInBackground()
self.containerView!.addSubview(self.image1!)
self.image2 = PFImageView(frame: CGRect(x: (self.scrollView.frame.minX + self.newWidth1), y: self.scrollView.frame.minY, width: self.newWidth2, height: self.scrollView.frame.height))
self.image2!.file = self.parseObject?["image2"] as? PFFile
self.image2!.loadInBackground()
self.containerView!.addSubview(self.image2!)
self.subLayer = CALayer()
self.subLayer.backgroundColor = UIColor.whiteColor().CGColor
self.subLayer.frame = CGRect(x: self.newWidth1, y: self.scrollView.frame.minY, width: 1, height: self.scrollView.frame.height)
self.containerView!.layer.addSublayer(self.subLayer)
self.scrollView.contentSize = self.containerView!.bounds.size
self.scrollView.addSubview(self.containerView!)
}
//repeat similar code for cases where there are 3, 4, or 5 images
There might be a fundamental issue with dynamically adjusting the size of the scrollview and adding it to superview just in time, but I'm trying to follow the design mockup that my designer gave me.
Here is what the scrollview on the cell looks like (with each image in the scrollview separated by a thin white line)
Remove your willDisplayCell and didEndDisplayingCell. That will fire as you scroll and your setUpObject code, while not huge, will block the main thread slightly. Instead move setUpObject() to right before returning the cell in cellForRowAtIndexPath.
Depending on how many rows you have and performance requirements you could also adjust the viewController to download all of the images ahead of time and pass them to the cell instead of loading them inside the cell.

Resources