var tgr = new TapGestureRecognizer { NumberOfTapsRequired = 1 };

tgr.Tapped += (sender, args) =>

{

    // 처리할 내용

};

 

this.grid.GestureRecognizers.Add(tgr);

 

 

- NumberOfTapsRequired : tab수로 2로 설정한 경우 두번 tab 한 경우 이벤트가 발생된다.

 

위와 같은 형식으로 Image 도 아래처럼 Click 이벤트를 처리할수 있다.

 

var tgr = new TapGestureRecognizer { NumberOfTapsRequired = 1 };

tgr.Tapped += (sender, args) =>

{

    // 처리할 내용

};

 

this.image.GestureRecognizers.Add(tgr);

 

 

 

xaml 로 처리할때

 

<Label>

    <Label.GestureRecognizers>

        <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"/>

    </Label.GestureRecognizers>

</Label>

앱을 개발하다보면 기기 화면 크기에 따른 상대 비율로 컨트롤의 크기를 지정해야할 때가 있습니다.

당연히 화면 크기에 대한 처리가 기본적으로 제공될꺼라고 생각했는데 아니더군요;;

그래서 화면 크기를 알수 있는 방법을 소개합니다.

2가지 방법이 있습니다.

 

1. Xamarin.Essentials 사용하는 방법

NuGet 에서 Xamarin.Essentials 를 설치하고

using Xamarin.Essentials;

을 추가 후 아래와 같이 사용하면 됩니다.

// Get Metrics
var metrics = DeviceDisplay.ScreenMetrics;

// Orientation (Landscape, Portrait, Square, Unknown)
var orientation = metrics.Orientation;

// Rotation (0, 90, 180, 270)
var rotation = metrics.Rotation;

// Width (in pixels)
var width = metrics.Width;

// Height (in pixels)
var height = metrics.Height;

// Screen density
var density = mainDisplayInfo.Density;

 

2. 기기별로 값을 가져오도록 직접 구현

.Net Standard 프로젝트의 App.xaml.cs 파일에 아래 처럼 속성을 추가합니다.

using System;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;

[assembly: XamlCompilation (XamlCompilationOptions.Compile)]
namespace Test
{
    public partial class App : Application
    {
        public static int ScreenHeight { get; set; }
        public static int ScreenWidth { get; set; }

        public App ()
        {
            InitializeComponent();
            MainPage = new MainPage();
        }

        protected override void OnStart ()
        {
             // Handle when your app starts
        }

        protected override void OnSleep ()
        {
            // Handle when your app sleeps
        }

        protected override void OnResume ()
        {
            // Handle when your app resumes
        }
    }
}

 

Android 프로젝트의 MainActivity.cs 에 아래처럼 화면 크기를 가져오는 코딩을 추가합니다.

using Android.App;
using Android.Content.PM;
using Android.Gms.Ads;
using Android.OS;
using Microsoft.AppCenter.Push;

namespace Test.Droid
{
    [Activity(Label = "Test", Icon = "@drawable/test", Theme = "@style/MainTheme", MainLauncher = false, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation)]
    public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity
    {
        protected override void OnCreate(Bundle bundle)
        {
            TabLayoutResource = Resource.Layout.Tabbar;
            ToolbarResource = Resource.Layout.Toolbar;

            base.OnCreate(bundle);
            global::Xamarin.Forms.Forms.Init(this, bundle);

             App.ScreenHeight = (int)(Resources.DisplayMetrics.HeightPixels / Resources.DisplayMetrics.Density);
             App.ScreenWidth = (int)(Resources.DisplayMetrics.WidthPixels / Resources.DisplayMetrics.Density);

             LoadApplication(new App());
        }
    }
}

 

iOS 프로젝트의 AppDelegate.cs 에 아래처럼 화면 크기를 가져오는 코딩을 추가합니다.

using System;
using System.Collections.Generic;
using System.Linq;
using Foundation;
using UIKit;

