728x90
반응형

어플 실행 시 splash screen 을 보여주고 싶어 방법을 찾아보니 아래 출처에 잘 소개가 되어있어 소개합니다.

출처 : https://forums.xamarin.com/discussion/19362/xamarin-forms-splashscreen-in-android

 

우선 splash 에 보여줄 이미지를 준비합니다.

아래 예시에서 splash 에 사용될 이미지 명은 'icon' 입니다.

우선 Activity 를 만들어 줍니다. ( SplashScreen )

아래 내용은 Theme = "@style/Theme.Splash" 여기에 정의된 테마화면을 보여주고 난다음

메인 화면인 MainActivity 를 호출하고 자기자신은 Finish() 하여 Splash 화면을 닫아버립니다.

SplashScreen.cs:

    [Activity(Label = "MyApp", MainLauncher = true, NoHistory = true, Theme = "@style/Theme.Splash",
    ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation)]
    public class SplashScreen : Activity
    {
        protected override void OnCreate(Bundle bundle)
        {
            base.OnCreate(bundle);
            var intent = new Intent(this, typeof(MainActivity));
            StartActivity(intent); Finish();
        }
    }

아래가 실제 메인 화면입니다.

MainActivity.cs:

[Activity(Label = "MyApp", Theme = "@android:style/Theme.Holo", ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation)]
    public class MainActivity : AndroidActivity
    {
        protected override void OnCreate(Bundle bundle)
        {
            base.OnCreate(bundle);       
           
            // Xamarin Forms
            Xamarin.Forms.Forms.Init(this, bundle);
            SetPage(App.GetMainPage());

            // Xamarin Android
            SetContentView(Resource.Layout.Main);
        }
    }

아래는 실제 화면에 보여질 이미지의 속성을 정의한다고 보면 될것 같습니다.

"@drawable/icon" 이 항목이 실제 화면에 보여질 이미지에 해당됩니다.

아래 두항목(gravity,layout_gravity) 은 가운데 이미지를 위치시키위한 내용입니다.

Resources.Drawable.SplashScreen.xml:

<?xml version="1.0" encoding="utf-8" ?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
        android:src="@drawable/icon" 
        android:gravity="center"
        android:layout_gravity="center"/>

아래는 화면 구조를 정의하는 내용입니다.

windowNoTitle 가 true 로 되어야 상단에 toolbar 가 사라지게됩니다.

Resources.Values.Styles.xml

<resources>
  <style name="Theme.Splash"    parent="android:Theme">
    <item name="android:windowBackground">
      @drawable/splashscreen
    </item>
    <item name="android:windowNoTitle">true</item>
    <item name="android:windowIsTranslucent">false</item>
    <item name="android:windowIsFloating">false</item>
    <item name="android:backgroundDimEnabled">true</item>
  </style>
</resources>

 

이렇게 하고 시뮬레이터로 동작 시키게되면 어플이 실행되기전에

스플래시이미지가 보인후 메인 화면으로 진입하게 됩니다.

 

아래는 제가 실제 적용한 내용입니다.

위 내용과는 조금 다른 부분이있습니다.

SplashActivity.cs

[Activity(Label = "SMSConvey", Theme = "@style/SplashTheme", MainLauncher = true, NoHistory = true, Icon = "@drawable/conveysmsicon", ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation)]
    public class SplashActivity : Activity
    {
        protected override void OnCreate(Bundle bundle)
        {
            base.OnCreate(bundle);

            Thread thread = new Thread(() =>
            {
                this.RunOnUiThread(() =>
                SimulateStartup());
            }
            );
            thread.Start();

        }

        // Launches the startup task
        protected override void OnResume()
        {
            base.OnResume();
        }

        // Prevent the back button from canceling the startup process
        public override void OnBackPressed() { }

        // Simulates background work that happens behind the splash screen
        private void SimulateStartup()
        {
            //await Task.Delay(1000); // Simulate a bit of startup work.
            Thread.Sleep(500);
            StartActivity(new Intent(Application.Context, typeof(MainActivity)));
            Finish();
        }
    }

Styles.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <style name="SplashTheme" parent ="@android:Theme">
    <item name="android:windowBackground">@drawable/splash_screen</item>
    <item name="android:windowNoTitle">true</item>
    <item name="android:windowActionBar">false</item>
    <item name="android:windowFullscreen">true</item>
    <item name="android:windowIsTranslucent">false</item>
    <item name="android:windowIsFloating">false</item>
    <item name="android:backgroundDimEnabled">true</item>
  </style>
</resources>

splash_screen.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  <item>
    <color android:color="#FFFFFF"/>
  </item>
  <item>
    <bitmap
        android:src="@drawable/smsconvey_splash"
        android:tileMode="disabled"
        android:gravity="center"/>
  </item>
</layer-list>

참고

https://developer.xamarin.com/guides/android/user_interface/creating_a_splash_screen/

http://www.c-sharpcorner.com/UploadFile/1e050f/creating-splash-screen-for-android-app-in-xamarin/

