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

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á