Image
3.3.2016 0 Comments

Vývoj pre Windows 10 – Prispôsobenie používateľského rozhrania / 9. časť

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

Vaša UWP aplikácia pre Windows 10 sa musí vedieť prispôsobiť nielen rôznym veľkostiam a rozlíšeniam displeja na rôznych typoch zriadení od smartfónov až po veľkoplošné obrazovky, ale aj zmene veľkosti okna, prípadne zmene orientácie zariadenia.

Základné princípy zobrazovania

Windows 10 používa algoritmus pre zmenu mierky, ktorý prispôsobuje zobrazovanie prvkov používateľského rozhrania a fontov. Algoritmus berie do úvahy nielen rozlíšenie obrazovky, ale aj typickú pozorovaciu vzdialenosť pre príslušné zariadenie. Algoritmus mierky zabezpečí, že 24 pixelové písmo bude na Surface Hub s uhlopriečkou 84''  rovnako dobre čitateľné ako na 5 '' telefóne, na ktorý sa používateľ pozerá z kratšej vzdialenosti.

Pri návrhu prvkov používateľského rozhrania budete preto namiesto reálnych pixelov používať takzvané efektívne pixely. Umožnia vám sústrediť sa na skutočné vnímané rozmery prvku. Napríklad, pri návrhu prvku s rozmerom 3 cm  sa  bude tento prvok zdať veľký približne 3cm na všetkých zariadeniach. Na menších zariadeniach pritom môže mať šírku 100 fyzických pixelov a na veľkej obrazovke s vysokou hustotou pixelov, môže mať 200 aj 300 fyzických pixelov. Nie je to všeobecné pravidlo, aby sa prvok pri pozorovaní z typickej vzdialenosti javil rovnako veľký, bude mať na 5 palcovom displeji telefónu Lumia 950 s rozlíšením 2 560  x 1 440 bodov viac pixelov ako na HD displeji lacného notebooku, ktorý má pri 15-tich palcoch rozlíšenie 1366 x 768 pixelov. Už vidíte ako výrazne  vám efektívne pixely a automatické škálovanie mierky uľahčia prácu?

Flexibilné používateľské rozhranie

V prvom rade sa musíte rozhodnúť na akých typoch zariadení vaša aplikácia pobeží. Pre prvoplánové rozhodovanie stačí zobrať do úvahy dve produktové rodiny – smartfóny a desktopy, pričom do tejto skupiny sa zaraďujú aj tablety. Zjednodušene povedané, či chcete aby vaša aplikácia bežala na všetkých zariadeniach, alebo len na smartfónoch, alebo len na desktopoch, tabletoch a veľkých obrazovkách.  Ak áno, tak používateľské rozhranie vašej aplikácie musí byť flexibilné.

Každá aplikácia má rôzny počet a veľkosti ovládacích a zobrazovacích prvkov, preto uvedieme len základné princípy. Pre rôzne veľkosti displeja je potrebné optimalizovať veľkosť prvkov zobrazujúcich text, prípadne obrázok, nielen úpravou veľkosti, ale aj rozširovaním, či zužovaním okrajov. Na zreteli by ste mali mať jednoduché pravidlo, že väčšia obrazovka by mala priniesť vyšší používateľský komfort a komplexnosť zobrazenia, no zároveň aplikácia musí byť dobre použiteľná aj na malom displeji mobilného telefónu. Pre vyšší komfort nestačí len zväčšiť pole na zobrazenie textu, ale text treba rozdeliť do viacerých stĺpcov pre lepší komfort čítania.  Veľmi účinným nástrojom ako maximálne využiť dostupnú zobrazovaciu plochu je možnosť zmeniť umiestnenie prvkov používateľského rozhrania a ich vzájomnú polohu.

Najlepšie to pochopíte na praktickom príklade. Pozrite si najskôr tri obrázky usporiadania ovládacích prvkov tej istej aplikácie pre rôzne veľkosti a typy obrazovky.

Zobrazenie používateľského rozhrania na väčších obrazovkách

Zobrazenie používateľského rozhrania v menšom okne

