菜鸟的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

巴特西

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

最新文章

热门文章