3. diel - Tvorba sudoku v Xamarin - Základné užívateľské rozhranie

V minulej lekcii, Tvorba sudoku v Xamarin - Vytvorenie projektu , sme si vytvorili projekt Xamarin Forms a otestovali prepojenie aplikácie s mobilným telefónom.

V dnešnom Xamarin tutoriále si naprogramujeme základné užívateľské rozhranie, ktoré bude obsahovať mriežku pre hru, údaje o jej priebehu aj potrebné tlačidlá.

V kapitole Zadanie aplikácie sme si už definovali užívateľské rozhranie a použitie frameworku Xamarin.Forms. Zvolili sme si aj spôsob tvorby kódu. Teraz teda môžeme začať pracovať na implementácii nášho zadania:-)

Budeme rozširovať našu aplikáciu z kapitoly Tvorba projektu lekcie Tvorba sudoku v Xamarin - Vytvorenie projektu.

Súbor MainPage.xaml

V našej aplikácii sa presunieme do okna Solution Explorer, kde si otvoríme súbor MainPage.xaml. Kód súboru zmeníme nasledovne:

<?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="SudokuX.MainPage">

</ContentPage>

Súbor MainPage.xaml.cs

Teraz z okna Solution Explorer otvoríme súbor MainPage.xaml.cs, do ktorého budeme písať všetok nižšie uvedený kód.

Premenné

Najprv si definujeme všetky potrebné premenné. Všetky premenné budú statické s modifikátorom prístupu public, aby sme na ne mohli pristupovať z iných metód. To si môžeme dovoliť, pretože celé riešenie bude v jednom súbore. Nie je to ideálna technika, ale nás budú zaujímať skôr algoritmy, ktoré priamo súvisia s riešením sudoku.

Do triedy MainPage si teda vložíme premenné:

• entry_sudoku a vložíme do nej inštanciu s hodnotami Entry[9, 9] predstavujúcu našu mriežku s 9x9 oknami,
• button_vyres s inštanciou typu Button,
• button_nova s inštanciou typu Button,
• label_cisla s inštanciou typu Label,
• label_cislice s inštanciou typu Label,
• label_cas s inštanciou typu Label.

Kód triedy MainPage vyzerá teraz nasledovne:

using Xamarin.Forms;

namespace SudokuX
{
    public partial class MainPage : ContentPage
    {

        static public Entry[,] entry_sudoku = new Entry[9, 9];
        static public Button button_vyrataj = new Button();
        static public Button button_nova = new Button();
        static public Label label_cisla = new Label();
        static public Label label_cislice = new Label();
        static public Label label_cas = new Label();
    }
}

Metóda MainPage()

Všetok ostatný kód budeme písať do vygenerovanej metódy MainPage() triedy MainPage.

Definícia mriežky

Najprv si v metóde MainPage() definujeme premennú grid, do ktorej vložíme inštanciu typu Grid. V jej konštruktore si nastavíme vlastnosť:

• VerticalOptions na FillAndExpand,
• RowDefinitions, v ktorej definujeme každý jednotlivý riadok,
• ColumnDefinitions, v ktorej definujeme každý jednotlivý stĺpec.

Kód metódy MainPage() vyzerá takto:

