Xamarin ile Adım Adım Hesap Makinesi

Ömer ÖZCAN0

Bu yazımızda Xamarin ile 4 işlem yapabileceğimiz bir hesap makinesini adım adım yazacağız.

1.Adım: Projenin Oluşturulması

1
2
3
4

2.Adım:Uygulama Arayüzünün Tasarlanması

MainPage.xaml dosyası uygulamızın arayüzünü oluşturacak kodları içerecektir.

1

Aşağıda ki seçili olan kodları seçip siliyoruz.

2
3

Uygulama arayüzünü oluşturan kodları aşağıda ki gibi <StackLayout> tag’ının içerisine yazıyoruz.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="hesapmakinasisbs.MainPage">

    <StackLayout>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <Label Text="" Grid.ColumnSpan="4" Grid.Row="0"  BackgroundColor="LightGreen" FontSize="60" HorizontalTextAlignment="End" x:Name="sonuclbl" MaxLines="1"  />
            <Button Text="7" Grid.Column="0" Grid.Row="1" FontSize="60" x:Name="btn7" Clicked="btn7_Clicked" />
            <Button Text="8" Grid.Column="1" Grid.Row="1" FontSize="60" x:Name="btn8" Clicked="btn8_Clicked"   />
            <Button Text="9" Grid.Column="2" Grid.Row="1" FontSize="60" x:Name="btn9"  Clicked="btn9_Clicked"  />
            <Button Text="/" Grid.Column="3" Grid.Row="1" FontSize="60" x:Name="btnbol" Clicked="btnbol_Clicked"   />
            <Button Text="4" Grid.Column="0" Grid.Row="2" FontSize="60" x:Name="btn4" Clicked="btn4_Clicked"   />
            <Button Text="5" Grid.Column="1" Grid.Row="2" FontSize="60" x:Name="btn5" Clicked="btn5_Clicked"   />
            <Button Text="6" Grid.Column="2" Grid.Row="2" FontSize="60" x:Name="btn6" Clicked="btn6_Clicked"   />
            <Button Text="*" Grid.Column="3" Grid.Row="2" FontSize="60" x:Name="btncarp" Clicked="btncarp_Clicked"   />
            <Button Text="1" Grid.Column="0" Grid.Row="3" FontSize="60" x:Name="btn1" Clicked="btn1_Clicked"   />
            <Button Text="2" Grid.Column="1" Grid.Row="3" FontSize="60" x:Name="btn2"   Clicked="btn2_Clicked" />
            <Button Text="3" Grid.Column="2" Grid.Row="3" FontSize="60" x:Name="btn3"   Clicked="btn3_Clicked" />
            <Button Text="-" Grid.Column="3" Grid.Row="3" FontSize="60" x:Name="btncikar"  Clicked="btncikar_Clicked"  />
            <Button Text="C" Grid.Column="0" Grid.Row="4" FontSize="60" x:Name="btnc"   Clicked="btnc_Clicked" />
            <Button Text="0" Grid.Column="1" Grid.Row="4" FontSize="60" x:Name="btn0"   Clicked="btn0_Clicked" />
            <Button Text="." Grid.Column="2" Grid.Row="4" FontSize="60" x:Name="btnnokta"  Clicked="btnnokta_Clicked"  />
            <Button Text="+" Grid.Column="3" Grid.Row="4" FontSize="60" x:Name="btntopla"   Clicked="btntopla_Clicked" />
            <Button Text="=" Grid.ColumnSpan="4" Grid.Row="5" FontSize="60" x:Name="btnesittir"  Clicked="btnesittir_Clicked"  />
        </Grid>
    </StackLayout>

</ContentPage>

Yukarıdaki kodda kullanılan Grid Layout nedir?

Grid Layout tablo yapısına benzeyen arayüzleri oluşturmak için kullanılan bir yerleşim düzeni çeşididir.

Xamarin Yerleşim Düzeni Türleri

Grid yerleşim düzeninde ColumnDefinition ile sütun sayısı, RowDefinition ile satır sayısı belirlenir. Width(Genişlik) ve Height(Yükseklik) değerlerinde kullanılan * karakter o değerin otomatik belirleneceğini ifade eder. Aşağıda 4 sütun, 6 satırdan oluşan Grid düzeni görülmektedir.

<Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>

Hesap makinesini oluşturacak arayüzde sayıların göründüğü üst kısımda Grid layoutun 4 sütunu, Grid.ColumnSpan değeri ile birleştirilerek bir adet Label yerleştirilmiştir.

Grid.Row=0 deyimi ile Label ilk satıra yerleştirilmiştir.

 <Label Text="" Grid.ColumnSpan="4" Grid.Row="0"  BackgroundColor="LightGreen" FontSize="60" HorizontalTextAlignment="End" x:Name="sonuclbl" MaxLines="1"  />

Hesap makinesi arayüzünde sayılar ve işlemler için buton bileşeni kullanılmıştır. Butonlar Grid layout düzeninde satır(Grid.Row) ve sütun(Grid.Column) numaraları belirtilerek yerleştirilmiştir.

