Autolayout content view background does not resize - background

I made a dynamic data view with constraints. Once the data loaded into the form the form is updating its size properly in the scrollview's content view. But I cannot get the background color properly resized. The grey background remains the same size as it is at design time.
func fillFormWithData() {
dispDescription.text = jSonData[0]["advdescription"]
dispLongDescription.text = jSonData[0]["advlongdesc"]
priceandcurrency.text = jSonData[0]["advprice"]! + " " + jSonData[0]["advpricecur"]!
contentview.layoutIfNeeded()
let contentRect = CGRect(x: 0, y: 0, width: scrollview.frame.width, height: validitydate.frame.origin.y+validitydate.frame.height+50)
scrollview.contentSize = contentRect.size
}
The contentview is resized properly, but the background remains the same height as during load.
Links to the interface builder setup.
#IBOutlet weak var scrollview: UIScrollView!
#IBOutlet weak var contentview: UIView!
#IBOutlet weak var dispDescription: UILabel!
#IBOutlet weak var dispLongDescription: UILabel!
#IBOutlet weak var priceandcurrency: UILabel!
#IBOutlet weak var validitydate: UILabel!
In the interface builder the size of the contentview is constraint to the scrollview bottom.

Related

Swift 3 Button in UICollectionViewCell not respond to touch

I have an UICollectionViewCell and two buttons inside that, but the buttons not respond to touch, i create button programmatically and add that to cell by addSubView it works, but when i added by holder.addSubView not working!
UserInteractionEnabeld of holder is true!
help please
class FavoriteProductCollectionViewCell: UICollectionViewCell {
#IBOutlet weak var holder: UIView!
override func awakeFromNib() {
super.awakeFromNib()
let btnFindBestPrice = UIButton(frame: CGRect(x: 0, y: 0, width: 151, height: 20))
btnFindBestPrice.setTitle("Find best price", for: .normal)
btnFindBestPrice.backgroundColor = UIColor.ButtonBackGreen
btnFindBestPrice.isUserInteractionEnabled = true
btnFindBestPrice.addTarget(self, action: #selector(findBestPrice), for: .touchUpInside)
// AddTarget not working
holder.addSubview(btnFindBestPrice)
// AddTarget works fine
addSubview(btnFindBestPrice)
}
}
I dont know why!? But i create another cell with same config that worked fine!!!!
In this case, it's better if you add self at the beginning. Like this:
self.holder.addSubview(btnFindBestPrice)

Swift iOS- How to Add Button to the outside a CollectionView Cell

I want to get a deleteButton that is a delete image to sit on the outside of a collectionViewCell (it can be partially inside).
I looked at other SO answers and they said just play with the button's frame's Rect's x & y values which I did. When I set the x & y values to 0,0 I get:
class CustomCell: UICollectionViewCell {
#IBOutlet weak var imageView: UIImageView!
var deleteButton: UIButton!
var deleteButtonImg: UIImage!
override func awakeFromNib() {
super.awakeFromNib()
deleteButton = UIButton(frame: CGRect(x: 0, y: 0, width: frame.size.width/4, height: frame.size.width/4))
deleteButtonImg = UIImage(named: "delete-icon")!.withRenderingMode(.alwaysTemplate)
deleteButton.setImage(deleteButtonImg, for: .normal)
deleteButton.tintColor = UIColor.red
contentView.addSubview(deleteButton)
}
When I try to set the the Rect's x & y to -10,-10 the deleteButton gets clipped inside the cell's imageView. I don't have clipsToBounds set.
deleteButton = UIButton(frame: CGRect(x: -10, y: -10, width: frame.size.width/4, height: frame.size.width/4))
I even tried setting clipToBounds to false but I get the same effect as pic # 3.
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CustomCell", for: indexPath) as! CustomCell
cell.imageView.image = myImageArray[indexPath.row]
cell.imageView.clipsToBounds = false
return cell
}
Where am I going wrong?
The problem was inside storyboard I had a:
CollectionView
-CustomCell (type collectionViewCell)
-imageView
Under the Attributes Inspector, in the Drawing section, all 3 of these have the property clipsToBounds.
I overlooked the fact that I had clipsToBounds set to false (unchecked) on the imageView but set to true (checked) on the CustomCell and the CollectionView.
If anyone else has this problem make sure you uncheck clipsToBounds on the collectionView, collectionViewCell, and the imageView.
okay u can do like below, first create a xib file and replace default view with collection view cell and set up like below,
in the above image set the class name to CustomCell (In my case) and place image view (green ) and button (blue).
and in View controller,
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
//register the nib to collectionview
self.aColectionView.register(UINib(nibName: "CustomCell", bundle: nil), forCellWithReuseIdentifier: "CUSTOM_CELL")
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
func numberOfSections(in collectionView: UICollectionView) -> Int {
return 1
}
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return 40
}
//cell creation as u are doing
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell:CustomCell = collectionView.dequeueReusableCell(withReuseIdentifier: "CUSTOM_CELL", for: indexPath) as! CustomCell
//set the image for custom cell
return cell
}
//return the required size
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
return CGSize(width: 200, height: 150)
}
and output like below,
and in custom cell class, u add any other features like action for a button and other views related code
class CustomCell:UICollectionViewCell {
#IBOutlet weak var deleteButton: UIButton!
#IBOutlet weak var imageView: UIImageView!
//other view related code
}

