2017년 7월 12일 수요일

Xamarin.Forms : 간단한 사칙연산 계산기

아주 기본적인 기능만 있는 계산기를 자마린으로 만들어 보자.


일단 프로젝트 하나 생성.


어느걸로 해야 하나 고민되지만, 쉽게 "Xamarin.Forms" 에 "공유 프로젝트" 로 선택.



<?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:SonCalc"
             x:Class="SonCalc.MainPage" Title="SonCal">

    <Grid Padding="0" RowSpacing="0" ColumnSpacing="0" BackgroundColor="Black">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

        <Label FontSize="40" x:Name="lblPrintNumber"  BackgroundColor="Black" Text="0" TextColor="White" HorizontalTextAlignment="End" VerticalTextAlignment="Center" Grid.ColumnSpan="4"/>

        <Button Text="AC" Grid.Row="1" Grid.Column="0" BackgroundColor="Silver" TextColor="Black" FontSize="40" BorderRadius="0" Clicked="btnCal_Clicked" />
        <Button Text="/" Grid.Row="1" Grid.Column="1" BackgroundColor="Silver" TextColor="Black" FontSize="40" BorderRadius="0" Clicked="btnCal_Clicked" />
        <Button Text="*" Grid.Row="1" Grid.Column="2" BackgroundColor="Silver" TextColor="Black" FontSize="40" BorderRadius="0" Clicked="btnCal_Clicked" />
        <Button Text="-" Grid.Row="1" Grid.Column="3" BackgroundColor="Orange" TextColor="Black" FontSize="40" BorderRadius="0" Clicked="btnCal_Clicked" />

        <Button Text="7" Grid.Row="2" Grid.Column="0" BackgroundColor="White" TextColor="Black" FontSize="40" BorderRadius="0" Clicked="btnCal_Clicked" />
        <Button Text="8" Grid.Row="2" Grid.Column="1" BackgroundColor="White" TextColor="Black" FontSize="40" BorderRadius="0" Clicked="btnCal_Clicked" />
        <Button Text="9" Grid.Row="2" Grid.Column="2" BackgroundColor="White" TextColor="Black" FontSize="40" BorderRadius="0" Clicked="btnCal_Clicked" />
        <Button Text="+" Grid.Row="2" Grid.Column="3" Grid.RowSpan="2"  BackgroundColor="Orange" TextColor="Black" FontSize="40" BorderRadius="0" Clicked="btnCal_Clicked" />

        <Button Text="4" Grid.Row="3" Grid.Column="0" BackgroundColor="White" TextColor="Black" FontSize="40" BorderRadius="0" Clicked="btnCal_Clicked" />
        <Button Text="5" Grid.Row="3" Grid.Column="1" BackgroundColor="White" TextColor="Black" FontSize="40" BorderRadius="0" Clicked="btnCal_Clicked" />
        <Button Text="6" Grid.Row="3" Grid.Column="2" BackgroundColor="White" TextColor="Black" FontSize="40" BorderRadius="0" Clicked="btnCal_Clicked" />

        <Button Text="1" Grid.Row="4" Grid.Column="0" BackgroundColor="White" TextColor="Black" FontSize="40" BorderRadius="0" Clicked="btnCal_Clicked" />
        <Button Text="2" Grid.Row="4" Grid.Column="1" BackgroundColor="White" TextColor="Black" FontSize="40" BorderRadius="0" Clicked="btnCal_Clicked" />
        <Button Text="3" Grid.Row="4" Grid.Column="2" BackgroundColor="White" TextColor="Black" FontSize="40" BorderRadius="0" Clicked="btnCal_Clicked" />
        <Button Text="=" Grid.Row="4" Grid.Column="3" Grid.RowSpan="2" BackgroundColor="Orange" TextColor="Black" FontSize="40" BorderRadius="0" Clicked="btnCal_Clicked" />

        <Button Text="0" Grid.Row="5" Grid.Column="0" Grid.ColumnSpan="2"  BackgroundColor="White" TextColor="Black" FontSize="40" BorderRadius="0" Clicked="btnCal_Clicked" />
        <Button Text="." Grid.Row="5" Grid.Column="2" BackgroundColor="White" TextColor="Black" FontSize="40" BorderRadius="0" Clicked="btnCal_Clicked" />
    </Grid>
</ContentPage>
  


그냥 화면 하나 짜리 간단 계산기 이므로 계산기 폼만 MainPage.Xaml 에 작성해 준다.


그럼 이렇게 폼이 만들어지는데, 안드로이드에선 이렇게 보이지만...


아이폰에선 이렇게 보인다. 각 디바이스의 버튼 스타일이 달라서 어쩔수가 없음.
암튼 폼은 이렇게 만들면 되고...

코드는...


MainPage.Xaml.cs 에다 이렇게 생성...

using System;
using Xamarin.Forms;

namespace SonCalc
{
    public partial class MainPage : ContentPage
    {
        double? NumBefore;
        double? NumAfter;
        Boolean isClear;
        string strProc;

        public MainPage()
        {
            NumBefore = null;
            NumAfter = null;
            isClear = false;
            strProc = null;

            InitializeComponent();
        }

        private void btnCal_Clicked(object sender, EventArgs e)
        {
            Button getbutton = (sender as Button);
            var lblPrintNumber = this.FindByName<Label>("lblPrintNumber");

            switch (getbutton.Text)
            {
                case "1":
                case "2":
                case "3":
                case "4":
                case "5":
                case "6":
                case "7":
                case "8":
                case "9":
                case "0":
                    if (lblPrintNumber.Text.Equals("0") || isClear.Equals(true))
                    {
                        if (String.IsNullOrEmpty(strProc))
                        {
                            NumBefore = null;
                        }

                        lblPrintNumber.Text = getbutton.Text;
                        isClear = false;
                    }
                    else
                    {
                        lblPrintNumber.Text += getbutton.Text;
                    }

                    break;

                case ".":    // 소숫점 처리
                    if (!lblPrintNumber.Text.Contains("."))
                    {
                        lblPrintNumber.Text += getbutton.Text;
                        isClear = false;
                    }
                    break;

                case "+":
                case "*":
                case "/":
                case "-":
                    ProcCal();
                    strProc = getbutton.Text;
                    break;

                case "=":
                    ProcCal();
                    strProc = null;
                    isClear = true;
                    break;

                case "AC":
                    NumBefore = null;
                    NumAfter = null;
                    strProc = null;

                    lblPrintNumber.Text = "0";

                    break;
            }

            return;
        }

        /// <summary>
        /// 입력된 값으로 결과값 계산
        /// </summary>
        private void ProcCal()
        {
            if (NumBefore.HasValue)
            {
                NumAfter = Convert.ToDouble(lblPrintNumber.Text);

                if (isClear.Equals(false))
                {
                    switch (strProc)
                    {
                        case "+":
                            NumBefore += NumAfter;
                            break;
                        case "-":
                            NumBefore -= NumAfter;
                            break;
                        case "/":
                            NumBefore /= NumAfter;
                            break;
                        case "*":
                            NumBefore *= NumAfter;
                            break;
                    }

                    NumAfter = null;

                    lblPrintNumber.Text = NumBefore.ToString();
                }
            }
            else
            {
                NumBefore = Convert.ToDouble(lblPrintNumber.Text);
            }

            isClear = true;
        }
    }
}



이렇게 다 만들어 놓고 실행해 보면...



이렇게 간단하게 계산기가 완성된다.
아마 버그도 좀 있을 테고, 에러처리 루틴 같은게 빠져 있지만, 간단한 사칙연산은 별 무리 없이 처리한다.