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: onCreate si onPause.

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 setContentView.
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 Bundle 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.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
 
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="@string/hello_world"
        tools:context=".MainActivity" />
 
</RelativeLayout>

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:

<Button 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#FF0000"
        android:text="Buton nou"
        />

Observam ca proprietatile layout_width si layout_height au valoarea wrap_content. Luand aceasta valoarea, butonul va avea cele mai mici dimensiuni posibile. Putem inlocui wrap_content cu fill_parent si vom observa ca butonul va acoperi toata fereastra. Dimensiunile pot, de asemenea, sa fie absolute, in pixeli.
Culoarea butonului poate fi scrisa in format RGB sau aRGB (a reprezinta transparenta).

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 android:orientation.
Pentru a face ca cele doua butoane create anterior sa nu se suprapuna putem folosi un layout linear.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" 
    android:orientation="vertical">
 
    <Button 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#FF0000"
        android:text="Buton nou"
        />
     <Button 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#FF0000"
        android:text="Buton "
        />
 
</LinearLayout>

Absolute Layout

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

<AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >
 
    <Button 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_x="20px"
        android:layout_y="30px"
        android:background="#FF0000"
        android:text="Buton nou"
        />
     <Button 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#FF0000"
        android:layout_x="60px"
        android:layout_y="150px"
        android:text="Buton "
        />
 
</AbsoluteLayout>

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

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);

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 res. Ele pot fi adaugate din codul XML sau din cadoul Java.
In XML exista anumite elemente care suporta aceste resurse, cum ar fi ImageView. 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. Faceti ca la apasarea oricarui buton, sa se afiseze pe ecran textul de pe butonul apasat.
  3. Adaugati un eveniment pe primul buton, astfel incat, la apasare, acesta sa primeasca o alta culoare.
  4. La apasarea butonului 2 sa apara o imagine in centru.
  5. La apasarea butonului 3 sa se schimbe imaginea de la punctul anterior.
  6. Testati aplicatia pe un alt device cu o dimensiune a ecranului diferita

referinta ArrayList referinta ArrayList referinta ArrayList

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 sau event.getX(event.getPointerId(1)) pentru al doilea

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

programare_android/curs/curs2.txt · Ultima modificare: 2013/08/05 23:56 de către stefan.alexandru
CC Attribution-Noncommercial-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