namespace Test.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();

            App.screenWidth = (int)UIScreen.MainScreen.Bounds.Width;
            App.screenHeight = (int)UIScreen.MainScreen.Bounds.Height;

            LoadApplication(new App());

            return base.FinishedLaunching(app, options);
        }
    }
}

 

이제 프로젝트 어디에서든 App.ScreenWidth, App.ScreenHeight 으로 화면 크기값을 알수 있습니다.

앱의 수익을 위한 전면광고 다는 방법입니다.

먼저 AdMob 을 통해 광고 ID 를 Android, iOS 별로 만들었다는 가정하에 진행합니다.

참고 : http://kjcoder.tistory.com/276 및 구글링

 

전면 광고를 넣기위해 DependencyService 를 사용해야합니다.

개념은 아래 링크를 통해서..^^

https://docs.microsoft.com/ko-kr/xamarin/xamarin-forms/app-fundamentals/dependency-service/introduction

간단하게 말하면 각 플랫폼별 기능을 .Net Standard 프로젝트에서 하나의 코드로 호출할 수 있도록 해주는 것입니다.

 

.Net Standard 프로젝트에 IInterstitialAd 인터페이스를 만듭니다.

namespace Test
{
    public interface IInterstitialAd
    {
        void Show(string adUnitId);
    }
}


Android 프로젝트에 아래의 NuGet 패키지를 설치합니다.

InterstitialAdByAndroid 클래스를 아래와 같이 추가합니다.

using Android.Content;
using Android.Gms.Ads;
using Android.Media;
using Test.Droid;
using System.Threading.Tasks;

[assembly: Xamarin.Forms.Dependency(typeof(InterstitialAdByAndroid))]
namespace Test.Droid
{
    class InterstitialAdByAndroid : AdListener, IInterstitialAd
    {
        InterstitialAd interstitialAd;

        public void Show(string adUnitId)
        {
            var context = Android.App.Application.Context;
            InterstitialAd ad = new InterstitialAd(context);
            ad.AdUnitId = adUnitId;

            this.interstitialAd = ad;
            OnAdLoaded();
            ad.AdListener = this;

            var requestBuilder = new AdRequest.Builder();
            ad.LoadAd(requestBuilder.Build());
        }

        public override void OnAdClosed()
        {

        }

        public override void OnAdLoaded()
        {
            base.OnAdLoaded();

            if (this.interstitialAd.IsLoaded)
            {
                this.interstitialAd.Show();
            }
        }
    }
}


iOS 프로젝트에 아래와 같은 NuGet 패키지를 설치합니다.

InterstitialAdByiOS 클래스를 아래와 같이 추가합니다.

using Google.MobileAds;
using Test.iOS;
using System.Threading.Tasks;
using UIKit;
using Xamarin.Forms;

[assembly: Xamarin.Forms.Dependency(typeof(InterstitialAdByiOS))]
namespace Test.iOS
{
    public class InterstitialAdByiOS : IInterstitialAd
    {
        Interstitial interstitialAd;

        public async void Show(string adUnitId)
        {
            this.interstitialAd = new Interstitial(adUnitId);
            this.interstitialAd.LoadRequest(Request.GetDefaultRequest());

            while (!this.interstitialAd.IsReady)
            {
                await Task.Delay(100);
            }

            Device.BeginInvokeOnMainThread(() => this.interstitialAd.PresentFromRootViewController(UIApplication.SharedApplication.Windows[0].RootViewController));
        }
    }
}


이제 마지막으로 실제 .Net Standard 프로젝트에서 호출하는 방법입니다.

// 전면 광고
string adUnitId = "ca-app-pub-4681470946279796/3339648514";
if (Device.RuntimePlatform == Device.iOS)
{
    adUnitId = "ca-app-pub-4681470946279796/8947198411";
}

DependencyService.Get<IInterstitialAd>().Show(adUnitId);

 

위와 같이 하면 전면광고가 노출되게 됩니다.

Editer 컨트롤에는 불행하게요 PlaceHolder 관련 속성이 없습니다.

