본문 바로가기
Dev.Mobile/iPhone

[iOS][GitHub] UIBezierPath 를 이용한 ProgressView - GSProgressView

by Devkin 2012. 12. 24.

GSProgressView

UIBezierPath 를 이용한 진행상태를 표시해주는 깔끔고 심플한 Progress View. 0.0~1.0 Range 로 0%~100% 상태를 표시하며 완료시 체크표시로 바뀐다. 체크 표시를 우선 'ㄴ' 모양으로 Draw 하고 45도 Rotation 하게 구현하여 코드 가독성을 높인점이 흥미롭다. 

        /* 
        First draw a tick that looks like this:
         
           A---F
           |   |
           |   E-------D
           |           |
           B-----------C
         
         (Remember: (0,0) is top left)
         */
        UIBezierPath *tickPath = [UIBezierPath bezierPath];
        CGFloat tickWidth = radius/3;
        [tickPath moveToPoint:CGPointMake(0, 0)];                            // A
        [tickPath addLineToPoint:CGPointMake(0, tickWidth * 2)];             // B
        [tickPath addLineToPoint:CGPointMake(tickWidth * 3, tickWidth * 2)]; // C
        [tickPath addLineToPoint:CGPointMake(tickWidth * 3, tickWidth)];     // D
        [tickPath addLineToPoint:CGPointMake(tickWidth, tickWidth)];         // E
        [tickPath addLineToPoint:CGPointMake(tickWidth, 0)];                 // F
        [tickPath closePath];
        
        // Now rotate it through -45 degrees...
        [tickPath applyTransform:CGAffineTransformMakeRotation(-M_PI_4)];

USAGE

GSProgressView *pv = [[GSProgressView alloc] initWithFrame:CGRectMake(0, 0, 20, 20)];
pv.color = [UIColor redColor];
pv.progress = 0.6;
[myView addSubview:pv];

SOURCE https://github.com/goosoftware/GSProgressView

반응형

댓글