LoginSignup
0
0

More than 5 years have passed since last update.

Xamarin.FormsのNavigationBarにカラーアイコンをつけて動的に変更も反映させたい

Last updated at Posted at 2018-02-23

いきさつ

Xamarin.Formsでナビゲーションバーにアイコンを置くと、Androidは問題ないんだけどiOSだと単色表示になる
アイコン画像そのままの色を出したかったので下記サイトを参考に実装してみたところ、これだと初期表示はうまく表示されるんだけど、表示後にアイコンを差し替えると単色表示に戻ってしまう
あれこれ調べてなんとか動いたのでメモ

最低限動くだけのコードしかないので色々処理が(不足|過剰|無駄)かも

作ったカスタムレンダラ(iOS)

using System;
using System.Collections.Generic;
using System.Linq;
using System.Windows.Input;
using UIKit;
using CoreGraphics;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;
using Sample.iOS.Renderer;

[assembly: ExportRenderer(typeof(ContentPage), typeof(SamplePageRenderer))]
namespace Sample.iOS.Renderer
{
    public class SamplePageRenderer : PageRenderer
    {
        List<ToolbarItem> _primaryItems;

        protected override void OnElementChanged(VisualElementChangedEventArgs e)
        {
            var page = e.NewElement as Page;
            if (page != null)
            {
                _primaryItems = page.ToolbarItems.ToList();
            }
            base.OnElementChanged(e);
        }

        public override void ViewWillAppear(bool animated)
        {
            base.ViewWillAppear(animated);

            if (this.NavigationController == null) return;

            var items = this.NavigationController.TopViewController.NavigationItem;

            foreach (var item in items.RightBarButtonItems)
            {
                if (item.Image == null) continue;

                foreach (var tool in _primaryItems)
                {
                    tool.PropertyChanged += this.ToolPropertyChanged;
                }

                item.Image = item.Image.ImageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal);
            }
        }

        public override void ViewDidDisappear(bool animated)
        {
            base.ViewDidDisappear(animated);

            foreach (var tool in _primaryItems)
            {
                tool.PropertyChanged -= this.ToolPropertyChanged;
            }
        }

        void ToolPropertyChanged(object sender, EventArgs args)
        {
            var navigationItem = this.NavigationController.TopViewController.NavigationItem;
            if (navigationItem != null)
            {
                var item = sender as ToolbarItem;
                if (navigationItem.RightBarButtonItems[item.Priority].Image != null)
                {
                    navigationItem.RightBarButtonItems[item.Priority].Image = navigationItem.RightBarButtonItems[item.Priority].Image.ImageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal);
                }
            }
        }

    }
}

参考にさせて頂いたサイト

Xamarin.Forms で iOS のナビゲーションバーに色付きアイコンを置きたい(Microsoft 系のあれこれ)
http://shunsukekawai.hatenablog.com/entry/2017/09/01/220523

iOSのToolbarItemのスペースを調整してレイアウトを整える方法 | Xamarin.Forms(ITブログ時々なんでもブログ)
http://itblogdsi.blog.fc2.com/blog-entry-277.html

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0