728x90
반응형
728x90
반응형

지난 포스팅에서는 AdMob 에서 광고 ID 까지 가져와 봤습니다. (http://kjcoder.tistory.com/276)

제가 획득한 광고 ID 는 ca-app-pub-4681470946279796/9940497268 입니다.

이제 프로젝트 하나를 만듭니다.

프로젝트는 다 아시겠지만 Android 에서 비어있는 앱을 선택하여 프로젝트를 생성합니다.

프로젝트가 구성되면

Nuget 에서 Goole Play Ads 를 설치해야합니다.

프로젝트 우클릭 메뉴에서 NuGet 패키지 관리.. 로 들어갑니다.

여기서 찾아보기 탭을 선택 후 Google Play Ads 를 검색해서 가장 처음에 있는 항목을 선택하고 설치를 진행합니다.

확인.

동의함.

설치가 완료되면 참조에 아래와 같이 라이브러리들이 쫙~ 추가 되어있습니다.

(Lite 버전도 있던데 이것만 깔아도 되는지는 테스트 해봐야 알것 같습니다. 용량이 확실히 적긴하더군요.)

이제 구글 광고를 삽입하기 위한 사전 준비는 완료 되었습니다.

 

프로젝트의 string.xml 파일에 광고 ID 를 선언합니다.

(직접 입력해도 되나 이렇게 관리하는게 나중에 관리하기가 용이합니다.)

중요한 부분은

<string name="AdMobID">ca-app-pub-4681470946279796/9940497268</string>

이부분입니다. 이제 AdMobID 로 광고를 적용하게됩니다.

이제 실제 보이는 화면에서 구글 광고의 위치를 잡아 보겠습니다.

Main.axml 파일로 이동합니다.

아래 처럼 코딩합니다.

TextView 에서는 단순하게 Text 를 표시해 주고 그 Text 바로 아래에 구글 광고 베너가 표시되도록 하였습니다.

여기서 중요한 부분은 아래 굵게 표시된 부분입니다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:ads="
http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:text="@string/Hello"
        android:layout_width="wrap_content"
        android:id="@+id/content"
        android:layout_height="wrap_content" />
    <com.google.android.gms.ads.AdView
        android:id="@+id/adView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_alignParentBottom="true"
        ads:adSize="BANNER"
        ads:adUnitId="@string/AdMobID" />

</LinearLayout>

파란색 부분이 앞서 광고 ID 로 지정했던 변수 이름을 넣어야합니다. (직접 광고 ID 를 넣어도 상관없습니다.)

이제 MainActivity 에 추가 코딩을 해야합니다.

    [Activity(Label = "AdMob", MainLauncher = true, Icon = "@drawable/icon")]
    public class MainActivity : Activity
    {
        protected AdView mAdView;

        protected override void OnCreate(Bundle bundle)
        {
            base.OnCreate(bundle);
            SetContentView(Resource.Layout.Main);

            mAdView = FindViewById<AdView>(Resource.Id.adView);
            var adRequest = new AdRequest.Builder().Build();
            mAdView.LoadAd(adRequest);

        }
        protected override void OnResume()
        {
            base.OnResume();
            if (mAdView != null)
            {
                mAdView.Resume();
            }
        }

    }

마지막으로 인터넷을 이용해 광고 정보를 가져와야하므로 권한설정이 필요합니다.

아래처럼 프로젝트 속성의 Android 매니페스트 에서 ACESS_NETWROK_STATE, INTERNET 권한을 체크해야합니다.

모든 설정은 끝났습니다.

 

시뮬레이터로 실행하거나 안드로이드 폰으로 실행하면 아래 처럼 광고베너가 삽입된걸 볼수 있습니다.

 

소스는 아래에 있습니다.

https://github.com/knagjun/AdMob

 

도움이 되셨으면 공감 부탁드립니다.^^

728x90
반응형
  1. Favicon of https://delphiman.tistory.com 기정아빠 2019.06.27 04:52 신고

    올려주신 내용으로 따라하기 를 해보았는데 광고가 수신이 되지 않는 것은 왜 그럴까요?
    구글에서 광고 생성을 하고나서 조금 시간이 경과 되어야 하나요?

    깃허브에 올려놓으신 것을 다운받아 앱ID 만 변경해서 실행해 보아도 Hello AdMob!만 나오네요.

    아니면 apk를 만들어 구글플레이에 올려놓고나서부터 광고가 수신되는 건가요?

    디버그 모드로도 해보고 릴리즈 모드로도 해보았는데 잘되지 않아서 글을 남겨봅니다.

    • Favicon of https://kjun.kr keisoft kjun.kr 2019.06.27 07:07 신고

      안드로이드라면 apk 파일을 만들고 그파일을폰에 옮긴후설치해보세요 언제부턴가 그래야 광고가 표시되더라구요^^

    • Favicon of https://delphiman.tistory.com 기정아빠 2019.06.27 10:41 신고

      감사합니다.
      패키지에 서명을 해서 릴리즈로 배포했더니 동작하네요.
      감사합니다.

728x90
반응형

Xamarin.Android 에 광고 넣는 방법을 소개합니다.

이번 시간에는 AdMob 에서 광고 ID 를 얻는 방법입니다.

우선 AdMob 에 가입을 합니다.

https://www.google.com/admob/

구글 로그인 해서 가입을 진행해야합니다.

가입 완료 후 수익창출 을 선택합니다.

여기서 좌측 상단의 빨간색 버튼 '새로운 앱에서 수익 창출' 을 클릭합니다.

아직 구글 플레이에 배포된 앱이 없다면 앱 직접 추가를 선택하고 이름을 넣습니다.

ANDROID 플랫폼을 선택합니다.

이름을 넣으면 아래처럼 앱추가 버튼이 활성화 됩니다.

앱추가를 클릭합니다.

광고 형식을 선택합니다. 배너를 선택합니다.

당연히 광고 크기가 크면 클수록 수익성이 좋을테지만 광고가 크면 클수록 사용자가 줄어들수도 있습니다.

 

광고 단위 이름을 넣고 저장 버튼을 클릭합니다.

애널리틱스는 건너뛰기 합니다. (필요하신 분을 사용하셔도 됩니다 _ 사용방법은 알아서^^)

아래 광고 단위 ID 가 생성되었습니다. 요놈을 잘 복사해 둡니다.

아래 목록에 광고 단위가 추가 된걸 확인 할수 있습니다.

 

다음 포스팅때 광고 ID를 가지고 XAMARIN.ANDROID 에 적용해보겠습니다.

728x90
반응형
728x90
반응형

잘 디버깅하고 배포를 위해 release 로 빌드하는데 아래처럼 에러가 발생되었다.

경고  

The $(TargetFrameworkVersion) for Mono.Data.Sqlite.dll (v7.1) is greater than the $(TargetFrameworkVersion) for your project (v5.0).
You need to increase the $(TargetFrameworkVersion) for your project. 
SMSConvey D:\[01]Source\K\K\SMSConvey\SMSConvey.csproj  

버전이 안맞는다는 소리같은데 쭉 빌드가 되던 애가 갑자기 왜이런담.;

Xamarin 업데이트 이후 발생되는것 같았다.

구글링해보니..

어떤사람은 .csproj 를 고치라고 하고

https://forums.xamarin.com/discussion/10472/error-invalid-value-for-targetframeworkversion

 

어떤 사람은 링커를 쓰지 않도록 하라고 하는데 이건 비쥬얼 스튜디오가 2017 버전이다.

https://stackoverflow.com/questions/37177430/link-assemblies-task-failed-unexpectedly-issue-while-app-build-in-xamarin

 

일단 편집하는건 좀 그래서 두번째방법으로 시도해 보았다.

2015 버전이라 좀 달라서 찾아보니 아래그림처럼 저 위치의 링커 속성의 연결하는 중 의 값을 '없음'으로 하니 빌드가 제대로 되었다.

 

 

728x90
반응형
728x90
반응형

SMSCpnvey 가 집에있는 베가넘버6 에서도 에러가 발생되어

컴퓨터와 연결후 디버깅 해보았다..

그러니 에러가 아래 처럼 나타났다.

Android.Views.InflateException: Binary XML file line #1: Error inflating class Toolbar

정확히 알수 없어 exception 으로 빠지게하여 자세히 보니


{Android.Views.InflateException: Binary XML file line #1: Error inflating class Toolbar ---> Java.Lang.ClassNotFoundException: Didn't find class "android.view.Toolbar" on path: DexPathList[[zip file "/data/app/kr.kjun.SMSConvey-2.apk"],nativeLibraryDirectories=[/data/app-lib/kr.kjun.SMSConvey-2, /vendor/lib, /system/lib]]
   --- End of inner exception stack trace ---
  at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw () [0x0000c] in <3fd174ff54b146228c505f23cf75ce71>:0
  at Java.Interop.JniEnvironment+InstanceMethods.CallNonvirtualVoidMethod (Java.Interop.JniObjectReference instance, Java.Interop.JniObjectReference type, Java.Interop.JniMethodInfo method, Java.Interop.JniArgumentValue* args) [0x00089] in <bd30a18775d94dc8b6263aecd1ca9077>:0
  at Java.Interop.JniPeerMembers+JniInstanceMethods.InvokeVirtualVoidMethod (System.String encodedMember, Java.Interop.IJavaPeerable self, Java.Interop.JniArgumentValue* parameters) [0x0005d] in <bd30a18775d94dc8b6263aecd1ca9077>:0
  at Android.App.Activity.SetContentView (System.Int32 layoutResID) [0x00022] in <9ab9faae1b4b4f0da28e7c4ac61e2c78>:0
  at SMSConvey.MainActivity.OnCreate (Android.OS.Bundle bundle) [0x00011] in D:\[01]Source\K\K\SMSConvey\MainActivity.cs:40
  --- End of managed Android.Views.InflateException stack trace ---
android.view.InflateException: Binary XML file line #1: Error inflating class Toolbar
 at android.view.LayoutInflater.createViewFromTag(LayoutInflater.java:707)
 at android.view.LayoutInflater.parseInclude(LayoutInflater.java:816)
 at android.view.LayoutInflater.rInflate(LayoutInflater.java:745)
 at android.view.LayoutInflater.inflate(LayoutInflater.java:492)
 at android.view.LayoutInflater.inflate(LayoutInflater.java:397)
 at android.view.LayoutInflater.inflate(LayoutInflater.java:353)
 at com.android.internal.policy.impl.PhoneWindow.setContentView(PhoneWindow.java:328)
 at android.app.Activity.setContentView(Activity.java:1934)
 at md5328597d03b579986891d158e9e4b98f4.MainActivity.n_onCreate(Native Method)
 at md5328597d03b579986891d158e9e4b98f4.MainActivity.onCreate(MainActivity.java:33)
 at android.app.Activity.performCreate(Activity.java:5249)
 at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1092)
 at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2189)
 at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2275)
 at android.app.ActivityThread.access$800(ActivityThread.java:142)
 at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1220)
 at android.os.Handler.dispatchMessage(Handler.java:102)
 at android.os.Looper.loop(Looper.java:136)
 at android.app.ActivityThread.main(ActivityThread.java:5091)
 at java.lang.reflect.Method.invokeNative(Native Method)
 at java.lang.reflect.Method.invoke(Method.java:515)
 at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:792)
 at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:608)
 at dalvik.system.NativeStart.main(Native Method)