UICollectionView wrong image displayed

I've found a couple of posts about issues with UICollectionView and iwrong images but all of them have one common - people try to download image in cellForItemAt method.
I already have proper image in my app bundle and simply use UIImage(named:) method to set it to UICollectionViewCell. However I still get wrong images. Could anyone help me?
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return liveChannels.count()
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "ChannelButtonViewCell", for: indexPath) as! ChannelButtonViewCell
let current = liveChannels.channels[indexPath.row]
let currentProgram = current.currentProgram()
let channelKey = current.channel?.channelKey
let programDetail = currentProgram?.name
if let currentProgress = currentProgram?.progress() {
cell.progressView.setProgress(currentProgress, animated: true)
}
print("\(channelKey) - \(current.channel!.logoName)")
cell.imageName = current.channel!.logoName
cell.channelTitleLabel.text = channelKey
cell.channelDetailLabel.text = programDetail
cell.channelButton.addTarget(self, action: #selector(ChannelsViewController.pressed(_:)), for: .primaryActionTriggered)
return cell
}
I'm printing channelKey and logoName to console to be sure that the proper image is stored inside of liveChannels.channels structure. (THey are correct indeed).
This is my cell:
class ChannelButtonViewCell: UICollectionViewCell {
#IBOutlet weak var progressView: UIProgressView!
#IBOutlet weak var channelButton: ChannelButton!
#IBOutlet weak var channelDetailLabel: UILabel!
#IBOutlet weak var channelTitleLabel: UILabel!
#IBOutlet weak var channelImageView: UIImageView!
var imageName: String?
override func prepareForReuse() {
channelImageView.image = nil
super.prepareForReuse()
}
override func draw(_ rect: CGRect) {
if (self.isSelected) {
if let imageName = imageName {
channelImageView.image = UIImage(named: imageName)
}
} else {
if let imageName = imageName {
channelImageView.image = UIImage(named: imageName.appending("_grey"))
}
}
}
}
1) You should override func draw(_ rect: CGRect) in very rare cases and your case is definitely not the one.
2) To ensure you load and change image exactly when you assign cell's var imageName: String? you could use Swift's didSet
3) To ensure your image updates when selection state changes you could use didSet as well.
you could end up removing func draw at all and adding didSet observers like this:
class ChannelButtonViewCell: UICollectionViewCell {
#IBOutlet weak var progressView: UIProgressView!
#IBOutlet weak var channelButton: ChannelButton!
#IBOutlet weak var channelDetailLabel: UILabel!
#IBOutlet weak var channelTitleLabel: UILabel!
#IBOutlet weak var channelImageView: UIImageView!
var imageName: String? {
didSet {
updateImage()
}
}
override var isSelected: Bool {
didSet {
updateImage()
}
}
override func prepareForReuse() {
channelImageView.image = nil
super.prepareForReuse()
}
func updateImage() {
guard let imageName = self.imageName else { return }
if (self.isSelected) {
channelImageView.image = UIImage(named: imageName)
} else {
channelImageView.image = UIImage(named: imageName.appending("_grey"))
}
}
}
If this solution doesn't solve your problem try set breakpoint inside of func draw() and check when it is called and what value stored in var imageName

How do I take Cropped screenshot with Retina image quality in my snapshot implementation in swift

