Xamarin HTML标签可滚动

时间:2020-03-21 13:54:18

标签: c# xamarin xamarin.forms xamarin.android

我正在制作一个新颖的阅读器应用程序。

我有一个html章节。

我已经制作了一个自定义htmlLabel,其中将包含html

问题在于标签的大小仅与screan一样大,其他所有文本均保持隐藏状态

我在滚动视图中有标签,但即使如此,它也只能扩展到屏幕的大小

这是我的自定义标签渲染器。 现在我知道我可以使用网络视图了,但是我仍然想要一个标签。

sing System;
using System.ComponentModel;
using Android.Content;
using Android.Support.V4.Text;
using Android.Text;
using Android.Widget;
using Comic.Viewer.Controllers;
using Comic.Viewer.Droid.Renderer;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;
[assembly: ExportRenderer(typeof(ClickableHtmlLabel), typeof(ClickableHtmlLabelRenderer))]
namespace Comic.Viewer.Droid.Renderer
{
   public class ClickableHtmlLabelRenderer : LabelRenderer
    {
        public ClickableHtmlLabelRenderer(Context context) : base(context)
        {

        }


        protected override void OnElementChanged(ElementChangedEventArgs<Label> e)
        {
            base.OnElementChanged(e);

            Control?.SetText(HtmlCompat.FromHtml(Element.Text, HtmlCompat.FromHtmlModeLegacy), TextView.BufferType.Spannable);
        }

        protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
        {
            base.OnElementPropertyChanged(sender, e);

            if (e.PropertyName == Label.TextProperty.PropertyName)
            {
                Control?.SetText(HtmlCompat.FromHtml(Element.Text, HtmlCompat.FromHtmlModeLegacy), TextView.BufferType.Spannable);
            }

            var el = Element as ClickableHtmlLabel;
            this.Click += new EventHandler((o, sender) =>
            {
                el.Clicked();

            });
        }
    }
} 

1 个答案:

答案 0 :(得分:0)

您可以使用自定义渲染器来创建HtmlLabel。然后将HtmlLabel放在ScrollView中。它将使HtmlLabel可以滚动。我制作了一个代码示例供您参考。

HtmlLabel.cs

public class HtmlLabel : Label
{
}

HtmlLabelRenderer.cs

[assembly: ExportRenderer(typeof(HtmlLabel), typeof(HtmlLabelRenderer))]
namespace XamarinDemo.Droid.Renderers
{
 class HtmlLabelRenderer : LabelRenderer
 {
    public HtmlLabelRenderer(Context context) : base(context)
    {

    }
    protected override void OnElementChanged(ElementChangedEventArgs<Label> e)
    {
        base.OnElementChanged(e);

        if (Control != null && e.NewElement != null)
        {
            UpdateText();
        }
    }

    protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
    {
        base.OnElementPropertyChanged(sender, e);

        if (e.PropertyName == nameof(HtmlLabel.Text))
        {
            UpdateText();
        }
    }

    void UpdateText()
    {
        if (string.IsNullOrWhiteSpace(Element?.Text))
        {
            Control.Text = string.Empty;
            return;
        }

        Control.TextFormatted = Build.VERSION.SdkInt >= BuildVersionCodes.N
            ? Html.FromHtml(Element.Text, FromHtmlOptions.ModeCompact)
#pragma warning disable CS0618 // Type or member is obsolete
            : Html.FromHtml(Element.Text);
#pragma warning restore CS0618 // Type or member is obsolete

        Control.MovementMethod = Android.Text.Method.LinkMovementMethod.Instance;
     }
  }

用法:

 <ContentPage.Content>
    <ScrollView>
        <control:HtmlLabel x:Name="htmlLabel" FontSize="Large"/>
    </ScrollView>
 </ContentPage.Content> 

设置html文本。

  htmlLabel.Text = @"<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>Starting.</h1>
<p>This is a paragraph.</p>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<h1>This is a Heading</h1>
<p>Ending.</p>

</body>
</html>";

enter image description here

相关问题