Caused by: java.lang.ClassNotFoundException: Didn't find class "android.view.Toolbar" on path: DexPathList[[zip file "/data/app/kr.kjun.SMSConvey-2.apk"],nativeLibraryDirectories=[/data/app-lib/kr.kjun.SMSConvey-2, /vendor/lib, /system/lib]]
 at dalvik.system.BaseDexClassLoader.findClass(BaseDexClassLoader.java:56)
 at java.lang.ClassLoader.loadClass(ClassLoader.java:497)
 at java.lang.ClassLoader.loadClass(ClassLoader.java:457)
 at android.view.LayoutInflater.createView(LayoutInflater.java:559)
 at android.view.LayoutInflater.onCreateView(LayoutInflater.java:652)
 at com.android.internal.policy.impl.PhoneLayoutInflater.onCreateView(PhoneLayoutInflater.java:66)
 at android.view.LayoutInflater.onCreateView(LayoutInflater.java:669)
 at android.view.LayoutInflater.createViewFromTag(LayoutInflater.java:694)
 ... 23 more
}

위처럼 에러가 ...

중요한건 Didn't find class "android.view.Toolbar 이다.

구글링을 하니 내가 사용한 Toolbar 라는것이 안드로이드 4. 대 버전에서는 지원을 하지 않는다고한다.

