Image
16.6.2016 0 Comments

Vývoj pre Android – Návrh používateľakého prostredia / 6. časť

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

Zariadenia, na ktorých sa budú androidové aplikácie spúšťať, majú rozličnú veľkosť obrazovky arôzne rozlíšenie. Preto programátori migrujúci zklasických aplikácií pre Windows by mali zabudnúť na prax definovania presných súradníc polohy a konkrétnych rozmerov ovládacích prvkov.

VAndroide definujete vzájomné usporiadanie prvkov tak, aby sa používateľské rozhranie aplikácie mohlo správne zobraziť na ľubovoľnom displeji. Rozmiestnenie prvkov musí byť flexibilné, za všetky uvedieme len dva dôvody: rôzne rozmery obrazoviek a zmena orientácie zariadenia.

Prispôsobenie rozlíšeniu obrazovky

Pri návrhu obrázkov a ikon je dôležité mať na pamäti, že vaša aplikácia môže byť inštalovaná na zariadeniach srôznymrozlíšením displeja ahustotou pixelov. Geometrickým zväčšením prvku či ikony určenej na malý displej sa na displeji srozlíšením full HD, prípadne vyšším docieli obrázok bez detailov, často neostrý. Preto máte kdispozícii viacero mierok, vktorých môžete vytvárať obrázky. Android pri spustení aplikácie kontroluje vlastnosti displeja konkrétneho prístroja anačíta ikonu vrozlíšení zodpovedajúcom parametrom displeja. Rozlíšenie sa uvádza vdpi (dots per inch), počte bodov na palec.

Niektoré parametre, napríklad rozmery okrajov arozstupy medzi prvkami, sú vjednotkách dp (density - independent pixel) definovaných vzťahom

1 DP = 160 px/dpi

Z tohto vzťahu logicky vyplýva, že dp vyjadruje fyzickú veľkosť displeja, ktorá sa na každom zariadení automaticky prepočíta späť na pixely.

Pre rozmery ikon určených na rôzne rozlíšenia platí tabuľka:

mdpi

160 dpi

48 × 48 px

hdpi

240 dpi

42 × 72 px

1,5×

xhdpi

320 dpi

96 × 96 px

xxhdpi

480 dpi

144 × 144 px

xxxhdpi

640 dpi

192 × 192 px

V prípadeobrázkov treba pre každú hustotu ldpi, mdpi, hdpi axhdpi vytvoriť obrázok v rozdielnom rozlíšení v pomere 3:4:6:8. Napríklad pre obrázok, ktorý má vldpi rozmery 180 × 180 pixelov, musíte vytvoriť varianty:

ldpi

180 × 180 px

mdpi

240 × 240 px

hdpi

360 × 360 px

xhdpi

480 × 480 px

Kontajnery na rozmiestnenie prvkov

Na definovanie rozmiestnenia prvkov používateľského rozhrania slúžia takzvané vizuálne kontajnery, voriginálnej terminológii Layouts. Sú odvodené od triedy ViewGroup.

Súbory XML sdefiníciami layoutov sú vo vývojovom prostredí Eclipse vrámci projektu umiestnené vzložke Layouts. Nový súbor vytvoríte pomocou kontextového menu tejto zložky New -> Android XML File. Následne sa zobrazí dialógové okno s ponukou na vytvorenie nového definičného súboru XML.

Vytvorenie nového layoutu

LinearLayout

Umožňuje usporiadať vnorené prvky (views) horizontálne do jedného riadka alebo vertikálne do stĺpca. Vnasledujúcom ilustračnom príklade je používateľské rozhranie využívajúce LinearLayout svertikálnou orientáciou pozostávajúce ztroch tlačidiel. Prvé atretie nemá nastavený parameter weight, čo vpraxi znamená, že je implicitne nastavený na hodnotu 0. Stredné tlačidlo má nastavený parameter weight na hodnotu 1, takže má vyššiu prioritu azaberie na výšku zvyšnú plochu. Parameter gravity je nastavený striedavo na hodnoty „left“ a „right“.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.example.prvaaplikacia.MainActivity$PlaceholderFragment" >

<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:text="@string/button1" />

<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_gravity="right"
android:layout_weight="1"
android:text="@string/button2" />

<Button
android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:text="@string/button3" />

</LinearLayout>

 

Ilustrácia fungovania parametrov gravity a weight

RelativeLayout

Relatívne layouty umožňujú definovanie vzájomných pozičných vzťahov nielen medzi jednotlivými vizuálnymi prvkami používateľského rozhrania (views), ale aj k rodičovskému layoutu. Aby bolo možné definovať vzájomné väzby, každý prvok musí mať jednoznačný identifikátor – atribút ID. Prvky sú implicitne umiestňované do ľavého horného rohu. Vilustračnom príklade ukážeme najskôr určenie polohy views oproti rodičovskému layoutu.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="${packageName}.${activityClass}" >

<TextView
android:layout_width="150dp"
android:layout_height="50dp"
android:layout_centerInParent="true"
android:background="@color/green"
android:text="layout_centerInParent" />

<TextView
android:layout_width="150dp"
android:layout_height="50dp"
android:layout_centerHorizontal="true"
android:background="@color/red"
android:text="layout_centerHorizontal" />

<TextView
android:layout_width="250dp"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:background="@color/orange"
android:text="alignParentBottom + centerHorizontal" />

</RelativeLayout>

 

layout3.png

Relatívne poziciovanie prvkov oproti rodičovskému view arelatívnemu layoutu

Pomocou atribútov

  • android:layout_alignRight
  • android:layout_alignBottom
  • android:layout_toLeftOf
  • android:layout_above
  • android:layout_toRightOf
  • android:layout_below

