Android: Tvorba GUI

Z MiS

(Rozdíly mezi verzemi)

Přejít na: navigace, hledání

Aktuální verze z 25. 6. 2015, 10:13

Obsah

1 Nástroje pro tvorbu grafického rozhraní aplikace (GUI)
2 Texty/multilanguage
3 Identifikace prvků GUI
4 Kontejnery
5 Další otázky
- 5.1 Vytvářet GUI v kódu, nebo editací XML?
6 Související stránky

Nástroje pro tvorbu grafického rozhraní aplikace (GUI)

Vestavěné nástroje vývojového prostředí (IDE)
- Například Android Studio má takový nástroj přímo vestavěn.
Nástroj DroidDraw
- DroidDraw.org
- Samostatná aplikace pro vizuální vytváření grafického rozhraní (GUI).
- Generuje XML popis grafického rozhraní, který pak můžeme přenést do projektu.
Náhledy GUI v zařízení
- AnDroidDraw (DroidDraw.org → AndroidDraw)
Editovat přímo XML souboru.
Zápis prostřednictvím kódu v Javě.

Texty/multilanguage

V XML:
- android:text="@string/popis_textu"
  - - Odkaz v GUI
    - Univerzální pro všechny jazyky
resources/values/strings.xml <#ID_1709611332>
- Soubor s texty
- <string name="popis_textu">Text ke zobrazení</string>

Identifikace prvků GUI

Všechny prvky jsou potomky třídy View.
Viz [developer.android.com/reference/android/view/View.html Developer.Android.com → View].
Pokud potřebujeme získat odkaz na prvek v kódu aplikace, můžeme prvku přiřadit atribut:

android:id

... a následně získat prvek metodou:

findViewById(...)

v XML:

<TextView android:id="@+id/popis" .../>

v kódu:

TextView tv = (TextView) this.findViewById(R.id.popis);

Další metody

int View.getId()
View View.getParent()
int View.getParent()
View View.getRootView()

Kontejnery

Jsou ekvivalentem panelů v Javě.
Zároveň nesou informaci o rozložení panelu.
LinearLayout()
- Konfigurace:
  - - android:orientation
      - vertical
    - android:layout_height
      - wrap_content
    - android:layout_width
      - fill_parent
    - android:layout_weight
      - poměr dvou či více kontejnerů
      - 50
    - android:layout_gravity
      - zarovnání
      - left
      - right
      - center_horizontal
      - center_vertical
    - android:padding
      - 5px
RelativeLayout()
TableLayout()
- Atributy:
  - - android:layout_height
      - wrap_content
      - fill_parent
    - android:layout_width
      - fill_parent
- Řádky:
  - - <TableRow
      - android:layout_height
        wrap_content
      - android:layout_width
        wrap_content
    - V řádcích jednotlivé vnořené prvky (View).
ScrollView()
GridLayout()
- od API 14 (Android 4.0)
- <GridLayout
  - - android:rowCount="3"
    - android:columnCount="3"

Další otázky

Vytvářet GUI v kódu, nebo editací XML?

Doporučuje se spíš XML.
Oddělíme tak logiku aplikace (chování, popsané v kódu) od popisu vzhledu (uvede se v XML).
Lze vytvářet varianty vzhledu (alternativní XML).
Snáze si vzhled představíme (kód je stručnější).

Související stránky

Android: Jednoduché prvky GUI
Android: Další součásti GUI (vyskakovací okna, menu, přepínání oken,...)

Android: Tvorba GUI

Aktuální verze z 25. 6. 2015, 10:13

Obsah

Nástroje pro tvorbu grafického rozhraní aplikace (GUI)

Texty/multilanguage

Identifikace prvků GUI

Kontejnery

Další otázky

Vytvářet GUI v kódu, nebo editací XML?

Související stránky

Osobní nástroje

Jmenné prostory

Varianty

Zobrazení

Akce

Hledat

Výuka

Navigace

Nástroje

@@ Řádka 13: / Řádka 13: @@
 * Zápis prostřednictvím kódu v Javě.