5. 대 버전부터 지원이 된다는...;;

킷켓은 안된다.. 롤리팝 부터 지원이 된다고 한다.;;;

아 이것도 모르고 설치 최소 버전을 4 점대로 해놔서 킷켓 사용자들에게 에러가 발생되었다.

최소 버전을 롤리팝으로 하고 다시 배포를 해야하는건지.. ActionBar 를 바꿔야 하는건지.

일단 최소버전 부터 바꿔 에러가 발생되는 일이 없도록 해야겠다.^^

 

ref

https://stackoverflow.com/questions/35883622/how-to-add-toolbar-to-android-app-without-support-library

 

728x90
반응형
728x90
반응형
Xamarin 공부를 하고 있는 중에 axml 파일이 디자이너로 보여지지 않고 아래와 같은 에러가 발생

Your Java Version(1.0.7) is too old, You must have at least 1.8 installed.
자바 버전이 문제라는 메세지이기 때문에
자바 버전을 최신으로 깔아도 여전히 문제 발생

구글링을 열심히 하고 있는 와중에 옵션쪽에 설정하는 부분이 있다는 말에 바로 찾아보니
아래와 같이 자바버전이 잘못 설정이 되어있었음  ㅜㅠ


최신 버전이 있는 곳으로 위치 변경.
C:\Program Files\Java\jdk1.8.0_121
다시 axml 디자이너를 여니 아래와 같이 제대로 디자이너가 동작함.

이 외 문제들은 SDK Manager 에서 필요한 항목을 설치 및 업데이트하면 된다.

 

참고

http://stackoverflow.com/questions/30090719/view-designer-not-showing-up

728x90
반응형
728x90
반응형

Error: String types not allowed (at 'textColor' with value 'Black').

갑자기 에러가 발생되었다..

색깔은 허용되지 않는다는건가.. #000000 해보고 black 를 넣어도 해결이 안되어

다시 보니 아예 textColor 을 쓸수 없는가보다;

