Image
14.10.2015 0 Comments

Vývoj pre Windows 10 – Adaptovanie používateľského rozhrania možnostiam zariadenia / 4. časť

Späť na úvod >> Späť na programovanie >> Späť na seriál

Vaša aplikácia Windows 10 sa musí flexibilne prispôsobiť nielen rôznej veľkosti displejov a ich orientácii. Prvky používateľského rozhrania bude treba zrejme usporiadať inak pri zobrazení na veľkej obrazovke v režime na šírku a inak na menšej obrazovke telefónu pri základnej orientácii na výšku. Kombinatorika sa týmto nekončí, aplikácie sa na väčších obrazovkách zariadení, ktoré nie sú prepnuté do tabletového módu, štandardne zobrazujú v oknách, pričom ich veľkosť môže používateľ meniť.

V časti venovanej dizajnu sme vysvetlili, že Windows 10 používa algoritmus na zmenu mierky, ktorý normalizuje spôsob zobrazovania prvkov používateľského rozhrania a fontov. Algoritmus berie do úvahy pozorovaciu vzdialenosť a rozlíšenie obrazovky na optimalizáciu vnímania veľkosti prvkov. Pri definovaní prvkov budete namiesto skutočných pixelov používať takzvané efektívne pixely.

 

Pri návrhu prvku s rozmerom 1" sa  bude tento prvok zdať veľký približne 1" na všetkých zariadeniach. Na menších zariadeniach pritom môže mať 100 × 100 fyzických pixelov a na veľkej obrazovke s vysokou hustotou pixelov môže mať 200 × 200 fyzických pixelov.

Zmena usporiadania prvkov

Ako to funguje v praxi, ukážeme na jednoduchej aplikácii. Vo Visual Studiu 2015 vytvorte projekt typu UWP (Universal Windows Platform) s využitím šablóny Blank App. Na nekomerčné účely môžete využiť verziu Copmmunity Edition, ktorá je zadarmo. Pri vytváraní prvého projektu na vašom vývojárskom počítači s Windows 10 budete upozornení, aby ste zapli vývojársky mód umožňujúci spúšťať a ladiť aplikácie.

Zapnutie režimu vývojára v nastaveniach Windows 10

Na stránke MainPage.xaml definujeme niekoľko vhodne rozmiestnených prvkov používateľského rozhrania, napríklad:

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <StackPanel x:Name="hlavnyPanel" Margin="8,32,0,0">
       <TextBlock Text="Flexibilná aplikácia!" Margin="0,0,0,40"/>
       <TextBlock Text="Zadajte vaše meno a priezvisko"/>
       <StackPanel x:Name="vstupnyPanel" Orientation="Horizontal" Margin="0,20,0,20">
          <TextBox x:Name="menoTB" Width="280" HorizontalAlignment="Left"/>
          <Button x:Name="pridajBT" Content="Pridaj do zoznamu"/>
       </StackPanel>
       <TextBlock x:Name="vystupTB"/>
    </StackPanel>
</Grid>

Prvky používateľského rozhrania sú zapuzdrené v dvoch vnorených vizuálnych kontajneroch typu StackPanel. Úlohou tohto kontajnera je usporiadať prvky vertikálne, čo je implicitná voľba, alebo horizontálne, ak túto voľbu nastavíte pomocou parametra Orientation. Prvý kontajner usporiadal prvky zvislo vrátane druhého kontajnera, ktorý  usporiadal prvky "menoTB" a "pridajBT" vodorovne. Keďže sme sa zamerali na flexibilitu používateľského rozhrania, nebudeme riešiť obsluhu udalosti zatlačenia tlačidla.

Spustenie aplikácie na vývojárskom počítači. Všimnite si diagnostické okno, ktoré ukazuje, ako vaša aplikácia zaťažuje procesor, spotrebúva pamäť a iné zdroje počítača, na ktorom je spustená.

