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

Posted 2023-03-13

【中文标题】在 Xamarin 表单中使用效果的 Android 工具栏中心

【英文标题】：Android Tool Bar Center using Effects in Xamarin forms

【发布时间】：2018-07-23 08:21:46

【问题描述】：

我试图在 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

【问题讨论】：

我尝试使用这些样式，但发现使用起来很复杂，并且无法响应我的更改

你应该在你的Android项目中找到这个文件toolbar.axml。只需在您的 XML 中使用 TextView 作为标题

你的意思是我必须添加 TextView 并从 MainActivity 访问它？像这样

此解决方案可能有效，但我不想创建新主题，效果将允许我在运行时进行更多控制

hum.. 你如何检查 var g 是否为 TextView，如果为真则转换它，然后尝试访问 gravity 字段

【参考方案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);
        
    

【讨论】：

感谢您的回答，请检查我的问题上的编辑#2

如果左侧或右侧有图标，则标题实际上不在中心。如果工具栏中有子项，您能否建议一种正确分隔它们的方法？

从头开始，我做了更多测试。如果标题很长，它会出于某种原因向右移动，但如果标题很小，它会正确居中。

我授予这个答案不是因为它是最好的，而是为了获得手动奖励积分的徽章。如果有人有同样的问题，我建议他们使用自定义导航布局，这将允许您在工具栏中创建自己的布局。在这里查看更多信息：doumer.me/a-look-at-new-xamarin-forms-features

【参考方案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>