在 Xamarin.Forms的中,简单的定制字体 helper

分享于 

12分钟阅读

Web开发

  繁體

在创建移动应用时,我们希望它看起来很好。 不仅是设计,还包括版式伟大。 Xamarin.Forms 已经提供自定义字体机制。 但是我认为它的效率不够高,因为它必须为每个平台声明不同的声明。 查看下面的示例 Fragment。

<LabelText="Hello Forms with XAML"><Label.FontFamily><OnPlatformx:TypeArguments="x:String"><OnPlatform.iOS>Oswald-Regular</OnPlatform.iOS><OnPlatform.Android>Oswald-Regular.ttf#Oswald-Regular</OnPlatform.Android><OnPlatform.WinPhone>Assets/Fonts/Oswald-Regular.ttf#Oswald</OnPlatform.WinPhone></OnPlatform></Label.FontFamily></Label>

看看每个平台是不同的string。 在iOS上,你只需要设置字体 NAME。 对于Android和 WinPhone,你需要声明字体文件和字体 NAME的路径。 我想做的就是调用像iOS这样的字体 NAME,对于每个平台,它会正确地呈现如下:

<LabelText="Hello Forms with XAML"FontFamily="Oswald-Regular"></Label>

因此在本教程中,我们将为基于iOS定制字体工作的helper 版本创建一个类。 他们已经在上发布了一个博客帖子,如何在 Xamarin.iOS 中使用定制字体。 你只需要将你的字体添加到项目中,在 info.plist 下定义它。 我们将做一些类似定制字体 helper 和定制渲染器的事情。

本教程不涉及WinPhone版本,因为我没有使用 Windows,更有可能人们只是坚持使用iOS和 Android。 因此,对于WinPhone开发者来说,我很抱歉,你必须坚持xamarin指南。

创建自定义字体 helper

创建一个新的Xamarin.Forms 解决方案,并将它的命名为 CustomFont。 让我们进入Android项目并创建一个名为 FontManager的新 helper 类。 为了让这个对象可以从另一个类访问,让我们把它作为一个单独的类。 我们还需要一个 dictionary 对象来存储这些字体。

private IDictionary<string, Typeface> _typefaces = null;protected FontManager()
{
 _typefaces = new Dictionary<string, Typeface>();
}privatestatic FontManager _current = null;publicstatic FontManager Current
{
 get
 {
 return _current??99 (_current = new FontManager());
 }
}

然后,我们需要创建一个函数到 register 字体文件的字体 NAME。 这里函数将有两个参数: fontName 作为字体的NAME,以 fontPath 作为字体文件的位置。 我们将创建一个字典来存储 Typeface 对象和 fontName 作为键。 对于那些不知道的,Typeface的安卓类用来定义自定义字体。 这里函数应类似于下面的代码段:

private FontManager RegisterTypeFace(string fontName, string fontPath)
{
 Typeface newTypeface = null;
 try {
 newTypeface = Typeface.CreateFromAsset(
 Application.Context.Assets,
 fontPath);
 }
 catch (Exception ex)
 {
 Console.WriteLine("Typeface service:" + ex);
 newTypeface = Typeface.Default;
 }
 _typefaces.Add(fontName, newTypeface);
 returnthis;
}

为了简单起见,我们还可以创建一个仅使用 fontPath 作为参数的函数,并自动猜测字体 NAME。

public FontManager RegisterTypeFace(string fontPath)
{
 var fontName = System.IO.Path.GetFileNameWithoutExtension(fontPath);
 Console.WriteLine("fontName:" + fontName);
 return RegisterTypeFace(fontName, fontPath);
}

有了这些功能,我们就可以像我们需要的那样。 现在我们需要一个函数来获取这里字体,以便在控件中使用它。 因为我们只需要在 dictionary 对象上查找它,这一点非常简单。

public Typeface GetTypeface(string fontName)
{
 if (!_typefaces.ContainsKey(fontName))
 {
 RegisterTypeFace(
 fontName,
 string.Format("Fonts/{0}.ttf", fontName));
 }
 return _typefaces[fontName];
}

现在我们的FontManager 已经准备好使用了,我们需要使用 CustomRenderer 修改默认的Xamarin.Forms 控件。

创建自定义渲染器

对于本教程,我们将只创建 Xamarin.Forms 控件的三个自定义呈现器。 它们是 LabelEntryButton。 它们都有类似的实现,在 OnElementPropertyChangedOnElementChanged 事件中发生字体替换。 以下三个代码块是按 ButtonEntryLabel 呈现器的顺序实现的。