textColor 항목을 뺴니 해결이 되었다.

CheckBox, LinearLayout 에는 textColor 를 쓸수 없다.

 

728x90
반응형
728x90
반응형

Xamarin Forms 를 이용한 많은 앱들이 생겨나고 있습니다.

대표 네이버 카페를 가보면

https://play.google.com/store/apps/details?id=kr.njhouse.alltheair

https://play.google.com/store/apps/details?id=com.spoonful_lab.SpoonfulMessenger

등등

위그림에서 보듯이 많은 앱들이 만들어 지고 있습니다.

여기 가입한 분들이 다가 아닐테니.. 더 많을 것입니다.

또한 스타트업 회사들에서도 점점 Xamarin Forms 개발자를 구하는 공고가 조금씩 보이기 시작하고 있습니다.

하지만 아직 표면적으로는 느껴지지는 않는 상황이라는....

그래서 저도 처음 시작할떄 많이 망설이기도 했던게 사실입니다;

어쨌든.... (쓸데없는말이 길었군요)

 

오늘은 Xamarin Forms 으로 계산기를 만들어 보려고 합니다.

대략 순서는 아래와 같습니다.

1. 프로젝트 생성 (cross-flatform)

2. 화면에서 사용될 model 구성

3. 계산기 화면 구성

 

프로젝트를 생성합니다 cross-flatform 을 선택하여 솔루션을 구성합니다.

아래처럼 프로젝트가 생성 됩니다.

전 타이젠도 추가했습니다.

타이젠 추가방법은 이전 포스팅에 있습니다. http://kjcoder.tistory.com/225

 

우선 화면에서 사용될 model 을 생성합니다.

이 model 에 화면에서 처리될(숫자표현, 연산처리등) 내용이 모두 들어가 있습니다.

그 다음 클래스를 추가합니다. StudyViewModel 이라고 명명하겠습니다.

(설명은 코딩내에 다있습니다.)

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Input;
using Xamarin.Forms;

namespace XamarinFormsStudy
{
    public class StudyViewModel : INotifyPropertyChanged
    {
        /// <summary>
        /// 연산자 입니다.
        /// </summary>
        public string Op { get; set; }
        /// <summary>
        /// 계산할 데이터 입니다. 이전입력값
        /// </summary>
        public double Op1 { get; set; }
        /// <summary>
        /// 계산할 데이터 입니다. 현재입력값
        /// </summary>
        public double Op2 { get; set; }
        /// <summary>
        /// 출력창에 입력문자를 보여주도록하는 명령입니다.
        /// </summary>
        public ICommand AddCharCommand { protected set; get; }
        /// <summary>
        /// 출력창의 문자를 하나씩 삭제하는 명령입니다.
        /// </summary>
        public ICommand DeleteCharCommand { protected set; get; }
        /// <summary>
        /// 출력창의 모든 문자를 삭제하는 명령입니다.
        /// </summary>
        public ICommand ClearCommand { protected set; get; }
        /// <summary>
        /// 연산자 입력시 처리하는 명령입니다.
        /// </summary>
        public ICommand OperationCommand { protected set; get; }
        /// <summary>
        /// 연산결과를 도출하는 명령입니다.
        /// </summary>
        public ICommand CalcCommand { protected set; get; }

        // 출력될 문자들 담아둘 변수
        string inputString = "";
        public string InputString
        {
            protected set
            {
                if (this.inputString != value)
                {
                    this.inputString = value;
                    OnPropertyChanged("InputString");
                    this.DisplayText = this.inputString;

                    //삭제 버튼을 활성화/비활성화 합니다.
                    ((Command)this.DeleteCharCommand).ChangeCanExecute();
                }
            }
            get { return this.inputString; }
        }
          
        // 출력 텍스트 박스에 대응되는 필드
        string displayText = "";
        public string DisplayText
        {
            protected set
            {
                if (this.displayText != value)
                {
                    this.displayText = value;
                    OnPropertyChanged("DisplayText");
                }
            }

            get { return this.displayText; }
        }

        public event PropertyChangedEventHandler PropertyChanged;

        public StudyViewModel()
        {
            // 출력창에 입력 문자를 출력합니다.
            this.AddCharCommand = new Command<string>((Key) => { this.InputString += Key; });
            // 입력문자열이 0보다 큰 경우 마지막에서 하나씩 삭제합니다.
            this.DeleteCharCommand = new Command(
            (nothing) =>
            {
                this.InputString = this.InputString.Substring(0, this.InputString.Length - 1);
            },
            (nothing) =>
            {
                return this.InputString.Length > 0;
            }
            );

            // 초기화
            this.ClearCommand = new Command((nothing) =>
            {
                this.InputString = "";
            });

            // 연산자가 들어오면 연산자와 입력문자를 전역에 담습니다.
            this.OperationCommand = new Command<string>((key) =>
            {
                this.Op = key;
                this.Op1 = Convert.ToDouble(this.InputString);
                this.InputString = "";
            });

            // 전역에 담겨진 연산자와 입력문자열 기준으로 계산하여 출력창에 나타냅니다.
            this.CalcCommand = new Command<string>((nothing) =>
            {
                this.Op2 = Convert.ToDouble(this.InputString);

                switch (this.Op)
                {
                    case "+":  this.InputString = (this.Op1 + this.Op2).ToString(); break;
                    case "-": this.InputString = (this.Op1 - this.Op2).ToString(); break;
                    case "*": this.InputString = (this.Op1 * this.Op2).ToString(); break;
                    case "/": this.InputString = (this.Op1 / this.Op2).ToString(); break;

                }
           
            });
        }

        /// <summary>
        /// 항목변경에 따른 이벤트입니다.
        /// </summary>
        /// <param name="propertyName"></param>
        protected void OnPropertyChanged(string propertyName)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }

    }
}

 

ContentPage 를 추가합니다.

아래 처럼 코딩합니다. (설명은 코딩내에 다있습니다.)

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:XamarinFormsStudy;assembly=XamarinFormsStudy"
             x:Class="XamarinFormsStudy.CalcPage">

    <Grid HorizontalOptions="Center" VerticalOptions="Center">
        <!--그리드에 바인딩될 모델을 설정합니다.-->
        <Grid.BindingContext>
            <local:StudyViewModel/>
        </Grid.BindingContext>
        <!--계산기의 기본 레이아웃을 잡습니다. row 6, col 4-->
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
       
        <!--상단에 계산기 인걸 표시해줍니다. "Calc"-->
         <Grid Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="4">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>

            <Frame Grid.Column="0">
                <Label Text="Calc"
                       HorizontalTextAlignment="Center" VerticalTextAlignment="Center"
                       IsVisible="True" FontAttributes="Bold" TextColor="Black"/>
            </Frame>
        </Grid>

        <!--가장 윗줄인 숫자가 보여질 영역과 삭제, 초기화 버튼을 위치시킵니다.-->
        <Grid Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="4">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>

            <Frame Grid.Column="0" OutlineColor="Accent">
                <Label Text="{Binding DisplayText}"/>
            </Frame>
           
            <!--여기서 각버튼마다 model 에 정의된 명령을 연결시켜주었습니다.-->
            <Button Text="<"   Command="{Binding DeleteCharCommand}"   Grid.Column="1" BorderWidth="0"/>
            <Button Text="C"    Command="{Binding ClearCommand}"        Grid.Column="2" BorderWidth="0"/>
        </Grid>
        <!--
        숫자와 연산기호를 정의합니다.
        숫자와 연산기호 또한 model 에 정의된 명령을 연결시켜줍니다.
        -->
        <Button Text="1" Command="{Binding AddCharCommand}" CommandParameter="1" Grid.Row="2" Grid.Column="0"/>
        <Button Text="2" Command="{Binding AddCharCommand}" CommandParameter="2" Grid.Row="2" Grid.Column="1"/>
        <Button Text="3" Command="{Binding AddCharCommand}" CommandParameter="3" Grid.Row="2" Grid.Column="2"/>
        <Button Text="+" Command="{Binding OperationCommand}" CommandParameter="+" Grid.Row="2" Grid.Column="3"/>
       
        <Button Text="4" Command="{Binding AddCharCommand}" CommandParameter="4" Grid.Row="3" Grid.Column="0"/>
        <Button Text="5" Command="{Binding AddCharCommand}" CommandParameter="5" Grid.Row="3" Grid.Column="1"/>
        <Button Text="6" Command="{Binding AddCharCommand}" CommandParameter="6" Grid.Row="3" Grid.Column="2"/>
        <Button Text="-" Command="{Binding OperationCommand}" CommandParameter="-" Grid.Row="3" Grid.Column="3"/>
       
        <Button Text="7" Command="{Binding AddCharCommand}" CommandParameter="7" Grid.Row="4" Grid.Column="0"/>
        <Button Text="8" Command="{Binding AddCharCommand}" CommandParameter="8" Grid.Row="4" Grid.Column="1"/>
        <Button Text="9" Command="{Binding AddCharCommand}" CommandParameter="9" Grid.Row="4" Grid.Column="2"/>
        <Button Text="*" Command="{Binding OperationCommand}" CommandParameter="*" Grid.Row="4" Grid.Column="3"/>
       
        <Button Text="0" Command="{Binding AddCharCommand}" CommandParameter="0" Grid.Row="5" Grid.Column="0"/>
        <Button Text="." Command="{Binding AddCharCommand}" CommandParameter="." Grid.Row="5" Grid.Column="1"/>
        <Button Text="=" Command="{Binding CalcCommand}" CommandParameter="=" Grid.Row="5" Grid.Column="2"/>
        <Button Text="/" Command="{Binding OperationCommand}" CommandParameter="/" Grid.Row="5" Grid.Column="3"/>

    </Grid>
</ContentPage>

