- Touches
- Recipe: Adding a Simple Direct Manipulation Interface
- Recipe: Adding Pan Gesture Recognizers
- Recipe: Using Multiple Gesture Recognizers Simultaneously
- Recipe: Constraining Movement
- Recipe: Testing Touches
- Recipe: Testing Against a Bitmap
- Recipe: Drawing Touches Onscreen
- Recipe: Smoothing Drawings
- Recipe: Using Multi-Touch Interaction
- Recipe: Detecting Circles
- Recipe: Creating a Custom Gesture Recognizer
- Recipe: Dragging from a Scroll View
- Recipe: Live Touch Feedback
- Recipe: Adding Menus to Views
- Summary
Recipe: Constraining Movement
One problem with the simple approach of the earlier recipes in this chapter is that it’s entirely possible to drag a view offscreen to the point where the user cannot see or easily recover it. Those recipes use unconstrained movement. There is no check to test whether the object remains in view and is touchable. Recipe 1-4 fixes this problem by constraining a view’s movement to within its parent.
It achieves this by limiting movement in each direction, splitting its checks into separate x and y constraints. This two-check approach allows the view to continue to move even when one direction has passed its maximum. If the view has hit the rightmost edge of its parent, for example, it can still move up and down.
Figure 1-1 shows a sample interface. The subviews (flowers) are constrained into the black rectangle in the center of the interface and cannot be dragged off-view. Recipe 1-4’s code is general and can adapt to parent bounds and child views of any size.
Recipe 1-4. Bounded Movement
- (void) handlePan: (UIPanGestureRecognizer *) uigr { CGPoint translation = [uigr translationInView:self.superview]; CGPoint newcenter = CGPointMake( previousLocation.x + translation.x, previousLocation.y + translation.y); // Restrict movement into parent bounds float halfx = CGRectGetMidX(self.bounds); newcenter.x = MAX(halfx, newcenter.x); newcenter.x = MIN(self.superview.bounds.size.width - halfx, newcenter.x); float halfy = CGRectGetMidY(self.bounds); newcenter.y = MAX(halfy, newcenter.y); newcenter.y = MIN(self.superview.bounds.size.height - halfy, newcenter.y); // Set new location self.center = newcenter; }
Figure 1-1. The movement of these flowers is bounded into the black rectangle.