I just wanted to ask if there is any way to justify text in a Label. I am using Xamarin Forms Xaml.
Thanks.
UPDATE:
To Justify Text in 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;
As it can't be done directly within a label, a workaround is to use the new FlexLayout
from Xamarin.Forms 3. The idea is to split the text at space character and insert corresponding label in the FlexLayout
with JustifyContent
set to SpaceBetween
.
Example :
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>
Code behind
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);
I've been able to successfully achieve this by using nested grids. Hope this helps someone!
<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>
Though you can't stretch label's text to a full width using Xamarin.Forms features, it's easily achieved with a platform renderer.
Most Xamarin platforms have the text justification feature available in corresponding native elements, and it's just a matter of setting a single attribute of a native element. I suppose the reason for not adding this feature to standard Xamarin.Forms label is lagging of platforms in that capability, e.g. Android had Android.Text.JustificationMode.InterWord flag added only in version 8.1
Below you can see Android renderer implementation:
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;
}
}
}
}
}
In my example I used ExtenedLabel subclass of Xamarin.Forms.Label with extra property JustifyText to let setting the justification of the text. That's how the subclassed control can be declared:
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); }
}
}
}
If you use the Label under relativeLayout you can justify the label..
The trick is you must fill the width & height as per parent..
So I use HeightConstraint,WidthConstraint with factor=1.. so it take full width & height of the 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>
What sort of container are you using to hold the text? Having a StackLayout with HorizontalOptions of FillAndExpand, along with the XAlign, might do it, but only if your text is only one line long per control.