Na širšom displeji, v širšom okne alebo na telefóne pri orientácii na šírku je toto usporiadanie prehľadné. Ako bude aplikácia zobrazená na displeji telefónu pri orientácii na výšku? Nemusíte pripájať telefón ani spúšťať emulátor, stačí, ak prepnete náhľadové okno vývojového prostredia do režimu vybraného typu displeja. Pri náhľade v tomto režime zistíte, že tlačidlo sa nezobrazilo celé. Takto navrhnutá aplikácia by sa zle ovládala, nehovoriac o tom, čo by si používateľ pomyslel o jej tvorcoch.

Simulovanie zobrazenia na displeji telefónu. Všimnite si vľavo výber veľkostí displejov, na ktorých môžete simulovať zobrazenie vašej aplikácie v náhľadovom okne Visual Studia.

Aby sa vaša aplikácia a rozmiestnenie jej prvkov prispôsobili rozmerom displeja alebo okna, budete potrebovať triedu VisualStateManager. Jej úlohou je správa logických stavov zobrazovania a realizácia vhodných transformácií na prispôsobenie rozloženia prvkov aktuálnemu rozmeru okna aplikácie. Napríklad pri užšom okne môžete nielen inak usporiadať prvky, ale aj zmenšiť šírku okrajov a podobne.

Za úvodný tag Grid pred prvý element StackPanel vložte blok kódu XAML:

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup>
        <VisualState x:Name="wideState">
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="641" />
            </VisualState.StateTriggers>
        </VisualState>
        <VisualState x:Name="narrowState">
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="0" />
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <Setter Target="vstupnyPanel.Orientation" Value="Vertical"/>
                <Setter Target="pridajBT.Margin" Value="0,4,0,0"/>
            </VisualState.Setters>
        </VisualState>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

Pokiaľ má aplikácia na šírku k dispozícii viac než 640 pixelov, zostane používateľské rozhranie nezmenené. Na užšej obrazovke sa zmení orientácia usporiadania prvkov vnútri vizuálneho kontajnera StackPanel „vstupnyPanel“ z horizontálnej na vertikálnu, takže tlačidlo sa  zobrazí pod prvkom na zadanie mena a priezviska.

Zmena usporiadania prvkov na úzkej obrazovke

VisualState s názvom wideState má adaptívny trigger nastavený pomocou parametra MinWindowWidth, ktorý definuje minimálnu šírku okna 641. To znamená, že tento status je aktívny iba v prípade, ak šírka okna nie je menšia ako nastavené minimum, v tomto prípade 641 pixelov. V tomto stave sa zobrazí implicitný návrh používateľského rozhrania. Nemusíte nastavovať žiadne seter objekty pre tento stav, pretože využíva vlastnosti rozvrhnutia a veľkosti prvkov, ktoré ste definovali v návrhu XAML stránky. Druhý VisualState s názvom narrowState má trigger AdaptiveTrigger, presnejšie jeho parameter MinWindowWidth, nastavený na hodnotu 0. Tento stav sa použije, ak je šírka okna je väčšia ako 0, ale menšia ako 641 pixelov. V tomto stave treba pomocou objektov Setter definovať, ktoré vlastnosti ktorých prvkov v používateľskom rozhraní sa zmenia.

Skrývanie nepoužívaných prvkov

Na menších displejoch môžete na základnej obrazovke zobraziť iba najčastejšie používané prvky a ďalšie si používateľ zobrazí napríklad posunutím. Na väčšej obrazovke zobrazíte naraz viac prvkov na vyššiu variabilitu ovládania. Veľa aplikácií využíva zobrazenie typu master – detail. Na malej obrazovke sa vypíše zoznam objektov a po kliknutí na vybraný objekt sa vypíšu detailné informácie. Na PC a tabletoch sa detaily o vybranom objekte zobrazia spravidla vpravo od zoznamu objektov. Ako jednu z možností realizácie ukážeme využitie prvku SplitView, ktorý rozdeľuje obrazovku na dve časti. Ľavá môže byť použitá pre panel menu alebo zoznam objektov a pravá zobrazuje vybraný obsah. V móde Overlay sa panel zobrazí tak, že prekryje hlavné okno, v móde CompactOverlay je panel prekrytý oknom obsahu. Odporúčame v tomto režime zobraziť len ikony. 

