How to display UICollectionView inside static TableViewCell? - ios

I want to display UICollectionView inside static TableViewCell
I have a static TableViewCell that contains CollectionView. Well, the problem is that, in my opinion, code looks good but when I launch program, TableViewCell doesn't show me CollectionView. I'm a little bit confused, so I will be so happy if you help me. Thanks
TableViewController Class:
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
var Cell = tableView.dequeueReusableCell(withIdentifier: "Action")
switch indexPath.section {
case 0:
tableView.register(ScheduleCell.self, forCellReuseIdentifier: "Schedule")
Cell = tableView.dequeueReusableCell(withIdentifier: "Schedule") as! ScheduleCell
case 1:
return Cell!
case 2:
tableView.register(MarksCell.self, forCellReuseIdentifier: "Marks")
Cell = tableView.dequeueReusableCell(withIdentifier: "Marks") as! MarksCell
default:
Cell = tableView.dequeueReusableCell(withIdentifier: "Action") as! ActionCell
}
return Cell!
}
ActionCell:
extension ActionCell: UICollectionViewDelegateFlowLayout, UICollectionViewDataSource {
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return 3
}
func numberOfSections(in collectionView: UICollectionView) -> Int {
return 1
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "ActionCell", for: indexPath) as! ActionsCollectionViewCell
var Labels = ["РАСПИСАНИЕ", "ДОМАШНИЕ ЗАДАНИЯ", "ОЦЕНКИ"]
var Icons = ["Safari", "DZ", "Rating"]
var Colors = [UIColor.init(red: 26/255, green: 196/255, blue: 234/255, alpha: 1),
UIColor.init(red: 251/255, green: 143/255, blue: 25/255, alpha: 1),
UIColor.init(red: 251/255, green: 25/255, blue: 118/255, alpha: 1)]
cell.Title.text = Labels[indexPath.item]
cell.Icon.image = UIImage.init(named: Icons[indexPath.item])
cell.Button.backgroundColor = Colors[indexPath.item]
return cell
}
}
Also, I have to notice that in Storyboard i mentioned all classes and ReuseIDs

If you're using 'UITableView' with Static Cells as a content you don't need to implement 'tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath)' everything can be defined in Storyboard.
Here's how the UITableViewController would look like in storyboard, using custom cells (TableCell, CollectionCell) both for table and collection view, and having 'UITableViewCell'
act as a data source for containing 'UICollectionView':
And here's UITableViewController implementation:
class ViewController: UITableViewController {
}
class TableCell: UITableViewCell {
}
class CollectionCell: UICollectionViewCell {
}
extension TableCell: UICollectionViewDataSource {
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "collectionCell", for: indexPath)
return cell
}
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return 1
}
}

Related

new view created with every collectionView cell tap instead of updating the existing one

