I am using a CollectionView to display an image in. I am using horizontal scrolling with pagination enabled so the user is able to scroll from image to image right to left as they would on the apps screen on iOS. How might I be able to call didSelectItemAtIndexPath to detect which cell the collection view has stopped on without the user having to tap on the cell?
Though it is not relevant:
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
titleLabel.alpha = 1.0;
mainTextLabel.alpha = 1.0;
availableLabel.alpha = 1.0;
sizeLabel.alpha = 0.0;
sizeImage.alpha = 0.0;
moreInfoOnSize.alpha = 0.0;
UICollectionViewCell *datasetCell =[collectionView cellForItemAtIndexPath:indexPath];
datasetCell.backgroundColor = [UIColor lightGrayColor]; // highlight selection
PFObject *selectedObject = [labelFileArray objectAtIndex:indexPath.row];
titleLabel.text = selectedObject[#"labelText"];
PFObject *selectedObject2 = [mainTextArray objectAtIndex:indexPath.row];
mainTextLabel.text = selectedObject[#"mainTextLabel"];
PFObject *selectedObject3 = [availableLabelArray objectAtIndex:indexPath.row];
availableLabel.text = selectedObject[#"availableLabel"];
if ([availableLabel.text isEqual:#"Available"]) {
availableLabel.backgroundColor = [UIColor greenColor];
} else if ([availableLabel.text isEqual:#"Sorry We Are Out!"])
{
availableLabel.backgroundColor = [UIColor redColor];
}
NSLog(#"%#", indexPath);
}
And Image
http://cl.ly/image/3x1R41073W2z
http://cl.ly/image/203Q2E3T2X44
Thank you so much!
You can call visibleCells on your collection view to get the cells currently visible on the screen like this:
// All visible cells (1 or more depending on your layout and cell sizes)
NSArray *visibleCells = [myCollectionView visibleCells];
// Get the first cell from the array
UICollectionViewCell *firstCell = visibleCells.firstObject;
Related
I am trying to create multiple collectionViewCells with 4 different types. And every cell has a different view of one of those 4 types. Every view of those types can have different contents based on user selection.
The problem I am having is the fact that some of the cards are overlapping/not loading correctly when multiple views/cells of the same type are on the screen.
-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
Card *card = [[[usermanager getSelectedUser] getCards] objectAtIndex:indexPath.item];
NSLog(#"CARD LOADING: %#", card.title);
[card setupLayout];
UICollectionViewCell *cell;
if(card.type.intValue == 1){
cell = [collectionView dequeueReusableCellWithReuseIdentifier:#"lifestyleCell" forIndexPath:indexPath];
}else if(card.type.intValue == 2){
cell= [collectionView dequeueReusableCellWithReuseIdentifier:#"sceneCell" forIndexPath:indexPath];
}else if(card.type.intValue == 3){
cell = [collectionView dequeueReusableCellWithReuseIdentifier:#"energyCell" forIndexPath:indexPath];
}else if(card.type.intValue == 4){
cell = [collectionView dequeueReusableCellWithReuseIdentifier:#"productCell" forIndexPath:indexPath];
}else{
cell = [collectionView dequeueReusableCellWithReuseIdentifier:#"cardCell" forIndexPath:indexPath];
}
[cell addSubview:card];
//Add dropshadow
cell.contentView.layer.borderWidth = 1.0f;
cell.contentView.layer.borderColor = [UIColor clearColor].CGColor;
cell.contentView.layer.masksToBounds = YES;
cell.layer.shadowColor = [UIColor blackColor].CGColor;
cell.layer.shadowOffset = CGSizeMake(0, 5.0f);
cell.layer.shadowRadius = 2.0f;
cell.layer.shadowOpacity = 0.5f;
cell.layer.masksToBounds = NO;
return cell;
}
The card is the view I add to the cell. As mentioned above there are multiple types of those cards.
try using:
cell.clipsToBounds = YES;
As you scroll a UICollectionView, cells that disappear offscreen are re-used for the new cells coming on-screen. That means if you add subviews in your collectionView:cellForItemAtIndexPath: method, they will still be part of the cell's view hierarchy when that cell is re-used. Every time the cell is re-used, it will add a new subview when you call [cell addSubview:card]. Your card subviews will simply stack on top of each other.
It seems that you're using a collection of Card objects, custom UIView subclasses, to store each user's deck of cards. I would suggest instead that you separate out the model from the view - store each card as a simple data model which represents the card independently of how it is displayed (see MVC). Then you can create a custom UICollectionViewCell subclass which can display any card. In your collectionView:cellForItemAtIndexPath: you would simply reconfigure the cell's view according to the corresponding card data. That way you do not need to call addSubview: within your collectionView:cellForItemAtIndexPath: method.
I am creating a collectionView whose cells are of different sizes and have different content. I am using a cell prototype for these cells, however, when I am adding more than one cell I get weird UI bugs:
This is what it is supposed to look like
This is what it actually looks like
Code:
-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
Card *card = [[[usermanager getSelectedUser] getCards] objectAtIndex:indexPath.item];
[card setupLayout];
UICollectionViewCell *cell = [collectionView cellForItemAtIndexPath:indexPath];
if(cell == nil){
cell = [collectionView dequeueReusableCellWithReuseIdentifier:#"cardCell" forIndexPath:indexPath];
}
[cell addSubview:card];
cell.clipsToBounds = YES;
cell.layer.shouldRasterize = YES;
cell.layer.rasterizationScale = [UIScreen mainScreen].scale;
cell.layer.shadowPath = [[UIBezierPath bezierPathWithRect:cell.bounds] CGPath];
//Add dropshadow
cell.contentView.layer.borderWidth = 1.0f;
cell.contentView.layer.borderColor = [UIColor clearColor].CGColor;
cell.contentView.layer.masksToBounds = YES;
cell.layer.shadowColor = [UIColor blackColor].CGColor;
cell.layer.shadowOffset = CGSizeMake(0, 5.0f);
cell.layer.shadowRadius = 2.0f;
cell.layer.shadowOpacity = 0.5f;
cell.layer.masksToBounds = NO;
cell.layer.borderColor = [UIColor yellowColor].CGColor;
cell.layer.borderWidth = 2.0f;
return cell;
}
It propably has something to do with the fact that I use the reusable cell. Because when I create 2 different prototypes in my storyboard for these cells they have no problems at all. Can anyone help me? Thanks
as you say: your cells will be reused, so if you change any layout or frame or colour these properties will be like you set when the cell will be used the next time. you should subclass UICollectionViewCell and implement the method prepareForReuse where you have to reset all views and properties of the cell to the original values and you have to remove the subview card:
-(void)prepareForReuse {
[super prepareForReuse];
// Reset all, for example backgroundView
self.backgroundView = nil;
}
one more point: why you call UICollectionViewCell *cell = [collectionView cellForItemAtIndexPath:indexPath]; Thats not correct. You need only UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:#"cardCell" forIndexPath:indexPath];
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
//NSLog(#"enter category cell");
CategoryViewCell* cell = (CategoryViewCell*)[collectionView dequeueReusableCellWithReuseIdentifier:cellIdentifier forIndexPath:indexPath];
[cell.imgCat setImage:[UIImage imageNamed:[categoryImages objectAtIndex:indexPath.row]]];
[cell.labelCatName setText:[[NSString stringWithFormat:#"%#", [catName objectAtIndex:indexPath.row]] capitalizedString]];
if([categories[[NSString stringWithFormat:#"%d",(int)indexPath.row]] isEqual:#YES]) {
//NSLog(#"set border");
cell.layer.borderColor = [UIColor redColor].CGColor;
cell.layer.borderWidth = 3;
}
return cell;
}
-(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
CategoryViewCell* cell = (CategoryViewCell*)[collectionView cellForItemAtIndexPath:indexPath];
cell.layer.borderWidth = 3;
cell.layer.borderColor = [UIColor redColor].CGColor;
//NSLog(#"%i", (int)indexPath.item);
categories[[NSString stringWithFormat:#"%i", (int)indexPath.item]] = #YES;
}
-(void) collectionView:(UICollectionView *)collectionView didDeselectItemAtIndexPath:(NSIndexPath *)indexPath {
CategoryViewCell* cell = (CategoryViewCell*)[collectionView cellForItemAtIndexPath:indexPath];
cell.layer.borderColor = [UIColor clearColor].CGColor;
categories[[NSString stringWithFormat:#"%i", (int)indexPath.item]] = #NO;
}
The problem:
The above code will show you a collectionView with cells that are selected at default. However, the states of these selected cells are not selected. So I have to tap twice to deselect them because the first tap is to select them, and second tap is to deselect them.
I have tried to set selected for cell but it doesn't work either. The cell will have a red border whenever the user selected a cell and clearColor when the user deselect the cell.
I tried:
cell.selected = YES;
But this permanently gives a collectionView Cell a red border.
And add it in cellForItemAtIndexPath method still doesn't do the trick.
[self collectionView:collectionView didSelectItemAtIndexPath:indexPath];
CategoryViewCell.m
-(void) setSelected:(BOOL)selected animated:(BOOL)animated {
[super setSelected:selected];
//NSLog(#"Pass Select Animated");
if (selected) {
self.flagHighlight = NO;
self.selected = NO;
self.layer.borderColor = [UIColor clearColor].CGColor;
self.layer.borderWidth = 3;
} else {
self.flagHighlight = YES;
self.selected = YES;
self.layer.borderColor = [UIColor redColor].CGColor;
self.layer.borderWidth = 3;
}
}
How would I pre-select a cell when the view is loaded programmatically?
Or even better just change the state of the cell being selected.
Thanks in advance.
Ending up answering my own problem.
so I use [collectionView selectItemAtIndexPath:indexPath animated:NO scrollPosition:UICollectionViewScrollPositionNone];
in cellForItemAtIndexPath.
Serve the purpose nicely.
I have an Horizontal-only UIScrollView.
it contains several UIImageViews and a borderView for indicating which one is selected.
borderView is a UIView with border and no content.
what I want to do：
when the user tap the imageView, I wish the borderview can move to and overlay on the tapped imageView for indicating.
what I did in my code:
1.Add imageViews with UITapgesture event and borderView to the scrollView
-(void)setStaticFilterToBar
{
_filterList = [APIHelper getStaticFilterList:_originBackgroundImage];
filterScrollView.contentSize = CGSizeMake(320,filterScrollView.contentSize.height);
filterScrollView.backgroundColor = [[UIColor blackColor]colorWithAlphaComponent:0.7f];
int xAis = 64;
for(int i=0; i<_filterList.count; i++)
{
UIImageView *filter = [[UIImageView alloc]initWithImage:[_filterList objectAtIndex:i]];
[filter setUserInteractionEnabled:YES];
[filter setFrame:CGRectMake(i * xAis,5,60,60)];
[filter setTag:i];
UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc]initWithTarget:self
action:#selector(filterElementTapToApplyFilter:)];
[tap setDelegate:self];
[filter addGestureRecognizer:tap];
[filterScrollView addSubview:filter];
if((i+1) * xAis > 320)
{
filterScrollView.contentSize = CGSizeMake(filterScrollView.contentSize.width + xAis,
filterScrollView.contentSize.height);
}
}
//add borderview
UIView *borderView = [[UIView alloc]init];
borderView.layer.borderColor = [UIColor redColor].CGColor;
borderView.layer.borderWidth = 3.0f;
borderView.layer.cornerRadius = 6;
[filterScrollView addSubview:borderView];
}
-(void)filterElementTapToApplyFilter:(UITapGestureRecognizer *) recognizer
{
//apply filter
[self applyFilterByUIView:recognizer.view];
//move the borderview to the tapped imageView
[self selectSubViewsFromScrollView:filterScrollView TargetFrame:recognizer.view.frame];
}
2.Tap the imageview to change the borderview's frame value to that of imageView's.
(no matter using animationwithDuration:animations:completion: or set the frame directly)
-(void)selectSubViewsFromScrollView:(UIScrollView *)scrollView TargetFrame:(CGRect)targetFrame
{
//borderView is the last subview.
UIView *borderView = [scrollView.subviews objectAtIndex:scrollView.subviews.count-1];
NSLog(#"Before: borderView.frame:(%d,%d,%d,%d)",(int)borderView.frame.origin.x,
(int)borderView.frame.origin.y,
(int)borderView.frame.size.width,
(int)borderView.frame.size.height);
//1
borderView.frame = targetFrame;
//2 for animation
//[UIView animateWithDuration:0.3 animations:^{
// borderView.frame = targetFrame;
//}];
NSLog(#"After: borderView.frame:(%d,%d,%d,%d)",(int)borderView.frame.origin.x,
(int)borderView.frame.origin.y,
(int)borderView.frame.size.width,
(int)borderView.frame.size.height);
}
The problem I have:
it works just fine as I predicted for beginning.
But after scrolling the filterScrollView, click on imageview and the borderview won't change its position anymore.but still apply the right filter correctly.
the value of borderview's frame is changed, but the position in screen didn't change.
what happened here? Did I miss anything? Any help would be appreciated.
Note. I use storyboard and use No autolayout for all views.
We can use Collection View ,collection view also internally work same as scroll view and also we can handle selecting items easily .
in cellforItemAtIndexPath method add selected and normal cells like below
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:#"collectionViewCell" forIndexPath:indexPath];
if (cell.selected) {
cell.backgroundColor = [UIColor blueColor]; // highlight selection
}
else
{
cell.backgroundColor = [UIColor clearColor]; // Default color
}
return cell;
}
//once it is selected add the color
-(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath {
UICollectionViewCell *datasetCell =[collectionView cellForItemAtIndexPath:indexPath];
datasetCell.backgroundColor = [UIColor blueColor]; // highlight selection
}
//when deselected make it as normal style
-(void)collectionView:(UICollectionView *)collectionView didDeselectItemAtIndexPath:(NSIndexPath *)indexPath {
UICollectionViewCell *datasetCell =[collectionView cellForItemAtIndexPath:indexPath];
datasetCell.backgroundColor = [UIColor ClearColor]; // Default color
}
I have an UICollectionView and Custom UICollectionViewCell, where i'm loading images, when i scroll the UICollectionView, i'm seeing all the cells are refreshing, here is the code for UICollectionView delegates,
In ViewDidLoad adding this first for adding CustomCell
-(void)ViewdidLoad{
UINib *nib = [UINib nibWithNibName:#"NMCFAIPadWishListCell" bundle:nil];
[self.accountDetailsCollectionView registerNib:nib forCellWithReuseIdentifier:#"Cell"];
}
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
return [[self wishListData] count];
}
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
static NSString *identifier = #"Cell";
NMCFAIPadWishListCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:identifier forIndexPath:indexPath];
[cell setWishList:[[self wishListData] objectAtIndex:[indexPath row]] delegate:self];
return cell;
}
In setWishList method just assigning the values from the array to label and i have a button in Xib for each cell in my custom UICollectionViewCell, when user taps on that button i'm just changing the label BG color
- (void)setWishList:(NSString*)product delegate:(id)delegate
{
self.label.text = product;
}
Below is the button action
- (IBAction)editProduct:(id)sender
{
self.label.backgroundColor = [UIColor redColor];
}
Here my problem is when i scroll the Custom Cell and tap on Button in any Cell the label BG is not only changing in current cell but also in MANY CELLS.
You should not attempt to store any state in/on your cells as the cell objects themselves are reused at the discretion of the UICollectionView.
One solution to your problem could be:
In your editProduct: method (assuming your editProduct: method is in your custom UICollectionViewCell implementation), inform the collection view’s controller that the user has “selected” that product via a protocol method (or block or some other messaging mechanism).
In your view controller, when receiving the above message, identify the index of the cell for which the button has been tapped (indexPathForCell: might be useful here) and store the fact that the item at index n has been selected. An NSArray might be useful here.
In the same method, force a reload of the cell that has been tapped with reloadItemsAtIndexPaths: or a similar method. This will force the collectionView:cellForRowAtIndexPath: method to be called.
Implement something like the following in your collectionView:cellForRowAtIndexPath: method:
BOOL itemSelected = ((NSNumber *)isProductSelectedArray[indexPath.row]).boolValue; // You can't store `BOOL`s directly into NSArrays. So I've assumed an NSNumber here.
cell.backgroundColor = itemSelected ? [UIColor redColor] : [UIColor clearColor] // Or some other color to indicate non-selection.
As an aside, if you declare “ViewdidLoad” instead of “viewDidLoad”, you might find your code doesn’t behave the way you intend. Don’t forget to call [super viewDidLoad] somewhere in your implementation too.
Finally, I recommend getting a better handle on the concept of cell reuse by reading the “Collection View Basics” chapter of Apple’s “Collection View Programming Guide for iOS” - specifically the section titled “Reusable Views Improve Performance”.
Cells do not maintain a state. An array of objects that correspond to the cells should main the state since cells are recycled very often. For instance, inside you cellForItemAtIndexPath:
....
BOOL isWishListSet = self.isWishListSetArray[indexPath.row];
UIColor *cellColor = [UIColor redColor];
if (isWishListSet) {
cellColor = [UIColor blackColor];
}
cell.backgroundColor = cellColor;
....
EDIT 1:
As gavdotnet mentions in his answer, cell states should be held in a parallel array, not in the cell itself. So you would have one array that holds the data you want to show and another that holds the state of whether the cell has been selected to be on the wishlist:
#interface WishListViewController ()
#property (nonatomic, strong) NSArray *wishListData;
#property (nonatomic, strong) NSMutableArray *wishListStatus;
#end
#implementation WishListViewController
- (void)viewDidLoad {
[super viewDidLoad];
// Initialize arrays
self.wishListData = [NSArray array];
self.wishListStatus = [NSMutableArray array];
}
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
return 1;
}
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
return self.wishListData.count;
}
-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:#"Cell" forIndexPath:indexPath];
NSNumber *isWishListSet = self.wishListStatus[indexPath.row];
UIColor *cellColor = [UIColor redColor];
if (isWishListSet.boolValue) {
cellColor = [UIColor blackColor];
}
cell.backgroundColor = cellColor;
return cell;
}
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath {
UICollectionViewCell *cell = [collectionView cellForItemAtIndexPath:indexPath];
NSNumber *isWishListSet = self.wishListStatus[indexPath.row];
if (isWishListSet.boolValue) {
isWishListSet = [NSNumber numberWithBool:NO];
} else {
isWishListSet = [NSNumber numberWithBool:YES];
}
[self.wishListStatus replaceObjectAtIndex:indexPath.row withObject:isWishListSet];
UIColor *cellColor = [UIColor redColor];
if (isWishListSet.boolValue) {
cellColor = [UIColor blackColor];
}
cell.backgroundColor = cellColor;
}
The section
UIColor *cellColor = [UIColor redColor];
if (isWishListSet.boolValue) {
cellColor = [UIColor blackColor];
}
cell.backgroundColor = cellColor;
is repeated, so it should be in its own method, but that is up to you decide really. The example shows your data array, which populates the cells, and your wishListStatus array which holds the status of the cell. If we were not going to dequeue cells, this would not be an issue. But since we are in this case, the status must be maintained outside of the cell.
The line you are using:
[cell setWishList:[[self wishListData] objectAtIndex:[indexPath row]] delegate:self];
should be changed to something like:
[cell setDelegate:self];
since the delegate is never toggled and is always set to 'self'.
Cells are being reused because of that they are refreshing.
CollectionView reuses cells so the multiple change of background color is the correct behavior.
To fix your problem, customize your UICollectionViewCell(NMCFAIPadWishListCell) instance as follows:
UIView *backgroundView = [[UIView alloc] initWithFrame:self.bounds];
backgroundView.backgroundColor = [UIColor clearColor];
self.backgroundView = backgroundView;
UIView *selectedBGView = [[UIView alloc] initWithFrame:self.bounds];
selectedBGView.backgroundColor = [UIColor redColor];
self.selectedBackgroundView = selectedBGView;
Use the delegate method for extra selection behavior:
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
// Instead of button actions, use this delegate method
}
Check out UICollectionViewCell Reference for more details. UICollectionViewCell has three properties backgroundView, selectedBackgroundView and selected which are sufficient for your needs.