Prvok SplitView v móde CompactOverlay

V móde Inline, ktorý využijeme v príklade, je panel zobrazený vedľa okna kontextu. Ukážeme to na jednoduchom príklade. Zdrojový kód je skrátený o definície riadkov gridu, definíciu vzhľadu tlačidla a obsahuje len jednu položku panela:

<SplitView Name="Split" PanePlacement="Left" OpenPaneLength="200"
    IsPaneOpen="False" DisplayMode="Inline">
     <SplitView.Pane>
         <Grid Padding="10">
             <Grid.RowDefinitions>
                 <RowDefinition Height="Auto" />
                 <RowDefinition Height="10" />
             </Grid.RowDefinitions>
             <Grid.ColumnDefinitions>
                 <ColumnDefinition Width="30" />
                 <ColumnDefinition Width="*"/>
             </Grid.ColumnDefinitions>
             <SymbolIcon HorizontalAlignment="Left" Foreground="Gold"
             Symbol="Favorite"/>
             <TextBlock Grid.Column="1" Text="Obľúbené" />
         </Grid>
     </SplitView.Pane>
     <Grid>
         <Grid.RowDefinitions>
             <RowDefinition Height="50" />
             <RowDefinition Height="*" />
         </Grid.RowDefinitions>
         <Button Background="White" Click="Button_Click">
         </Button>
         <TextBlock Margin="10" Grid.Row="1" Text="Obsah hlavného okna" />
     </Grid>
</SplitView>

Tlačidlom sa zapína alebo vypína zobrazenie panela:

private void Button_Click(object sender, RoutedEventArgs e)
{
    Split.IsPaneOpen = !Split.IsPaneOpen;
}

Teraz môžete aplikáciu vyskúšať a tlačidlom zobrazovať a skrývať panel ponuky funkcií.

Skrytý (vľavo) a zobrazený (vpravo) ľavý panel prvku SplitView

Ak ste si v predchádzajúcom príklade vyskúšali triedu VisualStateManager, pointa prispôsobenia prvku SplitView vás už určite napadla. Pri širokom displeji stačí nastaviť parameter Split.IsPaneOpen na true a na úzkom displeji na false, aby sa zobrazil len po zatlačení tlačidla.

 

Zobrazit Galériu

Nechajte si posielať prehľad najdôležitejších správ emailom

Mohlo by Vás zaujímať

Ako na to

Tipy a triky: Ako na snímku obrazovky na akomkoľvek počítači s Windows?

02.12.2016 00:13

Ak snímky obrazovky robíte často apotrebujete napríklad funkcie na posun stránok alebo snímanie zobrazenia pri vyššom rozlíšení displeja, zrejme používate nejakú špecializovanú aplikáciu. Väčšina použ ...

Ako na to 1

Tipy a triky: Ako aplikácii prednastaviť spúšťanie s administrátorskými právami?

30.11.2016 00:10

Väčšina aspoň trochu skúsenejších používateľov vie, že aj keď máte na operačnom systéme Windows vytvorený administrátorský účet, aplikácie pre bezpečnosť nefungujú vždy splnými administrátorskými práv ...

Ako na to 2

Tipy a triky: Ako vypnúť uzamykaciu obrazovku vo Windows 10?

29.11.2016 00:10

Rozčuľuje vás, že pred každým prihlásením doúčtu vášho počítača musíte prejsť uzamykacou obrazovkou? Windows 10 na tejto obrazovke ukazuje čas,dátum anejakú zaujímavú fotografiu zrôznych kútov sveta. ...

Žiadne komentáre

Vyhľadávanie

Kyocera - prve-zariadenia-formatu-a4-s-vykonom-a3

Najnovšie videá