Zobrazenie používateľského rozhrania na displeji smartfónu

Prispôsobenie používateľského rozhrania

Na stránke MainPage.xaml sú skupiny prvkov používateľského rozhrania umiestnené vo vizuálnom kontejneri  typu RelativePanel. Samotné prvky tvoriace skupinu sú umiestnené v ďalších vizuálnych kontejneroch. Napríklad tlačidlá na výber testu v kontejneri typu Grid a akčné farebné tlačidlá v kontejneri typu StackPanel. Zdrojový kód je zjednodušený vynechaním prvkov rovnakého typu

<RelativePanel x:Name="rpPanel" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" >
    <TextBlock x:Name="tbLegenda" RelativePanel.AlignTopWithPanel="True"
       Margin="60,10,0,0" Text="Výber cvičného testu" FontSize="24" />
        <Grid x:Name="grBtTesty" RelativePanel.Below="tbLegenda" Margin="60,10,0,0">
            <Grid.ColumnDefinitions>
                ...
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                ...
            </Grid.RowDefinitions>
            <Button x:Name="btT1" Content="1"  Grid.Row="0" Grid.Column="0"  Width="45" Margin="1" Click="btT1_Click" />
            ...
        </Grid>
        <StackPanel x:Name="spAkcie"  Orientation="Vertical"  Margin="80,36,0,0">
            <StackPanel  Orientation="Horizontal" HorizontalAlignment="Left">
                <Button x:Name="btPrehlad2"  Content="Vybraný" FontSize="22"  HorizontalAlignment="Left" Margin="0,20,0,0" VerticalAlignment="Top" Background="GreenYellow" Height="50" Width="148" Click="btPrehlad2_Click" />
                <Button x:Name="btPrehlad3"  Content="TEST" FontSize="22" HorizontalAlignment="Left" Margin="30,20,0,0" VerticalAlignment="Top" Height="50" Background="Pink" Width="148" Click="btPrehlad3_Click" />
            </StackPanell
            <Button x:Name="btPrehlad11" Content="Nesprávne odpovede" Background="BlanchedAlmond" FontSize="22" HorizontalAlignment="Left" Margin="0,10,0,0" Grid.Row="1" VerticalAlignment="Top" Height="50" Width="325" Click="btPrehlad11_Click"  />
        </StackPanel>
        <Image x:Name="imgPodklad"  Source="Assets/podklad.png" RelativePanel.Below="grBtTesty"  Margin="60,10,0,0" Width="328" VerticalAlignment="Center" HorizontalAlignment="Center"/>
<!--  Tu je sekciaVisualStates popísaná v ďalšej stati -->
    </RelativePanel>

Aby sa vaša aplikácia, presnejšie rozmiestnenie jej prvkov prispôsobilo 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. V aplikácii rozlišujeme tri veľkosti šírky obrazovky v efektívnych pixeloch

  • Šírka väčšia ako 720 pixelov
  • Šírka v intervale 548 až 720 pixelov
  • Šírka menšia ako 548 pixelov

Sekcia VisualState obsahuje niekoľko triggerov. Pod pojmom trigger rozumieme akciu, ktorá sa automaticky spustí ak je splnená určitá podmienka. V tomto prípade sa podmienka týka šírky obrazovky

<VisualState.StateTriggers>
      <AdaptiveTrigger MinWindowWidth="720" />
</VisualState.StateTriggers>

V sekcii    <VisualState.Setters> je zoznam akcií, v tomto prípade nastavení parametrov, ktoré sa realizujú po aktivovaní triggera

Pri zúžení okna aplikácie pod 720 pixelov sa prestane zobrazovať obrázok imgPodklad, jeho parameter Visibility sa nastaví na hodnotu Collapsed a sekcia farebných tlačidiel, ktorá sa na širokej obrazovke zobrazovala vpravo od skupiny tlačidiel na výber testu sa presunie pod túto skupinu. Realizuje sa to zmenou vzájomnej polohy skupín prvkov v rámci vizuálneho kontejnera RelativePanel

