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;
}