[assembly: ExportRenderer(typeof(Button), typeof(CustomButtonRenderer))]
namespace CustomFont.Droid.Renderers
{
 publicclass CustomButtonRenderer: ButtonRenderer
 {
 protected override void OnElementChanged(ElementChangedEventArgs<Button> e)
 {
 base.OnElementChanged(e);
 if (Element == null)
 return;
 if (Control == null)
 return;
 ChangeFont();
 }
 protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
 {
 base.OnElementPropertyChanged(sender, e);
 if (Element == null)
 return;
 if (Control == null)
 return;
 if (e.PropertyName == Button.FontFamilyProperty.PropertyName)
 {
 ChangeFont();
 }
 }
 privatevoid ChangeFont()
 {
 Control.TransformationMethod = (null);
 var typeface = string.IsNullOrEmpty(Element.FontFamily)?
 Typeface.Default :
 FontManager.Current.GetTypeface(Element.FontFamily);
 Control.Typeface = typeface;
 }
 }
}
[assembly: ExportRenderer(typeof(Entry), typeof(CustomEntryRenderer))]
namespace CustomFont.Droid.Renderers
{
 publicclass CustomEntryRenderer: EntryRenderer
 {
 protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
 {
 base.OnElementChanged(e);
 if (Element == null)
 return;
 if (Control == null)
 return;
 ChangeFont();
 }
 protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
 {
 base.OnElementPropertyChanged(sender, e);
 if (Element == null)
 return;
 if (Control == null)
 return;
 if (e.PropertyName == Entry.FontFamilyProperty.PropertyName)
 {
 ChangeFont();
 }
 }
 privatevoid ChangeFont()
 {
 Control.TransformationMethod = (null);
 var typeface = string.IsNullOrEmpty(Element.FontFamily)?
 Typeface.Default :
 FontManager.Current.GetTypeface(Element.FontFamily);
 Control.Typeface = typeface;
 }
 }
}
[assembly: ExportRenderer(typeof(Label), typeof(CustomLabelRenderer))]
namespace CustomFont.Droid.Renderers
{
 publicclass CustomLabelRenderer: LabelRenderer
 {
 protected override void OnElementChanged(ElementChangedEventArgs<Label> e)
 {
 base.OnElementChanged(e);
 if (Control == null)
 return;
 if (Element == null)
 return;
 ChangeFont();
 }
 protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
 {
 base.OnElementPropertyChanged(sender, e);
 if (Control == null)
 return;
 if (Element == null)
 return;
 if (e.PropertyName == Label.FontFamilyProperty.PropertyName)
 {
 ChangeFont();
 }
 }
 privatevoid ChangeFont()
 {
 var typeface = string.IsNullOrEmpty(Element.FontFamily)?
 Typeface.Default :
 FontManager.Current.GetTypeface(Element.FontFamily);
 Control.Typeface = typeface;
 }
 }
}

现在定制呈现器已经准备好了,现在应该使用它了。

查看 实际操作 情况

在开始使用我们的新定制字体 helper 之前,我们需要下载一些字体。 你可以从谷歌的谷歌字体服务服务获得任何你想要的东西。 对于本教程,我使用两种字体: oswald常规 and

在 droid/assets 文件夹中添加你的字体。 然后用下面的代码Fragment将这些字体在 MainActivity.cs 右上方的LoadApplication(new App()); 中:

FontManager.Current
. RegisterTypeFace("Fonts/Oswald/Oswald-Regular.ttf")
. RegisterTypeFace("Fonts/Pangolin/Pangolin-Regular.ttf");

注册字体后,我们可以在 Xamarin.Forms 控件中使用它。 我们可以通过使用字体的NAME 更改 FontFamily 属性来更改字体,而且在Android和iOS上不会添加 OnPlatform 选择器。 下面是我使用XAML创建的一个示例用户界面:

<?xmlversion="1.0"encoding="utf-8"?><ContentPagexmlns="http://xamarin.com/schemas/2014/forms"xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"xmlns:local="clr-namespace:CustomFont"x:Class="CustomFont.CustomFontPage"><StackLayoutVerticalOptions="CenterAndExpand"HorizontalOptions="Fill"Padding="10,10,10,10"><LabelText="Welcome to Xamarin Forms!"FontFamily="Pangolin-Regular"HorizontalOptions="Center"/><EntryText="Edit Me"FontFamily="Pangolin-Regular"HorizontalOptions="Fill"HorizontalTextAlignment="Start"/><ButtonText="Click Me"FontFamily="Oswald-Regular"HorizontalOptions="Center"/></StackLayout></ContentPage>

当你在Android设备或者 模拟器 上运行这个程序时,它应该像下面的。

Xamarin Forms Android Custom Font
Xamarin.Forms 自定义字体Android结果

在iOS上运行它时,它将显示与Android相同的字体。 因这里,如果下次希望更改控件的字体时,可以在以下情况下执行以下操作:。

摘要

我们再次知道,xamarin的API仍然不是每个问题的完美。 但是,使用定制呈现器,我们可以看到添加一个我们想要的特性是多么容易。 感谢你阅读这里文章。

你可以在上下载这个完整的解决方案。


for  form  表单  font  Helper  Xamarin  
相关文章