标签：编号 nts 相对 color type name exp array inf
在实际的APP中,带有图标的按钮用到地方还是蛮多的,字体图标往往能更快更生动的传达信息,并且相对于背景图片,字体图标也有着绝对的优势,所以实现按钮的字体图标是值得尝试的.
实现方法:各平台自定义渲染按钮
PCL
添加名为Fonts.cs的类,作用各平台的字体文件(ios-android-uwp,ios字体文件不要后缀并且大写,安卓全称)
public static class Fonts { public static string IconFont= Device.OnPlatform("IconFont", "iconfont.ttf", null); }
添加名为IconFonts.cs的类,定义所需要用到的字体,上述的字体文件可以去阿里妈妈字体库添加下载,然后打开.css文件,就可以看到字体编号"\eXXX",在这里加上u即可,
public static class IconFonts
{
public static readonly string yuyin = "\ue667";
public static readonly string biaoqing = "\ue611";
public static readonly string gengduo = "\ue602";
public static readonly string xiangce = "\ue64e";
public static readonly string paizhao = "\ue6e5";
public static readonly string weizhi = "\ue63e";
public static readonly string fanhui = "\ue607";
public static readonly string dianhua = "\ue6dd";
public static readonly string yuyin1 = "\ue605";
public static readonly string yuyin2 = "\ue69f";
public static readonly string jianpan = "\ue63f";
public static readonly string fasong = "\ue60a";
public static readonly string shanchu = "\ue627";
}
Android
1添加一个名为ButtonTypefaceRenderer.cs的类,自定义渲染按钮(如果要扩展,在这里可以直接渲染需要扩展的元素即可,例如渲染Label)
[assembly: ExportRenderer(typeof(Label), typeof(LabelTypefaceRenderer))]
[assembly: ExportRenderer(typeof(Xamarin.Forms.Button), typeof(ButtonTypefaceRenderer))]
namespace Sample.Droid
{
class FontUtils
{
public static void ApplyTypeface(TextView view, string fontFamily)
{
if (!string.IsNullOrEmpty(fontFamily))
{
Typeface typeFace = null;
try
{
typeFace = Typeface.CreateFromAsset(Xamarin.Forms.Forms.Context.ApplicationContext.Assets, fontFamily);
}
catch (Exception ex)
{
Debug.WriteLine($"Could not load font {fontFamily}: {ex}");
}
if (typeFace != null)
{
view.Typeface = typeFace;
}
}
}
}
//Label
public class LabelTypefaceRenderer : LabelRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<Label> e)
{
base.OnElementChanged(e);
FontUtils.ApplyTypeface(Control, Element.FontFamily);
}
}
public class ButtonTypefaceRenderer : ButtonRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.Button> e)
{
base.OnElementChanged(e);
FontUtils.ApplyTypeface(Control, Element.FontFamily);
}
protected override void OnElementPropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
{
base.OnElementPropertyChanged(sender, e);
FontUtils.ApplyTypeface(Control, Element.FontFamily);
}
}
}
2在Assets文件夹添加字体文件iconfont.ttf
Ios
1在资源文件夹添加字体文件iconfont.ttf
2在清单文件Info.plist,添加
<key>UIAppFonts</key> <array> <string>iconfont.ttf</string> </array>
用法
1引入Fonts.cs和FontIcons.cs的命名空间
2因为是渲染的所有按钮,所以不需要再在PCL上定义控件
<Button x:Name="PhotoAlbum" FontSize="36"
Text="{x:Static styling:IconFonts.xiangce}"
FontFamily="{x:Static styling:Fonts.IconFont}"/>
<Button x:Name="TakePhoto" FontSize="36"
Text="{x:Static styling:IconFonts.paizhao}"
FontFamily="{x:Static styling:Fonts.IconFont}"/>
<Button x:Name="Lacation" FontSize="36"
Text="{x:Static styling:IconFonts.weizhi}"
FontFamily="{x:Static styling:Fonts.IconFont}"/>
<Button x:Name="ReturnHide" FontSize="36"
Text="{x:Static styling:IconFonts.fanhui}"
FontFamily="{x:Static styling:Fonts.IconFont}"/>
项目地址: https://github.com/weiweu/TestProject/tree/dev/ButtonFont
菜鸟的Xamarin.Forms前行之路——实现按钮的字体图标(可扩展)
标签：编号 nts 相对 color type name exp array inf
原文地址：http://www.cnblogs.com/banluduxing/p/7452390.html