public MainPage()
{
    Grid grid = new Grid
    {
        VerticalOptions = LayoutOptions.FillAndExpand,
        RowDefinitions =
        {
            new RowDefinition { Height = GridLength.Star }, // 1
            new RowDefinition { Height = GridLength.Star }, // 2
            new RowDefinition { Height = GridLength.Star }, // 3
            new RowDefinition { Height = GridLength.Star }, // 4
            new RowDefinition { Height = GridLength.Star }, // 5
            new RowDefinition { Height = GridLength.Star }, // 6
            new RowDefinition { Height = GridLength.Star }, // 7
            new RowDefinition { Height = GridLength.Star }, // 8
            new RowDefinition { Height = GridLength.Star }, // 9
            new RowDefinition { Height = GridLength.Auto }, // Button vyres
            new RowDefinition { Height = GridLength.Auto }, // Button nova
            new RowDefinition { Height = GridLength.Star }, // Label cisla a cislice
            new RowDefinition { Height = GridLength.Star }  // Label cas vypoctu
        },

        ColumnDefinitions =
        {
            new ColumnDefinition { Width = GridLength.Star }, // 1
            new ColumnDefinition { Width = GridLength.Star }, // 2
            new ColumnDefinition { Width = GridLength.Star }, // 3
            new ColumnDefinition { Width = GridLength.Star }, // 4
            new ColumnDefinition { Width = GridLength.Star }, // 5
            new ColumnDefinition { Width = GridLength.Star }, // 6
            new ColumnDefinition { Width = GridLength.Star }, // 7
            new ColumnDefinition { Width = GridLength.Star }, // 8
            new ColumnDefinition { Width = GridLength.Star }  // 9
        }
    };
}

Tvorba mriežky

Vlastnú mriežku s dátami budeme vykresľovať v dvoch vložených cykloch, jeden pre riadky a druhý pre stĺpce. Zase musíme do premennej entry_sudoku vložiť ďalšiu inštanciu typu Entry, pretože pri definícii premennej entry_sudoku sme vytvorili iba pole a nie jeho položky.

Potom špecifikujeme ďalšie vlastnosti mriežky, ako farba popredia, pozadia a zadávanie pomocou numerickej klávesnice. Nakoniec inštanciu entry_sudoku vložíme do príslušného políčka v mriežke:

public MainPage()
{
    ...
    for (int row = 0; row < 9; row++)
    {
        for (int column = 0; column < 9; column++)
        {
            entry_sudoku[row, column] = new Entry();
            entry_sudoku[row, column].Text = "";
            entry_sudoku[row, column].TextColor = Color.Black;
            entry_sudoku[row, column].BackgroundColor = Color.White;
            entry_sudoku[row, column].Keyboard = Keyboard.Numeric;
            grid.Children.Add(entry_sudoku[row, column], column, row);
        };
    }
}

Ďalšie komponenty

Teraz postupne pridávame hodnoty nami definovaným premenným na začiatku našej triedy MainPage a vkladáme ich na presné miesta v mriežke pomocou metódy Add() a jej parametrov. Nakoniec do vlastnosti Content vložíme našu mriežku, aby sa nám na stránke zobrazila:

public MainPage()
{
    ...
    button_vyres.Text = "Vyrieš";
    grid.Children.Add(button_vyres, 0, 9, 10, 11);

    button_nova.Text = "Nové sudoku";
    grid.Children.Add(button_nova, 0, 9, 11, 12);

    label_cisla.Text = "Čísla n/81";
    label_cisla.FontSize = 25;
    grid.Children.Add(label_cisla, 0, 4, 12, 13);

    label_cislice.Text = "Číslica n/9";
    label_cislice.FontSize = 25;
    grid.Children.Add(label_cislice, 5, 9, 12, 13);

    label_cas.Text = "Čas";
    label_cas.FontSize = 25;
    grid.Children.Add(label_cas, 0, 9, 13, 14);

    this.Content = grid;

        }
    }
}

Pri metóde Add() používame jej druhé preťaženie s parametrami int left, int right, int top, int bottom. Určujeme od ktorého indexu vkladáme zľava doprava a zhora nadol.

Testovanie

A poďme naše snaženie vyskúšať:-) . Nahráme aplikáciu do mobilu a spustíme. Vidíme mriežku pre hru, údaje o jej priebehu aj potrebné tlačidlá:

V budúcej lekcii, Tvorba sudoku v Xamarin - Nahranie aplikácie do mobilu , si ukážeme, ako nahrať aplikáciu do iPhonu a Androidu, ako nastaviť mobil pre vývoj a ako aplikáciu debugovať.

 

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.