Rede-Blase im iOS SDK über Objective-C

Arbeite ich an einem Kinderbuch-app und würde gerne dynamisch zu füllen, die Sprechblase(N) für den Charakter-Dialogen, wie gezeigt, in der beigefügten screenshots. Screenshots sind von Aschenputtel-app, die entwickelt wurde mit Hilfe von Cocos2D (oder 3D -) denke ich. Ich möchte jedoch um diese Funktionalität zu erreichen mit objective-c und iOS sdk.

Ein Ansatz wäre:

Berechnen Sie die Größe des Textes gegeben, die schriftart und-Größe (über die NSString-Methode sizeWithFont:constrainedToSize:), dann zeichnen Sie ein Rechteck mit abgerundeten Ecken (mit CALayer) einschließen, die Größe.

Zum zeichnen von abgerundeten Rechtecken, die Einrichtung eines CALayer mit background-color, border-width und border-color und color radius, und hinzufügen, dass ein UIView-Objekt. Würde ihm eine Sprechblase Effekt sehr leicht.

Nun, wie kann ich eine Ecke, zeigte auf die Charakter Mund? Wie kann ich pop-out-und pop-im CALayer von der Charakter Mund, wie würde ich das umsetzen dieser animation? Mein main-Szene (Bild) wäre ein UIImageview und dieser Dialog pop-op erscheinen soll-von der Charakter Mund in einer animierten Weise und nach wenigen Sekunden sollte es verschwinden, wenn Ihr zurück in der Charakter Mund. Sie Anregungen würde sehr geschätzt werden.

Wenn Sie wissen, einige Beispiel-code/Artikel etwas Platz, bitte Strecke mir entsprechend.

Hier ist ein video link von der app, die zeigt, wie die Charakter-Dialoge pop-in-und out-als Sprechblase: http://www.youtube.com/watch?v=umfNJLyrrNg

Rede-Blase im iOS SDK über Objective-C

InformationsquelleAutor Alex | 2012-06-25

ios objective-c

7

Einen anderen Weg, dies zu tun ist durch die Verwendung von Bildern mit cap-Einsätze. Werfen Sie einen Blick auf das UIImage-Methode:

resizableImageWithCapInsets:

Grundsätzlich kann man ein image erstellen auf eine minimale Größe-Blase, und es zu dehnen, auf unbestimmte Zeit, während die Aufrechterhaltung der das Aussehen der "Blase" Grenzen.

Den code unten gibt ein Bild, wo 12 Pixel oben, Links, unten und rechts beibehalten, wenn die Dehnung/Größenänderung des Bildes:
```
UIImage *bubble = [[UIImage imageNamed:@"bubble.png"] 
                            resizableImageWithCapInsets:UIEdgeInsetsMake(12, 12, 12, 12)];
UIImageView *imgView = [[[UIImageView alloc] initWithImage:bubble] autorelease];
imgView.frame = CGRectZero;
```
Animieren die Größe ändern einer UIImageView kommt frei:
```
[UIView animateWithDuration:0.3
                 animations:^(void) {
                     imgView.frame = CGRectMake(50, 50, 200, 100);
                 } completion:^(BOOL finished) {

                 }];
```
- Ich sehe das in letzter Zeit viel. Ist -stretchableImageWithLeftCapWidth:topCapHeight: veraltet?
- Ja, es ist veraltet.
- Danke. Wie würde ich Sprechblase Ecke, wies auf den Charakter der Mund mit resizableImageWithCapInsets:? Und Wie würde ich animieren, das öffnen und schließen der Sprechblase?
- Ich denke, der Spitzen Ecke würde ein Teil des Bildes, den würde ich stretching. Wie kann ich mich animieren (auf Tippen oder automatisch) das öffnen und schließen der Sprechblase?
- Ja Alex, der Spitzen Ecke würde ein Teil des Bildes. Siehe meine Erläuterungen oben.
- Thx viel. Wie und wo würde ich drucken, den eigentlichen Dialog text? Kann ich ein NSString und/oder UILabel? Dialog gedruckt werden sollen, innerhalb der Sprechblase.
- Bauen Sie ein UILabel mit Abmessungen, die Sie berechnet sich aus Ihrem NSString, fügen Sie die UILabel Blick auf Ihre Blase Bild anzeigen.
- In Antwort auf Alex ' Frage, "wo möchte ich drucken, den eigentlichen Dialog-text" ich fand diesen Beitrag hilfreich stackoverflow.com/questions/6992830/....
InformationsquelleAutor hundreth

