DragClipView: Interactive Circular Clips for iOS

1. Clipped View 朱中華 2009/11/20

2. DragClipView • @interface DragClipView : UIView{ CGPoint startLocation;}@end@implementation DragClipView#define MAXCLIPS 16#define SIDELENGTH 57

3. drawRect • - (void) drawRect: (CGRect) aRect{ CGRect bounds = CGRectMake(0.0f, 0.0f, SIDELENGTH, SIDELENGTH); // Create a new path CGContextRef context = UIGraphicsGetCurrentContext(); CGMutablePathRef path = CGPathCreateMutable(); // Add circle to path CGPathAddEllipseInRect(path, NULL, bounds); CGContextAddPath(context, path); // Clip to the circle and draw the logo CGContextClip(context); [LOGO drawInRect:bounds]; CFRelease(path);}

4. PointInside • - (BOOL) pointInside:(CGPoint)point withEvent:(UIEvent *)event { CGPoint pt; float HALFSIDE = SIDELENGTH / 2.0f; // normalize with centered origin pt.x = (point.x - HALFSIDE) / HALFSIDE; pt.y = (point.y - HALFSIDE) / HALFSIDE; // x^2 + y^2 = radius float xsquared = pt.x * pt.x; float ysquared = pt.y * pt.y; // If the radius < 1, the point is within the clipped circle if ((xsquared + ysquared) < 1.0) return YES; return NO;}

5. TOUCHESBEGAN • - (void) touchesBegan:(NSSet*)touches withEvent:(UIEvent*)event{ // Establish the touch point CGPoint pt = [[touches anyObject] locationInView:self]; startLocation = pt; [[self superview] bringSubviewToFront:self];}

6. TOUCHESMOVED • - (void) touchesMoved:(NSSet*)touches withEvent:(UIEvent*)event{ // Move with respect to the touch point CGPoint pt = [[touches anyObject] locationInView:self]; CGRect frame = [self frame]; frame.origin.x += pt.x - startLocation.x; frame.origin.y += pt.y - startLocation.y; [self setFrame:frame];}

7. hELLOCONTROLLER • @interface HelloController : UIViewController@end@implementation HelloController- (HelloController *) init{ if (self = [super init]) self.title = @"Drag Clips"; return self;}

8. RANDOMIZE • - (void) randomize{ for (DragClipView *dv in [self.view subviews]) [dv setOrigin:randomPoint()];} • CGPoint randomPoint() { return CGPointMake(random() % 256, random() % 352); }

9. UPDATEDEFAULTS • - (void) updateDefaults{ NSMutableArray *clipLocs = [[NSMutableArray alloc] init]; for (DragClipView *dv in [self.view subviews]) { [clipLocs addObject:NSStringFromCGRect([dv frame])]; } [[NSUserDefaults standardUserDefaults] setObject:clipLocs forKey:@"clipLocs"]; [[NSUserDefaults standardUserDefaults] synchronize]; [clipLocs release];}

10. LOADVIEW • - (void)loadView{ // Create the main view UIView *contentView = [[UIView alloc] initWithFrame:[[UIScreen mainScreen] applicationFrame]]; contentView.backgroundColor = [UIColor darkGrayColor]; self.view = contentView; [contentView release]; // Retrieve any previous locations NSMutableArray *clipLocs = [[NSUserDefaults standardUserDefaults] objectForKey:@"clipLocs"];

11. LOADVIEW (CONT.) • for (int i = 0; i < MAXCLIPS; i++) { // Use a random point unless there's a previous location CGRect dragRect; if (clipLocs && ([clipLocs count] == MAXCLIPS)) dragRect = CGRectFromString([clipLocs objectAtIndex:i]); else { dragRect = CGRectMake(0.0f, 0.0f, SIDELENGTH, SIDELENGTH); dragRect.origin = randomPoint(); } // Build the dragger DragClipView *dragger = [[DragClipView alloc] initWithFrame:dragRect]; dragger.backgroundColor = [UIColor clearColor]; dragger.userInteractionEnabled = YES; // Add the subview [self.view addSubview:dragger]; [dragger release]; }

12. LOADVIEW (CONT.) • // Add a randomize button self.navigationItem.rightBarButtonItem = [[[UIBarButtonItem alloc] initWithTitle:@"Randomize" style:UIBarButtonItemStylePlain target:self action:@selector(randomize)] autorelease];}@end

13. sAMPLEAPPDELEGATE • @interface SampleAppDelegate : NSObject <UIApplicationDelegate> { HelloController *hello;}@end@implementation SampleAppDelegate- (void)applicationDidFinishLaunching:(UIApplication *)application { srandom(time(0)); UIWindow *window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]]; hello = [[HelloController alloc] init]; UINavigationController *nav = [[UINavigationController alloc] initWithRootViewController:hello]; [window addSubview:nav.view]; [window makeKeyAndVisible];}

14. APPLICATIONWILLTERMINATE • -(void)applicationWillTerminate:(UIApplication *)application { [hello updateDefaults];}- (void)dealloc { [hello release]; [super dealloc];}

15. MAIN • int main(int argc, char *argv[]){ NSAutoreleasePool * pool = [[NSAutoreleasePool alloc] init]; int retVal = UIApplicationMain(argc, argv, nil, @"SampleAppDelegate"); [pool release]; return retVal;}

16. overview • 這個程式會顯示16個相同的小圓(小圓內是個image、在icon.png內)在iPhone螢幕，並且每按Randomize可以移動全部16個小圓一次。見下第一圖及下第二圖(Randomize之後)，小圓的位置改變了

17. Overview (cont.)

18. Overview (cont.)

19. drawrect • 若不想使用死板又方正的矩形視圖,而想要有柔和邊框,圓滑的邊角 • 你可用UIView的drawRect方法,來透過Core Graphics以座標點,直線,標準形狀,貝茲曲線(Bezier Curves)建立切割路徑,將視圖切割成這些路徑所構成的樣子

20. Drawrect (cont.) • CGContextRef context = UIGraphicsGetCurrentCOntext(); • 先找到context、繪畫環境(背景)，就是個畫畫的畫布( drawing destination )，有bitmap context 、PDF oontext、window context • CGMutablePathRef path = CGPathCreateMutable()；//allocate path。 • CGPathAddEllipseInRect(path, NULL, bounds)；//NULL表示不用CGAffineTransform。也就是，在長方形bounds(CGRect)內畫個橢圓(path)--如果是正方形，就是圓。

21. pointinside • iPhone會感覺到使用者是在對整個視圖框架範圍進行觸碰操作,這樣的框架範圍也會包含到未被描繪出來的區域 • pointInside用來判斷觸控動作是否落在切割路徑的範圍中

22. Homework 5 • Clipped View with Helloworld.png • Hand in: due 2009/12/11, 00:00 • chchu777@gmail.com • 以組別學號姓名為檔名來繳報告