Xamarin 表单标签 - 证明?
Xamarin Forms Label - Justify?
我只是想问一下是否有任何方法可以在 Label 中 对齐文本 。我正在使用 Xamarin 表单 Xaml.
谢谢。
更新:
至于现在,无法调整文本。大多数答案都是关于将文本居中的,但这不是我问的。一种方法是使用 Timothy 的 Renderer。
使用 XAlign
属性
Label lbl = new Label();
lbl.Text = "I'm a Label!";
lbl.XAlign = TextAligntment.Start; // Start, Center, End are valid
你用什么容器来装文字?具有 FillAndExpand 的 HorizontalOptions 和 XAlign 的 StackLayout 可能会做到这一点,但前提是每个控件的文本只有一行。
试试这个:
<StackLayout HorizontalOptions="FillAndExpand" Padding="0, 10, 0, 10" Spacing="0">
<Label Text="Test message" XAlign="Center"/>
<Label FontSize="Small" Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." LineBreakMode="WordWrap"
XAlign="Center" />
</StackLayout>
当前的方法是使用 HorizontalTextAlignment
,TextAlignment
枚举的值为:
Center
= Center-aligned 文字
Start
= Left-aligned
End
= Right-aligned
将标签及其文本居中示例:
<Label x:Name="Description" HorizontalTextAlignment="Center"
VerticalOptions="Center" HorizontalOptions="Center" />
如果您在 relativeLayout 下使用标签,您可以调整标签..
诀窍是您必须按照 parent..
填充宽度和高度
所以我使用 HeightConstraint,WidthConstraint 和 factor=1.. 所以它需要 parent..
的全宽和高度
<RelativeLayout >
<Label Text="My text"
FontSize="20"
HorizontalOptions="Center"
VerticalOptions="Center"
RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent,Property=Height,Factor=1,Constant=0}"
RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent,Property=Width,Factor=1,Constant=0}" />
</RelativeLayout>
虽然您不能使用 Xamarin.Forms 功能将标签的文本拉伸到全宽,但使用平台渲染器可以轻松实现。
大多数 Xamarin 平台都在相应的原生元素中提供文本对齐功能,这只是设置原生元素的单个属性的问题。我想不将此功能添加到标准 Xamarin.Forms 标签的原因是平台在该功能方面落后,例如Android 仅在版本 8.1
中添加了 Android.Text.JustificationMode.InterWord 标志
您可以在下面看到 Android 渲染器实现:
using Android.Content;
using Saplin.CPDT.UICore.Controls;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;
[assembly: ExportRenderer(typeof(Saplin.CPDT.UICore.Controls.ExtendedLabel), typeof(Saplin.CPDT.Droid.ExtnededLabelRenderer))]
namespace Saplin.CPDT.Droid
{
public class ExtnededLabelRenderer : Xamarin.Forms.Platform.Android.LabelRenderer
{
public ExtnededLabelRenderer(Context context) : base(context)
{
}
protected override void OnElementChanged(ElementChangedEventArgs<Label> e)
{
base.OnElementChanged(e);
var el = (Element as ExtendedLabel);
if (el != null && el.JustifyText)
{
if (Android.OS.Build.VERSION.SdkInt >= Android.OS.BuildVersionCodes.O)
{
Control.JustificationMode = Android.Text.JustificationMode.InterWord;
}
}
}
}
}
- 您在本机项目中创建渲染器 class
- 您添加 assembly:ExportRenderer 属性
- 您设置了 TextView 的 JustificationMode
在我的示例中,我使用了 ExtenedLabel subclass of Xamarin.Forms.Label with extra 属性 JustifyText 让设置文本的对齐方式。这就是 subclassed 控件的声明方式:
using System;
using Xamarin.Forms;
namespace Saplin.CPDT.UICore.Controls
{
public class ExtendedLabel : Label
{
public static readonly BindableProperty JustifyTextProperty =
BindableProperty.Create(
propertyName: nameof(JustifyText),
returnType: typeof(Boolean),
declaringType: typeof(ExtendedLabel),
defaultValue: false,
defaultBindingMode: BindingMode.OneWay
);
public bool JustifyText
{
get { return (Boolean)GetValue(JustifyTextProperty); }
set { SetValue(JustifyTextProperty, value); }
}
}
}
由于无法直接在标签内完成,解决方法是使用 Xamarin.Forms 中的新 FlexLayout
3. 想法是在 space 处拆分文本字符并在 FlexLayout
中插入相应的标签,其中 JustifyContent
设置为 SpaceBetween
.
示例:
XAML
<Frame
HorizontalOptions="Center"
Margin="20,50,20,0"
Padding="10"
WidthRequest="300"
HasShadow="true">
<FlexLayout
x:Name="TextContainer"
Direction="Row"
AlignItems="End"
JustifyContent="SpaceBetween"
Wrap="Wrap"/>
</Frame>
代码隐藏
var textparts = "This is a long text to be justified"
.Split(' ', StringSplitOptions.RemoveEmptyEntries)
.Select(x => new Label
{
Text = x,
FontSize = 12,
TextColor = Color.FromHex("#555555"),
Margin = new Thickness(1, 0)
});
foreach (var textpart in textparts)
TextContainer.Children.Add(textpart);
在 xaml 中,您可以使用 html 来调整文本。
<Label LineBreakMode="WordWrap" TextType="Html" TextColor="Black">
<Label.Text><p style="text-align:justify;">
Your text here
<p></Label.Text>
我已经能够通过使用嵌套网格成功实现这一点。希望这对某人有所帮助!
<Grid HorizontalOptions="Fill" Padding="5,2">
<Grid Margin="8, 85,8,0" VerticalOptions="Center" RowSpacing="0" >
<Label Grid.Row="0" x:Name="PostTitle" HorizontalTextAlignment="Center" VerticalTextAlignment="Center"
Text="Display Text" Padding="10,10" LineHeight="20" BackgroundColor="Black" TextColor="WhiteSmoke" />
<Label Grid.Row="1" x:Name="PostDate" HorizontalTextAlignment="Center" VerticalTextAlignment="Center"
Text="Your Text Here" FontSize="Micro" Padding="10,10" LineHeight="10"
BackgroundColor="Black" TextColor="WhiteSmoke" />
</Grid>
</Grid>
对齐 UITableViewCell TextLabel 中的文本 - Xamarin IOS
UIStringAttributes stringAttributes = new UIStringAttributes
{
ParagraphStyle = new NSMutableParagraphStyle() { Alignment = UITextAlignment.Justified }
};
var attributedText = new NSMutableAttributedString(cell.TextLabel.Text);
attributedText.AddAttributes(stringAttributes, new NSRange(0, cell.TextLabel.Text.Length));
cell.TextLabel.AttributedText = attributedText;
我只是想问一下是否有任何方法可以在 Label 中 对齐文本 。我正在使用 Xamarin 表单 Xaml.
谢谢。
更新: 至于现在,无法调整文本。大多数答案都是关于将文本居中的,但这不是我问的。一种方法是使用 Timothy 的 Renderer。
使用 XAlign
属性
Label lbl = new Label();
lbl.Text = "I'm a Label!";
lbl.XAlign = TextAligntment.Start; // Start, Center, End are valid
你用什么容器来装文字?具有 FillAndExpand 的 HorizontalOptions 和 XAlign 的 StackLayout 可能会做到这一点,但前提是每个控件的文本只有一行。
试试这个:
<StackLayout HorizontalOptions="FillAndExpand" Padding="0, 10, 0, 10" Spacing="0">
<Label Text="Test message" XAlign="Center"/>
<Label FontSize="Small" Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." LineBreakMode="WordWrap"
XAlign="Center" />
</StackLayout>
当前的方法是使用 HorizontalTextAlignment
,TextAlignment
枚举的值为:
Center
= Center-aligned 文字Start
= Left-alignedEnd
= Right-aligned
将标签及其文本居中示例:
<Label x:Name="Description" HorizontalTextAlignment="Center"
VerticalOptions="Center" HorizontalOptions="Center" />
如果您在 relativeLayout 下使用标签,您可以调整标签..
诀窍是您必须按照 parent..
填充宽度和高度所以我使用 HeightConstraint,WidthConstraint 和 factor=1.. 所以它需要 parent..
的全宽和高度 <RelativeLayout >
<Label Text="My text"
FontSize="20"
HorizontalOptions="Center"
VerticalOptions="Center"
RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent,Property=Height,Factor=1,Constant=0}"
RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent,Property=Width,Factor=1,Constant=0}" />
</RelativeLayout>
虽然您不能使用 Xamarin.Forms 功能将标签的文本拉伸到全宽,但使用平台渲染器可以轻松实现。
大多数 Xamarin 平台都在相应的原生元素中提供文本对齐功能,这只是设置原生元素的单个属性的问题。我想不将此功能添加到标准 Xamarin.Forms 标签的原因是平台在该功能方面落后,例如Android 仅在版本 8.1
中添加了 Android.Text.JustificationMode.InterWord 标志您可以在下面看到 Android 渲染器实现:
using Android.Content;
using Saplin.CPDT.UICore.Controls;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;
[assembly: ExportRenderer(typeof(Saplin.CPDT.UICore.Controls.ExtendedLabel), typeof(Saplin.CPDT.Droid.ExtnededLabelRenderer))]
namespace Saplin.CPDT.Droid
{
public class ExtnededLabelRenderer : Xamarin.Forms.Platform.Android.LabelRenderer
{
public ExtnededLabelRenderer(Context context) : base(context)
{
}
protected override void OnElementChanged(ElementChangedEventArgs<Label> e)
{
base.OnElementChanged(e);
var el = (Element as ExtendedLabel);
if (el != null && el.JustifyText)
{
if (Android.OS.Build.VERSION.SdkInt >= Android.OS.BuildVersionCodes.O)
{
Control.JustificationMode = Android.Text.JustificationMode.InterWord;
}
}
}
}
}
- 您在本机项目中创建渲染器 class
- 您添加 assembly:ExportRenderer 属性
- 您设置了 TextView 的 JustificationMode
在我的示例中,我使用了 ExtenedLabel subclass of Xamarin.Forms.Label with extra 属性 JustifyText 让设置文本的对齐方式。这就是 subclassed 控件的声明方式:
using System;
using Xamarin.Forms;
namespace Saplin.CPDT.UICore.Controls
{
public class ExtendedLabel : Label
{
public static readonly BindableProperty JustifyTextProperty =
BindableProperty.Create(
propertyName: nameof(JustifyText),
returnType: typeof(Boolean),
declaringType: typeof(ExtendedLabel),
defaultValue: false,
defaultBindingMode: BindingMode.OneWay
);
public bool JustifyText
{
get { return (Boolean)GetValue(JustifyTextProperty); }
set { SetValue(JustifyTextProperty, value); }
}
}
}
由于无法直接在标签内完成,解决方法是使用 Xamarin.Forms 中的新 FlexLayout
3. 想法是在 space 处拆分文本字符并在 FlexLayout
中插入相应的标签,其中 JustifyContent
设置为 SpaceBetween
.
示例:
XAML
<Frame
HorizontalOptions="Center"
Margin="20,50,20,0"
Padding="10"
WidthRequest="300"
HasShadow="true">
<FlexLayout
x:Name="TextContainer"
Direction="Row"
AlignItems="End"
JustifyContent="SpaceBetween"
Wrap="Wrap"/>
</Frame>
代码隐藏
var textparts = "This is a long text to be justified"
.Split(' ', StringSplitOptions.RemoveEmptyEntries)
.Select(x => new Label
{
Text = x,
FontSize = 12,
TextColor = Color.FromHex("#555555"),
Margin = new Thickness(1, 0)
});
foreach (var textpart in textparts)
TextContainer.Children.Add(textpart);
在 xaml 中,您可以使用 html 来调整文本。
<Label LineBreakMode="WordWrap" TextType="Html" TextColor="Black">
<Label.Text><p style="text-align:justify;">
Your text here
<p></Label.Text>
我已经能够通过使用嵌套网格成功实现这一点。希望这对某人有所帮助!
<Grid HorizontalOptions="Fill" Padding="5,2">
<Grid Margin="8, 85,8,0" VerticalOptions="Center" RowSpacing="0" >
<Label Grid.Row="0" x:Name="PostTitle" HorizontalTextAlignment="Center" VerticalTextAlignment="Center"
Text="Display Text" Padding="10,10" LineHeight="20" BackgroundColor="Black" TextColor="WhiteSmoke" />
<Label Grid.Row="1" x:Name="PostDate" HorizontalTextAlignment="Center" VerticalTextAlignment="Center"
Text="Your Text Here" FontSize="Micro" Padding="10,10" LineHeight="10"
BackgroundColor="Black" TextColor="WhiteSmoke" />
</Grid>
</Grid>
对齐 UITableViewCell TextLabel 中的文本 - Xamarin IOS
UIStringAttributes stringAttributes = new UIStringAttributes
{
ParagraphStyle = new NSMutableParagraphStyle() { Alignment = UITextAlignment.Justified }
};
var attributedText = new NSMutableAttributedString(cell.TextLabel.Text);
attributedText.AddAttributes(stringAttributes, new NSRange(0, cell.TextLabel.Text.Length));
cell.TextLabel.AttributedText = attributedText;