hier ist meine Umsetzung durch ändern dieser apple-tutorial:

https://developer.apple.com/library/ios/samplecode/quartzdemo/Listings/QuartzDemo_QuartzCurves_m.html

- (void)drawRect:(CGRect)rect
{
    CGContextRef context=UIGraphicsGetCurrentContext();
    CGContextSetLineWidth(context, .5f);
    CGContextSetStrokeColorWithColor(context, [UIColor lightGrayColor].CGColor);
    CGContextSetRGBFillColor(context, 1, 1, 1, 1);

    rect.origin.y++;
    CGFloat radius = cornerRadius;

    CGFloat minx = CGRectGetMinX(rect), midx = CGRectGetMidX(rect), maxx = CGRectGetMaxX(rect);
    CGFloat miny = CGRectGetMinY(rect), midy = CGRectGetMidY(rect), maxy = CGRectGetMaxY(rect);

    CGMutablePathRef outlinePath = CGPathCreateMutable();

    if (![User isCurrentUser:message.user])
    {
        minx += 5;

        CGPathMoveToPoint(outlinePath, nil, midx, miny);
        CGPathAddArcToPoint(outlinePath, nil, maxx, miny, maxx, midy, radius);
        CGPathAddArcToPoint(outlinePath, nil, maxx, maxy, midx, maxy, radius);
        CGPathAddArcToPoint(outlinePath, nil, minx, maxy, minx, midy, radius);
        CGPathAddLineToPoint(outlinePath, nil, minx, miny + 20);
        CGPathAddLineToPoint(outlinePath, nil, minx - 5, miny + 15);
        CGPathAddLineToPoint(outlinePath, nil, minx, miny + 10);
        CGPathAddArcToPoint(outlinePath, nil, minx, miny, midx, miny, radius);
        CGPathCloseSubpath(outlinePath);

        CGContextSetShadowWithColor(context, CGSizeMake(0,1), 1, [UIColor lightGrayColor].CGColor);
        CGContextAddPath(context, outlinePath);
        CGContextFillPath(context);

        CGContextAddPath(context, outlinePath);
        CGContextClip(context);
        CGPoint start = CGPointMake(rect.origin.x, rect.origin.y);
        CGPoint end = CGPointMake(rect.origin.x, rect.size.height);
        CGContextDrawLinearGradient(context, [self normalGradient], start, end, 0);
    }
    else
    {
        maxx-=5;
        CGPathMoveToPoint(outlinePath, nil, midx, miny);
        CGPathAddArcToPoint(outlinePath, nil, minx, miny, minx, midy, radius);
        CGPathAddArcToPoint(outlinePath, nil, minx, maxy, midx, maxy, radius);
        CGPathAddArcToPoint(outlinePath, nil, maxx, maxy, maxx, midy, radius);
        CGPathAddLineToPoint(outlinePath, nil, maxx, miny + 20);
        CGPathAddLineToPoint(outlinePath, nil, maxx + 5, miny + 15);
        CGPathAddLineToPoint(outlinePath, nil, maxx, miny + 10);
        CGPathAddArcToPoint(outlinePath, nil, maxx, miny, midx, miny, radius);
        CGPathCloseSubpath(outlinePath);

        CGContextSetShadowWithColor(context, CGSizeMake(0,1), 1, [UIColor lightGrayColor].CGColor);
        CGContextAddPath(context, outlinePath);
        CGContextFillPath(context);

        CGContextAddPath(context, outlinePath);
        CGContextClip(context);
        CGPoint start = CGPointMake(rect.origin.x, rect.origin.y);
        CGPoint end = CGPointMake(rect.origin.x, rect.size.height);
        CGContextDrawLinearGradient(context, [self greenGradient], start, end, 0);
    }


    CGContextDrawPath(context, kCGPathFillStroke);

}