I want to have this ring progress view (cocoa pod) inside collectionView Cells. When you tap on a cell, the progress should increase by 0.1 (0.0 = 0% Progress, 1.0 = 100% progress).
Unfortunately, it seems like it always creates a new progress view above the old one, because the shade of red is getting darker and you can see a second/third/.. ring. I have no idea how I can fix this.
This is my code: (Cell class and CollectionViewController Class)
import UIKit
private let reuseIdentifier = "Cell"
class myCollectionViewController: UICollectionViewController {
#IBOutlet var myCollectionView: UICollectionView!
override func viewDidLoad() {
super.viewDidLoad()
}
override func viewDidAppear(_ animated: Bool) {
myCollectionView.reloadData()
}
override func numberOfSections(in collectionView: UICollectionView) -> Int {
return 1
}
override func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return 7
}
override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: reuseIdentifier, for: indexPath) as! myCollectionViewCell
if(indexPath.item != 0){
cell.setProgress(progress: 1 / Double(indexPath.item))
}
return cell
}
override func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: reuseIdentifier, for: indexPath) as! myCollectionViewCell
cell.setProgress(progress: cell.getProgress() + 0.1)
myCollectionView.reloadData()
}
}
import UIKit
import MKRingProgressView
class myCollectionViewCell: UICollectionViewCell {
#IBOutlet weak var ringView: UIView!
let ringsize = 150
var ringProgressView = RingProgressView()
override func layoutSubviews() {
ringProgressView = RingProgressView(frame: CGRect(x: 0, y: 0, width: ringsize, height: ringsize))
ringProgressView.startColor = .red
ringProgressView.endColor = .magenta
ringProgressView.ringWidth = CGFloat(ringsize) * 0.15
ringProgressView.progress = 0.0
ringProgressView.shadowOpacity = 0.5
ringView.addSubview(ringProgressView)
}
}
extension myCollectionViewCell{
func setProgress(progress: Double){
UIView.animate(withDuration: 0.5){
self.ringProgressView.progress = progress
}
}
func getProgress() -> Double{
return self.ringProgressView.progress
}
}
This is what it looks like when launch (the progress it for testing at (1/indexpath.item):
And this is what it looks like when I TAP THE BOTTOM LEFT CICLE 1 TIME:
I can see with the animation, that a second ring overlays the first ring on the bottom left circle with same progress. Somehow the other rings also changed... why? You can even see the second ring on some other circles. You can also see that the shade of the red went a little bit darker. When I tap multiple times, everything becomes completely (intensive) red.
Thanks for any help!
Simple usage:
override func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
let cell = collectionView.cellForItem(at: indexPath) as! myCollectionViewCell
cell.setProgress(progress: cell.getProgress() + 0.1)
}
you should not call like this:
override func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: reuseIdentifier, for: indexPath) as! myCollectionViewCell
cell.setProgress(progress: cell.getProgress() + 0.1)
myCollectionView.reloadData()
}
because of cell reuse mechanism,
you call
collectionView.dequeueReusableCell(withReuseIdentifier: reuseIdentifier, for: indexPath) as! myCollectionViewCell
you get a cell of objects pool, namely a cell of newly created , or a cell created and not visible
myCollectionView.reloadData()
that's worse, call this, just do resetting,
because you do not maintain the data.
You can use pattern mark & config
in method didSelectItemAt , update the data
in method cellForItemAt , update the UI, use myCollectionView.reloadData() to trigger
var progressData = [IndexPath: Double]()
override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: reuseIdentifier, for: indexPath) as! myCollectionViewCell
if let val = progressData[indexPath]{
cell.setProgress(progress: val)
}
else{
var value = Double(0)
if(indexPath.item != 0){
value = 1 / Double(indexPath.item)
}
progressData[indexPath] = value
cell.setProgress(progress: value)
}
return cell
}
override func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
progressData[indexPath]! += 0.1
myCollectionView.reloadData()
}

How to change the color of View in collection view

