菜鳥的Xamarin.Forms前行之路——實現按鈕的字體圖標(可擴展)

在實際的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