Mobil cihazlarda html görüntüleme ve diğer html üzerindeki işlemler için webview kullanılıyor genellikle fakat yavaşlığından bazı iOS’daki can sıkan güvenlik politikaları nedeni ile ufak bir html yapısını göstermek için webview ile boğuşmak can sıkabiliyor bu gibi basit işler için HtmlView diye bir nesne oluşturup Html metnini bu nesne üzerinde gösterebiliriz.
Peki oluşturmayı düşündüğümüz HtmlView nesnesini nasıl oluşturacağız biraz bu kurgu üzerinde konuşalım. Bu ihtiyacı karşılamak için Xamarin Forms’un CustomRenderer çözümününden faydalacağız ve Label nesnesinden türeyecek olan HtmlView nesnemizi Platform özelinde yazılacak olan CustomRendererlarımız içerisinde ilgili platform’a ait native kod blokları ile bu ihtiyacı gideceğiz o zaman hemen işe koyulalım ilk işimiz bahsettiğimiz HtmlView nesnemizi oluşturalım.
1 2 3 4 5 6 7 8 9 | using Xamarin.Forms; namespace XamarinForms.CustomControl { public class HtmlLabel : Label { } } |
iOS
Şimdi ise iOS için olan CustomRenderer kısmını yazalım.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | using XamarinForms.CustomControl; using XamarinForms.iOS.CustomRenderer; using Foundation; using Xamarin.Forms; using Xamarin.Forms.Platform.iOS; [assembly: ExportRenderer(typeof(HtmlLabel), typeof(HtmlLabelRenderer))] namespace XamarinForms.iOS.CustomRenderer { public class HtmlLabelRenderer : LabelRenderer { protected override void OnElementChanged(ElementChangedEventArgs<Label> e) { base.OnElementChanged(e); if (e.NewElement is HtmlLabel element) { var nsAttr = new NSAttributedStringDocumentAttributes { DocumentType = NSDocumentType.HTML }; var html = NSData.FromString(element.Text, NSStringEncoding.Unicode); var nsError = new NSError(); Control.AttributedText = new NSAttributedString(html, nsAttr, ref nsError); } } } } |
Üstteki kod bloğunu yukarıdan aşağıya açıklayalım 7. satırdaki ExportRenderer ile HtmlLabel nesnesi için HtmlLabelRenderer sınıfının iOS tarafında nesnenin render edilme aşamasında override ettiğimiz OnElementChanged metoduna girişini sağlamış olduk ve render edilme aşamasından önce burada yazdığımız kod bloklarından Label.Text özelliğindeki değer işlendikten sonra Yeni hazırladığımız metin render edilmiş olacak.
Android
Şimdi Android CustomRenderer kısmını yazalım. Android’de iOS kısmı kadar iş yok 1-2 satırla işi çözebiliyoruz.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | using Android.Text; using Android.Widget; using XamarinForms.CustomControl; using XamarinForms.Droid.CustomRenderer; using Xamarin.Forms; using Xamarin.Forms.Platform.Android; [assembly:ExportRenderer(typeof(HtmlLabel), typeof(HtmlLabelRenderer))] namespace XamarinForms.Droid.CustomRenderer { public class HtmlLabelRenderer : LabelRenderer { protected override void OnElementChanged(ElementChangedEventArgs<Label> e) { base.OnElementChanged(e); if (e.NewElement is HtmlLabel element) Control.SetText(Html.FromHtml(element.Text), TextView.BufferType.Spannable); } } } |
Android tarafında pek açıklanacak bir olay yok Control.SetText metodu içerisinde Html.FromHtml metoduna Label.Text özelliğindeki değeri veriyoruz ve bizim için metni Html olarak işliyor ve Label nenesine bu çıktıyı set ediyor.
Makalenin ilk giriş kısmında belirttiğim birşey vardı basit html kodlarınız için bu metodu tercih edebilirsiniz demiştim bunun nedeni şudur çok sınırlı sayıda html elementi desteklenmektedir desteklenen html etiketleri ise şu şekildedir.
Android tarafında desteklenen Html etiketleri
- p
- ul
- li
- div
- span
- strong
- b
- em
- cite
- dfn
- i
- big
- small
- font
- blockquote
- tt
- a
- u
- del
- s
- strike
- sup
- sub
- h1
- h2
- h3
- h4
- h5
- h6
- img
- br
Android tarafında Html konusunda daha detaylı bilgi için https://android.googlesource.com/platform/frameworks/base/+/master/core/java/android/text/Html.java#791 adresindeki kaynak koduna gözatabilirsiniz.
iOS tarafında desteklenen Html etiketleri
iOS tarafında neredeyse tüm etiketler ve tanımlar çok iyi sonuç veriyor üstte listelediğimiz html etiketleri android tarafında destekleniyor dedik fakat yarım yamalak alttaki örnek ekran görüntüsünda Android(solda), iOS(sağda) çıktılarının ne kadar önemli derecede fark ettiğini görüyorsunuzdur. Android tarafında head arasına yazdığımız style etiketi olduğu gibi ekrana basılmış sonrasında inline style’ler gözardı edilmiş ve ul-ol etiketleri destekleniyor denmesine rağmen android’de düz metin olarak gösterildiğini görüyoruz fakat iOS’da ekran görüntüsü altında sizlerle paylaştığım kodlarda çalışmayan hiçbir kısım yoktur tam olarak beklediğimiz çıktıyı aldık ilk defa iOS’un android’den daha fazla özgür olduğu bir nokta ile karşılaştım o yüzden iOS hakkında zincirlerim çok ufakta olsa kırılmış oldu 🙂
Şimdi Android ve iOS ekran görüntülerine gözatalım gerçektende bahsettiğimiz gibi çıktıda bu kadar fark oluyormu.
Kullanılan Html kodu ise şu şekildedir.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 | <html> <head> <style> p { background-color: red; } span { color: green; } </style> <style type='text/css'> p { background-color: blue; } span { color: yellow; } </style> </head> <body> <p>Paragraf testi 1</p> <ul> <li>li 1</li> <li>li 2</li> </ul> <div>div testi 123</div> <span>span testi1</span> <span>span testi2</span> <span>span testi3</span> <br/> <strong>strong 1</strong> <br/> <b>bold 1</b> <br/> <em>em testi 1</em> <br/> <cite>cite testi 1</cite> <br/> <dfn>dfn testi 1</dfn> <br/> <i>i testi 1</i> <br/> <big>big testi 1</big> <br/> <small>small testi 1</small> <br/> <font>font testi 1</font> <blockquote>blockquote testi 1</blockquote> <tt>tt testi 1</tt> <br/> <a>a testi 1</a> <br/> <u>u testi 1</u> <br/> <del>del testi 1</del> <br/> <s>s testi 1</s> <br/> <strike>strike testi 1</strike> <br/> <sup>sup testi 1</sup> <br/> <sub>sub testi 1</sub> <h1 style='color: orange'>h1 testi 1</h1> <h2 style='color: orange'>h2 testi 2</h2> <h3 style='color: orange'>h3 testi 3</h3> <h4 style='color: orange'>h4 testi 4</h4> <h5 style='color: orange'>h5 testi 5</h5> <h6 style='color: orange'>h6 testi 6</h6> <img src='http://flag.muratoner.net/' width='250' height='250' alt='img testi 1'></img> </body> </html> |
Xamarin Forms HtmlView nesnesi nasıl oluşturulur sorusuna bu makalede cevap bulabildiğimizi düşünüyorum en azından basit Html
kodlarınızı göstermek için kullanabileceğiniz WebView
haricinden bir alternatif yöntem olduğunu bilmek bazı durumlarda ilaç gibi gelebilir.
Bir sonraki Xamarin macerasında görüşmek ümidiyle 🙂
Xamarin Forms HtmlView, Xamarin Forms HtmView Android, Xamarin Forms HtmlView iOS
Teşekkür ederim işime yaradı.
uwp için olan kod yokmu?
Teşekkürler paylaşım için
Bende hep webview kullanıyordum mobil geliştirmelerde iyi oldu benim için.
Xamarin traditional ios kullanıyorum xamarin forms kullanmadan ios’da kullanabilirmiyim?
Tabiki kullanabilirsiniz sadece ios için olan kısmı alıp kendinize özel bir metod içerisinde tanımlayıp kullanabilirsiniz rahatça.
teşekkürler
güzel ipucu teşekkürler
Rica ederim beğenmenize sevindim 🙂