如何修改tabBar的高度

Posted 2023-04-05

参考技术A 在TabBarViewController里面设置

@implementation SuerTabBarViewController

- (void)viewWillLayoutSubviews

CGRect tabFrame = self.tabBar.frame; self.TabBar is IBOutlet of your TabBar

tabFrame.size.height = 80;//高度80可以修改

tabFrame.origin.y = self.view.frame.size.height - 80;

self.tabBar.frame = tabFrame;

Xamarin.Forms.Shell：如何获取底部 TabBar 高度？

【中文标题】Xamarin.Forms.Shell：如何获取底部 TabBar 高度？

【英文标题】：Xamarin.Forms.Shell: how to get the bottom TabBar height?

【发布时间】：2021-03-01 16:20:07

【问题描述】：

我使用默认底部TabBar 开发Xamarin.Forms.Shell 应用程序，我需要知道TabBar 高度 来调整一些项目。

我找到了在两个平台there 上获取StatusBar 高度 的方法，但我没有找到TabBar 的解决方案。

有可能吗？我只发现有关更改 Stack 上 TabBar 高度的请求...

【问题讨论】：

现在可以用了吗？

【参考方案1】：

我们可以使用自定义渲染器

来获得高度

在 AppShell 中

public partial class AppShell : Xamarin.Forms.Shell

   public static double TabHeight  get; set; 

  //...

在 iOS 项目中

选项 1：

using App33;
using App33.iOS;
using Foundation;
using UIKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;

[assembly: ExportRenderer(typeof(AppShell), typeof(ShellCustomRenderer))]
namespace App33.iOS

    public class ShellCustomRenderer : ShellRenderer
    
        protected override IShellTabBarAppearanceTracker CreateTabBarAppearanceTracker()
        
            return new TabBarAppearance();
        

    

    public class TabBarAppearance : IShellTabBarAppearanceTracker
    
        public void Dispose()
        

        

        public void ResetAppearance(UITabBarController controller)
        
            


        

        public void SetAppearance(UITabBarController controller, ShellAppearance appearance)
        
            base.ViewWillAppear(animated);

            UITabBar myTabBar = this.TabBarController.TabBar;

            myTabBar.TintColor = UIColor.Red;
            myTabBar.BarTintColor = UIColor.LightGray;
            //... you can set style like above in iOS

            AppShell.TabHeight  = myTabBar.Bounds.Height;

        

        public void UpdateLayout(UITabBarController controller)
        
           
        
    

选项 2：

其实iOS上UITabbar的高度是一个固定值。在 iPhone 8 和之前是 49 和 iPhone X 和之后（全屏）将有一个额外的 safeArea bottom height 。所以如果你只是想得到它（不需要设置高度），你可以像下面这样使用 DependencyService 直接得到它

AppShell.TabHeight = 49 + UIApplication.SharedApplication.Delegate.GetWindow().SafeAreaInsets.Bottom;

在安卓中

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

            base.OnCreate(savedInstanceState);
    //        var hei=SupportActionBar.Height;
            Xamarin.Essentials.Platform.Init(this, savedInstanceState);
            global::Xamarin.Forms.Forms.Init(this, savedInstanceState);
            LoadApplication(new App());


            int resourceId =Resources.GetIdentifier("design_bottom_navigation_height", "dimen", this.PackageName);
            int height = 0;
            if (resourceId > 0)
            
                height = Resources.GetDimensionPixelSize(resourceId);
                AppShell.TabHeight = height;
            

         


        
        public override void OnRequestPermissionsResult(int requestCode, string[] permissions, [GeneratedEnum] Android.Content.PM.Permission[] grantResults)
        
            Xamarin.Essentials.Platform.OnRequestPermissionsResult(requestCode, permissions, grantResults);

            base.OnRequestPermissionsResult(requestCode, permissions, grantResults);
        
    

【讨论】：

嗨@Lucas。它似乎适用于 iOS，但我失去了在 Shell.xaml 中为 TabBar 的文本颜色指定的样式。在 Android 上，直到我至少更改一次选项卡后高度才会恢复。因为我需要主页上的这些信息，所以我不能使用这个解决方案。另外，我也失去了默认样式。

得到高度后可以重新设置样式。

【参考方案2】：

据我所知，在 Xamarin.Forms 中（还没有？）可以检索 TabBar Height，因此您可能需要根据 Xamarin.Forms强>平台。然后，利用DependencyService，您将能够从您的 Xamarin.Forms 共享代码中获取该信息。那么，让我们来看看如何做到这一点：

iOS

对于iOS，已经发布了类似this 的答案来解释如何做到这一点。

安卓

对于 Android，您可以按如下方式检索 TabBar 高度

为依赖创建

接口

注意：这个接口也应该用在iOS部分;)

namespace Tabbarheight

    public interface IDisplayHeights
    
        float GetTabBarHeight();
    

在

Android

中创建一个实现该接口并返回所需值的类

（感谢@LucasZhang-MSFT 提供标识符字符串！）

using Android.App;
using Tabbarheight.Droid;
using Xamarin.Forms;

[assembly: Dependency(typeof(AndroidDisplayHeights))]
namespace Tabbarheight.Droid

    class AndroidDisplayHeights : IDisplayHeights
    
        public static Activity Activity  get; set; 

        public float GetTabBarHeight()
        
            int resourceId = Activity.Resources.GetIdentifier("design_bottom_navigation_height", "dimen", Activity.PackageName);
            int height = 0;
            if (resourceId > 0)
            
                height = (int)(Activity.Resources.GetDimensionPixelSize(resourceId) / Xamarin.Essentials.DeviceDisplay.MainDisplayInfo.Density);
            

            return height;

        
    

Activity 从 MainActivity.cs 设置如下

protected override void OnCreate(Bundle savedInstanceState)

    TabLayoutResource = Resource.Layout.Tabbar;
    ToolbarResource = Resource.Layout.Toolbar;

    base.OnCreate(savedInstanceState);

    Xamarin.Essentials.Platform.Init(this, savedInstanceState);
    global::Xamarin.Forms.Forms.Init(this, savedInstanceState);

    AndroidDisplayHeights.Activity = this;

    LoadApplication(new App());

最后，您可以按如下方式使用它

public AboutPage()

    InitializeComponent();

    SizeChanged += (s, a) =>
    
        label.HeightRequest = DependencyService.Get<IDisplayHeights>().GetTabBarHeight();
        label.BackgroundColor = Color.Red;

    ;

---

在上面的解决方案中，我定义了一个Label（标签），只是为了尝试通过设置Label 的高度来证明获得的TabBar 的Height 值的准确性。

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Tabbarheight.Views.AboutPage"
             xmlns:vm="clr-namespace:Tabbarheight.ViewModels"
             Title="Binding Title">

    <StackLayout>
        <Label x:Name="label">
            <Label.Text>
                <x:String>
                    Hola mundo
                </x:String>
            </Label.Text>
        </Label>
    </StackLayout>

</ContentPage>

标签在我这边是这样的：