IOS Drawing grid for dragging / dropping objects attached to this grid

Question

I am working on a project that requires an individual presentation divided into squares. You should be able to drag another view over it, and when you drop this object, it will be snapped to the squares of the grid. I should also be able to iterate over each square in the grid and determine if the object is inside that square of the grid.

I understand that this is a general question, but I'm just looking for all directions to start with, classes or frameworks that may already exist for reference. Any direction would be greatly appreciated. Thanks.

Answer 1

Question No. 1: The user must be able to drag another view over it, and when you delete this object, it will snap to the squares of the grid.

Suppose you drag a UIView. On touches made in UIView, I would use the center property, which contains the values ​​of the xIV y coordinate of the UIView and passes this to a function that checks which square of the grid is inside.

It will look like this (suppose UIView is the name of a draggingView):

for (CGRect gridSquare in gridArray) { if (CGRectContainsPoint(gridRect, draggingView.center)) { // Return the gridSquare that contains the object } } 

Now, if you're curious about what gridArray is, it's an array of all the grid squares that make up your game panel. If you need help creating this, let me know.

Question No. 2: The user should be able to iterate over each square in the grid and determine whether the object is inside this square of the grid.

If you could follow the above, then it is quite simple. Iterating over the squares of the grid, you can use the gridSquare start values ​​to see if any of the draggingView subzones have the same origin. Using this, you can return a UIView that is inside a specific square. See below:

 - (UIView *)findViewInSquare { for (CGRect rect in gridArray) { for (UIView *view in [self.view subViews]) { if (CGPointEqualToPoint(view.frame.origin, rect.origin)) { return view; // Returns the view in the grid square } } } return nil; } 

Hope this all makes sense, and let me know if you need any clarification.

Answer 2

I would probably start with a UICollectionView, as this will provide more flexibility when scheduling your views, as well as support for insert / delete view animations.

When your user releases the view you want to insert, you will probably need your UICollectionViewDataSource to provide a new cell in the right place (make a transparent cell) and get its frame. Then use the animation to move the view into the cell, and in the animation completion handler, add it as a subset of the cell.

The following is a pseudocode with an alias:

 UIView * viewToDrop; // your view being dropped NSIndexPath * indexPathOfInsertedCell; // figure this out... not sure exactly how you would calculate this--you might need to interrogate the UICollectionViewLayout UICollectionView * collectionView; // your collection view UICollectionViewCell * dropCell = [collectionView cellForItemAtIndexPath:indexPathOfInsertedCell]; [UIView animateWithDuration:0.25 animations:^{ CGFloat dx = viewToDrop.frame.origin.x - dropCell.frame.origin.x; CGFloat dy = viewToDrop.frame.origin.y - dropCell.frame.origin.y; viewToDrop.transform = CGAffineTransformMakeTranslation(dx, dy); } completion:^(BOOL finished) { [dropCell addSubview:viewToDrop]; }];