菜鳥的Xamarin.Forms前行之路——實現按鈕的字體圖標(可擴展)
阿新 • • 發佈:2017-08-30
方法 所有 blank render 背景圖片 list cer 元素 ren
在實際的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前行之路——實現按鈕的字體圖標(可擴展)