2011-01-30 2 views
18

내 iPad 앱에서 사용자가 버튼을 클릭하면 기본보기에 두 번째보기가 표시됩니다. 새보기는 첫 번째보기보다 작아지고 배경이 표시되면 어두워집니다. 새 뷰의 상단 두 모서리가 둥글게 보이도록하고 싶지만 cornerRadius를 사용하면 모든 뷰가 둥글게 설정됩니다. 두 모퉁이를 어떻게 둥글게 만들 수 있습니까?둥근 모서리가 두 개입니까?

답변

17

drawRect :에서이 작업을 수행해야합니다. 실제로 고전 addRoundedRectToPath 수정 :이 비트 맵을 받아 반올림 있도록 모서리가 요청 :

static void addRoundedRectToPath(CGContextRef context, CGRect rect, float radius, UIImageRoundedCorner cornerMask) 
{ 
    CGContextMoveToPoint(context, rect.origin.x, rect.origin.y + radius); 
    CGContextAddLineToPoint(context, rect.origin.x, rect.origin.y + rect.size.height - radius); 
    if (cornerMask & UIImageRoundedCornerTopLeft) { 
     CGContextAddArc(context, rect.origin.x + radius, rect.origin.y + rect.size.height - radius, 
         radius, M_PI, M_PI/2, 1); 
    } 
    else { 
     CGContextAddLineToPoint(context, rect.origin.x, rect.origin.y + rect.size.height); 
     CGContextAddLineToPoint(context, rect.origin.x + radius, rect.origin.y + rect.size.height); 
    } 

    CGContextAddLineToPoint(context, rect.origin.x + rect.size.width - radius, 
          rect.origin.y + rect.size.height); 

    if (cornerMask & UIImageRoundedCornerTopRight) { 
     CGContextAddArc(context, rect.origin.x + rect.size.width - radius, 
         rect.origin.y + rect.size.height - radius, radius, M_PI/2, 0.0f, 1); 
    } 
    else { 
     CGContextAddLineToPoint(context, rect.origin.x + rect.size.width, rect.origin.y + rect.size.height); 
     CGContextAddLineToPoint(context, rect.origin.x + rect.size.width, rect.origin.y + rect.size.height - radius); 
    } 

    CGContextAddLineToPoint(context, rect.origin.x + rect.size.width, rect.origin.y + radius); 

    if (cornerMask & UIImageRoundedCornerBottomRight) { 
     CGContextAddArc(context, rect.origin.x + rect.size.width - radius, rect.origin.y + radius, 
         radius, 0.0f, -M_PI/2, 1); 
    } 
    else { 
     CGContextAddLineToPoint(context, rect.origin.x + rect.size.width, rect.origin.y); 
     CGContextAddLineToPoint(context, rect.origin.x + rect.size.width - radius, rect.origin.y); 
    } 

    CGContextAddLineToPoint(context, rect.origin.x + radius, rect.origin.y); 

    if (cornerMask & UIImageRoundedCornerBottomLeft) { 
     CGContextAddArc(context, rect.origin.x + radius, rect.origin.y + radius, radius, 
         -M_PI/2, M_PI, 1); 
    } 
    else { 
     CGContextAddLineToPoint(context, rect.origin.x, rect.origin.y); 
     CGContextAddLineToPoint(context, rect.origin.x, rect.origin.y + radius); 
    } 

    CGContextClosePath(context); 
} 

이 (나는 이미지를이 일을했기 때문에 나는 그것을 UIImageRoundedCorner라고하지만, 당신이 그것을 호출 할 수있는 비트 마스크를 무슨 일이든) 그리고 둥근 원하는 모퉁이를 기반으로 경로를 만듭니다. 내 코드가 정확히의 drawRect에서 사용하도록 설정되지 않도록, 내가 :,, UIImages을 위해이 일을했다 말했듯이

CGContextBeginPath(context); 
addRoundedRectToPath(context, rect, radius, yourMask); 
CGContextClosePath(context); 
CGContextClip(context); 

