読者です 読者をやめる 読者になる 読者になる

Xamarin Forms でナビゲーションバーの左側にアイテムを配置する方法メモ

最近、Xamarin Forms で iOS アプリを開発している。 Xamarin Forms は XAML で記述できるので、WPF に慣れている身としては、 Storyboard よりも UI を作成しやすくて良いね。 Grid や StackLayout といったレイアウトが超便利だ。

一方で、「こんなこともできないの?」と思うことも度々ある。 例えば、ナビゲーションバーの左側にアイテムを配置する方法すら提供されていない、とかね。 今回は iOS プロジェクトでカスタムレンダラーを書いて実現できたけど。 こんなやつ。

using System.Collections.Generic;
using System.Linq;
using UIKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;

[assembly: ExportRenderer(typeof(ContentPage), typeof(XamarinFormsSample.iOS.ContentPageRenderer))]

namespace XamarinFormsSample.iOS
{
    public class ContentPageRenderer : PageRenderer
    {
        public override void ViewWillAppear(bool animated)
        {
            base.ViewWillAppear(animated);

            var toolbarItems = ((ContentPage)Element).ToolbarItems.OrderBy(w => w.Priority);
            var navigationItem = NavigationController.TopViewController.NavigationItem;
            var rightItems = new List<UIBarButtonItem>();
            var leftItems =  new List<UIBarButtonItem>();

            foreach (var item in toolbarItems)
            {
                // Priority がマイナスだったらナビゲーションバーの左側に配置する
                if (item.Priority < 0)
                {
                    leftItems.Add(item.ToUIBarButtonItem());
                }
                else
                {
                    rightItems.Add(item.ToUIBarButtonItem());
                }
            }

            navigationItem.SetRightBarButtonItems(rightItems.ToArray(), animated);
            navigationItem.SetLeftBarButtonItems(leftItems.ToArray(), animated);
        }
    }
}

シンプルな UI のアプリなので Xamarin Forms ですんなり実装できると思っていたけど、 結構つまづいている。UIKit 使って実装した方が早かったかも。 今のところ iOS だけが対象だし。