I have 10 pictures that I show in collection view. There are also two buttons that should sort this one collection view. When I launch the application 1-5 cells and other hidden ones should be shown. when I click on the second button, these cells should be hidden and another will appear. How can I implement this?
ViewController
let practice = true
#IBAction func theoryButtonAction(_ sender: UIButton) {
practice = false
collectionView.reloadData()
}
#IBAction func practiceButtonAction(_ sender: UIButton) {
practice = true
collectionView.reloadData()
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
guard let cell = collectionView.dequeueReusableCell(withReuseIdentifier: GameCollectionViewCell.identifier, for: indexPath) as? GameCollectionViewCell else {
return UICollectionViewCell()
}
let game = gamesList[indexPath.row]
cell.gameLabel.text = game.name.localized
cell.gameLabel.roundCorners(.allCorners, radius:cell.gameLabel.frame.height / 2 )
cell.contentView.roundCorners(.allCorners, radius: 50.0)
/*
if practice = true. Hide cell 1-5 and show 5-10
if practice = false Hide cell 5-10 and show 1-5
*/
return cell
}
Your collection view has a backing store of data (generally an array). This backing store does not have to always be the full backing store. Simply create other backing stores which contain the data you want to display at this particular moment.
Related
I'm trying to set an image for a button's normal state which is located in a collectionView cell. When the button is pressed the image changes. The problem is every four cells it repeats the same image as the original cell when the button is pressed. Is there a way to not have it repeat itself and when the button is pressed its only for that individual cell?
Here is the code:
class FavoritesCell: UICollectionViewCell {
var isFavorite: Bool = false
#IBOutlet weak var favoritesButton: UIButton!
#IBAction func favoritesButtonPressed(_ sender: UIButton) {
_ = self.isFavorite ? (self.isFavorite = false, self.favoritesButton.setImage(UIImage(named: "favUnselected"), for: .normal)) : (self.isFavorite = true, self.favoritesButton.setImage(UIImage(named: "favSelected"), for: .selected))
}
}
I've tried doing this but for some strange reason the 'selected' state image is never shown even when the button is pressed:
let button = UIButton()
override func awakeFromNib() {
super.awakeFromNib()
button.setImage(UIImage(named: "favUnselected"), for: .normal)
button.setImage(UIImage(named: "favSelected"), for: .selected)
}
Every time your cell is dequeued cellForItemAt is called. This is the place where you configure your cell data. So if you need to show cell marked as favourite, you can do it here.
So how do you do it there? Let's say all your cells are not selected in the beginning. Fine. You don't have to say anything in cellForItemAt. Now let's say you mark a few cells as favourite. What happens here is, it will reflect the change when the cell is visible because the button is hooked to a selector which will make the changes.
Now here is the problem. When you scroll and the cell disappears, the information about your cell being marked as favourite is lost! So what you need to do, is maintain an array which will store the IndexPath of all the selected cells. (Make sure to remove the IndexPath when a cell is removed from favourite!) Let's call that array favourites. If you can use your data source for the collection view to store the selected state information that is also fine. Now you have to store the information about whether your cell is marked as favourite in your button selector.
#objc func buttonTapped() {
if favourites.contains(indexPath) { // Assuming you store indexPath in cell or get it from superview
favourites.removeAll(where: {$0 == indexPath})
} else {
favourites.append(indexPath)
}
}
After you have stored the information about the cell, every time you dequeue a cell, you need to check if the IndexPath is favourites. If it is, you call a method which sets the cell in the selected state.
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
// Dequeue cell and populating cell with data, etc
if favourites.contains(indexPath) {
cell.showFavourite()
}
}
Done? No! Now we have another problem. This problem is associated with the reuse of the cell. So what happens in cellForItemAt actually? You dequeue a cell and use it to display information. So when you dequeue it what happens is, it might have already been used for showing some other information in some other index path. So all the data that was existing there will persist. (Which is why you have the problem of favourites repeating every 4 cells!)
So how do we solve this? There is method in UICollectionViewCell which is called before a cell is dequeued - prepareCellForReuse. You need to implement this method in your cell and remove all the information from the cell, so that it is fresh when it arrives at cellForItemAt.
func prepareForReuse() {
//Remove label text, images, button selected state, etc
}
Or you could always set every value of everything inside the cell in cellForItemAt so that every information is always overwritten with the necessary value.
Edit: OP says he has a collection view inside a collection view. You can identify which collection view is called like this,
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
if collectionView === favoriteCollectionView { // This is the collection view which contains the cell which needs to be marked as favourite
// Dequeue cell and populating cell with data, etc
if favourites.contains(indexPath) {
cell.showFavourite()
}
return cell
}
// Dequeue and return for the other collectionview
}
The cell is most likely reused and your isFavorite is set to true.
Just try adding
func prepareForReuse() {
super.prepareForReuse()
self.isFavorite = false
}
This will set the button to original image when cell is to be reused.
Also since you have your button have two states for selected why do this dance
_ = self.isFavorite ? (self.isFavorite = false, self.favoritesButton.setImage(UIImage(named: "favUnselected"), for: .normal)) : (self.isFavorite = true, self.favoritesButton.setImage(UIImage(named: "favSelected"), for: .selected))
where you could only say self.favoritesButton.selected = self.isFavorite
Change your cell code to:
class FavoritesCell: UICollectionViewCell {
#IBOutlet weak var favoritesButton: UIButton!
var isFavorite: Bool = false {
didSet {
favoritesButton.selected = isFavorite
}
}
#IBAction func favoritesButtonPressed(_ sender: UIButton) {
favoritesButton.selected = !favoritesButton.selected
}
override func prepareForReuse() {
super.prepareForReuse()
isFavorite = false
}
}
The title might be a little hard to understand, but this situation might help you with it.
I'm writing a multiple image picker. Say the limit is 3 pictures, after the user has selected 3, all other images will have alpha = 0.3 to indicate that this image is not selectable. (Scroll all the way down to see a demo)
First of all, this is the code I have:
PickerPhotoCell (a custom collection view cell):
class PickerPhotoCell: UICollectionViewCell {
#IBOutlet weak var imageView: UIImageView!
var selectable: Bool {
didSet {
self.alpha = selectable ? 1 : 0.3
}
}
}
PhotoPickerViewController:
class PhotoPickerViewController: UICollectionViewController {
...
var photos: [PHAsset]() // Holds all photo assets
var selected: [PHAsset]() // Holds all selected photos
var limit: Int = 3
override func viewDidLoad() {
super.viewDidLoad()
// Suppose I have a func that grabs all photos from photo library
photos = grabAllPhotos()
}
override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell ...
let asset = photos[indexPath.row]
...
// An image is selectable if:
// 1. It's already selected, then user can deselect it, or
// 2. Number of selected images are < limit
cell.selectable = cell.isSelected || selected.count < limit
return cell
}
override func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
let cell = collectionView.cellForItem(at: indexPath) as! PickerPhotoCell
if cell.isSelected {
// Remove the corresponding PHAsset in 'selected' array
} else {
// Append the corresponding PhAsset to 'selected' array
}
// Since an image is selected/deselected, I need to update
// which images are selectable/unselectable now
for visibleCell in collectionView.visibleCells {
let visiblePhoto = visibleCell as! PickerPhotoCell
visiblePhoto.selectable = visiblePhoto.isSelected || selected.count < limit
}
}
}
This works almost perfectly, except for one thing, look at the GIF:
The problem is
After I've selected 3 photos, all other visible photos have alpha = 0.3, but when I scroll down a little more, there are some photos that still have alpha = 1. I know why this is happening - Because they were off-screen, calling collectionView.visibleCells wouldn't affect them & unlike other non-existing cells, they did exist even though they were off-screen. So I wonder how I could access them and therefore make them unselectable?
The problem is that you are trying to store your state in the cell itself, by doing this: if cell.isSelected.... There are no off screen cells in the collection view, it reuses cells all the time, and you should actually reset cell's state in prepareForReuse method. Which means you need to store your data outside of the UICollectionViewCell.
What you can do is store selected IndexPath in your view controller's property, and use that data to mark your cells selected or not.
pseudocode:
class MyViewController {
var selectedIndexes = [IndexPath]()
func cellForItem(indexPath) {
cell.isSelected = selectedIndexes.contains(indexPath)
}
func didSelectCell(indexPath) {
if selectedIndexes.contains(indexPath) {
selectedIndexes.remove(indexPath)
} else if selectedIndexes.count < limiit {
selectedIndexes.append(indexPath)
}
}
}
Hello I am trying build a simple chat application where users can send messages and photos. I am having a hard time in figuring out the best way to select and delete multiple messages on long press on a single message.
I have used collection view to display the page. Right now I am using collection view didSelect method to click on the side of chat bubble image view and able to get select button for that particular cell. But, I am not able append checkbox button for every message. I also cannot long press on the chat bubble image view.
I also tried imageview tap on chat bubble but with this I need to reload the collection view. Is there a best way of implementing delete multiple messages?
Any help is appreciated
Thanks
Below is the sample code
code for changing the checkbox image of particular cell.
override func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
inputTextField.endEditing(true)
let cell: ChatLogMessageCell? = collectionView.cellForItem(at: indexPath) as! ChatLogMessageCell?
cell?.checkbox.isHidden = false
selectAll = true
if cell?.isSelected == true{
cell?.checkbox.image = UIImage(named: "checkedimage")
}else{
cell?.checkbox.image = UIImage(named: "uncheckedimage")
}
code to tap on chat bubble to append checkbox button to all cells.
override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: chatcellId, for: indexPath) as! ChatLogMessageCell
let tapGesture = UITapGestureRecognizer(target: self, action: #selector(self.imageTapped))
cell.bubbleImageView.addGestureRecognizer(tapGesture)
cell.bubbleImageView.isUserInteractionEnabled = true
if selectAll == true{
cell.checkbox.isHidden = false
}else{
cell.checkbox.isHidden = true
}}
When chat bubble is tapped collection view is reloaded to append the checkbox button to all cells
func imageTapped(){
selectAll = true
self.collectionView?.reloadData()
}
What I am finally trying to do is select and delete messages like whatsapp or iMessage (Above code is close to iMessage functionality) does. So I am completely open for complete code changes too. Thanks.
updated Code
override func viewDidLoad()
{
super.viewDidLoad()
let lpgr = UILongPressGestureRecognizer(target: self,
action: #selector(handleLongPress))
lpgr.minimumPressDuration = 0.5
lpgr.delaysTouchesBegan = true
lpgr.delegate = self
self.collectionView?.addGestureRecognizer(lpgr)
}
func handleLongPress(gestureReconizer: UILongPressGestureRecognizer) {
let p = gestureReconizer.location(in: self.collectionView)
let indexPath = self.collectionView?.indexPathForItem(at: p)
if let index = indexPath {
let cell: ChatLogMessageCell? = collectionView?.cellForItem(at: index) as! ChatLogMessageCell?
self.collectionView?.allowsMultipleSelection = true
for cell in collectionView!.visibleCells as! [ChatLogMessageCell] {
let indexPath = collectionView?.indexPath(for: cell as ChatLogMessageCell)
cell.checkbutton.isHidden = false
if selectedMsgs.contains((messages?[((indexPath)?.item)!])!) {
cell?.checkbox.image = UIImage(named: "checkedimage")
}
else {
cell?.checkbox.image = UIImage(named: "uncheckedimage")
}
}
} else {
print("Could not find index path")
}
}
On long press check boxes appear on all visible cells, but tap on chat bubble is not working.
You should attach a UILongPressGestureRecognizer to each cell in the collectionview, and set the UICollectionviewcontroller as the target for each of these recognizers. Then, when any one of them fires, set a custom property of your CollectionViewController (maybe name it editing or something) to true. Then fetch all the visible cells with the UICollectionView's visibleCells function.
In your UICollectionViewCell subclass, you should have some custom property getter/setter methods (maybe -editing and -setEditing:(BOOL)) which you can call now as you iterate through the cells in visibleCells. Within your -setEditing:(BOOL) function, you can add and remove the checkbox UIButton as you please. You'll also want to set the UICollectionView controller as the target of this UIButton, and within the UICollectionViewController, keep track of which cells are selected so when the user hits the "Delete" button, you know which messages to delete.
I would also recommend checking out https://github.com/jessesquires/JSQMessagesViewController/, which does all this logic for you.
Let's say you set up a bunch of image views inside a UICollectionView's cells (from an array of image names) and make their alpha 0.5 by default when you set up the items.
Then you make the image view's alpha to 1.0 in the didSelectItemAtIndexPath func, so it becomes alpha 1 when the user taps.
This works when the user taps a cell, but it does not persist if the user scrolls, because the cell is being re-used by the UI on some other level.
The result is another cell farther down the way (when scrolling) becomes alpha 1.0 and the original cell you selected reverts back to its previous alpha 0.5 appearance.
I understand that this is all done to make things more efficient on the device, but I still have not figured out how to make it work properly where the selected item persists.
ANSWER
Apple does provide a selectedBackgroundView for cells that you can use to change the background color, shadow effect, or outline etc. They also allow you to use an image inside the cell with a "default" and "highlighted" state.
Both of those methods will persist with the selection properly.
However, if you wish to use attributes or different elements than one of those provided for indicating your selected state, then you must use a separate data model element that includes a reference to the currently selected item. Then you must reload the viewcontroller data when the user selects an item, resulting in the cells all being redrawn with your selected state applied to one of the cells.
Below is the jist of the code I used to solve my problem, with thanks to Matt for his patience and help.
All of this can be located inside your main UICollectionView Controller class file, or the data array and struct can be located inside their own swift file if you need to use it elsewhere in the project.
Data and data model:
let imagesArray=["image1", "image2", "image3", ...]
struct Model {
var imageName : String
var selectedState : Bool
init(imageName : String, selectedState : Bool = false){
self.imageName = imageName
self.selectedState = selectedState
}
}
Code for the UICollectionView Controller
// create an instance of the data model for images and their status
var model = [Model]()
#IBOutlet weak var collectionView: UICollectionView!
override func viewDidLoad() {
super.viewDidLoad()
// build out a data model instance based on the images array
for i in 0..<imagesArray.count {
model.append(Model(imageName: imagesArray[i]))
// the initial selectedState for all items is false unless otherwise set
}
}
func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return imagesArray.count
}
func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
// when the collectionview is loaded or reloaded...
let cell:myCollectionViewCell = collectionView.dequeueReusableCellWithReuseIdentifier("cell", forIndexPath: indexPath) as! myCollectionViewCell
// populate cells inside the collectionview with images
cell.imageView.image = UIImage(named: model[indexPath.item].imageName)
// set the currently selected cell (if one exists) to show its indicator styling
if(model[indexPath.item].selectedState == true){
cell.imageView.alpha = 1.0
} else {
cell.imageView.alpha = 0.5
}
return cell
}
func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) {
// when a cell is tapped...
// reset all the selectedStates to false in the data model
for i in 0..<imagesArray.count {
model[i].selectedState = false
}
// set the selectedState for the tapped item to true in the data model
model[indexPath.item].selectedState = true
// refresh the collectionView (triggering cellForItemAtIndexPath above)
self.collectionView.reloadData()
}
but it does not persist if the user scrolls, because the cell is being re-used by the UI on some other level
Because you're doing it wrong. In didSelect, make no change to any cells. Instead, make a change to the underlying data model, and reload the collection view. It's all about your data model and your implementation of cellForItemAtIndexPath:; that is where cells and slots (item and section) meet.
Here's a simple example. We have just one section, so our model can be an array of model objects. I will assume 100 rows. Our model object consists of just an image name to go into this item, along with the knowledge of whether to fade this image view or not:
struct Model {
var imageName : String
var fade : Bool
}
var model = [Model]()
override func viewDidLoad() {
super.viewDidLoad()
for i in 0..<100 {
// ... configure a Model object and append it to the array
}
}
override func collectionView(
collectionView: UICollectionView,
numberOfItemsInSection section: Int) -> Int {
return 100
}
Now, what should happen when an item is selected? I will assume single selection. So that item and no others should be marked for fading in our model. Then we reload the data:
override func collectionView(cv: UICollectionView,
didSelectItemAtIndexPath indexPath: NSIndexPath) {
for i in 0..<100 {model[i].fade = false}
model[indexPath.item].fade = true
cv.reloadData()
}
All the actual work is done in cellForItemAtIndexPath:. And that work is based on the model:
override func collectionView(cv: UICollectionView,
cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
let c = self.collectionView!.dequeueReusableCellWithReuseIdentifier(
"Cell", forIndexPath: indexPath) as! MyCell
let model = self.model[indexPath.item]
c.iv.image = UIImage(named:model.imageName)
c.iv.alpha = model.fade ? 0.5 : 1.0
return c
}
You logic is incorrect. didSelectItemAtIndexPath is used to trigger something when a cell is selected. All this function should contain is this:
let cell:stkCollectionViewCell = collectionView.dequeueReusableCellWithReuseIdentifier("cell", forIndexPath: indexPath) as! stkCollectionViewCell
cell.imageView.alpha = 1.0
selectedIndex = indexPath.item
Then in your cellForItemAtIndexPath function you should have the logic to set the cell because this is where the cells are reused. So this logic should be in there:
if (indexPath.item == selectedIndex){
print(selectedIndex)
cell.imageView.alpha = 1.0
}
else {
cell.imageView.alpha = 0.5
}
I just got into ios swift and are now trying to switch between listview and bigger listview.
What I have now is a normal listview. What I want to do is to create a button that toggles between listview and "bigger" listview eg bigger image in every list item like in Instagram.
Is this done by creating two seperate viewcontrollers?
Your question is not clear at all.
It is clearly possible to create that with two ViewControllers performing
a Segue passing the Object selected to the next view.
Alternative , if what you are using is a ScrollView , you can use the existing zoom methods (zoomToRect).
What I did to make it work is have 2 UIButton connect with 2 func within the main collectionview class as describe below
// Use to define whether displaying grid view or block view
// useful when you use nib files for cells (see the 3rd code example)
// true by default
var isGridView = true
loadGridView () {
isGridView = true
collectionView?.performBatchUpdates({
// load or setup for gridlayout
}, completion: nil)
collectionView?.reloadData()
}
and
loadBlockView () {
isGridView = false
collectionView?.performBatchUpdates({
// load or setup for blocklayout
}, completion: nil)
collectionView?.reloadData()
}
For instance, you can visit this article for more information
!!! If you're using nib for cells, you will need to register all nibs and its class also be aware of
func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
var cell:UICollectionViewCell
if(isGridView) {
let gridCell = collectionView.dequeueReusableCellWithReuseIdentifier(cellId, forIndexPath: indexPath) as! CustomGridViewCellClass
// some setup
cell = gridCell
} else {
let blockCell = collectionView.dequeueReusableCellWithReuseIdentifier(cellId, forIndexPath: indexPath) as! CustomBlockViewCellClass
// some setup
cell = blockCell
}
return cell
}