하지만 꽤 쉽게해야합니다 : 그럼 당신의 drawRect에서보기로 해당 경로를 적용 그것을 적응 시키십시오. 기본적으로 경로를 만든 다음 컨텍스트를 클리핑합니다.

편집 :는 비트 마스크 부분을 설명하기 위해, 그냥 열거입니다 : 이런 식으로

typedef enum { 
    UIImageRoundedCornerTopLeft = 1, 
    UIImageRoundedCornerTopRight = 1 << 1, 
    UIImageRoundedCornerBottomRight = 1 << 2, 
    UIImageRoundedCornerBottomLeft = 1 << 3 
} UIImageRoundedCorner; 

할 수 있습니다 또는 열거의 각 구성원이를 나타 내기 때문에, 코너를 식별하는 비트 마스크를 형성하기 위해 함께 일 비트 마스크에서 2의 다른 힘.

훨씬 나중에 편집 : 나는이 사용 UIBezierPathbezierPathWithRoundedRect:byRoundingCorners:cornerRadii: 할 수있는 쉬운 방법을 발견했습니다. 컨텍스트에서 베 지어 경로 객체의 CGPath을 사용하기 만하면됩니다.

+0

멋진 대답은 다음 링크를 체크 아웃하십시오! 그것을 구현하는 데 도움이 필요합니다. 우선, 어떻게 내 자신의 비트 마스크를 만들 수 있습니까? – Jumhyn

+0

열거 형 설명을 편집 중입니다. – kevboh

+0

내 대답은 당신이 원하는 둥근 모서리를 취할 수 있도록 만들어졌습니다. 맨 위 두 모서리 만 필요하고 다른 모서리는 필요 없으면 비트 마스크를 편집하고 둥근 모서리에 해당하는 두 섹션을 사용하면됩니다. – kevboh

56
// Create the path (with only the top-left corner rounded) 
UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:imageView.bounds 
          byRoundingCorners:UIRectCornerTopLeft| UIRectCornerTopRight 
          cornerRadii:CGSizeMake(10.0, 10.0)]; 
// Create the shape layer and set its path 
CAShapeLayer *maskLayer = [CAShapeLayer layer]; 
maskLayer.frame = imageView.bounds; 
maskLayer.path = maskPath.CGPath; 
// Set the newly created shape layer as the mask for the image view's layer 
imageView.layer.mask = maskLayer; 

상단 둥근 모서리를 사용하는 것이 좋습니다. Round two corners in UIView

+2

그게 전부 잘 작동합니다. 감사합니다. –

+0

그게 효과가 있지만, 전체 이미지 뷰 영역에서 오프 스크린 렌더링을 일으켜서 애니메이션이 뒤죽박죽이됩니다. – Philip007

+0

제가이 주제에서 찾은 최고의 답을 찾았습니다! – PaperThick

8

Tomek Kuźma 님이 완성한 멋진 작품. 다음은 요구 사항에 맞는 새로운 TKRoundedView 클래스입니다.
이 매개 변수를 통해서만 요구 사항을 충족시킬 수 있습니다.

TKRoundedView *view = [[TKRoundedView alloc] initWithFrame:frame]; 
view.roundedCorners = TKRoundedCornerTopLeft | TKRoundedCornerTopRight; 

그러나 다음과 같은 추가 기능도 제공합니다.

TKRoundedView *view = [[TKRoundedView alloc] initWithFrame:frame]; 
view.roundedCorners = TKRoundedCornerTopLeft 
view.borderColor = [UIColor greenColor]; 
view.fillColor = [UIColor whiteColor]; 
view.drawnBordersSides = TKDrawnBorderSidesLeft | TKDrawnBorderSidesTop; 
view.borderWidth = 5.0f; 
view.cornerRadius = 15.0f; 

예제 프로젝트
https://github.com/mapedd/TKRoundedView

+0

^너무 좋아! 자동 레이아웃과 잘 작동합니다. –

관련 문제