<Button Text="7" Grid.Column="0" Grid.Row="1" FontSize="60" x:Name="btn7" Clicked="btn7_Clicked" />
            <Button Text="8" Grid.Column="1" Grid.Row="1" FontSize="60" x:Name="btn8" Clicked="btn8_Clicked"   />
            <Button Text="9" Grid.Column="2" Grid.Row="1" FontSize="60" x:Name="btn9"  Clicked="btn9_Clicked"  />
            <Button Text="/" Grid.Column="3" Grid.Row="1" FontSize="60" x:Name="btnbol" Clicked="btnbol_Clicked"   />

Buton tanımlarındaki Clicked=”btn7_Clicked” deyimleri o butona tıklandığında çağırılan olayı belirtir. Olaylar ve içerdiği kodlar MainPage.xaml.cs C# kod sayfasındadır.

3.Adım: Uygulamaya Ait C# Kodları

Hesap makinesine ait algoritma aşağıdaki şekilde düşünülmüştür

  • Birinci sayıyı gir
  • İşlemi seç
  • İkinci sayıyı gir
  • Eşittir tuşuna bas ve sonucu hesapla

Uygulamaya ait C# kodları aşağıda verilmiştir.

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

namespace HesapMakinesi
{
    public partial class MainPage : ContentPage
    {
        Double? s1=null, s2=null, sonuc;
        String islem = "";
        public MainPage()
        {
            InitializeComponent();
        }

        private void btn7_Clicked(object sender, EventArgs e)
        {
            sonuclbl.Text = sonuclbl.Text + "7";
        }


        private void btn8_Clicked(object sender, EventArgs e)
        {
            sonuclbl.Text = sonuclbl.Text + "8";
        }

        private void btn9_Clicked(object sender, EventArgs e)
        {
            sonuclbl.Text = sonuclbl.Text + "9";
        }

        private void btnbol_Clicked(object sender, EventArgs e)
        {
            s1 = Convert.ToDouble(sonuclbl.Text);
            islem = "/";
            sonuclbl.Text = "";
        }

        private void btn4_Clicked(object sender, EventArgs e)
        {
            sonuclbl.Text = sonuclbl.Text + "4";
        }

        private void btn5_Clicked(object sender, EventArgs e)
        {
            sonuclbl.Text = sonuclbl.Text + "5";
        }

        private void btn6_Clicked(object sender, EventArgs e)
        {
            sonuclbl.Text = sonuclbl.Text + "6";
        }

        private void btncarp_Clicked(object sender, EventArgs e)
        {
            s1 = Convert.ToDouble(sonuclbl.Text);
            islem = "*";
            sonuclbl.Text = "";
        }

        private void btn1_Clicked(object sender, EventArgs e)
        {
            sonuclbl.Text = sonuclbl.Text + "1";
        }

        private void btn2_Clicked(object sender, EventArgs e)
        {
            sonuclbl.Text = sonuclbl.Text + "2";
        }

        private void btn3_Clicked(object sender, EventArgs e)
        {
            sonuclbl.Text = sonuclbl.Text + "3";
        }

        private void btncikar_Clicked(object sender, EventArgs e)
        {
            s1 = Convert.ToDouble(sonuclbl.Text);
            islem = "-";
            sonuclbl.Text = "";
        }

        private void btnc_Clicked(object sender, EventArgs e)
        {
            sonuclbl.Text = "";
            s1 = null;
            s2 = null;
            islem = null;
        }

        private void btn0_Clicked(object sender, EventArgs e)
        {
            sonuclbl.Text = sonuclbl.Text + "0";
        }

        private void btnnokta_Clicked(object sender, EventArgs e)
        {
            if (sonuclbl.Text.Contains(".") == false)
            {
                sonuclbl.Text = sonuclbl.Text + ".";
            }
        }

        private void btntopla_Clicked(object sender, EventArgs e)
        {
            s1 = Convert.ToDouble(sonuclbl.Text);
            islem = "+";
            sonuclbl.Text = "";
        }

        private void btnesittir_Clicked(object sender, EventArgs e)
        {
            if(sonuclbl.Text!="")
            {
                s2 = Convert.ToDouble(sonuclbl.Text);
            }
            if (s1 == null || s2 == null)
            {
                sonuclbl.Text = "Sayı gir!";
            }
            else
            {                     
                if (islem == "/")
                {
                    sonuc = s1 / s2;
                }
                else if (islem == "*")
                {
                    sonuc = s1 * s2;
                }
                else if (islem == "-")
                {
                    sonuc = s1 - s2;
                }
                else if (islem == "+")
                {
                    sonuc = s1 + s2;
                }
                else
                {
                    sonuclbl.Text = "İşlem Seç!";
                }
                sonuclbl.Text = sonuc.ToString();
            }
        }
    }
}

4.Adım:Sonuç

Uygulama çıktısı aşağıda görülmektedir.

Uygulama Arayüzü

Uygulamaya ait kodlar

https://github.com/omerozcann/XamarinHesapMakinesi

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir