Laborator 3 - Interfețe grafice - Activități

Ferestre

In sistemul Android ferestrele se numesc activitati. Din punct de vedere al programarii, acestea sunt clase care extind clasa Activity. Spre deosebire de alte sisteme in care un program contine mai multe ferestre afisate simultan, in Android, ecranul este mereu ocupat de o singura fereastra. Mai mult, ferestrele sunt conectate prin simplul fapt ca o fereastra da nastere mai multor ferestre. Fereastra care apare pe ecran in momentul in care aplicatia este pornita este considerata fereastra principala, din ea pornind toate celelalte. Pentru a crea o activitate, vom crea o clasa ce extinde clasa Activity. La pornire, programul o va genera, iar noi putem interactiona cu fereastra prin evenimente. Unele dintre cele mai importante evenimente sunt: si . public class MainActivity extends Activity {

   @Override
   public void onCreate(Bundle savedInstanceState)
   {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.activity_main);        
   }
   @Override
   protected void onPause() 
   {
       // TODO Auto-generated method stub
       super.onPause();
   }

}

Nu uitati sa apelati functia parintelui (in exemplul nostru Activity) in interiorul evenimentelor!

onCreate

Evenimentul este apelat in momentul in care se creaza activitate. Aici vom initializa compentele ferestrei. Pentru a face elementele de pe fereastra vizibile, este necesar sa apelam functia . Exista cazuri in care la pornirea eplicatiei, aceasta trebuie sa revina la o stare anterioara (ex: dupa o oprire fortata). Astfel, este recomandat ca in acest aveniment sa se verifice daca fereastra este una noua sau nu, adica daca variabila de tip pasata ca parametru este nula sau nu. if (savedInstanceState!=null) { //fereastra nu e noua si trebuie incarcate anumite date ramase } else { //fereastra e noua }

onPause

Cand acest eveniment este apelat, fereastra se pregateste pentru oprire. De aceea este important sa salvam toate schimbarile de care avem nevoie. Aici vom opri procesele care nu mai sunt necesare cand aplicatia nu ruleaza, cum ar fi elementele video sau audio.

Interfata grafica-XML

Unul dintre cele mai importante elemente ale unei aplicatii il reprezinta interfata grafica. Pentru a putea diferentia interfata grafica de scrierea codului aplicatiei, cele doua se afla in fisiere diferite. De asemenea, design-ul interfetei este facut intr-un alt limbaj, unul descriptiv. Acesta seamana cu limbajul HTML, fiind alcatuit din marcaje.

   

Pentru fiecare element de pe fereastra exista un marcaj. Numele marcajului este acelasi cu numele clasei din partea de cod. Elementele au anumite caracteristici: pozitionarea, dimensiunile, culoarea, textul de pe ele. Pentru setarea fiecarei proprietati se scrie un parametru in acest mod: android:proprietate="valoare" Un buton rosu cu textul “Buton nou” pe el, va fi declarat astfel:

Layout

Mai adaugati un buton pe fereastra creata anterior si observati ce se intampla. Pentru ca pe o fereastra putem avea un singur view, exista view-uri speciale care au rolul de a aranja continutul. Aceste view-uri se numesc layout-uri si se comporta ca niste containere care aranjeaza elementele din interiorul lor dupa o anumita regula. Exista mai multe tipuri de layout-uri:

Linear Layout

LinearLayout este un container care aliniaza toate elementele pe care le contine fie vertical, fie orizontal.

Selectarea orientarii se face prin atributul . Pentru a face ca cele doua butoane create anterior sa nu se suprapuna putem folosi un layout linear.

   

Absolute Layout

Acest container permite pozitionarea componentelor sale in functie de coordonatele x si y.

   

Setarea evenimentelor pe elementele grafice

Pana acum am editat fereastra aplicatiei, dar aceasta nu este functionala. Pentru a putea utiliza butoanele create, trebuie sa le legam de actiunea pe care dorim sa o execute. Acest lucru se realizeaza prin intermediul unei alte proprietati: android:onClick="metodaExecutata" Daca dorim sa executam o actiune la un alt eveniment si nu la apasarea butonului, vom selecta o alta variabila in loc de .

Accesarea elementelor grafice din Java

Widget-urile pot fi modificate si din codul Java, nu doar fisierul XML, deoarece apropate toate proprietatile din XML au o functie echivalenta in JAVA. Apelam la aceasta optiune cand dorim ca la apelarea unui anumit eveniment, un element al ferestrei sa se modifice. Pentru a realiza acest lucru, trebuie sa cream o legatura intre elementul din XML si partea de cod. In primul rand, pe langa propietatile deja setate, ale elementului, vom mai adauga una:id. android:id="@+id/idElement" Dupa ce elementul poate fi identificat prin id, il putem lega de codul Java. Button buton=findViewById(R.id.buton1);

Intent-uri

Intent-ul este evenimentul prin care doua activitati comunica. Deoarece pe ecran este afisata o singura activitate odata, avem nevoie de o activitate principala care sa genereze alte activitati. Acest lucru se realizeaza prin crearea unui intent: Intent intent = new Intent(this, NewActivity.class); startActivity(intent); Fiecare activitate nou creata trebuie declarata in fisierul . Declararea se face astfel:

          

In multe situatii, activitatea noua are nevoie de niste parametrii provenind din prima activitate. Acesti parametrii sunt pasati cu ajutorul metodei . Valoarea pasata poate sa fie de aproape orice tip. Activitatea nou creata, va prelua datele transmise cu ajutorul metodei , aceasta existand in mai multe variante in functie de tipul pe care dorim sa il obtinem.

Utilizarea resurselor

In aplicatiile noastre vom dori sa folosim diferite resurse, cum ar fi imaginile. Toate aceste elemente pe care dorim sa le adaugam in aplicatie trebuie salvate in directorul . Ele pot fi adaugate din codul XML sau din cadoul Java. In XML exista anumite elemente care suporta aceste resurse, cum ar fi . Acestea se pun pe view folosind urmatoarea atribuire: android:src="@drawable/nume_poza" Din codul Java, ele se adauga astfel: ImageView i=(ImageView) findViewById(R.id.img);

       i.setImageResource(R.drawable.image);

Exercitii

  1. Creati o fereastra care sa arate ca in imagine:
  2. Inserati spatii intre butoane.
  3. Mariti dimensiunile butoanelor, dand o valoare exacta, si faceti astfel incat textul sa ramana centrat.
  4. Adaugati un eveniment pe primul buton astfel incat la apasare, acesta sa primeasca o alta culoare.
  5. Modificati evenimentul astfel incat de data aceasta, butonul sa dispara.
  6. Faceti ca la apasarea oricarui buton, sa se afiseze pe ecran textul de pe butonul apasat.
  7. Creati inca o fereastra pe care adaugati o imagine. La apasarea butonului //Fereastra Noua// va aparea noua fereastra.
  8. Adaugati ferestrei crete anterior un buton de back.
  9. Faceti ca fereastra cu imaginea sa apara si la apasarea butonului //Inserati Fereastra// si afisati, sub poza, care a fost butonul care a creat fereastra.
  10. Adaugati celei de-a doua ferestre un buton prin intermediul caruia sa se schimbe imaginea existenta cu o alta.

Bonus

  1. Invatam sa desenam

Scopul urmatorului exercitiu este sa realizati un program de desen care va permite utilizatorului sa deseneze liber cu degetul pe ecran.

Help

1.Desenare Pentru desenare vom folosi un obiect de tipul SurfaceView. Scopul acestuia este de a oferi o suprafata de desen, pe care o vom edita prin intermediul unui SurfaceHolder. Pentru a obtine acest obiect vom apela pe SurfaceView-ul nostru functia “getHolder()” .

Dupa ce obtinem SurfaceHolder-ul trebuie sa editam Canvas-ul desenat pe el.

Dupa deschiderea activitatii este posibil ca SurfaceHolder-ul sa se incarce mai greu, de aceea nu este recomandat sa desenam in cadrul functiei onCreate. In schimb vom adauga un CallBack pe holder si vom desena in cadrul functiei “surfaceCreated(SurfaceHolder holder)”. In continuare este un exemplu de cod:

holder.addCallback(new Callback() {

       public void surfaceDestroyed(SurfaceHolder holder) {
           // TODO Auto-generated method stub
           
       }
       
       public void surfaceCreated(SurfaceHolder holder) {
           // aici obtinem canvasul, il editam si il postam inapoi
           
       }
       
       public void surfaceChanged(SurfaceHolder holder, int format, int width,
               int height) {
           // TODO Auto-generated method stub
           
       }
   });

Pentru a obtine Canvasul vom apela pe holder functia “lockCanvas()”, care returneaza canvasul desenat la momentul respectiv pe holder si il blocheaza pentru a nu putea fi editat din alt thread in acelasi timp.

Pe canvas vom putea desena diferite forme folosind functii ca drawCircle(CentuX, CentruY, Raza, paint);

Al patrulea parametru este de tipul Paint. El contine informatii referitoare la culoare, transparenta, grosimea liniei si alte aspecte legate de stil.

Dupa ce terminam de editat Canvasul il putem desena pe holder folosin functia “unlockCanvasAndPost(canvas)”.

2.Interpretarea touch-urilor Pentru a putea primi coordonatele unui touch in cadrul unui obiect trebuie sa adaugam pe acesta un OnTouchListener. Exemplu:

unObiect.setOnTouchListener(new OnTouchListener() {

           public boolean onTouch(View v, MotionEvent event) {
                           
               // TODO Auto-generated method stub
               return true;
           }
       });

Atunci cand vom atinge ecranul functia onTouch va fi apelata si vom putea citi din event coordonatele touch-ului exprimate in pixeli, in functie de coltul din stanga sus al obiectului pe care am setat listener-ul.

Pentru a obtine numarul de degete care ating ecranul vom folosi //event.getPointerCount()//

Pentru un singur deget putem obtine coodronatele cu event.getX(); si event.getY();

Un exemplu de a obtine coordonatele pentru multitouch este //event.getX(event.getPointerId(0))// pentru a obtine abscisa primului deget

Pentru a obtine tipul actiunii, de exemplu daca a fost pus degetul, sau a fost miscat, sau a fost ridicat folosim //event.getActionMasked()//

2.Folosirea fragmentelor

  1. Creati o activitate cu un buton la apasarea caruia sa adaugati in mod dinamic un fragment cu functionalitatile de la exercitiul anterior.
  2. Creati o activitate cu doua fragmente identice, ce implementeaza functionalitatile de la exercitiul anterior. In plus atunci cand desenam pe unul din fragmente modificarile trebuie sa fie vizibile si pe celalalt.
pdm/laboratoare/03.txt · Last modified: 2016/03/20 23:45 by alexandru.radovici
CC Attribution-Share Alike 3.0 Unported
www.chimeric.de Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0