Android: Tvorba GUI

Verze z 25. 6. 2015, 09:51

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ě.

Prvky GUI

TextView

• Popisek bez možnosti editování.
• Metody a odpovídající XML atributy:
  • android:id... identifikátor prvku (viz dále)
  • android:text... zobrazený text
    • setText(String text)... nastavení textu
  • Pro zápis textů je vhodné použít notaci @string 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: public void metoda(View view) {...}.
  • Popis reakce na stisk tlačítka popíšeme v 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 projektu ve složce: res/drawable

<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

• getText()
  • 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: toString();

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

Společné vlastnosti

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>

Poznámky

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(...)

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

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"

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 android.app.Activity.

Životní cyklus aktivity

• Viz 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:
  • onCreate()
  • onRestart()

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

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ší).