[Xamarin] iOS에서 TabbedPage 확장하기

원문출처: https://blog.verslu.is/xamarin/xamarin-forms-xamarin/spicing-up-your-xamarin-formsios-tabbar/

Xamarin.Forms의 TabbedPage를 사용하면 각 플렛폼에서 탭을 표현할 수 있습니다. TabbedPage는 iOS의 TabBar를 통해 구현 되는데 아래의 그림과 같이 나타납니다.

[Xamarin.Forms의 TabbedPgae]

Selected Image 적용하기

TabbedPage의 각 탭에는 Title과 Icon이 나타나며 사용자가 탭을 선택하면 각 탭의 아이콘과 텍스트는 자동으로 파랑 색상으로 변경되어 나타나게 됩니다. 달리 말하면 Xamarin.Forms TabbedPgae는 선택된 탭의 색상이나 효과에 대한 옵션을 제공하지 않고 항상 위와 같은 형태로 나타나게 됩니다.

실제 TabBar를 활용한 iOS 네이티브 앱들을 보면 SelectedImage를 통해 탭이 선택되었을 때와 선택되지  않았을 때 다른 이미지를 사용합니다.

Xamarin.Forms에서 이를 구현하려면 CustomRenderer를 통해 SelectedImage를 설정해야 합니다.

using System;
using iOSTabBarSample.iOS;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;
using UIKit;

[assembly: ExportRenderer (typeof (TabbedPage), typeof (TabBarRenderer))]

namespace iOSTabBarSample.iOS
{
    public class TabBarRenderer : TabbedRenderer
    {
        private bool _initialized;
        public override void ViewWillAppear (bool animated)
        {
            //View가 화면에 나타나기 전 TabBar의 속성을 원하는데로 수정한다

            //1. 불필요하게 Initialize되는 것을 방지한다.
            if (_initialized)
                return;
            var tabs = Element as TabbedPage;
            if (TabBar == null || TabBar.Items == null || tabs == null)
                return;
            _initialized = true;


            //2. TabBar 속성 업데이트
            for (int i = 0; i < TabBar.Items.Length; i++) 
                UpdateItem (TabBar.Items [i], tabs.Children [i].Icon, tabs.Children [i].StyleId);

            base.ViewWillAppear (animated);
        }


        
        private void UpdateItem (UITabBarItem item, string icon, string badgeValue)
        {
            //TabBar에 포함된 각 탭의 속성을 수정한다.
            if (item == null)
                return;

            try 
            {
                //1. Xamarin.Forms에서는 이미지 확장자 없이도 이미지를 표현할 수 있다.
                //   따라서 확장자 존재 유무를 먼저 체크하고 _selected 접미사를 추가한다.
                if (icon.EndsWith (".png"))
                    icon = icon.Replace (".png", "_selected.png");
                else
                    icon += "_selected";

                //2. Selected Image의 경로를 SelectedImage 속성에 지정해준다.
                //   SelectedImage는 iOS에서 제공하는 Property이며 탭이 선택되었을 때 표현될 이미지를 말한다.
                item.SelectedImage = UIImage.FromBundle (icon);
                item.SelectedImage.AccessibilityIdentifier = icon; 
            } 
            catch (Exception ex) 
            {
                Console.WriteLine ("Selected Icon을 설정할 수 없습니다.\r\n" + ex);
            }
        }
    }
}

참고로 위 코드에서 AccessibilityIdentifier는 UI컨트롤의 고유 식별자 값을 표현하는 속성입니다.

위를 실행하면 아래 그림과 지정한 SelectedImage가 나타나게 됩니다.

선택된 상태의 아이콘 색상 변경

탭이 선택되었을 때 파란색이 아닌 다른 색상으로 표현할 수 있습니다. 색상을 변경하기 위해서는 AppDelegate에서 TintColor 속성을 설정하면 됩니다. 참고로 TintColor는 대부분의 iOS 컨트롤에서 지원합니다.

[Register ("AppDelegate")]
public partial class AppDelegate : global::Xamarin.Forms.Platform.iOS.FormsApplicationDelegate
{
    public override bool FinishedLaunching (UIApplication app, NSDictionary options)
    {
        global::Xamarin.Forms.Forms.Init ();

        //TabBar의 Tint 색상 설정
        UITabBar.Appearance.TintColor = Color.Red.ToUIColor ();

        LoadApplication (new App ());
        return base.FinishedLaunching (app, options);
    }
}

아래 그림과 같이 성공적으로 색상이 변경된 것을 확인할 수 있습니다.