在 Xamarin 表单中使用效果的 Android 工具栏中心

Question

我试图在 Xamarin 表单中将 Android 中的页面标题居中。 我可以访问工具栏并且能够设置字体系列。但我无法将文本对齐或重心设置为居中。

var context = (Android.App.Activity)Forms.Context; var toolbar = context.Resources.GetIdentifier("toolbar", "id", context.PackageName); var view = context.FindViewById(toolbar);

我尝试了以下方法：

前景重力

view.SetForegroundGravity(GravityFlags.Center);

文本对齐

view.TextAlignment = Android.Views.TextAlignment.Center;

访问工具栏的子级并设置方向和对齐方式。

if (view is ViewGroup)
{
    var g = view as ViewGroup;

    for (var i = 0; i < g.ChildCount; i++)
    {
        SetTypefaceToAllTextViews(g.GetChildAt(i), typeface);
        g.GetChildAt(i).TextAlignment = Android.Views.TextAlignment.Center;
        g.GetChildAt(i).TextDirection = TextDirection.Rtl;

    }
}

问题是，我无法直接了解标题的重要性。

---

编辑#1：

我在投射视图后添加了这段代码，我可以看到字体正在改变，但由于某种原因它不会居中或任何其他对齐方式

if (view is TextView)
{
    var tv = view as TextView;
    tv.Typeface = typeface;
    tv.TextAlignment = Android.Views.TextAlignment.Center;
    tv.Gravity = GravityFlags.CenterHorizontal;
}

---

编辑#2： 我能够根据下面的答案将以下内容添加到效果中，并且它以某种方式使元素居中但不完全位于中心。不知何故，它在中心的右侧，除非在工具栏的右侧和左侧有 2 个图标，那么，标题将真正居中。在 Android 8 上测试。另外，我在类似的解决方案中发现了这个问题。

https://github.com/CrossGeeks/CustomNavigationBarSample/issues/3

Answer 1

我不确定您的 Effect 是如何实现的，但以下自定义渲染器似乎可以工作（与居中文本相关的位在 ToolbarChildAdded 方法中）：

public class CustomNavigationPageRenderer : NavigationPageRenderer
{
    Android.Support.V7.Widget.Toolbar toolbar;

    public CustomNavigationPageRenderer(Context context) : base(context)
    {
    }

    protected override void OnElementChanged(ElementChangedEventArgs<NavigationPage> e)
    {
        base.OnElementChanged(e);

        if (e.OldElement != null)
        {
            this.toolbar.ChildViewAdded -= ToolbarChildAdded;
        }

        if (e.NewElement != null)
        {
            var toolbarId = Context.Resources.GetIdentifier("toolbar", "id", Context.PackageName);
            this.toolbar = this.FindViewById(toolbarId) as Android.Support.V7.Widget.Toolbar;
            this.toolbar.ChildViewAdded += ToolbarChildAdded;
        }
    }

    private void ToolbarChildAdded(object sender, ChildViewAddedEventArgs e)
    {
        if (e.Child is Android.Support.V7.Widget.AppCompatTextView tv)
        {
            // identify the title text view and center it
            tv.LayoutParameters = new Android.Support.V7.Widget.Toolbar.LayoutParams(LayoutParams.WrapContent, LayoutParams.WrapContent, (int)GravityFlags.CenterHorizontal);
        }
    }
}

Answer 2

在 Android 上，Title View 不居中，左侧有 16dp 的边距。任何将内容居中的尝试都必须考虑到这一点。

使用自定义渲染器更容易重置此值。

protected override void OnElementChanged(ElementChangedEventArgs<NavigationPage> e)
{
    base.OnElementChanged(e);

    if (e.NewElement != null)
    {
        var toolbarId = Context.Resources.GetIdentifier("toolbar", "id", Context.PackageName);
        var toolbar = this.FindViewById(toolbarId) as Android.Support.V7.Widget.Toolbar;
        if (toolbar != null) toolbar.SetContentInsetsAbsolute(0, 0);
    }
}

确保您的工具栏布局在您的主要活动中正确引用

public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity
{
    protected override void OnCreate(Bundle savedInstanceState)
    {
        TabLayoutResource = Resource.Layout.Tabbar;
        ToolbarResource = Resource.Layout.Toolbar;

        //etc
    }
}

完成此操作后，最简单的方法是使用绝对布局在标题视图中放置您希望的项目

<NavigationPage.TitleView>
    <AbsoluteLayout
        Padding="0"
        Margin="10,0,10,0">

        <Image
            AbsoluteLayout.LayoutBounds="0.5,0.5,130,31"
            AbsoluteLayout.LayoutFlags="PositionProportional"
            Source="logowhite.png">
        </Image>

        <ImageButton
            AbsoluteLayout.LayoutBounds="1,0.5,32,32"
            AbsoluteLayout.LayoutFlags="PositionProportional"
            Margin="0"
            WidthRequest="32"
            Source="settingsicon.png"
            Clicked="OnImageButtonClicked">
        </ImageButton>

    </AbsoluteLayout>
</NavigationPage.TitleView>