菜鸟的Xamarin.Forms前行之路——实现按钮的字体图标(可扩展)

Posted 2020-10-04 半路独行

在实际的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