[Xamarin.Fomrs] NavigationBar 그림자 주기

이 포스트의 내용은 https://xamgirl.com/navigation-bar-with-shadow-in-xamarin-forms/를 토대로 번역한 자료입니다. 한글로 표현하기 어색하거나 모호한 문장은 임의로 조정하거나 삭제하였으므로 필요한 경우 원문을 참고하시기 바랍니다. 또한 언제든지 원저자의 요청에 의해 게시물이 내려지거나 수정될 수 있음을 알려드립니다. 마지막으로 이 글은 개인적인 학습목적으로 번역한 자료이며, 따라서 오역이나 잘못된 해석이 포함되어 있을 수 있으며 이로인한 어떠한 일체의 보장을 하지 않습니다.

Material Design은 시각적 표현, 모션, 상호작용 디자인에 있어서 포괄적인 가이드를 제공합니다. 이 가이드는 안드로이드 뿐만 아니라 iOS에서도 유용한 시각적 디자인 방향을 제시해줍니다. 안드로이드는 Android 5.0(Lollipop, API 21)부터 Material Theme를 통해서 이 가이드를 지원하고 있습니다.

Material Design의 예를 들면 그림자 사용에 대한 내용을 꼽을 수 있습니다. 공식문서에 따르면 각 컴퍼넌트에 따라 적절한 그림자를 사용하도록 안내하고 있습니다. 예를 들면 ActionBar (Xamarin.Forms의 NavigationBar)에는 4px의 그림자를 부여하여 경계를 표현해야 합니다.

하지만 Xamarin.Forms에서는 Android, iOS 모두 그림자를 표현하지 않기 때문에 추가적인 설정이 필요합니다. 이 포스트에서는 어떻게 NavigationBar에 그림자를 부여하는지 안내합니다.

iOS

iOS에서는 NavigationPage의 Custom Renderer 구현하여 그림자를 손쉽게 부여할 수 있습니다.

using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;
using UIKit;
using ShadowNavBarSample.iOS;
using CoreGraphics;

[assembly: ExportRenderer(typeof(NavigationPage), typeof(ShadowNavigationBarRenderer))]
namespace ShadowNavBarSample.iOS
{
    public class ShadowNavigationBarRenderer : NavigationRenderer
    {
        protected override void OnElementChanged(VisualElementChangedEventArgs e)
        {
            base.OnElementChanged(e);

            if (this.Element == null) 
                        return;

                    NavigationBar.Layer.ShadowColor = UIColor.Gray.CGColor;
            NavigationBar.Layer.ShadowOffset = new CGSize(0, 0);
            NavigationBar.Layer.ShadowOpacity = 1;
        }
    }
}

Android

Android 5.0 Lollipop(API21)부터는 그림자를 위해 elevation 속성을 사용합니다. /Resources/value/styles.xml 파일을 열고 아래와 같이 elevation 속성을 4dp만큼 부여합시다.

<?xml version="1.0" encoding="UTF-8"?>
<resources>
    <style name="MyTheme" parent="MyTheme.Base">
    </style>
    
    <style name="MyTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
            <item name="windowNoTitle">true</item>
            <item name="colorPrimary">#2196F3</item>
            <item name="colorPrimaryDark">#1976D2</item>
            <item name="colorAccent">#FF4081</item>   
        
            <!-- Android에서 그림자 설정하기 (Android 5.0 Lollipop, API 21 이상인 경우 그림자가 나타납니다) -->
            <item name="android:elevation">4dp</item>
    </style>
</resources>

확인사항

Xamarin.Forms 앱이 Android 5.0 (Lollipop, API 21) 미만 단말기에서 실행될 때 그림자를 출력하는 방법에 대한 자료를 찾을 수 없었습니다. Xamarin.Forms가 아닌 Android Studio를 통해 앱을 개발하시는 경우 아래의 자료를 확인하시면 그림자를 적용하실 수 있습니다.

• Lollipop 이전버전의 Toolbar 그림자 지원: https://github.com/vipulasri/Toolbar-Elevation-Pre-Lollipop
  
• ToolBar 그림자 지원: https://stackoverflow.com/questions/31115531/add-elevation-shadow-on-toolbar-for-pre-lollipop-devices
• windowContentOverlay를 사용할 경우 높이설정: https://stackoverflow.com/questions/23977277/separator-below-actionbar

References

• Android Material Design: https://material.io/guidelines/material-design/elevation-shadows.html#elevation-shadows-shadows
• Action Bar 설정방법: https://xipdev.wordpress.com/2014/10/10/how-to-create-a-material-style-action-bar-on-kitkat-and-older-android-versions/