Eine Speech-Bubble wie bei iMessage

iEi · 29. September 2013, 12:08

Hey Com,

wie kann ich solche Speech Bubbles programmieren ? Link: images.apple.com/euro/ios/b/sc…s/images/messages_get.jpg (Gemeint ist das Blaue bzw. das graue)
Wie kann ich das am besten umsetzen ? Mit einer TextBox oder einem einfachen Label ?

Greet iEi

ErfinderDesRades · 29. September 2013, 12:22

Anleitung (Bild-)DateiAnhänge

Trade · 29. September 2013, 12:28

1. Zeig doch bitte mal ein wenig Eigeninitiative.
2. Wir haben dir bestimmt schon sehr oft erklärt, dass man sowas mit GDI+ anstellen könnte. Von Control erben, ein Rectangle zeichnen, DrawArc, LinearGradientBrush oder auch nur SolidBrush mit Blue und dann DrawString mit weißer Farbe.

Edit:// Jop, das kannste dann auch wie EiPott sagt über nen GraphicsPath regeln. Ist sicher die schlauere Methode bzw hab ich damals bei meinem Control auch verwendet.

EiPott · 29. September 2013, 12:35

Dir wird ein GraphicsPath sicher helfen.

Fakiz · 29. September 2013, 14:03

Das ganze läßt sich auch anfänger freundlicher realisieren in dem du dir ein UserControll zusammklickst. Dort könntest du als Hintergrundbild ein Fertiges Bild deiner Sprechblasen festlegen und den jeweiligen Text einem Label übergeben.

Lukas · 29. September 2013, 14:08

Und wenn der Text länger wird? GraphicsPath scheint mir da eine gute Lösung.

Fakiz · 29. September 2013, 15:11

Ich wollte nur eine Alternative zu gdi+ zeigen. Ich selbst würde das ganze auch mittels eines gp regeln keine Frage.

nafets3646 · 29. September 2013, 15:16

Oder halt WPF verwenden, damit ist sowas am einfachsten.

nikeee13 · 29. September 2013, 15:30

...wenn man der WPF mächtig ist und man natürlich die Technologien abgewogen hat.

nafets3646 · 29. September 2013, 16:02

Ich habe mich mal dran versucht (mit GDI+):

Spoiler anzeigen

VB.NET-Quellcode

Public Class SpeechBubble
Inherits Control
Public Sub New()
Me.ForeColor = Color.LightGray
End Sub
Private _Orientation As LeftRightOrientation = LeftRightOrientation.Left
Public Property Orientation As LeftRightOrientation
Get
Return _Orientation
End Get
Set(value As LeftRightOrientation)
_Orientation = value
Me.Invalidate()
End Set
End Property
Private _TextColor As Color = Color.Black
Public Property TextColor As Color
Get
Return _TextColor
End Get
Set(value As Color)
_TextColor = value
Me.Invalidate()
End Set
End Property
Protected Overrides Sub OnPaint(e As PaintEventArgs)
Dim r As Rectangle = New Rectangle(0, 0, Me.Width - 7, Me.Height - 1)
Using g As Graphics = e.Graphics, gp As New GraphicsPath
g.SmoothingMode = SmoothingMode.HighQuality
g.TextRenderingHint = Drawing.Text.TextRenderingHint.SystemDefault
Dim WidthOffset As Integer = 0
If Orientation = LeftRightOrientation.Left Then
g.ScaleTransform(-1, 1)
WidthOffset = Me.Width - 1
End If
Dim d As Single = 20
gp.AddArc(r.X + r.Width - d - WidthOffset, r.Y, d, d, 270, 90)
gp.AddArc(r.X + r.Width - WidthOffset, r.Y + r.Height - d, d, d, 180, -90)
gp.AddArc(r.X + r.Width - 10 - WidthOffset, r.Y + r.Height - (d + 20), (d + 20), (d + 20), 90, 30)
gp.AddArc(r.X + r.Width - 30 - WidthOffset, r.Y + r.Height - (d + 20), (d + 20), (d + 20), 60, 30)
gp.AddArc(r.X - WidthOffset, r.Y + r.Height - d, d, d, 90, 90)
gp.AddArc(r.X - WidthOffset, r.Y, d, d, 180, 90)
gp.CloseAllFigures()
g.FillPath(New SolidBrush(Me.ForeColor), gp)
If Orientation = LeftRightOrientation.Left Then
g.ScaleTransform(-1, 1)
WidthOffset = 5
End If
g.DrawString(Me.Text, Me.Font, New SolidBrush(Me.TextColor), New RectangleF(4 + WidthOffset, 4, Me.Width - 8, Me.Width - 8), _
New StringFormat With {.Alignment = StringAlignment.Near, .Trimming = StringTrimming.EllipsisWord, .LineAlignment = StringAlignment.Near})
End Using
MyBase.OnPaint(e)
End Sub
Public Overloads Property Text As String
Get
Return MyBase.Text
End Get
Set(value As String)
MyBase.Text = value
Me.Invalidate()
End Set
End Property
Public Enum LeftRightOrientation
Left
Right
End Enum
End Class

//EDIT:
@Glossy Cherry
Hier noch dein Screenshot:

Glossy Cherry · 29. September 2013, 16:04

@nafets3646:
Wäre es möglich ein Endergebniss in Form eines Screenshots anzuhängen?

iEi · 29. September 2013, 16:18

@nafets3646

Wow jetzt nur noch die Schriftart ändern, und schon ist das 1:1 nachgemacht :thumbsup:

Sieht richtig geil aus

nafets3646 · 29. September 2013, 16:21

Was ist es denn original für ne Schrift? Helvetica?

iEi · 29. September 2013, 16:21

Ich glaube eher Lucida Sans Unicode

Eine Speech-Bubble wie bei iMessage

Eine Speech-Bubble wie bei iMessage

VB.NET-Quellcode

Benutzer online 1

Tags

Ähnliche Themen

9 Benutzer haben hier geschrieben