-== Prvky GUI ==
-=== TextView ===
-*  Popisek bez možnosti editování.
-*  Metody a odpovídající XML atributy:
-***android:id <#ID_860351535>
-***setText(String text)
-**** android:text
-***Pevné texty viz Multilanguage <#ID_1479957383>
-=== Button ===
-*  Podtřída TextView, dědí všechny vlastnosti.
-*  XML atributy:
-***android:id <#ID_860351535>
-***android:onClick = "metoda"
-**** Aktivita (třída) musí mít metodu:
-*****  public void metoda(View view) {...}
-**** Odkaz na obsluhu tlačítka.
-=== ImageView, ImageButton ===
-*  XML atributy:
-***android:id <#ID_860351535>
-***android:scr = "@drawable/zdroj-bez-pripony"
-*  PNG, JPEG nebo GIF
-*  Obrázky ve složce:
-***res/drawable
-*  Příklad:
-***<ImageButton android:src="@drawable/obrazek" />
-*  Dynamické nastavování obrázků:
-***Resources res = getResources();
-***Drawable img = res.getDrawable(R.drawable.cross);
-***ibt.setImageDrawable(img);
-=== EditText ===
-*  XML atributy:
-**android:id <#ID_860351535>
-***android:autoText=" true"
-**** automatické dokončování slov, lépe ale použít třídu AutoCompleteTextView
-***android:singleLine= " false"
-**** text na více řádcích
-***android:enabled =" false "
-**** nemožnost zápisu
-*  Zpracování výsledku:
-***getText()
-**** Vrací typ Editable.
-**** Lze použít jako parametr Toast:
- EditText et = (EditText) findviewbyid(R.id.txt);
- Editable str = txt.getText();
- Toast toast = Toast.makeText(getApplicationContext(), str, Toast.LENGTH_LONG);
- toast.show();
-**** Editable má metodu:
-*****  toString();
-=== AutoCompleteTextView ===
-*  Vylepšení třídy EditText pro automatické doplňování.
-*  android:id <#ID_860351535>
-=== CheckBox ===
-*  Metody:
-***isChecked()
-***setChecked()
-***toggle()
-*  android:id <#ID_860351535>
-=== RadioButton ===
-=== RadioGroup ===
-*Může mít
-** android:id (viz dále)
-*getCheckedRadioButtonId()
-** Vrací ID aktuálně zaškrtnutého tlačítka.
-=== AnalogClock ===
-*  <AnalogClock android:id="@+id/analogClock1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:layout_centerHorizontal="true" android:layout_marginTop="67dp" />
-=== DigitalClock ===
-*  <DigitalClock android:id="@+id/digitalClock1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/analogClock1" android:layout_centerHorizontal="true" android:layout_marginTop="82dp" />
-*  final DigitalClock hodiny = (DigitalClock) findViewById(R.id.digitalClock1);
-**hodiny.getText().toString();
-=== Switch ===
-== Společné vlastnosti ==
-=== Identifikace prvků ===
-* android:id
-**  android:id="@+id/popis"
-**  Pomocí něj pak odkazuji na prvek: <#ID_1780784546>
 == Texty/multilanguage ==
@@ Řádka 99: / Řádka 22: @@
 **  Soubor s texty
 **  <string name="popis_textu">Text ke zobrazení</string>
-Poznámky
 == Identifikace prvků GUI ==
-* View
+* Všechny prvky jsou potomky třídy <code>View</code>.
-**  developer.android.com/reference/android/view/View.html
+* Viz [developer.android.com/reference/android/view/View.html Developer.Android.com &rarr; View].
-**  findViewById(...)
+* Pokud potřebujeme získat odkaz na prvek v&nbsp;kódu aplikace, můžeme prvku přiřadit atribut:
-****v XML:
+ android:id
-***** <TextView android:id="@+id/popis" .../>
+* ... a následně získat prvek metodou:
-****v kódu:
+  findViewById(...)
-***** TextView tv = (TextView) this.findViewById(R.id.popis);
-**  getId()
+<div class="Priklad">
-****int View.getId()
+*v XML:
-**  getParent()
+ <TextView android:id="@+id/popis" .../>
-****int View.getParent()
+* v kódu:
-**  getRootView()
+ TextView tv = (TextView) this.findViewById(R.id.popis);
+</div>
+; Další metody:
+ int View.getId()
+  View View.getParent()
+ int View.getParent()
+  View View.getRootView()
@@ Řádka 159: / Řádka 89: @@
 ****android:rowCount="3"
 ****android:columnCount="3"