môžete definovať pozície prvkov vzhľadom na iné prvky.

Relatívne layouty sú veľmi flexibilné, ale iba vprípade, ak definujete medzi prvkami len minimálny počet väzieb. Vopačnom prípade sa stáva návrh neprehľadným.

FrameLayout

Tento layout umožňuje zobraziť len jeden prvok (view). Využíva sa hlavne na zobrazovanie dynamicky vytváraných fragmentov pre verzie operačného systému staršie ako 3.0 akomplexnejších prvkov, napríklad ScrollView. Keby ste do Frame Layoutu vložili viac prvkov, zobrazia sa na tom istom mieste, pričom budú zarovnané podľa ľavého horného rohu.

TableLayout

Do verzie API 14 (Android 4.0) sa na organizovanie prvkov používateľského rozhrania do formy tabuliek, teda riadkov a stĺpcov využíval TableLayout. Na konštrukciu riadkov tabuľky sa využíva kontajner TableRow. Pri vytváraní zložitejších tabuliek oceníte možnosť roztiahnuť pole cez niekoľko buniek tabuľky. Od verzie 4.0 sa oveľa viac využíva intuitívnejší kontajner GridLayout.

Grid Layout

Ako vyplýva znázvu, Grid je matica prvkov, pričom vývojár má úplnú kontrolu nad tým, ako sa tieto prvky zobrazia. Pozícia prvku sa definuje pomocou atribútov layout_width alayout_height. Bunkám možno nastavovať parametre android:layout_columnSpan a android:layout_rowSpan, ktoré definujú, cez koľko buniek tabuľky má byť prvok roztiahnutý vo vodorovnom alebo zvislom smere.

Vpríklade je použitý GridLayout na rozmiestnenie prvkov jednoduchej aktivity – formulára na zadanie mena ahesla. Aj vtomto kóde je text je vložený priamo, anie prostredníctvom resource ako vreálnych aplikáciách.

<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:useDefaultMargins="true"
android:alignmentMode="alignBounds"
android:columnOrderPreserved="false"
android:columnCount="4"
tools:context="${packageName}.${activityClass}" >

<TextView
android:text="Registrácia"
android:textSize="32dip"
android:layout_columnSpan="4"
android:layout_gravity="center_horizontal"/>

<TextView
android:text="Prihláste sa na odber našich noviniek:"
android:textSize="16dip"
android:layout_columnSpan="4"
android:layout_gravity="left"/>

<TextView
android:text="Email:"
android:layout_gravity="right"/>

<EditText
android:ems="10"/>

<TextView
android:text="Heslo:"
android:layout_column="0"
android:layout_gravity="right"/>

<EditText
android:ems="8"/>
<Space
android:layout_row="4"
android:layout_column="0"
android:layout_columnSpan="3"
android:layout_gravity="fill"/>

<Button
android:text="Pokračuj"
android:layout_row="5"
android:layout_column="3"/>

</GridLayout>

 

layout4.png

Príklad rozmiestnenia prvkov svyužitím kontajnera TableLayout

Vnorenie kontejnerov

Vďalšom príklade je kombinácia dvoch vnorených objektov LinearLayout, ktoré sú zapuzdrené vkontajneri rovnakého typu. Úlohou vonkajšieho kontajnera je usporiadať prvky vertikálne. Vnorený kontajner LinearLayout udržiava tri tlačidlá vo vodorovnej polohe. Ďalší vnorený kontajner udržiava dve textové polia vertikálne.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="${packageName}.${activityClass}" >

<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1">
<Button
android:text="B1"
android:gravity="center_horizontal"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1"/>
<Button
android:text="B2"
android:gravity="center_horizontal"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1"/>
<Button
android:text="B3"
android:gravity="center_horizontal"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1"/>
</LinearLayout>

<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1">
<TextView
android:text="Text 1" android:textSize="15pt"
android:background="@color/red"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:layout_weight="1"/>
<TextView
android:text="Text 2" android:textSize="15pt"
android:background="@color/green"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:layout_weight="1"/>
</LinearLayout>
</LinearLayout>


 

layout5.png

Kombinácia vnorených kontajnerov

ScrolView

Obrazovky zariadení vzávislosti od rozmerov arozlišovacej schopnosti umožňujú súčasne zobraziť len určité množstvo informácií. Často však dokumenty, obrázky, webové stránky ainý kontext potrebujú zabrať väčšiu plochu, aby boli čitateľne zobrazené. Riešením je prvok ScrollView umožňujúci zvislé rolovanie, prípadne prvok HorizontalScrollView umožňujúci vodorovné rolovanie, ak veľkosť vnorených prvkov presahuje fyzickú veľkosť displeja. Plocha obrazovky zariadenia predstavuje akési virtuálne okno, ktoré možno posúvať a postupne tak po častiach sprístupniť celý obsah. Zhľadiska hierarchie je ScrollView odvodený od FrameLayoutu. Môže zapuzdrovať jeden vnorený prvok.

Ak potrebujete zobraziť ScrolView vkonkrétnej polohe, tú nastavíte pomocou parametrov android:scrollY, respektíve android:scrollX.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >

<ScrollView
android:id="@+id/scroll_view_1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" >

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/text_1" />
</ScrollView>


<ImageView
android:id="@+id/imageView1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:contentDescription="@string/text_3"
android:src="@drawable/ic_launcher" />

<ScrollView
android:id="@+id/scroll_view_3"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.5" >

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/text_2" />
</ScrollView>


</LinearLayout>

 

layout6.png

Príklad použitia dvoch prvkov typu ScrollView

V januárovom vydaní sa budeme venovať zobrazeniu informácií typu zoznam – detaily pomocou fragmentov.

 

 

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á