Highlight UICollectionViewCells with PanGesture using Objective-C - objective-c

Question

I'm using the below code to track cells when a user drags their finger over them (this works great). That said, I want to highlight each of the cells (or change the color of the background view in my custom cells) as the user drags their finger over top of them. How can I accomplish this? See below.
ViewController.m
- (void)viewDidLoad
{
[super viewDidLoad];
UIPanGestureRecognizer *panGesture = [[UIPanGestureRecognizer alloc] initWithTarget:self action:#selector(handlePanGesture:)];
[self.ringCollectionView addGestureRecognizer:panGesture];
}
- (void) handlePanGesture:(UIPanGestureRecognizer*) panGesture
{
CGPoint location = [panGesture locationInView:self.ringCollectionView];
NSIndexPath *indexPath = [self.ringCollectionView indexPathForItemAtPoint:location];
NSMutableArray *selectedIndexes = [NSMutableArray arrayWithArray:[self.ringCollectionView indexPathsForSelectedItems]];
if (![selectedIndexes containsObject:#(indexPath.row)]) {
NSLog(#"THIS CELL IS %ld", (long)indexPath.row);
}
else
if (panGesture.state == UIGestureRecognizerStateEnded) {
}
}
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
return 10;
}
- (__kindof UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *cellIdentifier = #"RingCollectionViewCell";
RingCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:cellIdentifier forIndexPath:indexPath];
return cell;
}
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
NSLog(#"Tapping");
}
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
return CGSizeMake(118, 118);
}

Answer 1

First, I believe tracking selected cells via "native" UICollectionView mechanism is reasonable and consistent. There isn’t any need for custom gesture handlers inside of the cells. In order to represent selected state however, you need to set selectedBackgroundView property, something like this:
- (__kindof UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:#"RingCollectionViewCell" forIndexPath:indexPath];
if (!cell.selectedBackgroundView) {
cell.selectedBackgroundView = [[UIView alloc] initWithFrame:cell.bounds];
cell.selectedBackgroundView.backgroundColor = [UIColor grayColor];
}
return cell;
}
I don't know how your RingCollectionViewCell class is designed, but be advised that you will need to ensure contentView of this cell has transparent background color otherwise it will obscure the selectedBackgroundView.
Now the tricky part. UIPanGestureRecognizer gets events very quickly and the handle method will be called quite often when the user just keeps his/her fingers still on the screen. Thus you need to somehow suppress events which are not supposed to switch selected state of a cell.
My suggestion is to ignore all consequence events if they happen in the same cell. In order to implement such behavior we need to store index path of the last cell touched. Let’s use a simple property for that:
#interface ViewController ()
#property (strong, nonatomic, nullable) NSIndexPath *trackingCellIndexPath;
#end
Now you need to assign index path of last touched cell to this property in your gesture handle method. You also need to reset this property when the gesture is finished or cancelled. Switch selection of the given index path if it is not equal to the tracked index path and ignore the touch event otherwise:
- (void)handlePanGesture:(UIPanGestureRecognizer *)recognizer {
// Reset the tracking state when the gesture is finished
switch (recognizer.state) {
case UIGestureRecognizerStateEnded:
case UIGestureRecognizerStateCancelled:
self.trackingCellIndexPath = nil;
return;
default:
break;
}
// Obtain the cell the user is currently dragging over
CGPoint location = [recognizer locationInView:self.collectionView];
NSIndexPath *indexPath = [self.collectionView indexPathForItemAtPoint:location];
// If the user currently doesn't touch any cell, reset the tracking state and prepare to listen to another cell
if (!indexPath) {
if (self.trackingCellIndexPath) {
self.trackingCellIndexPath = nil;
}
return;
}
// If current event is subsequent gesture event which happens within the same cell, ignore it
if (self.trackingCellIndexPath == indexPath) {
return;
}
// If the cell hasn't been previously tracked, switch the selected state and start tracking it
self.trackingCellIndexPath = indexPath;
if ([self.collectionView.indexPathsForSelectedItems containsObject:indexPath]) {
[self.collectionView deselectItemAtIndexPath:indexPath animated:YES];
} else {
[self.collectionView selectItemAtIndexPath:indexPath animated:YES scrollPosition:UICollectionViewScrollPositionNone];
}
}
The last thing to change is the selection mode of the collection view. As you expect multiple cells to remain selected, just switch allowsMultipleSelection of your collection view somewhere in viewDidLoad:
- (void)viewDidLoad {
...
self.collectionView.allowsMultipleSelection = YES;
}