I am trying to take a screenshot of my UIView and Crop it, save it to my Photo library. As i am trying to do this there are 3 conflicts.
(1) - I want to take Screenshot with Blur in it, As blur filter never gets saved in the screenshot.
(2) - The image quality is very low.
(3) - I am not able to crop the image.
This is my code -
#IBAction func Screenshot(_ sender: UIButton) {
// Declare the snapshot boundaries
let top: CGFloat = 70
let bottom: CGFloat = 400
// The size of the cropped image
let size = CGSize(width: view.frame.size.width, height: view.frame.size.height - top - bottom)
// Start the context
UIGraphicsBeginImageContext(size)
// we are going to use context in a couple of places
let context = UIGraphicsGetCurrentContext()!
// Transform the context so that anything drawn into it is displaced "top" pixels up
// Something drawn at coordinate (0, 0) will now be drawn at (0, -top)
// This will result in the "top" pixels being cut off
// The bottom pixels are cut off because the size of the of the context
context.translateBy(x: 0, y: -top)
// Draw the view into the context (this is the snapshot)
view.drawHierarchy(in: view.bounds, afterScreenUpdates: true)
let snapshot = UIGraphicsGetImageFromCurrentImageContext()
// End the context (this is required to not leak resources)
UIGraphicsEndImageContext()
// Save to photos
UIImageWriteToSavedPhotosAlbum(snapshot!, nil, nil, nil)
}
You said:
I want to take Screenshot with Blur in it, As blur filter never gets saved in the screenshot.
I wonder if the view being snapshotted might not be the one with the UIVisualEffectView as a subview. Because when I use the code at the end of the answer, the blur effect (and the impact of changing the fractionCompleted) is captured.
The image quality is very low.
If you use UIGraphicsBeginImageContextWithOptions with a scale of zero, it should capture the image at the resolution of the device:
UIGraphicsBeginImageContextWithOptions(size, isOpaque, 0)
I am not able to crop the image.
I personally capture the whole view, and then crop as needed. See UIView extension below.
In Swift 3:
class ViewController: UIViewController {
var animator: UIViewPropertyAnimator?
#IBOutlet weak var imageView: UIImageView!
override func viewDidAppear(_ animated: Bool) {
super.viewDidAppear(animated)
let blur = UIBlurEffect(style: .light)
let effectView = UIVisualEffectView(effect: blur)
view.addSubview(effectView)
effectView.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
effectView.leadingAnchor.constraint(equalTo: imageView.leadingAnchor),
effectView.trailingAnchor.constraint(equalTo: imageView.trailingAnchor),
effectView.topAnchor.constraint(equalTo: imageView.topAnchor),
effectView.bottomAnchor.constraint(equalTo: imageView.bottomAnchor)
])
animator = UIViewPropertyAnimator(duration: 0, curve: .linear) { effectView.effect = nil }
}
#IBAction func didChangeValueForSlider(_ sender: UISlider) {
animator?.fractionComplete = CGFloat(sender.value)
}
#IBAction func didTapSnapshotButton(_ sender: AnyObject) {
if let snapshot = view.snapshot(of: imageView.frame) {
UIImageWriteToSavedPhotosAlbum(snapshot, nil, nil, nil)
}
}
}
extension UIView {
/// Create snapshot
///
/// - parameter rect: The `CGRect` of the portion of the view to return. If `nil` (or omitted),
/// return snapshot of the whole view.
///
/// - returns: Returns `UIImage` of the specified portion of the view.
func snapshot(of rect: CGRect? = nil) -> UIImage? {
// snapshot entire view
UIGraphicsBeginImageContextWithOptions(bounds.size, isOpaque, 0)
drawHierarchy(in: bounds, afterScreenUpdates: true)
let wholeImage = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
// if no `rect` provided, return image of whole view
guard let image = wholeImage, let rect = rect else { return wholeImage }
// otherwise, grab specified `rect` of image
let scale = image.scale
let scaledRect = CGRect(x: rect.origin.x * scale, y: rect.origin.y * scale, width: rect.size.width * scale, height: rect.size.height * scale)
guard let cgImage = image.cgImage?.cropping(to: scaledRect) else { return nil }
return UIImage(cgImage: cgImage, scale: scale, orientation: .up)
}
}
}
Or in Swift 2:
class ViewController: UIViewController {
var animator: UIViewPropertyAnimator?
#IBOutlet weak var imageView: UIImageView!
override func viewDidAppear(animated: Bool) {
super.viewDidAppear(animated)
let blur = UIBlurEffect(style: .Light)
let effectView = UIVisualEffectView(effect: blur)
view.addSubview(effectView)
effectView.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activateConstraints([
effectView.leadingAnchor.constraintEqualToAnchor(imageView.leadingAnchor),
effectView.trailingAnchor.constraintEqualToAnchor(imageView.trailingAnchor),
effectView.topAnchor.constraintEqualToAnchor(imageView.topAnchor),
effectView.bottomAnchor.constraintEqualToAnchor(imageView.bottomAnchor)
])
animator = UIViewPropertyAnimator(duration: 0, curve: .Linear) { effectView.effect = nil }
}
#IBAction func didChangeValueForSlider(sender: UISlider) {
animator?.fractionComplete = CGFloat(sender.value)
}
#IBAction func didTapSnapshotButton(sender: AnyObject) {
if let snapshot = view.snapshot(of: imageView.frame) {
UIImageWriteToSavedPhotosAlbum(snapshot, nil, nil, nil)
}
}
}
extension UIView {
/// Create snapshot
///
/// - parameter rect: The `CGRect` of the portion of the view to return. If `nil` (or omitted),
/// return snapshot of the whole view.
///
/// - returns: Returns `UIImage` of the specified portion of the view.
func snapshot(of rect: CGRect? = nil) -> UIImage? {
// snapshot entire view
UIGraphicsBeginImageContextWithOptions(bounds.size, opaque, 0)
drawViewHierarchyInRect(bounds, afterScreenUpdates: true)
let wholeImage = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
// if no `rect` provided, return image of whole view
guard let rect = rect, let image = wholeImage else { return wholeImage }
// otherwise, grab specified `rect` of image
let scale = image.scale
let scaledRect = CGRect(x: rect.origin.x * scale, y: rect.origin.y * scale, width: rect.size.width * scale, height: rect.size.height * scale)
guard let cgImage = CGImageCreateWithImageInRect(image.CGImage!, scaledRect) else { return nil }
return UIImage(CGImage: cgImage, scale: scale, orientation: .Up)
}
}
So, when I capture four images at four different slider positions, that yields:
I am not able to crop the image in the right way, As there is navigation bar and status bar showing with blank (White) background. (Rest of the image crops well).
here is the code -
let top: CGFloat = 70
let bottom: CGFloat = 280
// The size of the cropped image
let size = CGSize(width: view.frame.size.width, height: view.frame.size.height - top - bottom)
// Start the context
UIGraphicsBeginImageContext(size)
// we are going to use context in a couple of places
let context = UIGraphicsGetCurrentContext()!
// Transform the context so that anything drawn into it is displaced "top" pixels up
// Something drawn at coordinate (0, 0) will now be drawn at (0, -top)
// This will result in the "top" pixels being cut off
// The bottom pixels are cut off because the size of the of the context
context.translateBy(x: 0, y: 0)
// Draw the view into the context (this is the snapshot)
UIGraphicsBeginImageContextWithOptions(size,view.isOpaque, 0)
self.view.drawHierarchy(in: view.bounds, afterScreenUpdates: true)
let snapshot = UIGraphicsGetImageFromCurrentImageContext()

CALayer contents not being displayed in Swift2

import UIKit
class ViewController: UIViewController {
#IBOutlet weak var myView: UIView!
override func viewDidLoad() {
super.viewDidLoad()
let url = NSURL(string: "http://blogs.independent.co.uk/wp-content/uploads/2012/12/some-girls.jpg")
var image : UIImage? = nil
if let data = NSData(contentsOfURL: url!) {
image = UIImage(data: data)
}
let myLayer = CALayer()
myLayer.anchorPoint = CGPoint(x: 0, y: 0)
myLayer.bounds = CGRectMake(0, 0, self.view.bounds.width, self.view.bounds.height)
myLayer.position = CGPoint(x: 0,y: 0)
myLayer.borderColor = UIColor.redColor().CGColor
myLayer.borderWidth = 2.0
// the image is not displayed
myLayer.contents = image
print(myLayer.contents)
myView.layer.addSublayer(myLayer)
myView.layer.opacity = 0.3
}
}
The UIImage is not being displayed why is that? whats wrong with the code? Please Help anyone who is well versed in Core Animation and Swift
In CALayer CGImage is used and not UIImage Hence Convert the UIImage into CGImage like this :
myLayer.contents = image?.CGImage
This should fix that.