I have got this Swift code
let collectionView = UICollectionView(frame: CGRect(x:0,y:0,width:0,height:0),
collectionViewLayout: UICollectionViewFlowLayout())
collectionView.translatesAutoresizingMaskIntoConstraints = false
collectionView.register(PostCell.self, forCellWithReuseIdentifier: cellId)
collectionView.delegate = self
collectionView.dataSource = self
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell
{
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: cellId, for: indexPath) as! PostCell
return cell
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets
{
return UIEdgeInsets(top: 15, left: 5, bottom: 15, right: 5)
}
My goal is to make cell's height automatic based on it's content.I wanted to implement
if let flowLayout = collectionView.collectionViewLayout as? UICollectionViewFlowLayout {
flowLayout.estimatedItemSize = UICollectionViewFlowLayoutAutomaticSize
}
and
let layoutHeight = UICollectionViewFlowLayout()
layoutHeight.estimatedItemSize = CGSize(width: 100, height: 100)
collectionView = UICollectionView(frame: CGRect(x:0,y:0,width:0,height:0), collectionViewLayout: layoutHeight)
But the first one made all cells 50x50 and the second one made them 100x100.Here is my PostCell class
class PostCell: UICollectionViewCell {
override init(frame: CGRect) {
super.init(frame: frame)
designCell()
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
let CellprofileImage: UIImageView = {
let v = UIImageView()
v.layer.cornerRadius = 55
v.layer.masksToBounds = true
v.layer.borderWidth = 3
v.layer.borderColor = UIColor(white: 0.5, alpha: 1).cgColor
v.image = #imageLiteral(resourceName: "guitar")
v.translatesAutoresizingMaskIntoConstraints = false
return v
}()
func designCell(){
addSubview(CellprofileImage)
backgroundColor = .red
cellConstraints()
}
func cellConstraints(){
CellprofileImage.topAnchor.constraint(equalTo: self.topAnchor,constant:20).isActive = true
CellprofileImage.leftAnchor.constraint(equalTo: self.leftAnchor,constant:20).isActive = true
CellprofileImage.widthAnchor.constraint(equalToConstant: 310).isActive = true
CellprofileImage.heightAnchor.constraint(equalToConstant: 310).isActive = true
}
}
Related
I've built a collection view programmatically which is working fine however I am trying to add a header but nothing is showing up at the top for the header.
Here are the lines of code I have included which I understand to be important:
collectionView.register(HeaderCollectionReusableView.self, forSupplementaryViewOfKind: UICollectionElementKindSectionHeader, withReuseIdentifier: HeaderCollectionReusableView.identifier)
func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {
let header = collectionView.dequeueReusableSupplementaryView(ofKind: UICollectionElementKindSectionHeader, withReuseIdentifier: HeaderCollectionReusableView.identifier, for: indexPath) as! HeaderCollectionReusableView
header.backgroundColor = .red
return header
}
func collectionView(_collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForHeaderInSection section: Int) -> CGSize {
return CGSize(width: view.frame.width, height: 100)
}
I am not sure if I am missing some important code or if something is in the wrong place?
Any help would be appreciated.
Thanks!
Declare collection view, UICollectionViewFlowLayout, cellId and headerId:
class YourController: UIViewController {
private var collectionView: UICollectionView?
let layout = UICollectionViewFlowLayout()
let cellId = "cellId"
let headerId = "headerId"
now in viewDidLoad set layout, collection and add constraints:
layout.scrollDirection = .vertical
layout.itemSize = CGSize(width: view.bounds.size.width / 2.2, height: view.bounds.size.width / 2.2) // set item size
collectionView = UICollectionView(frame: .zero, collectionViewLayout: layout)
collectionView?.delegate = self
collectionView?.dataSource = self
collectionView?.backgroundColor = .clear
collectionView?.register(MyCell.self, forCellWithReuseIdentifier: cellId)
collectionView?.register(MyHeader.self, forSupplementaryViewOfKind: UICollectionView.elementKindSectionHeader, withReuseIdentifier: headerId)
collectionView?.contentInset = UIEdgeInsets(top: 0, left: 10, bottom: 0, right: 10)
collectionView?.translatesAutoresizingMaskIntoConstraints = false
guard let collection = collectionView else { return }
view.addSubview(collection)
collection.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor).isActive = true
collection.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor).isActive = true
collection.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor).isActive = true
collection.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor).isActive = true
Now in a separate Extension (the code is much clean) conform the collection delegate and datasource:
extension YourController: UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return 10
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: cellId, for: indexPath) as! MyCell
return cell
}
func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {
let header = collectionView.dequeueReusableSupplementaryView(ofKind: UICollectionView.elementKindSectionHeader, withReuseIdentifier: headerId, for: indexPath) as! MyHeader
header.configure()
return header
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForHeaderInSection section: Int) -> CGSize {
return CGSize(width: view.frame.width, height: 100)
}
}
After that set your custom cell:
class MyCell: UICollectionViewCell {
override init(frame: CGRect) {
super.init(frame: frame)
contentView.backgroundColor = .link
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
}
Now set the reusable view for header:
class MyHeader: UICollectionReusableView {
private let label: UILabel = {
let label = UILabel()
label.text = "This is the header"
label.textAlignment = .center
label.textColor = .white
label.translatesAutoresizingMaskIntoConstraints = false
return label
}()
public func configure() {
backgroundColor = .systemGreen
addSubview(label)
label.topAnchor.constraint(equalTo: topAnchor).isActive = true
label.leadingAnchor.constraint(equalTo: leadingAnchor).isActive = true
label.trailingAnchor.constraint(equalTo: trailingAnchor).isActive = true
label.bottomAnchor.constraint(equalTo: bottomAnchor).isActive = true
}
}
This is the result:
When using storyboards or nibs, outlets for CollectionViews are implicitly unwrapped, so accessing and configuring the collectionView is a straightforward process.
#IBOutlet var collectionView: UICollectionView!
When creating them programmatically we can do something like this:
var collectionView: UICollectionView!
Would this be the correct approach? Theres no guarantee that the collectionView will be initialised, so there's always the possibility for a crash. I would also like to avoid having an optional since I will be forced to unwrap it every time.
I always create them as computed, as there are some attributes you want to add to it. And often lazy as well so you can set dataSource and delegate. You also wants to add the collectionViewLayout in it's initializer. Hence i'm creating the UICollectionViewFlowLayout first.
private lazy var selectionView: UICollectionView = {
let layout = UICollectionViewFlowLayout()
layout.estimatedItemSize = CGSize(width: 64, height: 24)
layout.itemSize = CGSize(width: 64, height: 24)
layout.scrollDirection = .horizontal
layout.minimumInteritemSpacing = 12
let collectionView = UICollectionView(frame: .zero, collectionViewLayout: layout)
collectionView.delegate = self
collectionView.dataSource = self
collectionView.backgroundColor = .white
collectionView.showsHorizontalScrollIndicator = false
collectionView.contentInset = UIEdgeInsets(top: 0, left: 20, bottom: 0, right: 20)
return collectionView
}()
Try this example
ViewController.swift
import UIKit
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
let viewController = MyCollectionViewController()
viewController.modalPresentationStyle = .fullScreen
present(viewController, animated: true) {}
}
}
MyCollectionViewController.swift
import UIKit
class MyCollectionViewController: UIViewController {
var dataModels: [DataModel?] = [DataModel]()
private lazy var collectionView: UICollectionView = {
let layout = UICollectionViewFlowLayout()
layout.scrollDirection = .vertical
let collectionView = UICollectionView(frame: .zero, collectionViewLayout: layout)
collectionView.delegate = self
collectionView.dataSource = self
collectionView.backgroundColor = .white
collectionView.showsHorizontalScrollIndicator = false
collectionView.contentInset = UIEdgeInsets(top: 0, left: 20, bottom: 0, right: 20)
return collectionView
}()
override init(nibName nibNameOrNil: String?, bundle nibBundleOrNil: Bundle?) {
super.init(nibName: nibNameOrNil, bundle: nibBundleOrNil)
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
}
init() {
super.init(nibName: nil, bundle: nil)
self.view.backgroundColor = .yellow
let data = (0...10).map { value -> DataModel in
DataModel(name: "\(value)")
}
dataModels.append(contentsOf: data)
addCollectionView()
}
func addCollectionView() {
self.view.addSubview(self.collectionView)
self.collectionView.register(CollectionViewCell.self, forCellWithReuseIdentifier: "Cell")
self.collectionView.translatesAutoresizingMaskIntoConstraints = false
self.collectionView.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
self.collectionView.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
self.collectionView.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
self.collectionView.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true
}
}
extension MyCollectionViewController: UICollectionViewDataSource {
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
if let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Cell", for: indexPath) as? CollectionViewCell {
if let dataModel = dataModels[indexPath.row] {
print(">>>>\(dataModel.name)")
cell.nameLabel.text = dataModel.name
}
return cell
}
return UICollectionViewCell()
}
func numberOfSections(in collectionView: UICollectionView) -> Int {
return 1
}
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return self.dataModels.count
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize{
return CGSize(width: 200, height: 200)
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets{
return UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
}
}
extension MyCollectionViewController: UICollectionViewDelegate {
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
}
}
class CollectionViewCell: UICollectionViewCell {
var storeBack = UIView()
var nameLabel = UILabel()
public override init(frame: CGRect) {
super.init(frame: frame)
commonInit()
}
public required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
commonInit()
}
fileprivate func commonInit() {
self.contentView.addSubview(self.storeBack)
self.storeBack.backgroundColor=UIColor.green
self.storeBack.translatesAutoresizingMaskIntoConstraints = false
self.storeBack.topAnchor.constraint(equalTo: self.contentView.topAnchor).isActive = true
self.storeBack.leadingAnchor.constraint(equalTo: self.contentView.leadingAnchor).isActive = true
self.storeBack.trailingAnchor.constraint(equalTo: self.contentView.trailingAnchor).isActive = true
self.storeBack.bottomAnchor.constraint(equalTo: self.contentView.bottomAnchor).isActive = true
self.storeBack.addSubview(self.nameLabel)
self.nameLabel.textColor = .black
self.nameLabel.textAlignment = .center
self.nameLabel.numberOfLines = 0
nameLabel.font = UIFont.systemFont(ofSize: 20)
self.nameLabel.translatesAutoresizingMaskIntoConstraints = false
self.nameLabel.topAnchor.constraint(equalTo: storeBack.topAnchor).isActive = true
self.nameLabel.leadingAnchor.constraint(equalTo: storeBack.leadingAnchor).isActive = true
self.nameLabel.trailingAnchor.constraint(equalTo: storeBack.trailingAnchor).isActive = true
self.nameLabel.bottomAnchor.constraint(equalTo: storeBack.bottomAnchor).isActive = true
}
}
struct DataModel: Codable {
var name: String
}
I need to reload a background image in the MainVC when the user chooses it from the ViewController that will be dismissed but I can't figure out how. Any idea?
Ps. In the MainVC I have a collectionView, every cell contain another collectionView and these collectionViews have a custom cell.
When the user chooses a background image that image is passed to the custom cell and should be set as background.
Protocol
protocol ThemeDelegate {
func handlePassThemeData(data: UIImage)
}
MainVC
class MainVC: UIViewController, UICollectionViewDelegateFlowLayout, UICollectionViewDataSource, ThemeDelegate {
var currentTheme = UIImage(named: "4")!
let collectionView: UICollectionView = {
let layout = UICollectionViewFlowLayout()
layout.scrollDirection = .vertical
let collectionView = UICollectionView(frame: .zero, collectionViewLayout: layout)
collectionView.translatesAutoresizingMaskIntoConstraints = false
collectionView.register(QuoteCell.self, forCellWithReuseIdentifier: reuseIdentifier)
collectionView.register(FeaturedCell.self, forCellWithReuseIdentifier: featuredReuseIdentifier)
collectionView.register(AuthorCell.self, forCellWithReuseIdentifier: authorReuseIdentifier)
return collectionView
}()
override func viewDidLoad() {
super.viewDidLoad
setUpViews()
setupNavigationBarItems()
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
if indexPath.item == 0 {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: reuseIdentifier, for: indexPath) as! QuoteCell
createGradientLayer(bounds: CGRect(x: 0, y: 0, width: cell.frame.width, height: cell.frame.height), cell: cell)
cell.delegate = self
cell.imageToPass = currentTheme
return cell
} else if indexPath.item == 1 {
...
}
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
if indexPath.item == 0 {
return CGSize(width: view.frame.width, height: view.frame.height / 1.5)
} else if indexPath.item == 1 {
return CGSize(width: view.frame.width, height: view.frame.height / 1.95)
} else {
return CGSize(width: view.frame.width, height: 160)
}
}
func setupNavigationBarItems() {
let themesButton = setUpBarButton(image: #imageLiteral(resourceName: "themes_icon_color"))
themesButton.addTarget(self, action: #selector(handleThemesTapped), for: .touchUpInside)
navigationItem.leftBarButtonItem = UIBarButtonItem(customView: themesButton)
}
func setUpViews() {
view.addSubview(collectionView)
collectionView.delegate = self
collectionView.dataSource = self
collectionView.anchors(top: view.safeAreaLayoutGuide.topAnchor, left: view.leftAnchor, bottom: view.bottomAnchor, right: view.rightAnchor)
}
func handlePassThemeData(data: UIImage) {
self.currentTheme = data
self.collectionView.reloadData()
}
#objc func handleThemesTapped() {
let themesVc = ThemesVC(collectionViewLayout: UICollectionViewFlowLayout())
let navController = UINavigationController(rootViewController: themesVc)
themesVc.delegate = self
navigationController?.present(navController, animated: true, completion: nil)
}
}
MainVC Cell with ColletionView
class QuoteCell: UICollectionViewCell, UICollectionViewDelegateFlowLayout, UICollectionViewDataSource {
var imageToPass = UIImage(named: "2")!
let collectionView: UICollectionView = {
let layout = UICollectionViewFlowLayout()
layout.scrollDirection = .horizontal
let collectionView = UICollectionView(frame: .zero, collectionViewLayout: layout)
collectionView.translatesAutoresizingMaskIntoConstraints = false
collectionView.register(QuoteSubCell.self, forCellWithReuseIdentifier: "cell")
return collectionView
}()
override init(frame: CGRect) {
super.init(frame: frame)
setUpViews()
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) as! QuoteSubCell
cell.quote = quotes[indexPath.item]
cell.setupCell(with: imageToPass)
return cell
}
func setUpViews() {
addSubview(collectionView)
collectionView.delegate = self
collectionView.dataSource = self
collectionView.anchors(top: nameLabel.bottomAnchor, left: leftAnchor, bottom: bottomAnchor, right: rightAnchor)
}
}
CustomCell
class QuoteSubCell: UICollectionViewCell {
var backgroundImage: UIImageView = {
let view = UIImageView()
view.clipsToBounds = true
view.contentMode = .scaleAspectFill
view.image = UIImage(named: "2")
return view
}()
override init(frame: CGRect) {
super.init(frame: frame)
setUpViews()
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
func setupCell(with image: UIImage) {
backgroundImage.image = image
}
func setUpViews() {
contentView.addSubview(backgroundImage)
backgroundImage.anchors(top: contentView.topAnchor, left: contentView.leftAnchor, bottom: contentView.bottomAnchor, right: contentView.rightAnchor)
}
}
ThemesVC where the user chooses the background
class ThemesVC: UICollectionViewController, UICollectionViewDelegateFlowLayout {
var delegate: ThemeDelegate?
override func viewDidLoad() {
super.viewDidLoad()
collectionView.dataSource = self
collectionView.delegate = self
setUpViews()
}
override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: reuseIdentifier, for: indexPath) as! ThemeCell
cell.backgroundImage.image = themeCell.backgroundImages[indexPath.item]
cell.layer.cornerRadius = 10
return cell
}
override func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
delegate?.handlePassThemeData(data: themeCell.backgroundImages[indexPath.item])
self.navigationController?.dismiss(animated: true, completion: nil)
}
func setUpViews() {
collectionView.register(ThemeCell.self, forCellWithReuseIdentifier: reuseIdentifier)
collectionView.backgroundColor = UIColor(white: whitePoint, alpha: 1)
collectionView.alwaysBounceVertical = true
collectionView.showsVerticalScrollIndicator = false
}
}
You almost got it right.
class MainVC: UIViewController, UICollectionViewDelegateFlowLayout, UICollectionViewDataSource, ThemeDelegate {
//MARK: Properties
var currentTheme = UIImage(named: "defaultImage")
override func viewDidLoad() {
super.viewDidLoad()
setUpViews()
}
func setUpViews() {
view.addSubview(collectionView)
collectionView.anchors(top: view.safeAreaLayoutGuide.topAnchor, left: view.leftAnchor, bottom: view.bottomAnchor, right: view.rightAnchor)
}
func handlePassThemeData(data: UIImage) {
self.currentTheme = data //override your variable with the new image
self.collectionView.reloadData() //reload the collectionView, to apply the change
}
#objc func handleThemesTapped() {
let themesVc = ThemesVC(collectionViewLayout: UICollectionViewFlowLayout())
themesVc.delegate = self
//no need to instantiate a new navigationController. Just push to the current one, if you want the animation from right, and not from bottom-up.
navigationController?.pushViewController(themesVc, animated: true)
}
}
Delegates should always be weak referenced.
class ThemesVC: UICollectionViewController, UICollectionViewDelegateFlowLayout {
weak var delegate: ThemeDelegate?
override func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
delegate?.handlePassThemeData(data: themeCell.backgroundImages[indexPath.item])
self.navigationController?.popViewController(animated: true)
}
}
Also, you don't need to create a static variable inside the cell. Instead, pass your currentImage to your cell's variable imageToPass in the method cellForItemAt.
class QuoteCell: UICollectionViewCell, UICollectionViewDelegateFlowLayout, UICollectionViewDataSource {
var imageToPass = UIImage(named: "defaultImage")//pass this image to the cells inside the collectionView
override init(frame: CGRect) {
super.init(frame: frame)
setUpViews()
}
func setUpViews() {
addSubview(collectionView)
collectionView.anchors(top: nameLabel.bottomAnchor, left: leftAnchor, bottom: bottomAnchor, right: rightAnchor)
}
}
Finally, your subCells should show your image:
class QuoteSubCell: UICollectionViewCell {
var backgroundImage: UIImageView = {
let view = UIImageView()
view.clipsToBounds = true
view.contentMode = .scaleAspectFill
view.image = QuoteSubCell.chosenTheme
return view
}()
override init(frame: CGRect) {
super.init(frame: frame)
setUpViews()
}
private func setUpViews() {
contentView.addSubview(backgroundImage)
backgroundImage.anchors(top: contentView.topAnchor, left: contentView.leftAnchor, bottom: contentView.bottomAnchor, right: contentView.rightAnchor)
}
func setupCell(with image: UIImage) { //use this setup function inside "cellForItemAt" method, where you will pass the `imageToPass` image.
backgroundImage.image = image
}
}
UPDATE:
cellForItemAt inside MainVC:
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
if indexPath.item == 0 {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: reuseIdentifier, for: indexPath) as! QuoteCell
createGradientLayer(bounds: CGRect(x: 0, y: 0, width: cell.frame.width, height: cell.frame.height), cell: cell)
cell.delegate = self
cell.imageToPass = currentTheme //here you pass the image the 1st time
return cell
} else if indexPath.item == 1 {
...
}
}
cellForItemAt inside QuoteCell:
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) as! QuoteSubCell
cell.quote = quotes[indexPath.item]
cell.setupCell(with: imageToPass) //here you pass the image the second time
return cell
}
If you're still unable to make it work, I will ask you to share the code from the cellForItemAt methods from the both collectionViews.
I've gotten my cells to overlap by setting the minimumLineSpacing property of the collection views layout to negative. But, when I scroll and the cells are redrawn, they now overlap in the opposite direction. I've put pictures below.
How do I keep the cells overlapping as seen in the first picture when the collection view is scrolled and cells are redraw?
import UIKit
class PopularView: UIView {
let cellID = "cellID"
// MARK: - Views
let collectionView: UICollectionView = {
let layout = UICollectionViewFlowLayout()
layout.scrollDirection = .vertical
layout.minimumLineSpacing = -55 // -------Allows Overlap-----
layout.itemSize = CGSize(width: SCREEN_WIDTH, height: 185)
layout.minimumInteritemSpacing = 17
let view = UICollectionView(frame: CGRect.zero, collectionViewLayout: layout)
view.backgroundColor = .white
return view
}()
// MARK: - Initializers
override init(frame: CGRect) {
super.init(frame: frame)
collectionView.dataSource = self
collectionView.register(PopularCell.self, forCellWithReuseIdentifier: cellID)
backgroundColor = .white
setupCollectionView()
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
// MARK: - Setup
fileprivate func setupCollectionView() {
self.addSubview(collectionView)
collectionView.anchors(top: self.topAnchor, topPad: 0, bottom: self.bottomAnchor, bottomPad: 0, left: self.leftAnchor, leftPad: 0, right: self.rightAnchor, rightPad: 0, height: nil, width: nil)
collectionView.contentSize = CGSize(width: 700, height: 700)
}
}
extension PopularView: UICollectionViewDataSource {
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return 500
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: cellID, for: indexPath) as! PopularCell
cell.background.backgroundColor = .random
return cell
}
}
Try this, that might help you:
1- Inside your Cells, you could define innerView inside your cell and set the frame to
let innerView:UIView = CGRect(x: 0,y: -overlapHeight,width: screenWidth, height:cell.height + overlapHeight)
cell?.contentView.addSubview(innerView)
2- Configure your cell during initialisation with this:
cell?.contentView.clipsToBounds = false
3- When loading cell, set the z-order:
override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: reuseIdentifier, for: indexPath)
cell.layer.zPosition = CGFloat(indexPath.row)
// configure your cell after here
}
You should be able to see the nested views inside your content view to have overlapping.
I have drafted a sample code, not looking perfectly, but will help you get started:
private let reuseIdentifier = "Cell"
private let overlapHeight:CGFloat = 100
class CustomCollectionCell:UICollectionViewCell {
var innerView:UIView?
override init(frame: CGRect) {
super.init(frame: CGRect(x: 0, y: 0, width: UIScreen.main.bounds.width, height: 300))
self.backgroundColor = .darkGray
let innerView = UIView(frame: CGRect(x: 0,y: -overlapHeight,width: UIScreen.main.bounds.width,height: overlapHeight + self.contentView.frame.height))
self.innerView = innerView
innerView.layer.cornerRadius = 20
self.contentView.addSubview(innerView)
self.contentView.clipsToBounds = false
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
func configure(color:UIColor?) {
innerView?.backgroundColor = color
}
}
import UIKit
private let reuseIdentifier = "Cell"
private let overlapHeight:CGFloat = 100
class CustomCollectionCell:UICollectionViewCell {
var innerView:UIView?
override init(frame: CGRect) {
super.init(frame: frame)
self.backgroundColor = .darkGray
let innerView = UIView(frame: CGRect(x: 0,y: -overlapHeight,width: UIScreen.main.bounds.width,height: overlapHeight + self.contentView.frame.height))
self.innerView = innerView
innerView.layer.cornerRadius = 20
self.contentView.addSubview(innerView)
self.contentView.clipsToBounds = false
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
func configure(color:UIColor?) {
innerView?.backgroundColor = color
}
}
class CollectionViewController: UICollectionViewController {
override func viewDidLoad() {
super.viewDidLoad()
let flowLayout = UICollectionViewFlowLayout()
flowLayout.itemSize = CGSize(width: UIScreen.main.bounds.width, height: 190)
flowLayout.sectionInset = UIEdgeInsets(top: 0, left: 5, bottom: 0, right: 5)
flowLayout.scrollDirection = .vertical
flowLayout.minimumInteritemSpacing = 0.0
collectionView.collectionViewLayout = flowLayout
// Register cell classes
self.collectionView!.register(CustomCollectionCell.self, forCellWithReuseIdentifier: reuseIdentifier)
}
// MARK: UICollectionViewDataSource
override func numberOfSections(in collectionView: UICollectionView) -> Int {
// #warning Incomplete implementation, return the number of sections
return 1
}
override func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
// #warning Incomplete implementation, return the number of items
return 30
}
override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: reuseIdentifier, for: indexPath)
cell.layer.zPosition = CGFloat(indexPath.row)
var color:UIColor?
switch indexPath.row % 4 {
case 0:
color = .purple
case 1:
color = .yellow
case 2:
color = .green
default:
color = .red
}
if let cell = cell as? CustomCollectionCell {
cell.configure(color: color)
}
return cell
}
}
Result:
import UIKit
private let reuseIdentifier = "NewCell"
class SeondViewController: UIViewController, UICollectionViewDelegateFlowLayout {
#IBOutlet var myNavBar: UINavigationBar!
var frutta: [String]!
override func viewDidLoad() {
super.viewDidLoad()
let margins = self.view.layoutMarginsGuide
let layout = UICollectionViewFlowLayout()
layout.sectionInset = UIEdgeInsets(top: 30, left: 10, bottom: 10, right: 10)
layout.scrollDirection = .vertical
let newCollectionView: UICollectionView = UICollectionView(frame: self.view.frame, collectionViewLayout: layout)
newCollectionView.dataSource = self
newCollectionView.delegate = self
newCollectionView.register(SecondTabCollectionViewCell.self, forCellWithReuseIdentifier: reuseIdentifier)
newCollectionView.reloadData()
newCollectionView.backgroundColor = UIColor.clear
newCollectionView.isHidden = false
newCollectionView.translatesAutoresizingMaskIntoConstraints = false
self.view.addSubview(newCollectionView)
frutta = ["Mele", "Olive", "Pere", "Noci", "Banane", "Kiwi", "Ananas"]
myNavBar.leadingAnchor.constraint(equalTo: margins.leadingAnchor).isActive = true
myNavBar.topAnchor.constraint(equalTo: margins.topAnchor).isActive = true
myNavBar.trailingAnchor.constraint(equalTo: margins.trailingAnchor).isActive = true
newCollectionView.leadingAnchor.constraint(equalTo: margins.leadingAnchor).isActive = true
newCollectionView.topAnchor.constraint(equalTo: myNavBar.bottomAnchor).isActive = true
newCollectionView.trailingAnchor.constraint(equalTo: margins.trailingAnchor).isActive = true
◦ newCollectionView.bottomAnchor.constraint(equalTo: margins.bottomAnchor).isActive = true
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
return CGSize(width: collectionView.bounds.size.width / 2, height: collectionView.bounds.size.height / 3)
}
}
extension SecondViewController: UICollectionViewDataSource {
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return frutta.count
}
func numberOfSections(in collectionView: UICollectionView) -> Int {
return 1
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let myCell = collectionView.dequeueReusableCell(withReuseIdentifier: reuseIdentifier, for: indexPath) as! SecondTabCollectionViewCell
myCell.backgroundColor = UIColor.clear
myCell.secondCellLabel = UILabel()
myCell.secondCellLabel.frame.size = CGSize(width: myCell.bounds.width / 2, height: myCell.secondCellLabel.bounds.height / 2)
myCell.secondCellLabel.adjustsFontSizeToFitWidth = true
myCell.secondCellLabel.backgroundColor = UIColor.clear
myCell.secondCellLabel.textColor = UIColor.black
myCell.secondCellLabel.text = frutta[indexPath.item]
myCell.translatesAutoresizingMaskIntoConstraints = false
myCell.contentView.addSubview(myCell.secondCellLabel)
return myCell
}
}
extension SecondViewController: UICollectionViewDelegate {
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
print("Hai premuto \(indexPath.row).")
}
}
import UIKit
class SecondTabCollectionViewCell: UICollectionViewCell {
var secondCellLabel: UILabel!
override init(frame: CGRect) {
super.init(frame: frame)
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) non e stato implementato.")
}
}
myCell.secondCellLabel.frame.size = CGSize(width: myCell.bounds.width / 2, height: myCell.secondCellLabel.bounds.height / 2)
The above line is wrong in cellForItemAt, you put the height of label is myCell.secondCellLabel.bounds.height instead of myCell.bounds.height.
correct one is
myCell.secondCellLabel.frame.size = CGSize(width: myCell.bounds.width / 2, height: myCell.bounds.height / 2)
It is a little strange to be laying out a cell's internal views in cellForRowAtIndexPath, this should be done in the cell class itself. The basic problem is that you your UILabel is appearing in the top left corner of the cell and has a height of zero, so you cannot see it. I moved the code you had in cellForRowAtIndexPath into the cell itself.
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let myCell = collectionView.dequeueReusableCell(withReuseIdentifier: reuseIdentifier, for: indexPath) as! SecondTabCollectionViewCell
myCell.backgroundColor = UIColor.clear
myCell.secondCellLabel.text = frutta[indexPath.item]
return myCell
}
import UIKit
class SecondTabCollectionViewCell: UICollectionViewCell {
var secondCellLabel: UILabel = {
let label = UILabel()
label.translatesAutoresizingMaskIntoConstraints = false
label.backgroundColor = .clear
label.textColor = .black
label.adjustsFontSizeToFitWidth = true
label.textAlignment = .center
return label
}()
override init(frame: CGRect) {
super.init(frame: frame)
configureViews()
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
}
private func configureViews() {
addSubview(secondCellLabel)
}
override func layoutSubviews() {
super.layoutSubviews()
configureLayout()
}
private func configureLayout() {
let width = bounds.width / 2
let height = frame.height / 2
let size = CGSize(width: width, height: height)
let origin = CGPoint(x: width/2, y: height/2)
secondCellLabel.frame = CGRect(origin: origin, size: size)
}
}