Can't change CollectionView frame with CGRect - ios

Question

I am trying to build a simple side menu using CollectionView. The problem is that I can't get it to work because changing frame using CGRect doesn't seem to do anything and the menu won't appear. Any help would be much appreciated.
let blackView = UIView()
var collectionView: UICollectionView {
let layout = UICollectionViewFlowLayout()
let cv = UICollectionView(frame: .zero, collectionViewLayout: layout)
cv.backgroundColor = UIColor.white
return cv
}
func showMenu() {
if let window = UIApplication.shared.keyWindow {
blackView.backgroundColor = UIColor(white: 0, alpha: 0.5)
blackView.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(handleDismiss)))
window.addSubview(blackView)
window.addSubview(collectionView)
//This line doesn't work
collectionView.frame = CGRect(x: 0, y: 0, width: 700, height: window.frame.height)
//This works fine
blackView.frame = window.frame

Answer 1

That's because the collection view here:
window.addSubview(collectionView)
and the collectionView here
//This line doesn't work
collectionView.frame = CGRect(x: 0, y: 0, width: 700, height: window.frame.height)
are different objects. You add the first collectionView to the window, and then you change the frame of the second one. The misunderstanding comes from this code:
var collectionView: UICollectionView {
let layout = UICollectionViewFlowLayout()
let cv = UICollectionView(frame: .zero, collectionViewLayout: layout)
cv.backgroundColor = UIColor.white
return cv
}
This creates a dynamic variable, so that whenever you access collectionView, a new UICollectionView is created. It's actually equivalent to a function call. It's like
func makeCollectionView() -> UICollectionView {
let layout = UICollectionViewFlowLayout()
let cv = UICollectionView(frame: .zero, collectionViewLayout: layout)
cv.backgroundColor = UIColor.white
return cv
}
and then later doing
window.addSubview(makeCollectionView())
//This line doesn't work
makeCollectionView().frame = CGRect(x: 0, y: 0, width: 700, height: window.frame.height)
What you should do instead is define the variable at the beginning, and initialize it later. For example like this:
let blackView = UIView()
var collectionView: UICollectionView!
func showMenu() {
if let window = UIApplication.shared.keyWindow {
blackView.backgroundColor = UIColor(white: 0, alpha: 0.5)
blackView.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(handleDismiss)))
// Create collectionView
if collectionView == nil {
collectionView = UICollectionView(frame: .zero, collectionViewLayout: UICollectionViewFlowLayout())
collectionView.backgroundColor = UIColor.white
}
window.addSubview(blackView)
window.addSubview(collectionView)
//This line works finally
collectionView.frame = CGRect(x: 0, y: 0, width: 700, height: window.frame.height)
//This works fine
blackView.frame = window.frame
(depending on your code setup, you may have to create the collectionView at another place, maybe in viewDidLoad or something like that (I'm not sure))

Answer 2

You define the wrong lazy var as the following:
var collectionView: UICollectionView {
let layout = UICollectionViewFlowLayout()
let cv = UICollectionView(frame: .zero, collectionViewLayout: layout)
cv.backgroundColor = UIColor.white
return cv
}
In this situation, the following is the correct format which means its READONLY. you cannot change after return.
var collectionView: UICollectionView {
get{
let layout = UICollectionViewFlowLayout()
let cv = UICollectionView(frame: .zero, collectionViewLayout: layout)
cv.backgroundColor = UIColor.white
return cv}
}
So if you want to change frame, you should change before return like this:
var collectionView: UICollectionView {
get{
let layout = UICollectionViewFlowLayout()
let cv = UICollectionView(frame: .zero, collectionViewLayout: layout)
cv.backgroundColor = UIColor.white
cv.frame = CGRect(x: 0, y: 0, width: 300, height: 300) // just an example.
return cv}
}
What you Really want should be like this and define it as a computed property, then you can change frame at anywhere:
var collectionView : UICollectionView = {
let layout = UICollectionViewFlowLayout()
let cv = UICollectionView(frame: .zero, collectionViewLayout: layout)
cv.backgroundColor = UIColor.white
return cv
}()
So, basically you just miss a "=" and "()". Hope you know the reason now.