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.

İçerik göster

Xamarin Forms HtmlView

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.

using Xamarin.Forms;

namespace XamarinForms.CustomControl
{
    public class HtmlLabel : Label
    {

    }
}

using Xamarin.Forms;

namespace XamarinForms.CustomControl

{

public class HtmlLabel : Label

{

}

iOS

Şimdi ise iOS için olan CustomRenderer kısmını yazalım.

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);
            }
        }
    }
}

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.

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);
        }
    }
}

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 🙂

giphy

Ş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.

<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>

<html>

<head>

<style>

p {

background-color: red;

}

span {

color: green;

}

</style>

p {

background-color: blue;

}

span {

color: yellow;

}

</style>

</head>

<body>

<p>Paragraf testi 1</p>

<ul>

</ul>

<div>div testi 123</div>

<span>span testi1</span>

<span>span testi2</span>

<span>span testi3</span>

<br/>

<strong>strong 1</strong>

<br/>

<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>

</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

5/5 - (4 votes)

xDeveloper dedi ki:
18 Şubat 2020, 23:10
Teşekkür ederim işime yaradı.
Yanıtla
mehmet dedi ki:
6 Ocak 2018, 17:12
uwp için olan kod yokmu?
Yanıtla
Halil Artut dedi ki:
3 Ocak 2018, 22:32
Teşekkürler paylaşım için
Yanıtla
Selim Tok dedi ki:
3 Ocak 2018, 21:31
Bende hep webview kullanıyordum mobil geliştirmelerde iyi oldu benim için.
Yanıtla
sevgii dedi ki:
3 Ocak 2018, 15:32
Xamarin traditional ios kullanıyorum xamarin forms kullanmadan ios’da kullanabilirmiyim?
Yanıtla
- Murat ÖNER dedi ki:
  4 Ocak 2018, 22:40
  Tabiki kullanabilirsiniz sadece ios için olan kısmı alıp kendinize özel bir metod içerisinde tanımlayıp kullanabilirsiniz rahatça.
  Yanıtla
kralx dedi ki:
3 Ocak 2018, 13:54
teşekkürler
Yanıtla
aslan15 dedi ki:
3 Ocak 2018, 08:44
güzel ipucu teşekkürler
Yanıtla
- Murat ÖNER dedi ki:
  3 Ocak 2018, 10:55
  Rica ederim beğenmenize sevindim 🙂
  Yanıtla

Kategoriler

Bloga e-posta ile abone ol

Xamarin Forms HtmlView Nesnesi Oluşturalım

iOS

Android

Android tarafında desteklenen Html etiketleri

iOS tarafında desteklenen Html etiketleri

You may also like...

9 Responses

Selim Tok için bir yanıt yazın Yanıtı iptal et

iOS

Android

Android tarafında desteklenen Html etiketleri

iOS tarafında desteklenen Html etiketleri

You may also like...

Xamarin Forms’da iOS ve Android UUID değerlerini alma

Bitrise Nedir?

Xamarin Android ListView Kaydırınca Oluşan Siyah Arkaplan Sorunu ve Çözümü

9 Responses

Selim Tok için bir yanıt yazın Yanıtı iptal et

Murat Öner sitesinden daha fazla şey keşfedin