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 12: / Řádka 12: @@
 * Editovat přímo XML souboru.
 * 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:
-** <code>android:id</code>... identifikátor prvku (viz dále)
-** <code>android:text</code>... zobrazený text
-*** <code>setText(String text)</code>... nastavení textu
-** Pro zápis textů je vhodné použít notaci <code>@string</code> viz Multilanguage.
-=== Button ===
-* Podtřída TextView, dědí všechny vlastnosti.
-; XML atributy:
-* android:id
-* android:onClick = "metoda"
-** Aktivita (třída) pak musí mít metodu: <code>public void metoda(View view) {...}</code>.
-** Popis reakce na stisk tlačítka popíšeme v&nbsp;této metodě.
-=== ImageView, ImageButton ===
-; XML atributy:
-* android:id
-* android:scr = "@drawable/zdroj-bez-pripony"
-** Lze použít obrázky: PNG, JPEG nebo GIF
-** Obrázky musí být uloženy v&nbsp;projektu ve složce: <code>res/drawable</code>
- <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
-* 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"
-** textové pole nepůjde editovat
-; Metody
-* <code>getText()</code>
-** Zpracování výsledku:
-** Vrací typ Editable.
-** Lze použít jako parametr pro 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: <code>toString();</code>
-=== AutoCompleteTextView ===
-*  Vylepšení třídy EditText pro automatické doplňování.
-*  android:id
-=== CheckBox ===
-; XML atributy
- android:id
-; Metody:
- isChecked()
- setChecked()
- toggle()
-=== RadioButton ===
-=== RadioGroup ===
-; XML atributy
- android:id (viz dále)
-; Metody:
- getCheckedRadioButtonId()
-* Vrací ID aktuálně zaškrtnutého tlačítka.
-=== AnalogClock ===
-=== DigitalClock ===
-; Metody:
- getText()
-* Vrací datový typ ''Editable''.
-=== Switch ===
@@ Řádka 105: / Řádka 22: @@
 **  Soubor s texty
 **  <string name="popis_textu">Text ke zobrazení</string>
-Poznámky
 == Identifikace prvků GUI ==
@@ Řádka 173: / Řádka 90: @@
 ****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í
-****AlertDialog dialog = new AlertDialog(Neutral, "OK");
-****Dialog.setText(text);
-****Dialog.setTitle("Upozornění");
-****Dialog.show();
-* Builder
-**  umožňuje nastavit vlastnosti dialogu.
-== Přepínání obrazovek ==
-*  Aktivita... jedna obrazovka aplikace.
-** Je realizována třídou, která je potomkem třídy <code>android.app.Activity</code>.
-; Životní cyklus aktivity:
-* Viz [http://developer.android.com/reference/android/app/Activity.html developer.android.com > Reference > Android > App > Activity]
-* 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:
-** <code>onCreate()</code>
-** <code>onRestart()</code>
- onResume()
-* Když se uživatel vrátí k obrazovce (ale byla předtím stále viditelná):
-* Následuje po:
-** onStart()
-** onPause()
- 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" />
 == Další otázky ==