I am showing some images in the collection view cells . As of now I am using a simple collection view which shows the items and it is currently showing two items per row . The following code is given below:
import UIKit
import MBProgressHUD
class HotViewController: BaseViewController {
// MARK: - IBOutlets
@IBOutlet var collectionView: UICollectionView!
@IBOutlet weak var filterSwitch: UISwitch!
@IBOutlet weak var toolbarHeightConstraint: NSLayoutConstraint!
@IBOutlet weak var toolbarView: UIView!
@IBOutlet weak var messageLabel: UILabel!
// MARK: - Properties
let hotViewModel = HotViewModel()
var hotPhotos = [ImageMeta]()
var filteredPhotos = [ImageMeta]()
// MARK: - ViewLifeCycle
override func viewDidLoad() {
super.viewDidLoad()
setupViewModel()
}
// MARK: - Methods
func setupViewModel() {
MBProgressHUD.showAdded(to: self.view, animated: true)
hotViewModel.getHotPhotos()
hotViewModel.getPhotoListDidSucess = { [weak self] list in
guard let strongSelf = self else {return}
strongSelf.hotPhotos = list
strongSelf.filteredPhotos = list.filter{$0.in_most_viral == true}
DispatchQueue.main.async {
MBProgressHUD.hide(for: strongSelf.view, animated: true)
strongSelf.collectionView.reloadData()
}
}
hotViewModel.getPhotoListDidFailed = { [weak self] message in
print("message \(message)")
guard let strongSelf = self else {return}
DispatchQueue.main.async {
MBProgressHUD.hide(for: strongSelf.view, animated: true)
}
}
}
// MARK: - Actions
@IBAction func switchValueDidChanged(_ sender: Any) {
self.collectionView.reloadData()
}
@IBAction func aboutButtonClicked(_ sender: UIButton) {
showPopUp()
}
}
// MARK: - CollectionViewDataSource
extension HotViewController: UICollectionViewDataSource,UICollectionViewDelegate {
func numberOfSections(in collectionView: UICollectionView) -> Int {
return 1
}
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
if filterSwitch.isOn && filteredPhotos.count == 0 {
messageLabel.isHidden = false
}
else{
messageLabel.isHidden = true
}
return (filterSwitch.isOn ? filteredPhotos.count : hotPhotos.count)
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let photo = filterSwitch.isOn ? filteredPhotos[indexPath.row] : hotPhotos[indexPath.row]
let cell : PhotoListCell = collectionView.dequeueReusableCell(for: indexPath)
cell.configureCell(with: photo)
return cell
}
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
let photo = filterSwitch.isOn ? filteredPhotos[indexPath.row] : hotPhotos[indexPath.row]
showDetailedPage(metaData: photo)
}
}
// MARK: - UICollectionViewDelegateFlowLayout
extension HotViewController: UICollectionViewDelegateFlowLayout {
func collectionView(_ collectionView: UICollectionView,
layout collectionViewLayout: UICollectionViewLayout,
minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
return CGFloat(interitemSpacing)
}
func collectionView(_ collectionView: UICollectionView, layout
collectionViewLayout: UICollectionViewLayout,
minimumLineSpacingForSectionAt section: Int) -> CGFloat {
return CGFloat(lineSpacing)
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
return getItemSize()
}
}
I am getting the following result as:
So in this image you can see 1 and 2 marked in red . What I want is
- A) on pressing 1 the number of items per row should become 1 instead of 2
- B) on pressing 2 the cells should become staggered instead of perfect square .
Is it possible to achieve using the same collection view ?How can I achieve it using the same collection view ?
Here is an example of staggered collection view :
How can I switch to staggered view , list and regular view on button clicks?