[1] Xamarin - Prosty kalkulator

Ten post chciałbym poświęcić na opisanie sposobu wykonania prostego kalkulatora w Visual Studio Xamarin na Androida.

[Źrodlo: https://en.wikipedia.org/wiki/Xamarin]

Rozmieszczenie elementów:

Poniżej przedstawię rozmieszczenie poszczególnych fragmentów aplikacji.

Okno składa się z dwóch tablic z danymi (GridLayout). Górna tablica składa się z pojedynczych wierszy. Pierwszy wiersz zawiera numer dziesiętny, kolejny szesnastkowy, a ostatni binarny:

1.     <android.support.v7.widget.GridLayout
2.        android:layout_width="wrap_content"
3.        android:layout_height="0dp"
4.        android:layout_weight="1"
5.        android:background="#000001"
6.        android:textColor="#FFFFF0"
7.        app:orientation="horizontal"
8.        app:rowCount="3"
9.        app:columnCount="1">
10.         <TextView
11.            android:id="@+id/clcTextViewDec"
12.            android:layout_width="wrap_content"
13.            android:layout_height="wrap_content"
14.            android:padding="5dp"
15.            android:textSize="25sp"
16.            android:text="" />
17.         <TextView
18.            android:id="@+id/clcTextViewHex"
19.            android:layout_width="wrap_content"
20.            android:layout_height="wrap_content"
21.            android:padding="5dp"
22.            android:textSize="15sp"
23.            android:text="Hex:" />
24.         <TextView
25.            android:id="@+id/clcTextViewBin"
26.            android:layout_width="wrap_content"
27.            android:layout_height="wrap_content"
28.            android:padding="5dp"
29.            android:textSize="15sp"
30.            android:text="Bin:" />
31.     </android.support.v7.widget.GridLayout>

Przyciski są rozmieszczone w drugiej tablicy:

Tutaj wykorzystywane są dwa style dla przycisków:

1. <?xml version="1.0" encoding="utf-8" ?>
2. <resources>
3.   <style name="calcBtnStandardStyle">
4.     <item name="android:layout_width">0dp</item>
5.     <item name="android:layout_height">0dp</item>
6.     <item name="layout_rowWeight">1</item>
7.     <item name="layout_columnWeight">1</item>
8.     <item name="android:textSize">20dp</item>
9.     <item name="android:textColor">#FFFFF0</item>
10.     <item name="android:background">#000066</item>
11.     <item name="android:onClick">ButtonClick</item>
12.   </style>
13.   <style name="calcBtnExtraStyle">
14.     <item name="android:layout_width">0dp</item>
15.     <item name="android:layout_height">0dp</item>
16.     <item name="layout_rowWeight">1</item>
17.     <item name="layout_columnWeight">1</item>
18.     <item name="android:textSize">20dp</item>
19.     <item name="android:textColor">#FFFFF0</item>
20.     <item name="android:background">#2989D4</item>
21.     <item name="android:onClick">ButtonClick</item>
22.   </style>
23. </resources>

Poniżej zdjęcie z android emulator w Visual Studio dla telefonu Nexus 6 oraz androida 7.1:

Na samej górze znajdują się trzy pola wypisujące liczby w formacie dziesiętnym, szesnastkowym oraz binarnym. Do obsługi są wprowadzone podstawowe operacje matematyczne. Klawisz opisany jako BAC czyści ostatni znak natomiast DEL usuwa wszystkie operacje. Pozostałe elementy są dosyć łatwe w zrozumieniu, wobec tego nie będę ich opisywał.

Należy pamiętać aby w pliku strings.xml znajdowała się dobra nazwa projektu:

1. <?xml version="1.0" encoding="utf-8"?>
2. <resources>
3.   <string name="app_name">SimpleCalc</string>
4. </resources>

Program:

Poniżej przejdę do opisu niektórych funkcji w programie. Na samym początku wywoływane jest okno do którego następuje

1.         protected override void OnCreate(Bundle savedInstanceState)
2.         {
3.             base.OnCreate(savedInstanceState);
5.             SetContentView(Resource.Layout.Main);
7.             calculatorText = FindViewById<TextView>(Resource.Id.clcTextViewDec);
8.             calculatorTextHex = FindViewById<TextView>(Resource.Id.clcTextViewHex);
9.             calculatorTextBin = FindViewById<TextView>(Resource.Id.clcTextViewBin);
10.         }

Następuje wygenerowanie i uruchomienie przygotowanych grafik. Po tym następuje przypisanie wartości tekstowych do odpowiednich rubryk wyświetlanych dla użytkownika.

Za odczytanie klikniętych przycisków odpowiada następująca funkcja:

1.         [Java.Interop.Export("ButtonClick")]
2.         public void ButtonClick(View v)
3.         {
4.             Button button = (Button)v;
6.             if(checkIfBtnDecOrPoint(button.Text))
7.             {
8.                 decBtnClickedMethod(button.Text);
9.             }
10.             else if(checkIfBasicOperator(button.Text))
11.             {
12.                 basicOperatorBtnClickedMethod(button.Text);
13.             }
14.             else if(checkIfEqualSignClicked(button.Text))
15.             {
16.                 equalOoperatorBtnClickedMethod();
17.             }
18.             else if(checkIfSpecialOperator(button.Text))
19.             {
20.                 specialOperatorBtnClickedMethod(button.Text);
21.             }
22.             else if(checkIfMultipleZeroClicked(button.Text))
23.             {
24.                 multipleZerosBtnClickedMethod(button.Text);
25.             }
26.             else if(checkIfBackSignClicked(button.Text))
27.             {
28.                 clearLastDigitBtnClickedMethod();
29.             }
30.             else
31.             {
32.                 clearScreen();
33.             }
34.         }

W zależności który klawisz został kliknięty następuje przejście do przygotowanej funkcji odpowiedzialnej za wykonanie operacji matematycznej:

1. private void CalculateData(string newOperator = null)
2. {
3.     double? result = null;
4.     double? first = passNumbers[0] == null ? null : (double?)double.Parse(passNumbers[0]);
5.     double? second = passNumbers[1] == null ? null : (double?)double.Parse(passNumbers[1]);
7.     switch (@operator)
8.     {
9.         case MathOpAdd:
10.             result = first + second;
11.             break;
12.         case MathOpDiv:
13.             result = first / second;
14.             break;
15.         case MathOpMult:
16.             result = first * second;
17.             break;
18.         case MathOpSub:
19.             result = first - second;
20.             break;
21.         case MathOpExponen2:
22.             result = first * first;
23.             break;
24.         case MathOpExponen3:
25.             result = first * first * first;
26.             break;
27.         case MathOpDeflect:
28.             result = 1 / first;
29.             break;
30.         case MathOpRoot2:
31.             result = Math.Sqrt((double)first);
32.             break;
33.         case MathOpRoot3:
34.             result = Math.Pow((double)first, (1.0 / 3.0));
35.             break;
36.     }
38.     setDataIfNoResult(result, newOperator);
39. }

Wyświetlanie danych na ekranie odbywa się za pomocą następującej funkcji:

1. private void CalcTextUpdate()
2. {
3.     int number1Tmp = 0;
4.     int number2Tmp = 0;
5.     string number1TmpSt = "";
6.     string number2TmpSt = "";
8.     if (int.TryParse(passNumbers[0], out number1Tmp))
9.     {
10.         number1TmpSt = number1Tmp.ToString("X");
11.     }
13.     if (int.TryParse(passNumbers[1], out number2Tmp))
14.     {
15.         number2TmpSt = number2Tmp.ToString("X");
16.     }
18.     calculatorText.Text = $"{passNumbers[0]} {@operator} {passNumbers[1]}";
19.     calculatorTextHex.Text = "Hex:" + $"{number1TmpSt} {@operator} {number2TmpSt}";
20.     calculatorTextBin.Text = "Bin:" + Convert.ToString(number1Tmp, 2) + $"{@operator}" + Convert.ToString(number2Tmp, 2);
21. }

Projekt można pobrać pod tym linkiem z dysku Google.