Android: Tvorba GUI

Z MiS
(Rozdíly mezi verzemi)
Přejít na: navigace, hledání
(Vytvoření stránky --- zatím neupravené)
 
(Osamostatněny stránky se základními prvky a s pokročilými prvky.)
 
(Nejsou zobrazeny 4 mezilehlé verze od 1 uživatele.)
Řádka 1: Řádka 1:
 
[[Category:VSE]][[Category:Informatika]][[Category:Programování]][[Category:Android]]
 
[[Category:VSE]][[Category:Informatika]][[Category:Programování]][[Category:Android]]
  
−
== Nástroje pro tvorbu GUI ==
+
== Nástroje pro tvorbu grafického rozhraní aplikace (GUI) ==
 
* Vestavěné nástroje vývojového prostředí (IDE)
 
* Vestavěné nástroje vývojového prostředí (IDE)
−
** Například Android Studio má takový nástroj.
+
** Například Android Studio má takový nástroj přímo vestavěn.
−
* Nástroj 'DroidDraw'
+
* Nástroj ''DroidDraw''
 
** [http://www.droiddraw.org/ DroidDraw.org]
 
** [http://www.droiddraw.org/ DroidDraw.org]
−
** Generuje  
+
** Samostatná aplikace pro vizuální vytváření grafického rozhraní (GUI).
−
* Náhledy v zařízení
+
** Generuje XML popis grafického rozhraní, který pak můžeme přenést do projektu.
−
**  AnDroidDraw
+
* Náhledy GUI v zařízení
−
****droiddraw.org > Androiddraw <http://www.droiddraw.org/androiddraw.html>
+
**  ''AnDroidDraw'' ([http://www.droiddraw.org/androiddraw.html DroidDraw.org &rarr; AndroidDraw])
 
* Editovat přímo XML souboru.
 
* Editovat přímo XML souboru.
 
* Zápis prostřednictvím kódu v Javě.
 
* 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 ==
 
== Texty/multilanguage ==
Řádka 99: Řádka 22:
 
**  Soubor s texty
 
**  Soubor s texty
 
**  <string name="popis_textu">Text ke zobrazení</string>
 
**  <string name="popis_textu">Text ke zobrazení</string>
−
Poznámky
+
 
  
 
== Identifikace prvků GUI ==
 
== 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:rowCount="3"
 
****android:columnCount="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).
 
* Lze vytvářet varianty vzhledu (alternativní XML).
 
* Snáze si vzhled představíme (kód je stručnější).
 
* 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,...)

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


Obsah

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


Texty/multilanguage


Identifikace prvků GUI 

android:id

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


Další otázky

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


Související stránky

Citováno z „http://www.mis.e-mis.cz/index.php/Android:_Tvorba_GUI“
Osobní nástroje
Jmenné prostory
Varianty
Akce
Výuka
Navigace
Nástroje