Pri širšej obrazovke kedy sú tlačidlá vpravo je nastavený parameter
<Setter Target="spAkcie.(RelativePanel.RightOf)" Value="grBtTesty" />

Pri užšej obrazovke sa nastavenie zmení na
<Setter Target="spAkcie.(RelativePanel.Below)" Value="grBtTesty" />

Pri zúžení zobrazovacej plochy pod 548 pixelov sa ešte navyše zúžia okraje na minimum

<!--  VisualStates -->
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState>
                    <!--  >=720 efektívnych pixelov -->
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="720" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="spAkcie.(RelativePanel.RightOf)" Value="grBtTesty" />
                        <Setter Target="tbLegenda.Margin" Value="60,10,0,0" />
                        <Setter Target="imgPodklad.Visibility" Value="Visible" />
                        <Setter Target="spAkcie.Margin" Value="80,36,0,0" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState>
                    <!--  >=548 až <720 efektívnych pixelov -->
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="548" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="spAkcie.(RelativePanel.Below)" Value="grBtTesty" />
                        <Setter Target="tbLegenda.Margin" Value="60,10,0,0" />
                        <Setter Target="grBtTesty.Margin" Value="60,10,0,0" />
                        <Setter Target="imgPodklad.Visibility" Value="Collapsed" />
                        <Setter Target="spAkcie.Margin" Value="60,0,0,0" />
                        <Setter Target="btPrehlad2.FontSize" Value="17" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState>
                    <!--  >=0 až <548 efektívnych pixelov -->
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="0" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="spAkcie.(RelativePanel.Below)" Value="grBtTesty" />
                        <Setter Target="tbLegenda.Margin" Value="10,10,0,0" />
                        <Setter Target="grBtTesty.Margin" Value="10,10,0,0" />
                        <Setter Target="imgPodklad.Visibility" Value="Collapsed" />
                        <Setter Target="spAkcie.Margin" Value="12,0,0,0" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

Odporúčania

Pri prispôsobovaní veľkosti prvkov s rozmermi navrhnutými v efektívnych pixeloch sa využívajú násobky štyroch.  Preto by ste mali pre ostrý vzhľad využívať pri návrhu mriežku obrazových bodov 4x4. Potom okraje, veľkosti a pozície prvkov používateľského rozhrania a pozície budú násobkom 4 efektívnych pixelov. Pri návrhu a ladení jednotlivých stránok používateľského rozhrania si môžete priamo vo Visual Studiu 2015 priebežne skontrolovať ako budú tieto zobrazené na displejoch rôznych zariadení. Pri každom zariadení sa vyskúšajte prepínať medzi režimom „na šírku“ a „na výšku“. 

 

 

 

 

Zobrazit Galériu

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

Mohlo by Vás zaujímať

Ako na to

CES 2017: Lenovo predstavilo nové notebooky ThinkPad X1, Miix 720 a prvý smartfón s podporou Tango - Lenovo Phab 2

03.01.2017 00:09

Lenovo odštartovala ďalší ročník veľtrhu s celou škálou nových produktov. Nová generácia produktov radu ThinkPad X1 Carbon 2017 je najľahším 14-palcovým biznis notebookom, ktorý váži len 1,14kg a obsa ...

Ako na to

Tipy a triky: Ako správne poskytovať IT pomoc a ako o ňu správne žiadať?

14.12.2016 09:40

Či už ste pokročilý používateľ počítača, ktorý často poskytuje IT pomoc známym a rodine, alebo ste to vy, kto o takúto pomoc zvyčajne žiada, ľahko sa stanete nechcenou príčinou frustrácie a obrovskej ...

Ako na to

Tipy a triky: Ako diagnostikovať a opravovať neúspešné upgrady Windows 10

14.12.2016 09:37

Microsoft prešiel s Windows 10 do celkom novej éry vývoja. Namiesto samostatných verzií Windows, vydávaných zvyčajne s odstupom dvoch až piatich rokov (XP, Vista, 7 a podobne), začal svoj systém vyvíj ...

Žiadne komentáre

Vyhľadávanie

qubitconference

Najnovšie videá