创建Xamarin.Forms视图，该视图显示可单击每个句子的段落

问题描述

我需要在Xamarin.Forms上创建一个视图，该视图在段落中显示字符串数组.每个句子应为:
1. 自由流动，在同一行上一个接一个
2. 可点击，以便点击后即可浏览

I have a requirement to create a view on Xamarin.Forms that displays an array of strings in a paragraph. Each sentence should be:
1. Free flowing one after the other on the same line
2. Clickable so that it can be navigated upon click

此外，希望将这样的段落justify对齐.

Also, it is desirable to have such a paragraph justify aligned.

这是需求的预想的线框.我用交替的颜色突出显示了每个字符串，以说明如何将字符串列表(句子)吸收到一个自由流动的段落中

Here is the envisioned wireframe of the requirement. I have highlighted each string with alternating colors to illustrate how the list of strings (sentences) must ingest into a free flowing paragraph

由于我是Xamarin的新手，并且仍在学习基础知识，因此在设计具有适当视图/控件的视图时需要一些帮助.

Since I am new to Xamarin and still learning the basics, I need some help in designing this view with appropriate views/controls.

推荐答案

1. 在同一行上一个接一个地自由流动
2. 可点击，以便单击后即可导航

我们可以使用Span来实现它们.标签公开了FormattedText属性，该属性允许在同一标签中显示具有多种字体和颜色的文本.

We could implement them by using Span. Labels expose a FormattedText property that allows the presentation of text with multiple fonts and colors in the same label .

<StackLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
   <!-- Place new controls here -->
   <Label
         x:Name="label"
         VerticalTextAlignment="Center"
         HorizontalTextAlignment="Center"
         HorizontalOptions="Center"
         VerticalOptions="CenterAndExpand" />
</StackLayout>

在后面的代码中

var formattedString = new FormattedString();

Span span1 = new Span() { Text = "Note that a Span can also respond to any gestures that are added to the span's GestureRecognizers collection .", BackgroundColor = Color.Red,FontSize=20};
span1.GestureRecognizers.Add(new TapGestureRecognizer {NumberOfTapsRequired=1, Command = new Command( ()=> {  // will been invoked when you click it , do some thing you want  } ) });

formattedString.Spans.Add(span1);

Span span2 = new Span() { Text = "Note that a Span can also respond to any gestures that are added to the span's GestureRecognizers collection .", BackgroundColor = Color.Gray, FontSize = 20};
span2.GestureRecognizers.Add(new TapGestureRecognizer { NumberOfTapsRequired = 1, Command = new Command(() => { // will been invoked when you click it , do some thing you want  }) });

formattedString.Spans.Add(span2);

Span span3 = new Span() { Text = "Note that a Span can also respond to any gestures that are added to the span's GestureRecognizers collection .", BackgroundColor = Color.Red, FontSize = 20};
span3.GestureRecognizers.Add(new TapGestureRecognizer { NumberOfTapsRequired = 1, Command = new Command(() => { // will been invoked when you click it , do some thing you want}) });

formattedString.Spans.Add(span3);

label.FormattedText = formattedString;

有关Span的更多详细信息，您可以检查此文档.

For more details about Span you could check this docs .

我们可以使用自定义渲染器.

注意::JustificationMode仅在Android 8.0之后可用.

Note : JustificationMode is only available after Android 8.0 .

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

using Android.App;
using Android.Content;
using Android.OS;
using Android.Runtime;
using Android.Views;
using Android.Widget;

using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;

using xxx.Droid;

[assembly:ExportRenderer( typeof(Xamarin.Forms.Label),typeof(MyLabelRenderer)) ]

namespace xxx.Droid
{
    public class MyLabelRenderer : LabelRenderer
    {
        public MyLabelRenderer(Context context) : base(context)
        {

        }

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

            if(Control!=null)
            {
                if (Android.OS.Build.VERSION.SdkInt >= Android.OS.BuildVersionCodes.O)
                {
                    Control.JustificationMode = Android.Text.JustificationMode.InterWord;
                }
            }

        }
    }
}

这篇关于创建Xamarin.Forms视图，该视图显示可单击每个句子的段落的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！