2016-01-08 10 views
6

Ich bewerte derzeit Xamarin Forms als Alternative zu unseren webbasierten HTML-Anwendungen für mobile Plattformen.Xamarin Forms: Symbole in Text einbetten

Unsere Anwendungen verwenden oft grafische Symbole, die in Textabsätzen eingebettet sind. Der gewünschte Effekt sieht wie folgt aus:

Example

Natürlich ist der Text hat auch in der Lage sein, sich frei herum zu wickeln, alle Symbole einschließlich. In HTML ist dies einfach so erreicht:

<p>Sample text with <img src="sample.jpg"> embedded</p> 

Wie kann ich den gleichen Effekt mit Xamarin Forms erreichen? Ich habe mir bereits FormattedStrings angeschaut, die die Formatierung von Untertiteln von Labels ermöglichen, jedoch scheinen sie das Einbetten von Bildern nicht zu ermöglichen.

Bitte beachten Sie auch, dass die Lösung mindestens iOS, Android und Windows Phone 8.1 unterstützen muss.

Antwort

1

Derzeit ist die einzige Möglichkeit, Symbole und Bilder in Textblöcke zu haben ist WebView (https://developer.xamarin.com/guides/xamarin-forms/working-with/webview/)

var browser = new WebView(); 
var htmlSource = new HtmlWebViewSource(); 
htmlSource.Html = @"<html><body> 
    <h1>Xamarin.Forms</h1> 
    <p>Welcome to WebView.</p> 
    </body></html>"; 
browser.Source = htmlSource; 
+0

Nun, ich war nicht in der Lage es auf iOS noch zu testen, jedoch auf WP8 und Android schien gut zu funktionieren, und wie es scheint um der einzige Weg zu sein, es plattformunabhängig zu machen, ist es die akzeptierte Antwort. –

4

Offensichtlich gezwungen, verwenden ein WebView fast besiegt den Punkt des Bewegens eines HTML5 App Xamarin nutzen zu können!

In den Xamarin Foren eine ähnliche Frage gestellt wurde: https://forums.xamarin.com/discussion/1649/text-with-image

das Problem Tomasz Cielecki einige Beispiel-Code hier gekocht bis zu lösen: https://gist.github.com/Cheesebaron/5034440

Er ging dann auf Blog über es hier: http://blog.ostebaronen.dk/2013/02/adding-images-to-textview-and-edittext.html

< schnipp>

begann ich wi aus Th ein super einfaches Beispiel, das versucht, ein Bild zu erhalten, das in einem TextView gezeigt wird. Ich habe ein paar Lösungen gegoogelt und sicher, Spannables erlauben ImageSpan in ihnen zu verwenden! Es gab nette Proben und so, und ich kam auf diese Idee.

ImageSpan in Textview

//Load up your drawable. 
var imageSpan = new ImageSpan(this, Resource.Drawable.Icon); 
//Set the text of SpannableString from TextView 
var spannableString = new SpannableString(textView.Text); 
//Add image at end of string 
spannableString.SetSpan(imageSpan, textView.Text.Length-1, textView.Text.Length, 0); 

einfach, nicht wahr? Und Sie können dem Spannable viele andere Spans hinzufügen, z. B. StyleSpan, mit dem Sie Ihre Schriftarten fett, kursiv und andere Stile formatieren können.

Da das so einfach war, habe ich es schnell mit einem EditText versucht. Es funktioniert auch ganz gut ...

</snip>

+0

Eine andere Option *, die plattformneutral * ist, hat ein ImageCell-Steuerelement in einer TableView, um sowohl Text als auch Bild zu rendern. http: //blog.falafel.com/creating-wiederverwendbare-xaml-user-controls-xamarin-forms/Offensichtlich wird dies ein wenig Arbeit erfordern, um Bilder zwischen Text zu bekommen, ist aber einfacher als ein benutzerdefinierter Renderer. Eine weitere Option ist das Positionieren von Labels auf Bildern: https://forums.xamarin.com/discussion/19089/position-label-or-y-text-on-top-of-an-image - das ist eines dieser Dinge, die fallen in die 10% plattformspezifische Kodierung, obwohl ich überrascht bin, dass es da draußen noch nichts gibt. –