2011-03-09 2 views
14

Krumelurasked this question mail.app와 비슷한받는 사람 거품을 만드는 방법.Mail.app/Three20에서받는 사람 거품 동작을 다시 만드십시오.

Mail.app picker bubble picture

Selected contact

내가 (이 선택 된 모양 포함)이 요소의 모양을 만들 수 있지만 동작 할 때를 받고 고민하고 있습니다 : 무슨 뜻인지의 아래 스크린 샷을 참조하십시오 그것은 UITextField의 일부입니다. 거품이 UITextField 텍스트의 일부로 작동하도록하려면 어떻게합니까? 예를 들어, 백 스페이스 버튼을 충분히 누르면 거품이 강조 표시되고 한 번 더 누르면 텍스트의 일부인 것처럼 삭제됩니다. 나는 또한 커서를 움직이는 데 어려움을 겪었다.

대답은 Monotouch에서 좋지만 Objective-C 답변은 높이 평가하는 것보다 좋습니다. 나는 정확한 코드를 요구하지 않고있다. (비록 당신이 그것을 가지고 기꺼이한다면, 나는 아니오라고 말하지 않을 것이다! : D) 그러나 이것을 달성하는 방법.

비슷한 요소가있는 Three20 프로젝트는 알고 있지만 코드에서 abouts가 실제로 수행되는 위치를 찾을 수 없습니다. 이것이별로 의미가 없으면 미안합니다. 나는이 질문을 정중히하기 위해 다소 어려움을 겪었습니다. 질문을 명확히하는 질문을 나에게 언제든지 물어보십시오!

+0

이 오래된 질문을 현실로 만들어 주어서 죄송합니다. 하지만 어떻게 구현했는지 코드를 보여 주시겠습니까? 파란 환약을위한 심상 파일이 있는가? –

답변

18

사물을 사용자 정의하려고 시도한 나쁜 경험을 가진 분석가 경고를 수정하고 Xcode 4에서 빌드하는 것을 좋아하지 않습니다. 새 프로젝트에서 다시 사용하지 않을 것입니다. 하지만 아마이 경우에 당신이 원하는 것을 할 것입니다.

그러나 자신의 거품을 상당히 간단하게 만들 수 있습니다. 나는 내가 이걸 가지고 블로그의 저자에게 신용을 줄 수 있었으면 좋겠어,하지만 2 년 전이었고 지금은 Google과 그것을 찾을 수 없습니다. 기본적으로 색상을 선택하고 라운드 엔드 캡을 그린 다음 사각형 사이에 사각형을 넣고 필요한 텍스트를 맨 위에 놓습니다.

UIGraphicsBeginImageContext(CGSizeMake(SIDELENGTH, SIDELENGTH)); 

CGContextRef context = UIGraphicsGetCurrentContext(); 

// the image should have a white background 
[[UIColor clearColor] set]; 
CGRect myRect = CGRectMake(0.0f, 0.0f, SIDELENGTH, SIDELENGTH); 
UIRectFill(myRect); 

[self.color set]; 

// Drawing code 
CGSize textSize = [self.text sizeWithFont:[UIFont boldSystemFontOfSize:[UIFont systemFontSize]]]; 

double capDiameter = textSize.height; 
double capRadius = capDiameter/2.0; 
double capPadding = capDiameter/4.0; 
double textWidth = MAX(capDiameter, textSize.width) ; 

CGRect textBounds = CGRectMake(capPadding, 0.0, textWidth, textSize.height); 

CGRect badgeBounds = CGRectMake(0.0, 0.0, textWidth + (2.0 * capPadding), textSize.height); 

double offsetX = (CGRectGetMaxX(myRect) - CGRectGetMaxX(badgeBounds))/2.0; 
double offsetY = (CGRectGetMaxY(myRect) - CGRectGetMaxY(badgeBounds))/2.0; 
badgeBounds = CGRectOffset(badgeBounds, offsetX, offsetY); 
textBounds = CGRectOffset(textBounds, offsetX, offsetY); 

CGContextFillEllipseInRect(context, 
          CGRectMake(badgeBounds.origin.x, badgeBounds.origin.y, capDiameter, capDiameter)); 

