部分文本可在Xamarin标签中单击

我正在寻找一种方法,使Xamarin Forms中Label的部分文本可单击,执行不同的功能,理想情况下具有不同的格式 . 我知道可点击的标签很简单,可以这样做:

Label label = new Label { Text = "Click me" };
label.Click += () => { label.Text = "Clicked"; };

从本质上讲,我希望模仿我在原生Android中完成的应用中的行为 . 我的应用必须适用于Android和iOS,最适合UWP . 在Android中,CharSequence对象可以添加到TextView(类似于Label的控件) . 在Android中,我可能会创建一个CharSequence对象,如下所示:

Runnable doSomething; //equivalent to C# Action; assuming initialized somewhere
    String myString = "My Clickable String"; //the clickable string
    Spannable span = Spannable.Factory.getInstance().newSpannable(myString); //this is the clickable text to add to TextView
        span.setSpan(new ClickableSpan() {
            @Override
            public void onClick(View v) {
                doSomething.run(); //perform the action
            }

            @Override
            public void updateDrawState(TextPaint ds) {
                ds.setUnderlineText(true); //make underlined
                ds.setColor(Color.rgb(color.r, color.g, color.b)); //change the color
                ds.setFakeBoldText(true); //make it bold
                ds.setTextSize((float) largeFont); //change the text size
            }
        }, 0, a.length(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE); //style and function for the entire string

如您所见,它执行一个函数并具有样式属性 . 然后我可以将它添加到TextView(Spannable实现Spanned,它实现CharSequence) . 我可以根据需要添加多个CharSequences以及不可点击的字符串 .

我'm hoping for a way that I can do this in Xamarin but I haven' t找到了解决方案 . 我对iOS的熟悉程度要差得多,但似乎's possible to add NSMutableAttributedString objects to a UILabel to similar effect. I'也看到了FancyLabel对象 . 我在研究中发现了很多东西 .

任何帮助将非常感谢!

回答(3)

2 years ago

这个答案可能是非常事后的,但可能在将来帮助其他人 .

我所做的和测试的是使用一个网格,你的字符串被恰当地分开,比如说你想改变一个单词的行为:
在您的ViewModel / View中:

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/> //for first few words
        <ColumnDefinition Width="Auto"/> //the target word
        <ColumnDefinition Width="Auto"/> //the rest of the string
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/> //one row for one line of text
    </Grid.RowDefinitions>

    <Label Grid.Column="0" Grid.ColumnSpan="1" Grid.Row="0" Text="First part of string"/>
    <Label Grid.Column="1" Grid.ColumnSpan="1" Grid.Row="0" Text="TARGET-WORD">
        <Label.GestureRecognizers>
            <TapGestureRecognizer Command="{Binding <YOUR_COMMAND>}"/>
        </Label.GestureRecognizers>  
    </Label>
    <Label Grid.Column="2" Grid.ColumnSpan="1" Grid.Row="0" Text="rest of the string"/>
</Grid>

这样,您可以隔离网格的特定部分并修改行为/美学(数据触发器,样式,手势) . 请记住 <Span></Span> 标签不支持 <Label></Label> 的所有功能 .

显然,在XAML中你需要知道单词的位置,或者如果字符串是动态的,你可以动态搜索它,并在后面的代码中构建你的Grid .

*在Xamarin.Forms 2.3.4.247上测试

2 years ago

考虑一个回答这个问题的例子,可能会对将来有所帮助,

例如 . 我需要写一些“通过注册,您同意服务条款和隐私政策”的格式:

  • 服务条款具有不同的颜色,可以点击

  • 具有不同颜色的隐私政策,可以点击

其余部分字符串应该很简单 .

XAML中的代码:

`<Label Text="By signing up, you agree to the " Grid.Row="0"/>
 <Label Text="Terms of Services" TextColor="DarkOrange" WidthRequest="150" 
        HorizontalOptions="End" Grid.Row="0"> 
     <Label.GestureRecognizers>
         <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped_Terms"/>
     </Label.GestureRecognizers>
 </Label>
 <Label Text=" and " HorizontalOptions="End"  Grid.Row="0" />
 <Label Text="Privacy Policy" TextColor="DarkOrange" HorizontalOptions="Center"
        VerticalOptions="CenterAndExpand" Grid.Row="0">
     <Label.GestureRecognizers>
         <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped_Policy"/>
     </Label.GestureRecognizers>
 </Label>
`

用于抽头回调的C#代码:

private void TapGestureRecognizer_Tapped_Terms(object sender, EventArgs e)
{
    Navigation.PushAsync(new TermsofServicesPage());
}

private void TapGestureRecognizer_Tapped_Policy(object sender, EventArgs e)
{
    Navigation.PushAsync(new PrivacyPolicyPage());
}

可以执行字符串的不同格式化,并且适用于跨平台 .

2 years ago

只是为了使用Xamarin Forms 3.4(及以上)提供更新的答案 . 您可以使用 LabelFormattedText 属性 . 有关如何在Xamarin Docs中使用它的深入概述 .

从根本上说,它的工作原理如下:

<Label 
    LineBreakMode="WordWrap">
    <Label.FormattedText>
        <FormattedString>
            <Span 
                Text="Red Bold, " 
                TextColor="Red" 
                FontAttributes="Bold" />
            <Span 
                Text="default, " 
                Style="{DynamicResource BodyStyle}">                          
                <Span.GestureRecognizer>
                    <TapGestureRecognizer Command="{Binding TapCommand}" />
                </Span.GestureRecognizers>
            </Span>
            <Span 
                Text="italic small." 
                FontAttributes="Italic" 
                FontSize="Small" />
        </FormattedString>
    </Label.FormattedText>
</Label>

在上面,点击文本 default 将导致 TapCommand 被执行 .