계산기가 만들어졌습니다.

이제 결과를 확인해 볼까요...

각 장치마다 UI 가 조금씩 다릅니다.

그럼 각 장치에 맞는 추가 코딩을 넣어주어야합니다.

이런게 Xamarin Forms 의 한계점이라고 볼수 있습니다;;;

 

Tzien

 

 

Android

 

iOS

 

Universal

 

소스를 첨부하고 싶지만 너무 용량이 커서 Git 주소로 대채합니다.

https://github.com/knagjun/XamarinFormsStudy

728x90
반응형
728x90
반응형

Xamarin Forms 에서 타이젠도 개발이 가능하다는 말에

환경설정을 한번 해보기로 했습니다.

일단 결론은 잘 실행된다 입니다.

Tizen 으로 멀 만들어 봐야 효용성은 없겠지만..

Xamarin Forms 로 구성이 가능하다니.. 정말 안되는게 없다라는게 느껴지네요

 

1. Hyper-V 기능끄기

Hyper-V 를 사용하고 계신분이 라면 일단 기능을 꺼야합니다.

프로그램 및 기능에서 Windows 기능 켜기/끄기 로 들어가서

Hyper-V 가 체크 해제되어있어야합니다.

 

2. Intel® Hardware Accelerated Execution Manager (Intel® HAXM) 다운 및 설치

https://software.intel.com/en-us/android/articles/intel-hardware-accelerated-execution-manager

위 링크로 들어가 haxm-windows_v6_1_2.zip (6.1.2) 를 다운받습니다.

용랑이 작아서 이건 첨부 합니다. :

haxm-windows_v6_1_2.zip

제일 아래에 링크를 누르면 다운됩니다.

 Click to Accept EULA & Download haxm-windows_v6_1_2.zip (6.1.2)

압축을 풀고 intelhaxm-android.exe 를 실행합니다.

특별히 선택할 건 없습니다. 그냥 쭉~~ 설치하면 됩니다.

설치가 완료되었습니다.

 

3. Visual Studio Tools for Tizen Preview 다운 및 설치

Visual Studio 에서 동작하게 하기위해 설치해야합니다.

https://developer.tizen.org/development/tizen-.net-preview/getting-started?langredirect=1

위 링크로 들어가 Origin 을 클릭해서 다운 받습니다. (Origin 이 아닌 다른곳에서 다운받아도 무방합니다.)

 

945MB 크기가 다운받아져야해서 좀 시간이 걸릴수도 있습니다.

다운이 완료되면 설치합니다.

이것도 특별히 설정한건 없습니다. 다 Next 합니다.

이제 설치하면서 자기가 알아서 Visual Studio 에 맞는걸 찾아서 설치합니다.

전 참고로 Visual Studio 2015, 2017 두개가 설치되어있는데

두버전으로 각각 설치가 진행되었습니다. (아래 그림참고)

설치가 모두 완료되었습니다.

Visual Studio 를 엽니다

도구를 클릭하여 Tizen 이 보이면 일단 설치는 정상 적으로 된것입니다.

 

4. 애뮬레이터 실행

Tizen 애뮬을 한번 실행해 봅니다.

도구>Tizen>Tizen Emulator Manager 를 선택합니다.

에뮬레이터 관리자가 실행되고 Create 를 선택합니다.

mobile 에서 아래처럼 선택합니다.

(Tizen 이 TV 도 있나보군요;)

폰 종류를 선택합니다.

Finish 를 합니다.

그럼 에뮬레이터가 하나 생성이 완료되었고 이를 Launch 합니다.

액세스 허용하고

Tizen 에뮬 전원이 켜지고 있습니다.

에뮬레이터가 잘 작동하는구요 오호....

 

5. 프로젝트 추가

Xamarin Forms 를 해보신 분이라면 아시겠지만 Corss-platform 을 선택하고 프로젝트를 실행하면 Tizen 은 자동 생성되지 않습니다.

아래 그림보시면 ios, android, uwp 프로젝이 생성되어있습니다.


Tizen 은 수동으로 추가해야합니다.

새프로젝트를 추가합니다.

오호 새프로젝트 목록에 Tizen 이 생겼네요

Blank App 를 선택하고 확인합니다.

프로젝트 추가가 완료되었습니다.

Tizen 프로젝트를 시작프로젝트로 하고 실행해 보겠습니다.

오 잘 구동이 되는군요 따로 코딩을 하지 않아도 알아서 공유 프로젝트를 바라보도록 코딩이 되어있습니다.

 

728x90
반응형
728x90
반응형

Xamarin Forms 를 하면서 가장 보고 싶었던게 iOS 구동화면 이었습니다.

안드로이드 , Windows 는 바로 결과를 확인할 수 있지만 iOS 는 그렇지 않기 때문이죠

지난 포스팅에서 VMWare 에 Mac 환경 구성을 완료했습니다.

VMWare 에 Mac 환경 구축하기 - 1 :http://kjcoder.tistory.com/209