How to change the color of view in collection view when it select and when the select the other view before view came to original color How to set it?
You can use the didSelectItemAtIndexPath method and the didDeselectItemAtIndexPath method from the UICollectionViewDelegate protocol. UICollectionViewDelegate is an Objective-C protocol, indicated by #objc, that allows you to have optional methods like didSelectItemAtIndexPath and didDeselectItemAtIndexPath that you can choose to implement optionally in your delegate.
When UICollectionView gets instantiated initially, it goes through all the available methods you've implemented in the instance of UICollectionViewDelegate with responds(to:), which takes a selector parameter and returns a bool, to see which methods from the UICollectionViewDelegate protocol you've implemented without actually sending a message to them. As it detects the following methods, it remembers them and calls those methods whenever you select or deselect a cell from the collection view:
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath)
if let indexPaths = collectionView.indexPathsForSelectedItems, let firstIndex = indexPaths.first {
cell.backgroundColor = firstIndex == indexPath ? .white : .gray
}
return cell
}
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
if let cell = collectionView.cellForItem(at: indexPath) {
cell.backgroundColor = .white
}
}
func collectionView(_ collectionView: UICollectionView, didDeselectItemAt indexPath: IndexPath) {
guard let cell = collectionView.cellForItem(at: indexPath) else {
return
}
cell.backgroundColor = .gray
}
Alternatively, you can use the collectionView(_:didHighlightItemAt:) method and the collectionView(_:didUnhighlightItemAt:) method. The following sample code is from here:
func collectionView(_ collectionView: UICollectionView, didHighlightItemAt indexPath: IndexPath) {
if let cell = collectionView.cellForItem(at: indexPath) {
cell.contentView.backgroundColor = #colorLiteral(red: 1, green: 0.4932718873, blue: 0.4739984274, alpha: 1)
}
}
func collectionView(_ collectionView: UICollectionView, didUnhighlightItemAt indexPath: IndexPath) {
if let cell = collectionView.cellForItem(at: indexPath) {
cell.contentView.backgroundColor = nil
}
}
You can simply add two methods for changing colour of the view or cell in the collectionView:-
//When cell got selected
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
if let cell = collectionView.cellForItem(at: indexPath){
cell.backgroundColor = .green
}
}
//When cell deselected
func collectionView(_ collectionView: UICollectionView, didDeselectItemAt indexPath: IndexPath) {
if let cell = collectionView.cellForItem(at: indexPath){
cell.backgroundColor = .clear
}
}
If you have view inside your cell as backgroundView then you can use same functions and just need to replace cell.backgroundView.backgroundColor in place of the cell.backgroundColor. Just remember "backgroundView" is the name of the view you have inside cell.
If you want more information about this then you can follow below attached links:-
1). https://www.tutorialfor.com/questions-296884.html
2). https://en.it1352.com/article/fccf358a040b4ddba872d7324602754c.html

CollectionView scrolling changes the selected cells

CollectionView scrolling changes the selected cells. For example, there are 26 letters in my collectionView, items[0] is A, items[1] is B, ... items[25] is Z, now I selected items[1], it is B, and when I scroll the collectionView, items[1] will become deselected and there is another item will be selected. I know the problem is caused by Reuse but I don't know how to fix it properly even I use some solution that showed in google or StackOverflow.
My viewDidLoad:
collectionView.allowsMultipleSelection = false
My CollectionViewCell Class:
import UIKit
class AddCollectionViewCell: UICollectionViewCell {
}
My CollectionView Setting:
func numberOfSections(in collectionView: UICollectionView) -> Int {
return 1
}
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return iconSet.count
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "iconCell", for: indexPath) as! IconCollectionViewCell
cell.iconImage.image = UIImage(named:iconSet[indexPath.row])
return cell
}
My CollectionView's didSelecteItemAt function:
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
if let cell = collectionView.cellForItem(at: indexPath) {
cell.backgroundColor = UIColor(red: 255/255, green: 255/255, blue: 255/255, alpha: 0.3)
cell.backgroundView?.layer.cornerRadius = 5
}
My CollectionView's didDeSelecteItemAt function:
func collectionView(_ collectionView: UICollectionView, didDeselectItemAt indexPath: IndexPath) {
if let cell = collectionView.cellForItem(at: indexPath) {
cell.backgroundColor = UIColor(red: 255/255, green: 255/255, blue: 255/255, alpha: 0.0)
cell.backgroundView?.layer.cornerRadius = 5
}
}
You can achieve this by either store all selected item's index in separate array or you can manage separate property like isSelected in dictionary or array of custom class's objects whichever you used to fill your collectionview cells.
You can simply use array like below:
var arrIndex : [Int] = Int
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "iconCell", for: indexPath) as! IconCollectionViewCell
cell.iconImage.image = UIImage(named:iconSet[indexPath.row])
if arrIndex.contains(indexPath.item) {
cell.backgroundColor = UIColor(red: 255/255, green: 255/255, blue: 255/255, alpha: 0.3)
}
else {
cell.backgroundColor = UIColor(red: 255/255, green: 255/255, blue: 255/255, alpha: 0.0)
}
return cell
}
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
if !arrIndex.contains(indexPath.item) {
arrIndex.append(indexPath.item)
collectionview.reloadData()
}
}
func collectionView(_ collectionView: UICollectionView, didDeselectItemAt indexPath: IndexPath) {
if arrIndex.contains(indexPath.item) {
arrIndex = arrIndex.filter { $0 != indexPath.item }
collectionview.reloadData()
}
}
You can try
var selectedIndex = 0 // set default or nil and check it's nullability before usage
//
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "iconCell", for: indexPath) as! IconCollectionViewCell
cell.iconImage.image = UIImage(named:iconSet[indexPath.row])
if indexPath.row == selectedIndex {
cell.backgroundColor = UIColor(red: 255/255, green: 255/255, blue: 255/255, alpha: 0.3)
}
else {
cell.backgroundColor = UIColor(red: 255/255, green: 255/255, blue: 255/255, alpha: 0.0)
}
return cell
}
My CollectionView's didSelecteItemAt function:
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
selectedIndex = indexPath.row
collectionview.reloadData()
}
My CollectionView's didDeSelecteItemAt function:
func collectionView(_ collectionView: UICollectionView, didDeselectItemAt indexPath: IndexPath) {
// remove this
}

