Xamarin で iOS の UIToolBar にボタンを配置する

前回の投稿で iOS / Windows Phone 共通の BottomBar を作ったので今度はこの BottomBar にボタンを配置してみます

Windows Phone の場合は今まで通りなので特に難しくありません

[assembly: ExportRenderer(typeof(BottomBar), typeof(BottomBarRender))]

namespace XamarinSample.WinPhone.Views
{
    /// <summary>
    /// BottomBar のレンダリングクラス
    /// </summary>
    public class BottomBarRender : ViewRenderer<BottomBar, Canvas>
    {
        #region Privates

        /// <summary>
        /// 停止ボタン
        /// </summary>
        private ApplicationBarIconButton stopButton;

        /// <summary>
        /// 一時停止ボタン
        /// </summary>
        private ApplicationBarIconButton pauseButton;

        /// <summary>
        /// 開始ボタン
        /// </summary>
        private ApplicationBarIconButton startButton;

        #endregion //Privates

        /// <summary>
        /// Element 変更イベントハンドラ
        /// </summary>
        /// <param name="e">イベント引数</param>
        protected override void OnElementChanged(ElementChangedEventArgs<BottomBar> e)
        {
            base.OnElementChanged(e);

            this.Loaded += this.OnLoaded;
        }

        /// <summary>
        /// 読み込み完了イベントハンドラ
        /// </summary>
        /// <param name="sender">イベント発行者</param>
        /// <param name="e">イベント引数</param>
        private void OnLoaded(object sender, System.Windows.RoutedEventArgs e)
        {
            this.Loaded -= this.OnLoaded;

            // MainPage を引っ張り出す
            var currentPage = App.RootFrame.Content as PhoneApplicationPage;
            if (currentPage == null)
            {
                return;
            }

            currentPage.ApplicationBar = new ApplicationBar();

            this.stopButton = new ApplicationBarIconButton(new Uri(@"/Assets/Icons/transport.rew.png", UriKind.Relative))
            {
                Text = "停止",
            };
            this.pauseButton = new ApplicationBarIconButton(new Uri(@"/Assets/Icons/transport.pause.png", UriKind.Relative))
            {
                Text = "一時停止",
            };
            this.startButton = new ApplicationBarIconButton(new Uri(@"/Assets/Icons/transport.play.png", UriKind.Relative))
            {
                Text = "開始",
            };

            currentPage.ApplicationBar.Buttons.Add(stopButton);
            currentPage.ApplicationBar.Buttons.Add(pauseButton);
            currentPage.ApplicationBar.Buttons.Add(startButton);
        }
    }
}

BottomBarRenderer に ApplicationBar への ApplicationBarIconButton を追加する記述を加えるだけ！

f:id:matatabi_ux:20140927221435p:plain

この通り

問題は iOS の方です・・・ですが同じように iOS 側の BottomRenderer を下記のように記述することでいけました

[assembly: ExportRenderer(typeof(BottomBar), typeof(BottomBarRender))]

namespace XamarinSample.iOS.Views
{
    /// <summary>
    /// BottomBar のレンダリングクラス
    /// </summary>
    public class BottomBarRender : ViewRenderer<BottomBar, UIToolbar>
    {
        #region Privates

        /// <summary>
        /// 停止ボタン
        /// </summary>
        private UIBarButtonItem stopButton;

        /// <summary>
        /// 一時停止ボタン
        /// </summary>
        private UIBarButtonItem pauseButton;

        /// <summary>
        /// 開始ボタン
        /// </summary>
        private UIBarButtonItem startButton;

        #endregion //Privates

        /// <summary>
        /// Element 変更イベントハンドラ
        /// </summary>
        /// <param name="e">イベント引数</param>
        protected override void OnElementChanged(ElementChangedEventArgs<BottomBar> e)
        {
            base.OnElementChanged(e);

            var toolBar = new UIToolbar()
            {
                BarStyle = UIBarStyle.Default,
            };

            this.stopButton = new UIBarButtonItem(UIBarButtonSystemItem.Rewind)
            {
                AccessibilityLabel = "停止",
            };
            this.pauseButton = new UIBarButtonItem(UIBarButtonSystemItem.Pause)
            {
                AccessibilityLabel = "一時停止",
            };
            this.startButton = new UIBarButtonItem(UIBarButtonSystemItem.Play)
            {
                AccessibilityLabel = "開始",
            };

            var barItems = new List<UIBarButtonItem>()
            {
                new UIBarButtonItem(UIBarButtonSystemItem.FlexibleSpace),
                this.stopButton,
                new UIBarButtonItem(UIBarButtonSystemItem.FlexibleSpace),
                this.pauseButton,
                new UIBarButtonItem(UIBarButtonSystemItem.FlexibleSpace),
                this.startButton,
                new UIBarButtonItem(UIBarButtonSystemItem.FlexibleSpace),
            };

            toolBar.SetItems(barItems.ToArray(), true);
            
            // UIToolBar をネイティブコントロールとして設定
            this.SetNativeControl(toolBar);

            // 画面描画を要求
            this.SetNeedsDisplay();
        }
    }
}