VMWare 에 Mac 환경 구축하기 - 2 : http://kjcoder.tistory.com/212

이제 Mac 에서 디버깅이 가능하도록 개발 환경을 구성해볼까요?

 

우선 원격 로그인이 가능하도록 설정해야합니다.

사과로고 > 시스템환경설정 > 공유로 접근합니다. (이미지는 영문)

아래 그림과 같이 원격 로그인과 원격 관리를 체크해 주고 전체 사용자가 접근 가능하도록 해줍니다.

(전체사용자를 원하지 않으면 특정 사용자를 지정해도 됩니다.)

이제 iOS 개발 도구인 Xcode 를 설치합니다.

App Store 에서 Xcode 로 검색하면 가장 처음에 있습니다. (참고로 제 Mac 환경을 시에라 버전입니다.)

Agree(동의) 합니다.

설치가 진행됩니다. 설치에 좀 시간이 소요됩니다. 좀 많이...

설치가 완료되면 아래처럼 나타납니다.

이제 Visual Studio 를 설치합니다.

http://xamarin.com/download 링크로 이동하고 아래 화면의 내용을 적당히 채운 후 다운로드 받습니다.

Full Name (이름)은 중간에 공백이 있어야 제대로 인식됩니다. (에고 이미지는 공백이 없군요 저렇게 하면 안됩니다. "kang jun" 이런식으로...)

다운로드가 완료되면 하단에 다운로드 아이콘이 활성화되고 누르면 현재 다운로드 받은 Visual Studio 가 보이게 됩니다.

더블 클릭하게되면 아래처럼 install Visual Studio 설치 창이 나타압니다. 화살표를 더블클릭합니다.

Open 합니다.

설치 준비 중입니다.

설치해 줘서 고마워 계속(Continue..)

Android 는 솔직히 필요없는데 Mac 에서 Android 애뮬이 어떻게 뜰지도 궁금해서 체크했습니다.

가장 아래 Workbooks & inspector 는 사용 안할 것이므로 체크 해제합니다.

(사용하실분들은 설치하셔도 무방합니다.)

이제 다운로더가 실제 Visual Studio 설치 파일등 구동에 필요한 파일들을 다운받기 시작하네요

내 Mac 에 변화가 일어날 것을 허락하겠냐.. 그렇다.. 비번을 넣고 OK 합니다.

이 작업도 좀 시간이 걸립니다. 요건 xcode 보다는 좀 짧지만 깁니다.

시간이 걸려서 봤더니 설치가 실패했군요..

그래도 다시 첨부터 할수 없으니 일단 Retray 해봅니다.

다행히 설치가 완료되었습니다.

설치 이후에 재부팅하거나 하면 업데이트가 또 뜹니다. 그때 모두 업데이트 해주는게 좋습니다.

이제 Mac 의 IP 주소를 알아야 합니다.

시스템 환경설정의 네트워크를 열면 IP 주소를 알수 있습니다.

192.168.142.128 이네요

 

Visual Studio 를 열고

도구 > 옵션 에서 Xamarin > iOS 설정 을 들어갑니다.

(아래 화면은 이미 설정하고 난 뒤 이미지이며 원래는 IP 주소가 없습니다.)

Xamarin Mac Agent 찾기 를 클릭합니다.

자동으로 잡히는 것도 있긴한데 이건 다 가짜? 입니다. VMWare 가 가짜? 라서 그런지 모르겠지만;; (아무리 해도 저건 연결이안됩니다.)

하단의 Mac 추가 를 클릭합니다.

아까 Mac 의 네트워크 정보에 있던 IP 를 넣습니다. 192.168.142.128

그럼 아래처럼 원격 Mac 를 찾습니다. 아래는 열심히 찾는 중이네요.

아래처럼 클립 모양이 되면 연결준비가 완료된 것입니다.

연결 버튼을 클릭합니다.

연결이 완료 되면 아래처럼 IP 가 나타나게됩니다.

이제 디버깅을 해보겠습니다.

디버깅시 반드시 아래처럼 설정을 바꾸고놓고 진행해야합니다.

(기본값이 다른걸로 되어있습니다.)

아래처럼 시뮬레이터가 동작하려는 준비 과정을 거치면

아래처럼 Mac PC 에서 iPhone 시뮬레이터가 뜨면서 동작하는걸 볼수 있습니다.

또한 아래처럼 windows 에서 애뮬로도 구동이 가능합니다.

참고로 출력창을 아래 Xamafin Diagnostics 로 바꾸면 진행 상황을 확인 할수 있습니다.

 

이제 iOS 까지 구동을 해보았네요

다음 시간에는 타이젠으로 구동하는 방법을 알아 볼까합니다.

 

참고로 시뮬레이터가 제대로 동작하지 않는 경우 아래 파일을 설치해 보고

재시도 해 보시기 바랍니다.

Xamarin.Simulator.Installer.1.0.2.7.msi

728x90
반응형

+ Recent posts