(PlaceHolderColor 는 최근에 추가된 속성입니다.)

이를 만드는 방법입니다.

먼저 기본은 지난 글을 기본으로 해서 진행합니다.

 

.Net Statndrd 프로젝트에 CustomEditor 를 추가합니다.

using System;
using System.Collections.Generic;
using System.Text;
using Xamarin.Forms;

namespace Test.Controls
{
    public class CustomEditor : Editor
    {
        public static BindableProperty PlaceholderProperty
         = BindableProperty.Create(nameof(Placeholder), typeof(string), typeof(CustomEditor));

        public static BindableProperty PlaceholderColorProperty
           = BindableProperty.Create(nameof(PlaceholderColor), typeof(Color), typeof(CustomEditor), Color.Gray);

        public static BindableProperty IsExpandableProperty
        = BindableProperty.Create(nameof(IsExpandable), typeof(bool), typeof(CustomEditor), false);

        public string Placeholder
        {
            get { return (string)GetValue(PlaceholderProperty); }
            set { SetValue(PlaceholderProperty, value); }
        }

        public Color PlaceholderColor
        {
            get { return (Color)GetValue(PlaceholderColorProperty); }
            set { SetValue(PlaceholderColorProperty, value); }
        }

        public bool IsExpandable
        {
            get { return (bool)GetValue(IsExpandableProperty); }
            set { SetValue(IsExpandableProperty, value); }
        }

        public CustomEditor()
        {
            TextChanged += OnTextChanged;
        }

        private void OnTextChanged(object sender, TextChangedEventArgs e)
        {
            if (IsExpandable) InvalidateMeasure();
        }
    }
}

 

Android 프로젝트에 CustomEditorRenderer 를 추가합니다.

using Android.Content;
using Android.Graphics.Drawables;
using Test.Controls;
using Test.Droid;
using System.ComponentModel;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;

[assembly: ExportRenderer(typeof(CustomEditor), typeof(CustomEditorRenderer))]
namespace Test.Droid
{
    public class CustomEditorRenderer : EditorRenderer
    {
        public CustomEditorRenderer(Context context) : base(context)
        {
        }

        protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.Editor> e)
        {
            base.OnElementChanged(e);

            if (Control != null)
            {
                // 밑줄을 보이지 않도록 하기
                GradientDrawable gd = new GradientDrawable();
                gd.SetColor(global::Android.Graphics.Color.Transparent);
                this.Control.SetBackgroundDrawable(gd);
            }

            if (e.NewElement != null)
            {
                var customControl = (CustomEditor)Element;

                if (!string.IsNullOrEmpty(customControl.Placeholder))
                {
                    Control.Hint = customControl.Placeholder;
                    Control.SetHintTextColor(customControl.PlaceholderColor.ToAndroid());
                }
            }
        }

        protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
        {
            base.OnElementPropertyChanged(sender, e);

            var customControl = (CustomEditor)Element;

            if (CustomEditor.PlaceholderProperty.PropertyName == e.PropertyName)
            {
                Control.Hint = customControl.Placeholder;
            }
            else if (CustomEditor.PlaceholderColorProperty.PropertyName == e.PropertyName)
            {
                Control.SetHintTextColor(customControl.PlaceholderColor.ToAndroid());
            }
        }
    }
}

 

iOS 프로젝트에 CustomEditorRenderer 를 추가합니다.

using Foundation;
using Test.Controls;
using Test.iOS;
using System.ComponentModel;
using UIKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;

[assembly: ExportRenderer(typeof(CustomEditor), typeof(CustomEditorRenderer))]
namespace Test.iOS
{
    public class CustomEditorRenderer : EditorRenderer
    {
        UILabel placeholderLabel;

        protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.Editor> e)
        {
            base.OnElementChanged(e);

            if (Control != null)
            {
                if (placeholderLabel == null)
                {
                    CreatePlaceholder();
                }
            }

            if (e.NewElement != null)
            {
                var customControl = (CustomEditor)e.NewElement;

                if (customControl.IsExpandable)
                    Control.ScrollEnabled = false;
                else
                    Control.ScrollEnabled = true;
            }
        }

        protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
        {
            base.OnElementPropertyChanged(sender, e);

            var customControl = (CustomEditor)Element;

            if (CustomEditor.IsExpandableProperty.PropertyName == e.PropertyName)
            {
                if (customControl.IsExpandable)
                    Control.ScrollEnabled = false;
                else
                    Control.ScrollEnabled = true;
            }
        }

        public void CreatePlaceholder()
        {
            var element = Element as CustomEditor;

            if (element == null) return;

            placeholderLabel = new UILabel
            {
                Text = element.Placeholder,
                TextColor = element.PlaceholderColor.ToUIColor(),
                BackgroundColor = UIColor.Clear
            };

            var edgeInsets = Control.TextContainerInset;
            var lineFragmentPadding = Control.TextContainer.LineFragmentPadding;

            Control.AddSubview(placeholderLabel);

            var vConstraints = NSLayoutConstraint.FromVisualFormat(
                "V:|-" + edgeInsets.Top + "-[PlaceholderLabel]-" + edgeInsets.Bottom + "-|", 0, new NSDictionary(),
                NSDictionary.FromObjectsAndKeys(
                    new NSObject[] { placeholderLabel }, new NSObject[] { new NSString("PlaceholderLabel") })
            );

            var hConstraints = NSLayoutConstraint.FromVisualFormat(
                "H:|-" + lineFragmentPadding + "-[PlaceholderLabel]-" + lineFragmentPadding + "-|",
                0, new NSDictionary(),
                NSDictionary.FromObjectsAndKeys(
                    new NSObject[] { placeholderLabel }, new NSObject[] { new NSString("PlaceholderLabel") })
            );

            placeholderLabel.TranslatesAutoresizingMaskIntoConstraints = false;

            Control.AddConstraints(hConstraints);
            Control.AddConstraints(vConstraints);
        }
    }
}

 

xaml 코드

콘텐츠 페이지를 만들어 아래와 같이 코딩합니다.

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:controls="clr-namespace:Test.Controls"
             x:Class="Test.TestPage" BackgroundColor="#253570">
    <ContentPage.Content>
            <StackLayout>
                    <controls:CustomEditor x:Name="customEditor" Margin="7,0,7,0"
                                       BackgroundColor="#DEDFE4" FontSize="15"
                                       IsExpandable="true" Placeholder = "내용(30자이내)" PlaceholderColor="Blue"
                                       MaxLength="30" />
            </StackLayout>
    </ContentPage.Content>
</ContentPage>

 

결과

PlaceholderColor="SlateGray"

 

모바일에서 기본 폰트는 깔끔하지만

디자인을 위해 다른 폰트를 적용하고 싶을 때가 있습니다.

안드로이드, iOS  에 적용하는 방법을 소개합니다.

 

우선 Android 안드로이드나 iOS 프로젝트에 폰트 파일을 import 시켜야합니다.

(폰트 파일 예시 : Binggrae.ttf)

Android 프로젝트는 Assets 폴더에

iOS 프로젝트는 Resources 폴더에 폰트 파일을 추가합니다.

추가로, iOS 는 Info.plist 파일에 아래 처럼 내용을 추가해야합니다.

<key>UIAppFonts</key>
 <array>
  <string>Binggrae.ttf</string>
 </array>

 

이제 각 프로젝트(Android,iOS)에 파일을 하나씩 추가해야합니다.

ExtendedRendrerer 를 추가할껀데 이것의 의미는 쉽게 말하면 기본 컨트롤에 대해서

각 기기 별로 커스텀하게 적용할 부분이 필요할 때 사용되는 것이라 보면됩니다.

우리는 폰트를 변경할 것이므로 폰트만 바꾸는 코드를 넣을 것입니다.

Button 예시입니다.

Android

using Android.Content;
using Android.Graphics;
using Test.Droid;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;

