Android: Tvorba GUI

Z MiS

Verze z 25. 6. 2015, 09:18; Spravce (diskuse | příspěvky)

(rozdíl) ← Starší verze | zobrazit aktuální verzi (rozdíl) | Novější verze → (rozdíl)

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

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 <#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

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

View
- developer.android.com/reference/android/view/View.html
- findViewById(...)
  - - v XML:
      - <TextView android:id="@+id/popis" .../>
    - v kódu:
      - TextView tv = (TextView) this.findViewById(R.id.popis);
- getId()
  - - int View.getId()
- getParent()
  - - int View.getParent()
- 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"

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" />

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

Android: Tvorba GUI

Obsah

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

Prvky GUI

TextView

Button

ImageView, ImageButton

EditText

AutoCompleteTextView

CheckBox

RadioButton

RadioGroup

AnalogClock

DigitalClock

Switch

Společné vlastnosti

Identifikace prvků

Texty/multilanguage

Identifikace prvků GUI

Kontejnery

Menu

Vyskakovací okna

Další otázky

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

Osobní nástroje

Jmenné prostory

Varianty

Zobrazení

Akce

Hledat

Výuka

Navigace

Nástroje