-== Menu ==
-* developer.android.com > Guide > Topics > Ui > Menus <http://developer.android.com/guide/topics/ui/menus.html>
-* res/menu/menu.xml
-**  XML popis struktury menu.
-**  <menu>
-**  <item>
-****android:id
-***** android:id="@+id/otevrit"
-****android:title
-***** popiska
-****Standardně nepárový tag.
-****Obsahem elementu může být další element <menu> (podmenu).
-****android:icon
-***** @drawable/obrazek
-****android:alphabeticShortcut="x"
-**  Příklad:
-****Zpět a Znovu
-* Hlavní menu
-**  Z XML:
-****public boolean onCreateOptionsMenu(Menu menu)
-***** Definujeme v aktivitě, která má mít menu.
-****MenuInflater
-***** třída, která vytváří propojení s XML souborem.
-***** public boolean onCreateOptionsMenu(Menu menu) {
-***** o
-******  MenuInflater inflater = getMenuInflater();
-******  inflater.inflate(R.menu.menu, menu);
-******  return true;
-******  }
-**  Dynamicky doplněné
-****public boolean onCreateOptionsMenu(Menu menu)
-****menu.add(int idSkupinyVoleb, int idVolby, int poradiVolbyVMenu, String textVolby)
-****Příklad:
-***** menu.add(1,1,0, "otevri");
-***** menu.add(1,2,1, "zavri");
-**  Obsluha
-****public boolean onOptionsItemSelected(MenuItem item)
-***** Spustí se při kliknutí na menu.
-****item.getItemId()
-***** switch (item.getItemId()) {
-***** case R.id.otevri:
-***** ...
-***** return true;
-***** }
-* Kontextové menu
-**  registerForContextMenu(view)
-****Registrace komponenty (view) pro kontext. menu.
-****Příklad (kód aktivity):
-***** public void onCreate(Bundle savedInstanceState) {
-***** o
-******  super.onCreate(savedInstanceState);
-******  setContentView(R.layout.main);
-******  Button b = (Button) R.findViewById(R.id.tlacitko);
-******  registerForContextMenu(b);
-**  onCreateContextMenu()
-****public boolean onCreateContextMenu(ContextMenu menu, View v, contextMenuInfo menuInfo) {
-****o
-***** super.onCreateContextMenu(menu, v, menuInfo);
-***** if (v.getId()==R.id.tlacitko) {
-***** o
-******  getMenuInflater().inflate(R.menu.kontextmenu, menu);
-******  }
-***** }
-**  onContextItemSelected()
-****public boolean onContextItemSelected(MenuItem item) {
-****o
-***** Button b = (Button) findViewById(R.id.tlacitko);
-***** switch (item.getItemId()) {
-***** o
-******  case R.id.modra:
-******  b.setBackgroundColor(Color.BLUE);
-******  return true;
-******  default:
-******  return super.onContextItemSelected(item);
-******  }
-***** }
-* Vytvoření
-**  hlavní menu
-****Jednou při vytvoření aktivity.
-**  kontextové menu
-****Při každém vyvolání (podržením prstu na prvku).
-== Vyskakovací okna ==
-* Toast
-**  Třída
-**  Bublina, která se objeví a zase zmizí.
-**  Metody
-****setText(...)
-****setDuration(konstantaDobyTrvani)
-****makeText(Activity aktivita, String text, konstantaDobyTrvani)
-***** Vytvoří instanci.
-***** Konstanty: <#ID_1440998896>
-******  Toast.LENGTH_LONG
-******  Toast.LENGTH_SHORT
-****show()
-***** Zobrazí bublinu!
-****Konstanty doby trvání:
-***** Toast.LENGTH_LONG
-***** Toast.LENGTH_SHORT
-* AlertDialog
-**  kritické události nebo potvrzení
-**  ?? Od studenta z testu:
-****AlertDialog dialog = new AlertDialog(Neutral, "OK");
-****Dialog.setText(text);
-****Dialog.setTitle("Upozornění");
-****Dialog.show();
-* Builder
-**  umožňuje nastavit vlastnosti dialogu.
-Activity
-* Pojmy
-**  Aktivita <#ID_1165457866>
-****Activity
-****Jedna obrazovka aplikace
-* Potomek třídy:
-**  android.app.Activity
-* Životní cyklus:
-**  developer.android.com > Reference > Android > App > Activity <http://developer.android.com/reference/android/app/Activity.html>
-* Metody:
-**  setContentView()
-****Náhled obsahu.
-**  onCreate()
-****Volá se:
-***** při spuštění aktivity.
-***** Pokud bylo málo paměti a komponenta ve stavu onPause() nebo onStop() byla uvolněna.
-**  onStart()
-****Následuje po:
-***** onCreate()
-***** onRestart()
-**  onResume()
-****Následuje po:
-***** onStart()
-***** onPause()
-******  když se uživatel vrátí k obrazovce (ale byla předtím stále viditelná):
-**  onPause()
-****Uživatel se přepne do jiné aktivity
-**  onStop()
-****Aktivita již nebude viditelná.
-**  onRestart()
-****Aktivita byla znovu zviditelněna (předtím bylo okno skryto).
-****Následuje tedy po:
-***** onStop()
-**  onDestroy()
-****Ukončení aktivity.
-* Spuštění aktivity
-**  Intent i = new Intent(this, novaAktivita.class);
-**  startActivity(i);
-**  Přidání aktivity do manifestu:
-****<activity android:name="novaAktivita" />
@@ Řádka 319: / Řádka 98: @@
 * Lze vytvářet varianty vzhledu (alternativní XML).
 * Snáze si vzhled představíme (kód je stručnější).
+== Související stránky ==
+* [[Android: Jednoduché prvky GUI]]
+* [[Android: Další součásti GUI]] (vyskakovací okna, menu, přepínání oken,...)