Android: Tvorba GUI

Obsah 1 Nástroje pro tvorbu grafického rozhraní aplikace (GUI) 2 Prvky GUI 2.1 TextView 2.2 Button 2.3 ImageView, ImageButton 2.4 EditText 2.5 AutoCompleteTextView 2.6 CheckBox 2.7 RadioButton 2.8 RadioGroup 2.9 AnalogClock 2.10 DigitalClock 2.11 Switch 3 Společné vlastnosti 3.1 Identifikace prvků 4 Texty/multilanguage 5 Identifikace prvků GUI 6 Kontejnery 7 Menu 8 Vyskakovací okna 9 Další otázky 9.1 Vytvářet GUI v kódu, nebo editací XML?

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"

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

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