[assembly: ExportRenderer(typeof(Button), typeof(ExtendedButtonRenderer))]
namespace Test.Droid
{
    public class ExtendedButtonRenderer : ButtonRenderer
    {
        public ExtendedButtonRenderer(Context context) : base(context)
        {
        }

        protected override void OnElementChanged(ElementChangedEventArgs<Button> e)
        {
            base.OnElementChanged(e);
            if (Control != null)
            {
                  Control.Typeface = Typeface.CreateFromAsset(base.Context.Assets, "Binggrae.ttf");
            }
        }
    }
}

iOS

using Test.iOS;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;

[assembly: ExportRenderer(typeof(Button), typeof(ExtendedButtonRenderer))]
namespace Test.iOS
{
    public class ExtendedButtonRenderer : ButtonRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Button> e)
        {
            base.OnElementChanged(e);

            if (e.NewElement != null)
            {
                Control.Font = UIKit.UIFont.FromName("Binggrae", (System.nfloat)e.NewElement.FontSize);
            }
        }
    }
}

위처럼 적용하면 앱내 모든 버튼의 Text 는 Binggrae 폰트가 적용되어 보여집니다.

Picker, Entry, Label.. 등의 컨트롤 모두가 ExtendedRendrerer 를 구성해야 폰트가 적용됨을 유의해야합니다.

 

추가로 Android 는 한가지 방법이 더 있습니다.

아래 처럼 각 컨트롤의 FontFamily 에 아래처럼 폰트 파일명과 폰트 이름을 넣으면 폰트가 적용됩니다.

FontFamily="Binggrae.ttf#Binggrae"

(iOS 는 안됨.^^;)

 

WebView 에서 JavaScript 실행은 간단히 아래와 같히 펑션을 호출하면 된다.

this.webView.Eval("TestFunction()");

 

하지만 리턴이 있는 JavaSecript funtion 실행결과는 저 형태로는 안된다.

따로 Renderer 를 이용해 구현하는 방법을 소개한다.

 

먼저 .Net Standard 프로젝트에 아래와 같이 WebViewer 를 만든다.

using System;
using System.Collections.Generic;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace Test
{
    public class WebViewer : WebView
    {
        public static BindableProperty EvaluateJavascriptProperty =
        BindableProperty.Create(nameof(EvaluateJavascript), typeof(Func<string, Task<string>>), typeof(WebViewer), null, BindingMode.OneWayToSource);

        public Func<string, Task<string>> EvaluateJavascript
        {
            get { return (Func<string, Task<string>>)GetValue(EvaluateJavascriptProperty); }
            set { SetValue(EvaluateJavascriptProperty, value); }
        }
    }
}

이제 위 항목을 상속받아서 각 기기별로 Renderer 를 생성하자.

 

Android

using System;
using System.Threading;
using System.Threading.Tasks;
using Android.Content;
using Android.Webkit;
using Test;
using Test.Droid;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;

[assembly: ExportRenderer(typeof(WebViewer), typeof(WebViewRender))]
namespace Test.Droid
{
    public class WebViewRender : WebViewRenderer
    {
        public WebViewRender(Context context) : base(context)
        { }

        protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.WebView> e)
        {
            base.OnElementChanged(e);

            if (e.NewElement is WebViewer webView)
            {
                webView.EvaluateJavascript = async (js) =>
                {
                    var reset = new ManualResetEvent(false);
                    var response = string.Empty;
                    Device.BeginInvokeOnMainThread(() =>
                    {
                        Control?.EvaluateJavascript(js, new JavascriptCallback((r) => { response = r; reset.Set(); }));
                    });
                    await Task.Run(() => { reset.WaitOne(); });
                    return response;
                };
            }
        }
    }

    internal class JavascriptCallback : Java.Lang.Object, IValueCallback
    {
        public JavascriptCallback(Action<string> callback)
        {
            _callback = callback;
        }

        private Action<string> _callback;
        public void OnReceiveValue(Java.Lang.Object value)
        {
            _callback?.Invoke(Convert.ToString(value));
        }
    }
}

 

