private static void SetText(IconButton iconButton, UIButton targetButton) { var renderedIcon = iconButton.Icon; // if no IconFontName is provided on the IconButton, default to FontAwesome var iconFontName = string.IsNullOrEmpty(iconButton.IconFontName) ? "fontawesome" : iconButton.IconFontName; var iconSize = iconButton.IconSize == default(float) ? 17f : iconButton.IconSize; var faFont = UIFont.FromName(iconFontName, iconSize); // set the icon to either be on the left or right of the button's text string combinedText = iconButton.Orientation == ImageOrientation.ImageToLeft ? string.Format("{0} {1}", renderedIcon, iconButton.Text) : string.Format("{0} {1}", iconButton.Text, renderedIcon); // string attributes for the icon var iconAttributes = new UIStringAttributes { ForegroundColor = iconButton.IconColor.ToUIColor(), BackgroundColor = targetButton.BackgroundColor, Font = faFont, TextAttachment = new NSTextAttachment() }; // string attributes for the button's text. // TODO: Calculate an appropriate BaselineOffset for the main button text in order to center it vertically relative to the icon var btnAttributes = new UIStringAttributes { BackgroundColor = iconButton.BackgroundColor.ToUIColor(), ForegroundColor = iconButton.TextColor.ToUIColor(), Font = GetButtonFont(iconButton,targetButton) }; // Give the overall string the attributes of the button's text var prettyString = new NSMutableAttributedString(combinedText,btnAttributes); // Set the font for only the icon (1 char) prettyString.SetAttributes(iconAttributes.Dictionary, iconButton.Orientation == ImageOrientation.ImageToLeft ? new NSRange(0, 1) : new NSRange(prettyString.Length - 1, 1)); // set the final formatted string as the button's text targetButton.SetAttributedTitle(prettyString, UIControlState.Normal); // center the button's contents targetButton.HorizontalAlignment = UIControlContentHorizontalAlignment.Center; targetButton.TitleLabel.TextAlignment = UITextAlignment.Center; }
/// <summary> /// Handles the Element Changed event messages /// </summary> /// <param name="e">The e.</param> protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.Button> e) { base.OnElementChanged(e); if (e.NewElement != null && this.Control != null) { if (_helper == null) _helper = new TextViewRenderHelper(Context); if (_iconSpan == null) { _nativeBtn = (Android.Widget.Button)this.Control; _iconButton = (IconButton)e.NewElement; _iconFont = _helper.TrySetFont("fontawesome-webfont.ttf"); _textFont = _iconButton.Font.ToTypeface(); _iconButton.IconSize = _iconButton.IconSize == 0 ? (float)_iconButton.FontSize : _iconButton.IconSize; var computedString = BuildRawTextString(); _iconSpan = BuildSpannableString(computedString); if (_iconButton.TextAlignement == Xamarin.Forms.TextAlignment.Center) { _nativeBtn.Gravity = Android.Views.GravityFlags.Center; } else if (_iconButton.TextAlignement == Xamarin.Forms.TextAlignment.End) { _nativeBtn.Gravity = Android.Views.GravityFlags.Right; } else if (_iconButton.TextAlignement == Xamarin.Forms.TextAlignment.Start) { _nativeBtn.Gravity = Android.Views.GravityFlags.Left; } _nativeBtn.TransformationMethod = null; _nativeBtn.SetPadding(0, 0, 0, 0); _nativeBtn.AfterTextChanged += nativeBtn_AfterTextChanged; } } }
/// <summary> /// Handles the Element Changed event messages /// </summary> /// <param name="e">The e.</param> protected override void OnElementChanged(ElementChangedEventArgs <Xamarin.Forms.Button> e) { base.OnElementChanged(e); if (e.NewElement != null && this.Control != null) { if (_helper == null) { _helper = new TextViewRenderHelper(Context); } if (_iconSpan == null) { _nativeBtn = (Android.Widget.Button) this.Control; _iconButton = (IconButton)e.NewElement; _iconFont = _helper.TrySetFont("fontawesome-webfont.ttf"); _textFont = _iconButton.Font.ToTypeface(); _iconButton.IconSize = _iconButton.IconSize == 0 ? (float)_iconButton.FontSize : _iconButton.IconSize; var computedString = BuildRawTextString(); _iconSpan = BuildSpannableString(computedString); if (_iconButton.TextAlignement == Xamarin.Forms.TextAlignment.Center) { _nativeBtn.Gravity = Android.Views.GravityFlags.Center; } else if (_iconButton.TextAlignement == Xamarin.Forms.TextAlignment.End) { _nativeBtn.Gravity = Android.Views.GravityFlags.Right; } else if (_iconButton.TextAlignement == Xamarin.Forms.TextAlignment.Start) { _nativeBtn.Gravity = Android.Views.GravityFlags.Left; } _nativeBtn.TransformationMethod = null; _nativeBtn.SetPadding(0, 0, 0, 0); _nativeBtn.AfterTextChanged += nativeBtn_AfterTextChanged; } } }
private static void SetText(IconButton iconButton, UIButton targetButton) { var renderedIcon = iconButton.Icon; // if no IconFontName is provided on the IconButton, default to FontAwesome var iconFontName = string.IsNullOrEmpty(iconButton.IconFontName) ? "fontawesome" : iconButton.IconFontName; var iconSize = iconButton.IconSize == default(float) ? 17f : iconButton.IconSize; var faFont = UIFont.FromName(iconFontName, iconSize); string combinedText = null; string separator = " "; if (iconButton.ShowIconSeparator) { separator = " | "; } switch (iconButton.Orientation) { case ImageOrientation.ImageToLeft: if (string.IsNullOrEmpty(iconButton.Text)) { combinedText = renderedIcon; } else { combinedText = renderedIcon + separator + iconButton.Text; } break; case ImageOrientation.ImageToRight: if (string.IsNullOrEmpty(iconButton.Text)) { combinedText = renderedIcon; } else { combinedText = iconButton.Text + separator + renderedIcon; } break; case ImageOrientation.ImageOnTop: if (string.IsNullOrEmpty(iconButton.Text)) { combinedText = renderedIcon; } else { combinedText = renderedIcon + separator + iconButton.Text; } break; case ImageOrientation.ImageOnBottom: if (string.IsNullOrEmpty(iconButton.Text)) { combinedText = renderedIcon; } else { combinedText = renderedIcon + separator + iconButton.Text; } break; } // string attributes for the icon var iconAttributes = new UIStringAttributes { ForegroundColor = iconButton.IconColor.ToUIColorOrDefault(targetButton.TitleColor(targetButton.State)), BackgroundColor = targetButton.BackgroundColor, Font = faFont, TextAttachment = new NSTextAttachment() }; // string attributes for the button's text. // TODO: Calculate an appropriate BaselineOffset for the main button text in order to center it vertically relative to the icon var btnAttributes = new UIStringAttributes { BackgroundColor = iconButton.BackgroundColor.ToUIColor(), ForegroundColor = iconButton.TextColor.ToUIColorOrDefault(targetButton.TitleColor(targetButton.State)), Font = GetButtonFont(iconButton, targetButton), }; if (!string.IsNullOrEmpty(iconButton.Text)) { btnAttributes.BaselineOffset = 3; } // Give the overall string the attributes of the button's text var prettyString = new NSMutableAttributedString(combinedText, btnAttributes); // Set the font for only the icon (1 char) prettyString.SetAttributes(iconAttributes.Dictionary, iconButton.Orientation == ImageOrientation.ImageToLeft ? new NSRange(0, 1) : new NSRange(prettyString.Length - 1, 1)); // set the final formatted string as the button's text targetButton.SetAttributedTitle(prettyString, UIControlState.Normal); if (iconButton.TextAlignement == TextAlignment.Center) { // center the button's contents targetButton.HorizontalAlignment = UIControlContentHorizontalAlignment.Center; targetButton.TitleLabel.TextAlignment = UITextAlignment.Center; } else if (iconButton.TextAlignement == TextAlignment.End) { targetButton.HorizontalAlignment = UIControlContentHorizontalAlignment.Right; targetButton.TitleLabel.TextAlignment = UITextAlignment.Right; } else if (iconButton.TextAlignement == TextAlignment.Start) { targetButton.HorizontalAlignment = UIControlContentHorizontalAlignment.Left; targetButton.TitleLabel.TextAlignment = UITextAlignment.Left; } }
private static void SetText(IconButton iconButton, UIButton targetButton) { var renderedIcon = iconButton.Icon; // if no IconFontName is provided on the IconButton, default to FontAwesome var iconFontName = string.IsNullOrEmpty(iconButton.IconFontName) ? "fontawesome" : iconButton.IconFontName; var iconSize = iconButton.IconSize == default(float) ? 17f : iconButton.IconSize; var faFont = UIFont.FromName(iconFontName, iconSize); string combinedText = null; string separator = " "; if (iconButton.ShowIconSeparator) separator = " | "; switch (iconButton.Orientation) { case ImageOrientation.ImageToLeft: if (string.IsNullOrEmpty(iconButton.Text)) combinedText = renderedIcon; else { combinedText = renderedIcon + separator + iconButton.Text; } break; case ImageOrientation.ImageToRight: if (string.IsNullOrEmpty(iconButton.Text)) combinedText = renderedIcon; else combinedText = iconButton.Text + separator + renderedIcon; break; case ImageOrientation.ImageOnTop: if (string.IsNullOrEmpty(iconButton.Text)) combinedText = renderedIcon; else combinedText = renderedIcon + separator + iconButton.Text; break; case ImageOrientation.ImageOnBottom: if (string.IsNullOrEmpty(iconButton.Text)) combinedText = renderedIcon; else combinedText = renderedIcon + separator + iconButton.Text; break; } // string attributes for the icon var iconAttributes = new UIStringAttributes { ForegroundColor = iconButton.IconColor.ToUIColor(), BackgroundColor = targetButton.BackgroundColor, Font = faFont, TextAttachment = new NSTextAttachment() }; // string attributes for the button's text. // TODO: Calculate an appropriate BaselineOffset for the main button text in order to center it vertically relative to the icon var btnAttributes = new UIStringAttributes { BackgroundColor = iconButton.BackgroundColor.ToUIColor(), ForegroundColor = iconButton.TextColor.ToUIColor(), Font = GetButtonFont(iconButton, targetButton), }; if (!string.IsNullOrEmpty(iconButton.Text)) btnAttributes.BaselineOffset = 3; // Give the overall string the attributes of the button's text var prettyString = new NSMutableAttributedString(combinedText, btnAttributes); // Set the font for only the icon (1 char) prettyString.SetAttributes(iconAttributes.Dictionary, iconButton.Orientation == ImageOrientation.ImageToLeft ? new NSRange(0, 1) : new NSRange(prettyString.Length - 1, 1)); // set the final formatted string as the button's text targetButton.SetAttributedTitle(prettyString, UIControlState.Normal); if (iconButton.TextAlignement == TextAlignment.Center) { // center the button's contents targetButton.HorizontalAlignment = UIControlContentHorizontalAlignment.Center; targetButton.TitleLabel.TextAlignment = UITextAlignment.Center; } else if (iconButton.TextAlignement == TextAlignment.End) { targetButton.HorizontalAlignment = UIControlContentHorizontalAlignment.Right; targetButton.TitleLabel.TextAlignment = UITextAlignment.Right; } else if (iconButton.TextAlignement == TextAlignment.Start) { targetButton.HorizontalAlignment = UIControlContentHorizontalAlignment.Left; targetButton.TitleLabel.TextAlignment = UITextAlignment.Left; } }
/// <summary> /// Gets the font for the button (applied to all button text EXCEPT the icon) /// </summary> /// <param name="iconButton"></param> /// <param name="targetButton"></param> /// <returns></returns> private static UIFont GetButtonFont(IconButton iconButton, UIButton targetButton) { UIFont btnTextFont = iconButton.Font.ToUIFont(); if (iconButton.Font != Font.Default && btnTextFont != null) return btnTextFont; else if (iconButton.Font == Font.Default) return UIFont.SystemFontOfSize(17f); return btnTextFont; }
public IconButtonPage() { this.Title = "Icon Button (Font anwsome)"; IconButton btn1 = new IconButton() { Icon = "\uf1d8", Text = "Text and icon", TextColor = Color.White, IconColor = Color.White, BackgroundColor = Color.Gray }; IconButton btn2 = new IconButton() { Icon = "\uf1d8", Text = "Different color and size", IconColor = Color.Red, TextColor = Color.White, IconSize = 40, BackgroundColor = Color.Gray, FontSize = 20 }; IconButton btn3 = null; Device.OnPlatform(null, () => { //Orientation boottom and top only supported on Android btn3 = new IconButton() { Icon = "\uf1d8", Text = "Orientation icon on top", TextColor = Color.White, IconColor = Color.White, BackgroundColor = Color.Gray, FontSize = 20, Orientation = Enums.ImageOrientation.ImageOnTop }; }, null); IconButton btn4 = new IconButton() { Icon = "\uf1d8", Text = "Orientation icon on the right", TextColor = Color.White, IconColor = Color.White, BackgroundColor = Color.Gray, FontSize = 20, Orientation = Enums.ImageOrientation.ImageToRight }; IconButton btn5 = null; Device.OnPlatform(null, () => { //Orientation boottom and top only supported on Android btn5 = new IconButton() { Icon = "\uf1d8", Text = "Orientation icon on bottom", TextColor = Color.White, IconColor = Color.White, BackgroundColor = Color.Gray, FontSize = 20, Orientation = Enums.ImageOrientation.ImageOnBottom, }; }, null); IconButton btn6 = new IconButton() { Icon = "\uf1d8", Text = "TextAlignment Center", TextColor = Color.White, IconColor = Color.White, FontSize = 20, BackgroundColor = Color.Gray, TextAlignement = TextAlignment.Center }; IconButton btn7 = new IconButton() { Icon = "\uf1d8", Text = "TextAlignment End", TextColor = Color.White, IconColor = Color.White, FontSize = 20, BackgroundColor = Color.Gray, TextAlignement = TextAlignment.End }; IconButton btn8 = new IconButton() { Icon = "\uf1d8", Text = " TextAlignment Start", TextColor = Color.White, IconColor = Color.White, FontSize = 20, BackgroundColor = Color.Gray, TextAlignement = TextAlignment.Start }; IconButton btn9 = new IconButton() { Icon = "\uf1d8", Text = "With icon separator", ShowIconSeparator = true, TextColor = Color.Red, IconColor = Color.White, IconSize = 20, BackgroundColor = Color.Gray, FontSize = 20 }; StackLayout content = null; Device.OnPlatform(() => { content = new StackLayout() { HorizontalOptions = LayoutOptions.FillAndExpand, VerticalOptions = LayoutOptions.FillAndExpand, Children ={ btn1, btn2, btn4, btn6, btn7, btn8, btn9, } }; }, () => { content = new StackLayout() { HorizontalOptions = LayoutOptions.FillAndExpand, VerticalOptions = LayoutOptions.FillAndExpand, Children ={ btn1, btn2, btn3, btn4, btn5, btn6, btn7, btn8, btn9, } }; }, null); this.Content = content; }