iOS 11 导航栏/uibarbutton 项渲染问题

iOS 11 navigation bar / uibarbutton items rendering issues

我正在尝试在左侧添加多个 UIBarButtonItem 项,在右侧添加一个。这在 iOS10 之前工作得很好,但 iOS11 似乎已经坏了。

这都是用 Xamarin 写的,但是 class/method 名称等,几乎都映射了,所以你想怎么回答就怎么回答。

当使用最简单的方法添加两个按钮时,直接在按钮上设置 image/action,我只得到两个按钮之一,而且它很大,居中,我的标题丢失了:

var leftMenuBarBackBtn = new UIBarButtonItem(UIImage.FromBundle("arrowBackButton"), UIBarButtonItemStyle.Plain, leftBackButtonTap);
var leftMenuBarItem = new UIBarButtonItem(UIImage.FromBundle("menu"), UIBarButtonItemStyle.Plain, leftMenuButtonTap);
UIBarButtonItem[] navItems = { 
    leftMenuBarBackBtn,
    leftMenuBarItem
};

var rightMenuBarItem = new UIBarButtonItem(UIImage.FromBundle("bell").ImageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal), UIBarButtonItemStyle.Plain, rightMenuButtonTap);

NavigationItem.LeftItemsSupplementBackButton = false;
NavigationItem.LeftBarButtonItems = navItems;
NavigationItem.RightBarButtonItem = rightMenuBarItem;


之前我们正在创建 UIImage 个项目并将它们添加为自定义视图(请忽略可怕的做法,这是继承的):

var leftBackBtn = new UIButton(UIButtonType.Custom);
leftBackBtn.SetImage(UIImage.FromBundle("arrowBackButton").ImageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal), UIControlState.Normal);
leftBackBtn.Frame = new CGRect(0, 0, 27, 20);
leftBackBtn.ContentMode = UIViewContentMode.ScaleAspectFit;
leftBackBtn.TouchUpInside += leftBackButtonTap;
UIBarButtonItem leftMenuBarBackBtn = new UIBarButtonItem(leftBackBtn);

var leftMenuBtn = new UIButton(UIButtonType.Custom);
leftMenuBtn.SetImage(UIImage.FromBundle("menu").ImageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal), UIControlState.Normal);
leftMenuBtn.Frame = new CGRect(0, 0, 27, 20);
leftMenuBtn.ContentMode = UIViewContentMode.ScaleAspectFit;
leftMenuBtn.TouchUpInside += leftMenuButtonTap;
UIBarButtonItem leftMenuBarItem = new UIBarButtonItem(leftMenuBtn);
UIBarButtonItem[] navItems = { leftMenuBarBackBtn, leftMenuBarItem };

var rightMenuBtn = new UIButton(UIButtonType.Custom);
rightMenuBtn.SetImage(UIImage.FromBundle("bell").ImageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal), UIControlState.Normal);
rightMenuBtn.Frame = new CGRect(0, 0, 19, 22);
rightMenuBtn.ContentMode = UIViewContentMode.ScaleAspectFit;
rightMenuBtn.TouchUpInside += rightMenuButtonTap;
UIBarButtonItem righttMenuBarItem = new UIBarButtonItem(rightMenuBtn);
UIBarButtonItem[] navItems2 = { righttMenuBarItem };

this.NavigationItem.LeftBarButtonItems = navItems;
this.NavigationItem.RightBarButtonItems = navItems2;

我得到一个奇怪的、伸出来的 'back' 按钮,以及一个非常小的汉堡包菜单:


最后,虽然我不同意,但我们的客户坚持要自定义后退按钮。当我采用我认为是正确的方法时,使用本机后退按钮,它有点起作用,我的标题视图又回来了。这将作为 stop-gap 工作,但它并不是我们真正想要的用户体验:

var leftMenuBarItem = new UIBarButtonItem(UIImage.FromBundle("menu"), UIBarButtonItemStyle.Plain, leftMenuButtonTap);
var rightMenuBarItem = new UIBarButtonItem(UIImage.FromBundle("bell").ImageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal), UIBarButtonItemStyle.Plain, rightMenuButtonTap);

NavigationItem.LeftItemsSupplementBackButton = true;

NavigationItem.LeftBarButtonItem = leftMenuBarItem;
NavigationItem.RightBarButtonItem = rightMenuBarItem;

谢谢!

参考

UIBarButtonItem 使用自动布局而不是处理框架。

这就是按钮变长的原因。

修改:

widthConstraint = leftBackBtn.WidthAnchor.ConstraintEqualTo(27);
heightConstraint = leftBackBtn.HeightAnchor.ConstraintEqualTo(20);
widthConstraint.Active = true;
heightConstraint.Active = true;