UICollectionView hide/prevent cell scrolling behind Sticky Header

I have a collection view with sticky headers
flowLayout.sectionHeadersPinToVisibleBounds = true
My issue is that the top half of my header is translucent and when I scroll my cell up I can see the cell scrolling behind the header.
I would like to hide the part of the cell view behind the header. In my image attached I do not want to see the green when it is behind the red. The rest of the behavior I want to keep as is.
The reason I need this is I have a wallpaper image at the very back which I need to be shown
#IBOutlet weak var collectionView: UICollectionView!
override func viewDidLoad() {
super.viewDidLoad()
self.collectionView.alwaysBounceVertical = true
collectionView.register(UINib.init(nibName: EXAMPLE_CELL_REUSE_ID, bundle: nil), forCellWithReuseIdentifier: EXAMPLE_CELL_REUSE_ID)
collectionView.register(UINib.init(nibName: EXAMPLE_HEADER_REUSE_ID, bundle: nil), forSupplementaryViewOfKind: UICollectionElementKindSectionHeader, withReuseIdentifier: EXAMPLE_HEADER_REUSE_ID)
if let flowLayout = collectionView.collectionViewLayout as? UICollectionViewFlowLayout {
flowLayout.headerReferenceSize = CGSize(width: 400, height: 100)
flowLayout.sectionHeadersPinToVisibleBounds = true
}
}
func numberOfSections(in collectionView: UICollectionView) -> Int {
return sections.count;
}
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return 1 //self.sections[section].1;
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let exampleCell = collectionView.dequeueReusableCell(withReuseIdentifier: EXAMPLE_CELL_REUSE_ID, for: indexPath) as! MyCellCollectionViewCell;
exampleCell.headerLabel.text = "Cell"
exampleCell.backgroundColor = UIColor.green
return exampleCell;
}
func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {
if kind == UICollectionElementKindSectionHeader {
if let header = collectionView.dequeueReusableSupplementaryView(ofKind: UICollectionElementKindSectionHeader, withReuseIdentifier: EXAMPLE_HEADER_REUSE_ID, for: indexPath) as? ExampleHeader {
// header.backgroundColor = UIColor(red: 1.0, green: 0, blue: 0, alpha: 0.5)
return header
} else {
return UICollectionReusableView()
}
}
return UICollectionReusableView()
}
I think the question here may be similar but there are no responses and it is not quite clear if it is the same issue.
Transparent sticky header ui collectionview don't show cells underneath
This worked for me:
let layout = collectionView.collectionViewLayout as! UICollectionViewFlowLayout
layout.sectionHeadersPinToVisibleBounds = true
layout.sectionInsetReference = .fromSafeArea
view.backgroundColor = .white
collectionView.anchor(top: view.safeAreaLayoutGuide.topAnchor, leading:
view.leadingAnchor, bottom: view.bottomAnchor, trailing: view.trailingAnchor)
You need to apply mask for all cells that located under header view. Use on scrollViewDidScroll
Tutorial: https://medium.com/#peteliev/layer-masking-for-beginners-c18a0a10743
I have created a very simple setup like yours and it is working fine.
class ViewController: UIViewController, UICollectionViewDataSource
{
#IBOutlet weak var collectionView: UICollectionView!
override func viewDidLoad()
{
super.viewDidLoad()
self.collectionView.alwaysBounceVertical = true
if let flowLayout = collectionView.collectionViewLayout as? UICollectionViewFlowLayout
{
flowLayout.headerReferenceSize = CGSize(width: 400, height: 100)
flowLayout.sectionHeadersPinToVisibleBounds = true
}
}
func numberOfSections(in collectionView: UICollectionView) -> Int
{
return 10
}
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int
{
return 1
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell
{
return collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath)
}
func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView
{
if kind == UICollectionElementKindSectionHeader
{
return collectionView.dequeueReusableSupplementaryView(ofKind: UICollectionElementKindSectionHeader, withReuseIdentifier: "rview", for: indexPath)
}
return UICollectionReusableView()
}
}