- (CGGradientRef)normalGradient
{

    NSMutableArray *normalGradientLocations = [NSMutableArray arrayWithObjects:
                                               [NSNumber numberWithFloat:0.0f],
                                               [NSNumber numberWithFloat:1.0f],
                                               nil];


    NSMutableArray *colors = [NSMutableArray arrayWithCapacity:2];

    UIColor *color = [UIColor whiteColor];
    [colors addObject:(id)[color CGColor]];
    color = [StyleView lightColorFromColor:[UIColor cloudsColor]];
    [colors addObject:(id)[color CGColor]];
    NSMutableArray  *normalGradientColors = colors;

    int locCount = [normalGradientLocations count];
    CGFloat locations[locCount];
    for (int i = 0; i < [normalGradientLocations count]; i++)
    {
        NSNumber *location = [normalGradientLocations objectAtIndex:i];
        locations[i] = [location floatValue];
    }
    CGColorSpaceRef space = CGColorSpaceCreateDeviceRGB();

    CGGradientRef normalGradient = CGGradientCreateWithColors(space, (__bridge CFArrayRef)normalGradientColors, locations);
    CGColorSpaceRelease(space);

    return normalGradient;
}

Die Ergebnisse in diesem...
Rede-Blase im iOS SDK über Objective-C

Das sieht gut aus, aber können Sie einen Kommentar hinzufügen Verwendung. I. e., wie bekommt man von zu wollen, um etwas text in die Blase, um tatsächlich haben es in der Blase
erstellen Sie eine Unterklasse UILabel oder UITextField und fügen Sie die drawRect-Methode. Ich bin den code ändern, etwas zu machen das deutlicher.
kann u liefern demo in swift ? @Mischa
Können Sie bitte teilen Sie diese UILabel Unterklasse mit Eigenschaften, die Sie verwendet haben, wie gut? Kommentar und Farbschemata? Oder eine demo? Das wird sehr geschätzt.
Ich habe gefunden, zumindest mit IOS 11, als ich versuchte dies, dass der text, wenn Links ausgerichtet ist, vom Rand der Sprechblase, also musste ich Einrücken, es mit einer überschriebenen Methode - (void)drawTextInRect:(CGRect)rect { UIEdgeInsets Einsätze = {0, 10, 0, 10}; [super drawTextInRect:UIEdgeInsetsInsetRect(rect, Abstände)]; }
Ein anderer Kommentar, es ist nicht völlig klar ist mir, welche Werte sind akzeptabel für den "radius" in Ihrem code aus der Suche in apples Entwickler-Dokumentation. Vom Experimentieren radius-Werte zwischen 5,0 und 10,0 schien zu achten zumutbar, wieder auf IOS 11
Oh, und link zum Quarz-Demo ist jetzt gebrochen, ich kann ihn nicht finden auf der Apple-Website. Hat jemand den richtigen link?

InformationsquelleAutor Misha

3

Den three20-framework (eigentlich Three20Style) hat einen geformten Fenster-Klasse genannt TTSpeechBubbleShape, das ist im Grunde das, was du suchst.

Nun haben Sie zwei Optionen, wie ich es sehe:
1. entweder Three20; oder
2. analysieren, die TTSpeechBubbleShape Klasse zu sehen, wie dies umgesetzt wird und das gleiche tun in Ihrem app.
- Danke. Ich hoffe, es werden nicht irgendwelche Probleme mit meinem app-Annahme von apple, wenn ich umzusetzen TTSpeechBubbleShape? Wie würde ich animieren, das öffnen und schließen der Sprechblase?
- Ich denke, Sie werden keine Probleme haben, mit Genehmigung; eine app von mir mit Sprechblase wurde genehmigt vor einiger Zeit... versuchen Sie zu animieren, die frame-Größe, es zu tun.
- Hey, ich bin versucht, dies umzusetzen, aber die SpeechBubble Klasse ist abgeleitet von TTShape, die abgeleitet ist von NSObject. Wie schalte ich diese NSObject in einer Ansicht
InformationsquelleAutor sergio

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.