Xamarin Forms 에서 Timer 를 쓸려고 하는데 쓸수가 없다;

찾아보니 Xamarin.Foms 에 Device.StartTimer 라는게 있어 이걸 사용하면 된다고한다.

사용방법은 기존 타이머와 방식이 좀 다르다.

 

        public MainPage()
        {
            InitializeComponent(); 

            Device.StartTimer(TimeSpan.FromSeconds(3), () =>
            {
                // 호출할 메서드나 내용을 넣고
                GetDataAsync();

               // 리턴을 해주는데 True 이면 계속 반복, False 이면 정지 한다.
                return true;
            });
        }

        public async void GetDataAsync()
        {
            ....
        }

위 내용은 3초 단위로 타이머가 동작하면서 GetDataAsync() 함수를 호출하게된다.

 

참고 : https://xamarinhelp.com/xamarin-forms-timer/

'C#.NET > Xamarin' 카테고리의 다른 글

(Xamarin Forms) 2.MasterDetailPage  (0) 2017.06.30
(Xamarin Forms) 1.ContentPage  (0) 2017.06.29
(Xamarin Forms) StartTimer  (0) 2017.06.22
(Xamarin) WiFi 접속하기  (0) 2017.06.18
(Xamarin.Android) splash screen 넣기  (0) 2017.06.17
(Xamarin.Android) AdMob 광고 넣기 (2)  (0) 2017.06.15

    private void EnableWifi()
   
{
     
string networkSSID = "bbox-xxx";
     
string networkPass = "mypass";

     
WifiConfiguration wifiConfig = new WifiConfiguration();
      wifiConfig
.Ssid = string.Format("\"{0}\"", networkSSID);
      wifiConfig
.PreSharedKey = string.Format("\"{0}\"", networkPass);

     
WifiManager wifiManager = (WifiManager)Application.Context.GetSystemService(Context.WifiService);

     
// Use ID
     
int netId = wifiManager.AddNetwork(wifiConfig); wifiManager.Disconnect();
      wifiManager
.EnableNetwork(netId, true);
      wifiManager
.Reconnect();
   
}

 

 

참고

https://stackoverflow.com/questions/8818290/how-do-i-connect-to-a-specific-wi-fi-network-in-android-programmatically

https://gist.github.com/Cheesebaron/5844638

'C#.NET > Xamarin' 카테고리의 다른 글

(Xamarin Forms) 1.ContentPage  (0) 2017.06.29
(Xamarin Forms) StartTimer  (0) 2017.06.22
(Xamarin) WiFi 접속하기  (0) 2017.06.18
(Xamarin.Android) splash screen 넣기  (0) 2017.06.17
(Xamarin.Android) AdMob 광고 넣기 (2)  (0) 2017.06.15
(Xamarin.Android) AdMob 광고 넣기 (1)  (0) 2017.06.15

어플 실행 시 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/

지난 포스팅에서는 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

 

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

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

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

우선 AdMob 에 가입을 합니다.

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

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

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

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

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

ANDROID 플랫폼을 선택합니다.

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

앱추가를 클릭합니다.

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

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

 

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

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

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

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

 

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

잘 디버깅하고 배포를 위해 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 버전이라 좀 달라서 찾아보니 아래그림처럼 저 위치의 링커 속성의 연결하는 중 의 값을 '없음'으로 하니 빌드가 제대로 되었다.

 

 

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

 

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

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

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

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

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

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

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

 

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

+ Recent posts

티스토리 툴바