iOS

using System.Threading.Tasks;
using Test;
using Test.iOS;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;

[assembly: ExportRenderer(typeof(WebViewer), typeof(WebViewRender))]
namespace Test.iOS
{
    public class WebViewRender : WebViewRenderer
    {
        protected override void OnElementChanged(VisualElementChangedEventArgs e)
        {
            base.OnElementChanged(e);

            if (e.NewElement is WebViewer webView)
            {
                webView.EvaluateJavascript = (js) =>
                {
                    return Task.FromResult(this.EvaluateJavascript(js));
                };
            }
        }
    }
}

 

UWP

using System;
using Test;
using Test.UWP;
using Xamarin.Forms;
using Xamarin.Forms.Platform.UWP;

[assembly: ExportRenderer(typeof(WebViewer), typeof(WebViewRender))]
namespace Test.UWP
{
    public class WebViewRender : WebViewRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<WebView> e)
        {
            base.OnElementChanged(e);
            if (e.NewElement is WebViewer webView)
            {
                webView.EvaluateJavascript = async (js) =>
                {
                    return await Control.InvokeScriptAsync("eval", new[] { js });
                };
            }
        }
    }
}

 

이제 화면에서 아래와 같이 컨트롤을 넣고

<test:WebViewer x:Name="webView" HorizontalOptions="FillAndExpand"  VerticalOptions="FillAndExpand"/>

아래와 같이 코딩하면 function 의 결과 값을 받아올수 있다.

var result = await this.webView.EvaluateJavascript("GetTest();");

 

심각도 코드 설명 프로젝트 파일 줄 비표시 오류(Suppression) 상태
오류  /Users/mac/Library/Caches/Xamarin/mtbs/builds/MiGong.iOS/c10cbd8fd317519d3dd23b704514d419/bin/iPhone/Release/MiGong.iOS.app: errSecInternalComponent MiGong.iOS   

위과 같은 오류가 발생

mac 이 잠자기 모드이거나 로그인 활성화가 풀린경우 발생된다.

mac 으로 들어가 로그인하면 위 오류는 사라진다.

visual studio 에서 apple accounts 로 로그인 하는데 아래처럼 에러가 발생되었다.

authentication failure. Reason : {"authType" : "hsa2" }

이중 인증 키까지 잘 패스가 되었는데 떠서 먼가했는데

아래 사이트에서 한번더 인증 절차를 또 거쳐야한다.;;

https://appleid.apple.com

위사이트에서 한번더 로그인 한다 이중 인증을 다시;;

그러면 사이트에서 아래처럼 나오고

 

다시 로그인하면 로그인이 성공한다.

 

이제 프로비저닝 프로파일을 다운받으러....ㅠㅜ

Image 클릭시 이벤트 주는 방법은 아래와 같다

this.Image.GestureRecognizers.Add(new TapGestureRecognizer(메서드명));

this.ActionImage.GestureRecognizers.Add(new TapGestureRecognizer(OnTab));

private void OnTab(View sender, object e)
{
    ...
}

 

 

Xamarin Forms 으로 모바일 개발을 하다보면

xaml 에 대한 화면을 미리 보고 싶을때가 있다. (아니 미리보는게 편하다.)

다행히 Xamarin.Forms Previewer 가 있어 사용해 봤는데 너무 느려서

사용을 안해왔다;; 코딩을 바꾸는데도 버벅인다;;

차라리 디바이스에 계속 배포해서 확인하는게 더 빠르다.

그런데 가끔 유투브 동영상을 보면 고릴라 플레이어로 디자인을 미리 보기 하면서 코딩하는걸 봐왔다..

그런데 고릴라 플레이어 셋팅하는게 그리 간단하지 않아 보여

계속 미루다가 드디어 오늘 셋팅을 완료했다.

그래서 과정을 정리해본다.

 

일단 아래 블로그는 mac 환경에서 환경 셋팅을 한 내용이다.