Answer 2

So in order to change color you need to decide how to handle the gesture, but also how to change colors. Consider the following:
#import "ViewController.h"
#interface ViewController ()
#property (nonatomic) CGFloat redColor;
#property (nonatomic) CGFloat greenColor;
#property (nonatomic) CGFloat blueColor;
#property (nonatomic) CGPoint startPoint;
#end
#implementation ViewController
// insuring reasonable values
-(void)setRedColor:(CGFloat)colorX {
CGFloat x = colorX;
x = x > 0 ? x : 0;
x = x < 1.0 ? x : 1.0;
_redColor = x;
}
-(void)setGreenColor:(CGFloat)colorY {
CGFloat y = colorY;
y = y > 0 ? y : 0;
y = y < 1.0 ? y : 1.0;
_greenColor = y;
}
- (void)setBlueColor:(CGFloat)colorZ {
CGFloat z = colorZ;
z = z > 0 ? z : 0;
z = z < 1.0 ? z : 1.0;
_blueColor = z;
}
- (void)viewDidAppear:(BOOL)animated {
[super viewDidAppear:animated];
UIView *panView = [UIView new];
panView.backgroundColor = UIColor.blueColor;
panView.translatesAutoresizingMaskIntoConstraints = false;
[self.view addSubview:panView];
[self.view addConstraints:#[
[NSLayoutConstraint constraintWithItem:panView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1 constant:0],
[NSLayoutConstraint constraintWithItem:panView attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeBottom multiplier:1 constant:0],
[NSLayoutConstraint constraintWithItem:panView attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeading multiplier:1 constant:0],
[NSLayoutConstraint constraintWithItem:panView attribute:NSLayoutAttributeTrailing relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTrailing multiplier:1 constant:0]
]];
[panView addGestureRecognizer:[[UIPanGestureRecognizer alloc] initWithTarget:self action: #selector(handlePanGesture:)] ];
}
//Important Parts
-(void)handlePanGesture:(UIPanGestureRecognizer *) panGesture {
//getting our position from super for total location area
UIView *aView = [[panGesture view] superview];
if (panGesture.state == UIGestureRecognizerStateBegan) {
//saving the start of our pans point
_startPoint = [panGesture translationInView: aView];
}else if (panGesture.state == UIGestureRecognizerStateChanged) {
//where our pan moved
//For this example I'm just using changed value to set color using CGFLoat, but you could also determine a direction and go through a UIcolor array or however you want to actually set your color.
CGPoint trin = [panGesture translationInView:aView];
CGFloat xInc = (trin.x - _startPoint.x);// find how much left or right the finger moved.
CGFloat yInc = (trin.y - _startPoint.y); // find how much up or down the finger moved.
CGFloat base = 1.0; //used to keep values in range
//altering colors based on movement
//just as an example for the color change. Ideally you would implement a better color scheme.
[self setRedColor: self.redColor + (xInc == 0 ? 0 : base / xInc)];
[self setGreenColor: self.greenColor + (yInc == 0 ? 0 : base / yInc)];
self.blueColor = self.greenColor + self.redColor;
//setting the new color of our panView
dispatch_async(dispatch_get_main_queue(), ^{
[UIView animateWithDuration:1 animations:^{
panGesture.view.backgroundColor = [UIColor colorWithRed: self.redColor
green: self.greenColor
blue: self.blueColor
alpha:1.0];
}];
});
} else if (panGesture.state == UIGestureRecognizerStateEnded) {
_startPoint = CGPointZero;
}
}
#end