如何在Android（Xamarin Forms）上更改按钮的文本对齐方式？

Question

• 我正在使用Xamarin Forms
• iOS上：按钮显示的文本对齐方式很好

align_text_iOS

• 但是在Android上：按钮的文本对齐方式总是显示为“居中”

align_text_Android

我无法找到在Android上更改按钮文本对齐方式的属性。

在Android上，我希望按钮的文本对齐方式为“开始”，或者将Android的按钮与iOS的按钮相同。

这是我的代码：

 <Button 
    HeightRequest="15"
    Text="{Binding Phone2}"
    BackgroundColor="Aqua"
    TextColor="{x:Static color:BasePalette.DarkestColor}"
    HorizontalOptions="Start"
    VerticalOptions="Center" />

请支持我！

谢谢！

- Leks G

Answer 1

您可以通过设置按钮的内边距来调整文本位置（按钮使用margin，文本使用padding）。

            <Button Text="Log In"
                    Margin="0,15,0,30"
                    FontFamily="ButtonFont"
                    Padding="0,0,0,5"
                    FontSize="20"
                    BackgroundColor="#2c2c2c"
                    TextColor="#ffffff"
                    BorderRadius="20"
                    BorderWidth="2"
                    BorderColor="Aqua"
                    Grid.Column="1"/>

- inno

---

谢谢，这是最简单的解决方案！ - Innova

Answer 2

您要寻找的是类似于此XLab控件中的内容。

 public class ExtendedButton : Button
{
    /// <summary>
    /// Bindable property for button content vertical alignment.
    /// </summary>
    public static readonly BindableProperty VerticalContentAlignmentProperty =
        BindableProperty.Create<ExtendedButton, TextAlignment>(
            p => p.VerticalContentAlignment, TextAlignment.Center);

    /// <summary>
    /// Bindable property for button content horizontal alignment.
    /// </summary>
    public static readonly BindableProperty HorizontalContentAlignmentProperty =
        BindableProperty.Create<ExtendedButton, TextAlignment>(
            p => p.HorizontalContentAlignment, TextAlignment.Center);

    /// <summary>
    /// Gets or sets the content vertical alignment.
    /// </summary>
    public TextAlignment VerticalContentAlignment
    {
        get { return this.GetValue<TextAlignment>(VerticalContentAlignmentProperty); }
        set { this.SetValue(VerticalContentAlignmentProperty, value); }
    }

    /// <summary>
    /// Gets or sets the content horizontal alignment.
    /// </summary>
    public TextAlignment HorizontalContentAlignment
    {
        get { return this.GetValue<TextAlignment>(HorizontalContentAlignmentProperty); }
        set { this.SetValue(HorizontalContentAlignmentProperty, value); }
    }
}

Android 渲染器:

public class ExtendedButtonRenderer : ButtonRenderer
{
    /// <summary>
    /// Called when [element changed].
    /// </summary>
    /// <param name="e">The e.</param>
    protected override void OnElementChanged(ElementChangedEventArgs<Button> e)
    {
        base.OnElementChanged(e);
        UpdateAlignment();
        UpdateFont();
    }

    /// <summary>
    /// Handles the <see cref="E:ElementPropertyChanged" /> event.
    /// </summary>
    /// <param name="sender">The sender.</param>
    /// <param name="e">The <see cref="PropertyChangedEventArgs"/> instance containing the event data.</param>
    protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
    {
        if (e.PropertyName == ExtendedButton.VerticalContentAlignmentProperty.PropertyName ||
            e.PropertyName == ExtendedButton.HorizontalContentAlignmentProperty.PropertyName)
        {
            UpdateAlignment();
        }
        else if (e.PropertyName == Button.FontProperty.PropertyName)
        {
            UpdateFont();
        }

        base.OnElementPropertyChanged(sender, e);
    }

    /// <summary>
    /// Updates the font
    /// </summary>
    private void UpdateFont()
    {
        Control.Typeface = Element.Font.ToExtendedTypeface(Context);
    }

    /// <summary>
    /// Sets the alignment.
    /// </summary>
    private void UpdateAlignment()
    {
        var element = this.Element as ExtendedButton;

        if (element == null || this.Control == null)
        {
            return;
        }

        this.Control.Gravity = element.VerticalContentAlignment.ToDroidVerticalGravity() |
            element.HorizontalContentAlignment.ToDroidHorizontalGravity();
    }
}

iOS渲染器：

 public class ExtendedButtonRenderer : ButtonRenderer
{
    /// <summary>
    /// Called when [element changed].
    /// </summary>
    /// <param name="e">The e.</param>
    protected override void OnElementChanged(ElementChangedEventArgs<Button> e)
    {
        base.OnElementChanged(e);

        var element = this.Element;

        if (element == null || this.Control == null)
        {
            return;
        }

        this.Control.VerticalAlignment = this.Element.VerticalContentAlignment.ToContentVerticalAlignment();
        this.Control.HorizontalAlignment = this.Element.HorizontalContentAlignment.ToContentHorizontalAlignment();
    }

    /// <summary>
    /// Handles the <see cref="E:ElementPropertyChanged" /> event.
    /// </summary>
    /// <param name="sender">The sender.</param>
    /// <param name="e">The <see cref="PropertyChangedEventArgs"/> instance containing the event data.</param>
    protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
    {
        switch (e.PropertyName)
        {
            case "VerticalContentAlignment":
                this.Control.VerticalAlignment = this.Element.VerticalContentAlignment.ToContentVerticalAlignment();
                break;
            case "HorizontalContentAlignment":
                this.Control.HorizontalAlignment = this.Element.HorizontalContentAlignment.ToContentHorizontalAlignment();
                break;
            default:
                base.OnElementPropertyChanged(sender, e);
                break;
        }
    }

    /// <summary>
    /// Gets the element.
    /// </summary>
    /// <value>The element.</value>
    public new ExtendedButton Element
    {
        get
        {
            return base.Element as ExtendedButton;
        }
    }
}

请勿忘记在两个渲染器上添加ExportRenderer属性：[assembly: ExportRenderer(typeof(ExtendedButton), typeof(ExtendedButtonRenderer))]。祝你好运，如果有问题请随时回复。

- FreakyAli

Answer 3

我曾经遇到过同样的问题，我发现最好的方法是将按钮改为标签，对齐标签并使用<Label.GestureRecognizers/>来使用Tapped=""而不是从按钮中使用Clicked=""。

- user20279729

Answer 4

我建议使用Syncfusion按钮（SfButton）。它拥有一切。虽然可能不是免费的，但您可以进行更多的研究。

- Momodu Deen Swarray

Answer 5

你需要为按钮创建一个自定义渲染器，然后在控件的自定义中调用:

button.Gravity = GravityFlags.Left;

你会看到你的文本被左对齐。

- SergioAMG