UICollectionView and selected UICollectionViewCell

I'm trying to do a simple UICollectionView with a custom cell composed of an UIImageView and an UIView above.
When a cell is not selected, the UIView on the top of the cell have is backgroundColor property set to UIColor(red: 1, green: 1, blue: 1, alpha: 0.5).
I have issues with the selection. The collectionView:didSelectItemAtIndexPath: method is called but when I change the UIView described previously, nothing happen.
Here is the code of my collectionView :
class TestCollectionViewController: UICollectionViewController
{
var items = [1, 2, 3]
let cellId = "Cell"
override func viewDidLoad()
{
self.collectionView.allowsMultipleSelection = true
self.collectionView.delaysContentTouches = false
}
override func collectionView(collectionView: UICollectionView!, numberOfItemsInSection section: Int) -> Int
{
return items.count
}
override func collectionView(collectionView: UICollectionView!, cellForItemAtIndexPath indexPath: NSIndexPath!) -> UICollectionViewCell!
{
var cell = collectionView.dequeueReusableCellWithReuseIdentifier(cellId,
forIndexPath: indexPath) as TestingCollectionViewCell
let item = items[indexPath.row]
cell.imageView.image = UIImage(named: "img")
cell.overlayView.backgroundColor = UIColor(red: 1, green: 1, blue: 1, alpha: 0.5)
return cell
}
override func collectionView(collectionView: UICollectionView!, didSelectItemAtIndexPath indexPath: NSIndexPath!)
{
var cell = collectionView.dequeueReusableCellWithReuseIdentifier(cellId,
forIndexPath: indexPath) as TestingCollectionViewCell
cell.overlayView.backgroundColor = UIColor.clearColor()
}
override func collectionView(collectionView: UICollectionView!, didDeselectItemAtIndexPath indexPath: NSIndexPath!)
{
var cell = collectionView.dequeueReusableCellWithReuseIdentifier(cellId,
forIndexPath: indexPath) as TestingCollectionViewCell
cell.overlayView.backgroundColor = UIColor(red: 1, green: 1, blue: 1, alpha: 0.5)
}
}
If this snippet is not enough, here is my project
You should not be dequeuing a new cell in didSelectItemAtIndexPath (or in didDeselect either) -- this is creating (or reusing) a new cell, not getting the one you selected. Use this instead,
var cell = collectionView.cellForItemAtIndexPath(indexPath)
To me the following code worked better (the code of rdelmar crashed sometimes, which might be a bug? in Swift):
(collectionView.cellForItemAtIndexPath(indexPath) as myCollectionViewCellType).uiBackground?.backgroundColor = UIColor.blackColor()
Edit: I forgot to mention: My collectionView-Items are based on their own class to which I cast. uiBackground is an element of that class
Swift 3.0
let cell = collectionView.cellForItem(at: indexPath)
func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath)
{
//saving index path of the image loaded from imageproperty_array
selected_imagepath = imageproperty_array[indexPath.row] as String
//saving index of the selected cell item as Int
selected_imageindex = indexPath.row
}

Resources