http://picory.com/entry/Forns-XAML-Previewer-Gorilla-Player

난 Window10 으로 시도했다.

 

1. 고릴라 플레이어 사이트에서 계정을 만든다.

아래링크로 들어가 REGISTER NOW 를 클릭한다.

https://grialkit.com/gorilla-player/

계정을 만든다. 암호는 대문자가 포함되어야한다. (특수문자는 없어도 됨)

 

계정을 만들었으면 계정 메일로 아래와 같이 메일이 오고 링크를 클릭하여 메일 인증을 한다.

메일 인증 완료!

 

2. 고릴라 플레이어(Gorilla Player)를 다운로드 한다.

아래 링크로 들어가서

https://grialkit.com/gorilla-download/

Windows 버전을 다운로드 하고 설치를 한다.

가끔사이트가 먹통이 될때가 있어 설치파일을 첨부한다.

설치 과정은 아래와 같다. 특별한 건 없다.

 

3. 고릴라 플레이어를 실행한다.

고릴라 플레이어 실행 과정이다.

아래 그림에서는 당연히 동의를....

설치할걸 체크해야하는데 기본적으로 알아서 잘 체크가 되어있다.

체크 추가 없이 다음.. (Install addin for Visual Studio, Install Player + Sample)

설치 진행중...

설치 완료!!

아래 처럼 고릴라 아이콘이 시계표시줄에 표시되어있으면 일단 정상적으로 설치 및 실행이 된것이다.

 

4. 시뮬레이터 셋팅

실행(Continue)을 하면 아래와 같은 화면이 나온다.

친절하게 설명이 잘되어있다.

아래 부분이 조금 헷깔리는데 구글 플레이에서 고릴라플레이어앱을 다운받거나 직접 소스를 열어서 설치를 할수 있다.

시뮬레이터에 설치할것이므로 소스를 열어서 직접 설치를해야한다.

아래 화면에서 빨간색 버튼을 클릭한다. 그러면  Player.sln 솔루션 이 열린다.

아래와 같이 솔루션이 열리면 구동하고자 하는 시뮬레이터를 선택한 후 Run 한다.

그럼 아래 처럼 시뮬레이터에 고릴라 플레이어앱이 설치가 된다.

설치된 앱을 구동해 보자.

앱을 구동하면 Connecting 을 기다리고 있다.

 

5. xaml 파일 보기

이제 xaml 파일을 열어 디자인이 보여지는지 확인해보자.

Visual Studio 를 열고 도구>Gorilla Player 에서 아래 그림과 같이 Disconnect From Gorilla  으로 되어있는지 확인한다.

만약 안되어있다면 Connect From Gorilla 를 실행해야된다.

이제 xaml 파일을 하나 선택하고 마우스 우측 버튼의 메뉴에서

Stick Gorilla to this XAML 를 클릭한다.

그럼 아래 처럼 시뮬레이터에서 먼가 연결이 진행된다.

엇 에러가 발생되었다.

xaml 에 에러가 있거나 하면 아래 처럼 에러가 표시된다.

마스터 디테일 페이지(MasterDetailPage) 인 경우는 아직 표현하지 못하는것 같다.

아래처럼 xaml 페이지가 정상적으로 시뮬레이터에 표시가 된다.

xaml 의 내용이 시뮬레이터에 보여지고 있다면 아래처럼 우측 상단에 고릴라 아이콘이 나타난다.

xaml 파일을 변경하면 실시간으로 시뮬레이터에 반영된다. (아래 동영상참고)

* 참고

도움말 : https://github.com/UXDivers/Gorilla-Player-Support

* 추가

혹 비쥬얼 스튜디오에 addin 이 제대로 되지 않았다면 직접 addin 쪽만 아래 링크나 첨부파일로 설치를 진행하면된다.

https://marketplace.visualstudio.com/items?itemName=UXDivers.GorillaPlayerVisualStudioddin

UXDivers.Artina.Player.VSAddin.vsix

 

 

+ Recent posts