Lekce 3 - Tvorba sudoku v Xamarin - Základní uživatelské rozhraní

V minulé lekci, Tvorba sudoku v Xamarin - Vytvoření projektu, jsme si vytvořili projekt Xamarin Forms a otestovali propojení aplikace s mobilním telefonem.

V dnešním Xamarin tutoriálu si naprogramujeme základní uživatelské rozhraní, které bude obsahovat mřížku pro hru, údaje o jejím průběhu i potřebná tlačítka.

V kapitole Zadání aplikace jsme si již definovali uživatelské rozhraní a použití frameworku Xamarin.Forms. Zvolili jsme si také způsob tvorby kódu. Nyní tedy můžeme začít pracovat na implementaci našeho zadání

Budeme rozšiřovat naši aplikaci z kapitoly Tvorba projektu lekce Tvorba sudoku v Xamarin - Vytvoření projektu.

Soubor MainPage.xaml

V naší aplikaci se přesuneme do okna Solution Explorer, kde si otevřeme soubor MainPage.xaml. Kód souboru změníme následovně:

<?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>

Soubor MainPage.xaml.cs

Nyní z okna Solution Explorer otevřeme soubor MainPage.xaml.cs, do kterého budeme psát všechen níže uvedený kód.

Proměnné

Nejprve si definujeme všechny potřebné proměnné. Všechny proměnné budou statické s modifikátorem přístupu public, abychom na ně mohli přistupovat z jiných metod. To si můžeme dovolit, neboť celé řešení bude v jednom souboru. Není to ideální technika, ale nás budou zajímat spíše algoritmy, které přímo souvisí s řešením sudoku.

Do třídy MainPage si tedy vložíme proměnné:

• entry_sudoku a vložíme do ni instanci s hodnotami Entry[9, 9] představující naši mřížku s 9x9 okny,
• button_vyres s instancí typu Button,
• button_nova s instancí typu Button,
• label_cisla s instancí typu Label,
• label_cislice s instancí typu Label,
• label_cas s instancí typu Label.

Kód třídy MainPage vypadá teď následovně:

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();
    }
}

Metoda MainPage()

Všechen ostatní kód budeme psát do vygenerované metody MainPage() třídy MainPage.

Definice mřížky

Nejprve si v metodě MainPage() definujeme proměnnou grid, do které vložíme instanci typu Grid. V jejím konstruktoru si nastavíme vlastnost:

• VerticalOptions na hodnotu FillAndExpand,
• RowDefinitions, v které definujeme každý jednotlivý řádek,
• ColumnDefinitions, v které definujeme každý jednotlivý sloupec.

Kód metody MainPage() vypadá 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 mřížky

Vlastní mřížku s daty budeme vykreslovat ve dvou vložených cyklech, jeden pro řádky a druhý pro sloupce. Zase musíme do proměnné entry_sudoku vložit další instanci typu Entry, protože u definice proměnné entry_sudoku jsme vytvořili pouze pole a ne jeho položky.

Potom specifikujeme další vlastnosti mřížky, jako barva popředí, pozadí a zadávání pomocí numerické klávesnice. Nakonec instanci entry_sudoku vložíme do příslušného políčka v mřížce:

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);
        };
    }
}

Další komponenty

Nyní postupně přidáváme hodnoty námi definovaným proměnným na začátku naší třídy MainPage a vkládáme je na přesná místa v mřížce pomocí metody Add() a jejích parametrů. Nakonec do vlastnosti Content vložíme naši mřížku, aby se nám na stránce zobrazila:

public MainPage()
{
    ...
    button_vyres.Text = "Vyřeš";
    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 = "Číslice 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;

        }
    }
}

U metody Add() používáme její druhé přetížení s parametry int left, int right, int top, int bottom. Určujeme od kterého indexu vkládáme zleva doprava a shora dolů.

Testování

A pojďme naše snažení vyzkoušet . Nahrajeme aplikaci do mobilu a spustíme. Vidíme mřížku pro hru, údaje o jejím průběhu i potřebná tlačítka:

V příští lekci, Tvorba sudoku v Xamarin - Nahrání aplikace do mobilu, se naučíme nahrát aplikaci na iPhone a Android, nastavit mobil pro vývoj a aplikaci debugovat.

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.