CGContextFillEllipseInRect(context, 
          CGRectMake(badgeBounds.origin.x + badgeBounds.size.width - capDiameter, badgeBounds.origin.y, 
             capDiameter, capDiameter)); 

CGContextFillRect(context, CGRectMake(badgeBounds.origin.x + capRadius, badgeBounds.origin.y, 
             badgeBounds.size.width - capDiameter, capDiameter)); 

if(self.textColor != nil) { 
    const CGFloat* colors = CGColorGetComponents(self.textColor.CGColor); 
    CGColorSpaceRef space = CGColorGetColorSpace(self.textColor.CGColor); 
    CGColorSpaceModel model = CGColorSpaceGetModel(space); 

    if(model == kCGColorSpaceModelMonochrome) 
     // monochrome color space has one grayscale value and one alpha 
     CGContextSetRGBFillColor(context, *(colors + 0), *(colors + 0), *(colors + 0), *(colors + 1)); 
    else 
     // else a R,G,B,A scheme is assumed. 
     CGContextSetRGBFillColor(context, *(colors + 0), *(colors + 1), *(colors + 2), *(colors + 3)); 
} else 
    // else use plain white 
    CGContextSetRGBFillColor(context, 1.0f, 1.0f, 1.0f, 1.0f); 

[self.text drawInRect:textBounds 
withFont:[UIFont boldSystemFontOfSize:[UIFont systemFontSize]] 
lineBreakMode:UILineBreakModeClip alignment:UITextAlignmentCenter]; 

UIImage* image = UIGraphicsGetImageFromCurrentImageContext(); 
UIGraphicsEndImageContext(); 

return image; 

당신이 설명하는 삭제 버튼의 동작은 꽤 간단합니다 - 선택한 허용 된 삽입 지점에서 거품을 그리고 거품 후 시작합니다의 UITextField의 프레임을 변경하는 경기를 일단.UITextField 프레임의 시작 부분에 다른 삭제가 발생하면 버블 UIImageView를 제거하고 UITextField 프레임을 UIImageView가 시작하는 데 사용 된 위치로 재설정하십시오.

또는 편집 할 때 텍스트와 함께 표시된 코드 (this StackOverflow question 참조)로 만든 풍선 이미지를 표시하는 주소 입력 필드로 UIWebView를 사용할 수 있습니다. 추가 된 주소 삭제를 처리하는 대리자 메서드 shouldChangeCharactersInRange에 대한 처리기를 작성하고 버블이 삭제 작업이 타겟팅하는 항목 인 경우 버블 이미지 만 작성하면됩니다.

+5

+1 싫어하는 것에 대한 Three20 ^^ –

+0

이걸 구현할 건가요? –

+0

코드의 결과는 UIImage이며 가장 쉬운 방법은 UIImageView에 넣은 다음 UIView와 마찬가지로 뷰 계층 구조에 배치하는 것입니다. –

4

마술처럼 보입니까? Three20 코드는 여기에 있습니다 :

TTMessageController.h TTMessageController.m

TTMessageControllerDelegate.h

TTMessageField.h TTMessageField.m

TTMessageRecipientField.h TTMessageRecipientField.m

TTMessageSubjectField.h,691,363 (210) TTMessageSubjectField.m

TTMessageTextField.h TTMessageTextField.m

은 물론, 당신은 단지 그들이 그것을 발표하는 것이 지금 애플에서 Message UI framework를 사용해야합니다.

+0

고마워요. 전에이 링크들을 통해 scourered 해본 적이 있습니다. 실제로 설명한 동작을 수행하는 실제 코드를 찾는 행운이별로 없었습니다. 또한 앱에서 이메일을 보낼 때 Message UI 프레임 워크를 사용합니다. 그러나 앱에서도 자체 메시지를 통해 메시지를 보낼 수 있어야합니다. 'Messaging UI Framework'에서는 지원하지 않습니다. . 내가 틀렸다면 나를 바로 잡아 주시겠습니까? – Luke

+0

또한 원하는 파일이 다음과 같이 표시됩니다. https://github.com/facebook/three20/blob/development/src/Three20UI/Sources/TTPickerTextField.m – Luke

관련 문제