curs gui android

1

Android Android este creat de Google, pentru dispozitivele mobile (smartphone, tablete, reader). Cuprinde un sistem de operare, un middleware, aplicaii de baz (client de e-mail, program de SMS, calendar, hri, browser, agend pentru date de contact). http://developer.android.com/index.html Aplicaiile pentru Android sunt scrise folosind limbajul de programare Java. Pentru a rula aplicaii scrise pentru Android este nevoie de o VM main virtual Dalvik. VM ruleaz clasele compilate n Java i apoi transformate folosind aplicaia dx n fiiere executabile Dalvik (.dex).

2

Arhitectura SO Android

3

Necesiti software

JDK pentru compilarea claselor Java http://www.oracle.com/technetwork/java/javase/downloads/index.html Android SDK pentru compilarea n pachete Android http://developer.android.com/sdk/index.html Varianta 1: se descarc ADT Bundle care cuprinde:

o Eclipse + ADT plugin o Android SDK Tools o Android Platform-tools o The latest Android platform o The latest Android system image for the emulator

4

Varianta 2: Eclipse mediu de dezvoltare IDE

o Eclipse for Mobile Developers o Eclipse IDE for Java Developers o Eclipse Classic o Eclipse IDE for Java EE Developers

http://www.eclipse.org/downloads/ ADT Plugin for Eclipse http://developer.android.com/sdk/eclipse-adt.html API documentaia claselor Android http://developer.android.com/reference/classes.html

5

Android SDK (Software Development Kit) compileaz codul unei aplicaii ntr-un pachet Android, care

este o arhiv cu extensia .apk, care apoi poate fi instalat pe orice dispozitiv care ruleaz Android.

Include un emulator de dispozitiv mobil virtual AVD (Android Virtual Device) care ruleaz pe computer. Emulatorul permite dezvoltarea i testarea aplicaiilor Android fr a fi nevoie de dispozitivul fizic. Interaciunea cu emulatorul se realizeaz prin mouse n loc de touchscreen-ul dispozitivului i taste n loc de butoane.

Android SDK are un manager prin care se pot instala

documentaii i alte pachete.

6

Din Android SDK Manager se instaleaz o versiune de Android.

7

AVD Manager se creeaz un dispozitiv, care apoi se pornete cu Start.

9

Eclipse (varianta 2) Se instaleaz ADT Plugin meniul Help Install New

Software...

Detalii de instalare i configurare: http://developer.android.com/sdk/eclipse-adt.html Configurarea se face n Eclipse de la Window > Preferences..., dac nu a fost fcut automat la pornirea Eclipse. Trebuie setat directorul unde se afl instalat Android SDK.

11

Crearea unui proiect Android

n Eclipse File New Project Android Project Select Build Target Android

Project Name - este numele proiectului Build Target este versiunea de Android SDK n care va fi

compilat proiectul Application Name numele aplicaiei care va apare pe

dispozitivul mobil Package Name numele pachetului n care va fi salvat

proiectul. Are aceeai structur ca la Java. Folderul src conine fiierele surs java. Numele pachetului declarat iniial trebuie s fie format din cel puin 2 module separate prin punct.

Create Activity se creeaz automat clasa de baz, subclas a clasei Activity, care va rula aplicaia. n aceast clas este

12

rescris metoda onCreate(...) unde trebuie fcute toate iniializrile, inclusiv interfaa grafic.

13

Exemplu Afieaz un text pe ecranul dispozitivului mobil. Codul java se afl n fiierul din: /src/example.helloapp/HelloApplicationActivity.java: package example.helloapp;

import android.app.Activity;

import android.os.Bundle;

import android.widget.TextView;

public class HelloApplicationActivity extends Activity {

/** Called when the activity is first created. */

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

TextView textLabel = new TextView(this);

14

textLabel.setText("Prima aplicatie\n text afisat intr-o eticheta"); setContentView(textLabel); }

}

Textul subliniat este adugat pentru a afia ntr-o etichet un ir de caractere. Pachetele necesare pentru a fi importate pot fi introduse automat de Eclipse prin Ctrl+Shift+O. Pentru a rula, AVD trebuie s nu fie blocat.

15

Layout-ul se afl n fiierul /res/layout/main.xml. Acest fiier poate fi vizualizat n Eclipse sub form de layout sau cod xml (se alege din partea de jos a vizualizrii).

16

Android GUI Pentru crearea unei aplicaii Android cu GUI se folosesc una din clasele: View componente conine subclase pentru

implementarea componentelor grafice (widgets) (de exemplu, butoane, etichete, cmpuri text). O clas descendent din View descrie o structur de date care memoreaz proprieti de desenare-vizualizare, layout, evenimente (tastatur, scroll, touchpad).

ViewGroup containere conine subclase pentru managementul poziiei componentelor grafice (layout), care implementeaz arhitecturi diferite cu aspect liniar, relativ sau tabelar. O astfel de clas hotrte dimensiunea i aranjarea componentelor grafice descendente din ea.

17

Caracteristicile aplicaiilor GUI pentru Android: Fiecare aplicaie ruleaz ntr-un proces separat, care este o

instan a Dalvik VM. Trebuie s aib definit o ierarhie de activiti, n fiierul

AndroidManifest.xml, care se gsete n directorul proiectului.

Se folosete metoda setContentView() cu referin la nodul rdcin pentru a aduga o activitate unui layout.

18

Pentru fiecare nou activitate, se apeleaz metoda setContentView(), pentru ca aceasta s devin activ.

Este important s se urmreasc toate ferestrele instaniate, deoarece acestea trebuie nchise cu metoda finish().

Toate obiectele de tip View au asociat un ID cu ajutorul cruia se face referire la componenta grafic respectiv. Toate ID-urile sunt salvate n fiierul gen/pachet/R.java, care nu poate fi modificat manual.

Centrul de coordonate este stnga sus. Unitatea de msur pentru componente este pixel-ul. Componentele grafice au asociate evenimente, care pot fi

ascultate cu asculttori. Clasa View are o serie de metode pentru tratarea

evenimentelor: o onKeyDown(int, KeyEvent) - apsare de tast

19

o onKeyUp(int, KeyEvent) - ridicare de tast o onTrackballEvent(MotionEvent) - micare TrackBall o onTouchEvent(MotionEvent) - micare pe

TouchScreen Aplicaiile GUI pot fi create n dou moduri:

o Cod surs ntr-un fiier Java o Cod xml n fiiere situate n directorul res al

proiectului. n fiierele xml pot fi setate proprietile componentelor grafice.

Este ncurajat crearea layout-ului prin cod xml.

20

Layout - introducere

Se definete ntr-un fiier XML. Elementele din Xml sunt asemntoare cu funcionalitile

claselor Java. Pentru crearea acestui fiier se poate folosi un vocabular

Xml (de exemplu, cel din Eclipse), dar pot fi folosite i alte aplicaii IDE pentru crearea layout-ului (exemplu, DroidDraw).

Layout-ul poate fi creat prin drag-and-drop de componente grafice n modul layout i modificarea proprietilor n cod xml. Orice modificare fcut ntr-un mod de vizualizare (layout sau cod xml) va fi operat n fiier.

21

Exist o serie de aplicaii care permit crearea de wireframe (schema interfeei grafice: elemente de interfa, navigarea, cu accent pe funcionalitate i comportament i nu pe stil, culori, grafic).

App Inventor http://www.appinventorbeta.com/about/

22

Exemplu anterior, modificat astfel nct componentele grafice s nu mai fie create prin cod java, n schimb setate n fiiere xml. Codul se modific astfel n fiierul /src/examplu.eticheta/TextViewXmlActivity.java import android.app.Activity;


public class HelloApplicationActivity extends Activity {


@Override



setContentView(R.layout.main);

}

}

23

Fiierul res/layout/main.xml va conine urmtorul cod:

24

Fiierul res/values/string.xml va conine codul:

Prima aplicatie\n\n text afisat intr-

o eticheta \n pe trei randuri

HelloApplication

25

Fiierul /R.java Conine o list cu toate resursele folosite n proiect (layout, id-uri, string-uri). Aceast clas este generat automat de Eclipse, folosind aplicaia Ant, atunci cnd se alege comanda build. public final class R {

public static final class attr {

}

public static final class drawable {

public static final int ic_launcher=0x7f020000;

}

public static final class layout {

public static final int main=0x7f030000;

}

public static final class string {

26

public static final int app_name=0x7f040001;

public static final int hello=0x7f040000;

}

}

27

XML - eXtensible Markup Language

este un limbaj care structureaz, memoreaz, transport date i nu are ca scop afiarea acestora (cum face Html).

Un fiier xml conine tag-uri (elemente, noduri). Element: Numele unui element trebuie s nceap cu o liter i nu

conine spaii. Dac este format din mai multe cuvinte este indicat s se foloseasc _

Un element poate conine: o date sub form de text, o alte elemente, o atribute.

Fiecare fiier xml trebuie s aib un nod rdcin, care va fi printele tuturor celorlalte noduri.

28

Se formeaz un arbore de noduri, care pornete de la nodul rdcin.

Reguli de creare a unui fiier xml: o Fiecare nod trebuie s aib un tag de nchidere

() o Tag-urile sunt CaseSensitive o Elementele xml trebuie corect imbricate o Un element poate s aib atribute (de exemplu, , n care name este atributul elementului string). Un atribut poate fi transformat n element (de preferat), deoarece un element nu poate conine valori multivaloare, nu poate implementa o structur arborescent, nu sunt uor de extins.

o Valorile atributelor trebuie puse n .

29

o Caractere speciale n xml: &lt ; < > > & & ' ' " "

o Comentarii: o Mai multe caractere spaiu sunt tratate ca i cum ar fi

unul singur o Linie nou: LF

Tag-urile nu sunt predefinite n limbajul xml. Din acest motiv n Android s-a definit un vocabular xml pentru a emula lucrul cu clasele i obiectele.

Xml este descriptiv i nu se poate obine cod executabil direct din xml.

30

- prima linie dintr-un fiier xml este o declaraie a versiunii de xml folosite i tipului de codare (UTF-8 este o codificare de caractere pe 8bii pentru Unicode codificarea folosit n Java).

http://developer.android.com/guide/topics/ui/index.html http://developer.android.com/guide/topics/fundamentals.ht

ml

31

Layout - Xml

Atribute folosite n fiierul layout res/layout/main.xml:

xmlns:android

Declararea spaiului de nume pentru atributele Android. Toate elementele rdcin dintr-un layout trebuie s aib definit acest atribut

android:id

Identificator unic pentru fiecare component grafic. Acest ID poate fi folosit pentru a referi componenta grafic din codul surs sau din alte fiiere xml.

android:layout_width

Limea layout-ului. Cnd valoarea este "fill_parent" arat c acea component poate lua limea ntregului ecran.

32

android:layout_height

nlimea layout-ului.

android:text Seteaz textul de afiat n TextView. n loc de valoare se poate folosi o referire la o resurs de tip string definit n fiierul res/values/strings.xml. Folosirea resurselor string ajut la internaionalizare.

33

Layout manager de poziionare

FrameLayout poate aeza doar un obiect grafic n colul din stnga sus i nu se poate alege o alt locaie. Dac se includ mai multe obiecte grafice acestea se vor suprapune obturndu-se, doar dac nu sunt create s fie transparente. Opiunea se gsete n toolbar-ul Layouts.

34

n fiierul res/layout/main.xml: < FrameLayout xmlns:android=

"http://schemas.android.com/apk/res/android"

android:layout_width="fill_parent"

android:layout_height="fill_parent" >

35

android:layout_width="wrap_content"

android:layout_height="40px"

android:text="@string/label2"

android:textColor="@color/green"

android:background="@color/yellow"/>

36

Mai sus am definit trei etichete TextView, cu nlimi i culori diferite de fundal i de scris. Culorile sunt definite n fiierul res/values/colors.xml:

#ff000000

#ff0000ff

#ff00ffff

#ff444444

#ff888888

#ff00ff00

#d3d3d3

#ffff00ff

#00000000

37

#ffffff

#ffff00

#ffa500

#ffc0cb

#a52a2a

#ff0000

Dac nu erau definite culorile ca resurse n fiierul res/values/colors.xml, n fiierul main.xml se putea scrie: android:background="#ffa500"

38

Pentru a putea funciona n fiierul gen/example.helloapp/R.java se definete automat clasa pentru culori astfel: public static final class colors {

// public static final int blue=0x7f080000;

}

Este suficient s se defineasc variabila final pentru o culoare pentru a le identifica pe toate sau chiar nici o variabil final.

39

LinearLayout aliniaz toate componentele pe o singur direcie vertical sau horizontal respectnd marginile dintre obiecte, alinierea acestora (gravity: left, center, right, top, bottom, center_vertical, fill_vertical, center_horizontal, fill_horizontal, fill) i importana (weight permite s ocupe spaiul liber rmas la printe, proporional cu importana sa; implicit este 0). Introduce scroll dac este nevoie. Opiunea se gsete n toolbar-ul Layouts.

n fiierul res/layout/main.xml:

42

TableLayout poziioneaz componentele ntr-un tabel (cu un numr arbitrar de rnduri i coloane) pe rnduri i coloane, fr liniere (nu se vd borduri la celule). n fiecare celul a tabelului se poate introduce o component grafic. Componentele grafice sunt introduse pe rnduri de la stnga la dreapta. Rndurile se redimensioneaz automat pentru a cuprinde cea mai lat coloan. Opiunea se gsete n toolbar-ul Layouts.

43


45

android:textColor="@color/red"

android:background="@color/orange"

android:layout_marginLeft="10px"

android:layout_marginTop="10px"

android:layout_marginRight="15px"/>

Dac nu se dorete completarea primei coloane, aceasta se poate umple cu o etichet fictiv astfel:

46

ListView afieaz o list ntr-o coloan cu scroll. Elementele listei sunt introduse automat de ListAdapter.

47

ntr-un proiect nou: Fiierul res/layout/view_items.xml:

48

Fiierul src/example.listView/ListViewAndroidActivity.java: package example.listView;

import android.app.ListActivity;


import android.view.View;

import android.widget.AdapterView;

import android.widget.AdapterView.OnItemClickListener;

import android.widget.ArrayAdapter;

import android.widget.ListView;


import android.widget.Toast;

public class ListViewAndroidActivity extends ListActivity {


@Override

49



setListAdapter(new ArrayAdapter(this,

R.layout.view_items, lista));

ListView lv = getListView();

lv.setTextFilterEnabled(true);

lv.setOnItemClickListener(new OnItemClickListener() {

public void onItemClick(AdapterView parent, View

view,

int position, long id) {

// When clicked, show a toast with the TextView text

Toast.makeText(getApplicationContext(), ((TextView)

view).getText(),

50

Toast.LENGTH_SHORT).show();

}

});

}

static final String[] lista = new String[] {

"element-1", "element-2","element-3", "element-4",

"element-5", "element-6",

"element-7", "element-8","element-9", "element-10",

"element-11", "element-12"

};

}

51

Clasa ListViewAndroidActivity extinde clasa ListActivity pentru a aduga asculttorul pe list. Metoda setTextFilterEnabled permite tastarea unui element pentru filtrare, aa cum se vede n figura a doua de mai sus. Metoda makeText afieaz vectorul de elemente lista n eticheta TextView definit n fiierul res/layout/view_items.xml.

52

RelativeLayout se specific poziia relativ a unui obiect fa de celelalte obiecte (left) sau fa de printe (top).

o android:layout_above o android:layout_alignBaseline o android:layout_alignBottom o android:layout_alignLeft o android:layout_alignRight o android:layout_alignTop o android:layout_below o android:layout_centerHorizontal If true, centers

this child horizontally within its parent. o android:layout_centerInParent If true, centers this

child horizontally and vertically within its parent. o android:layout_centerVertical If true, centers this

child vertically within its parent.

53

o android:layout_toLeftOf o android:layout_toRightOf

Oiunea se gsete n toolbar-ul Layouts.


54

android:layout_height="wrap_content"

android:padding="10px" >

55

android:layout_height="40px"


android:textColor="@color/green"

android:background="@color/yellow"

android:layout_below="@id/textview1"

android:layout_alignParentRight="true"

android:layout_marginLeft="10px"

android:layout_marginTop="10px"

android:layout_marginRight="15px"/>

56

android:background="@color/orange"

android:layout_toLeftOf="@id/textview2"

android:layout_alignTop="@id/textview1"/>

57

Gallery - aliniaz orizontal imagini dintr-o list, folosind scroll. Poziioneaz componenta selectat n centrul listei.

58

Opiunea se gsete n toolbar-ul Images&Media. ntr-un proiect nou se creeaz fiierul res/layout/main.xml:

59

Fiierul src/example.GalleryLayout/GalleryLayoutActivity.java: package example.galleryLayout;


import android.content.Context;

import android.content.res.TypedArray;



import android.view.ViewGroup;


import android.widget.AdapterView.OnItemClickListener;

import android.widget.BaseAdapter;

import android.widget.Gallery;

import android.widget.ImageView;


60

public class GalleryLayoutActivity extends Activity {


@Override




//creeaza o galerie de imagini prin preluarea din layout

Gallery gallery = (Gallery) findViewById(R.id.gallery);

//seteaza un ascultator pentru gallery

gallery.setAdapter(new ImageAdapter(this));

//ImageAdapter este o clasa definita mai jos

//instanteaza un ascultator de click pe item

61

gallery.setOnItemClickListener(new

OnItemClickListener() {

public void onItemClick(AdapterView parent, View v,

int position, long id) {

Toast.makeText(GalleryLayoutActivity.this,

"Pozitia in lista:" + position,

Toast.LENGTH_LONG).show();

}

});

}

public class ImageAdapter extends BaseAdapter {

int mGalleryItemBackground;

private Context mContext;

private Integer[] mImageIds = {

62

R.drawable.face_angry,

R.drawable.face_crying,

R.drawable.face_happy,

R.drawable.face_puke,

R.drawable.face_straight,

R.drawable.face_thinker,

R.drawable.face_upset

};

public ImageAdapter(Context c) {

mContext = c;

TypedArray attr =

mContext.obtainStyledAttributes(R.styleable.GalleryLayoutAc

tivity);

mGalleryItemBackground = attr.getResourceId(

63

R.styleable.GalleryLayoutActivity_android_galleryItemBackg

round, 0);

attr.recycle();

}

public int getCount() {

return mImageIds.length;

}

public Object getItem(int position) {

return position;

}

public long getItemId(int position) {

return position;

64

}

public View getView(int position, View convertView,

ViewGroup parent) {

ImageView imageView = new ImageView(mContext);

imageView.setImageResource(mImageIds[position]);

imageView.setLayoutParams(new

Gallery.LayoutParams(130, 130));

imageView.setScaleType(ImageView.ScaleType.FIT_XY);

imageView.setBackgroundResource(mGalleryItemBackgroun

d);

return imageView;

65

}

}

}

Fiierul res/values/attrs.xml:

n directorul res/drawable-mdpi se trec imaginile care urmeaz a fi afiate. Numele imaginilor trebuie s fie formate doar din litere mici, numere i _

66

Exist n fiecare proiect Eclipse (din Android 1.6) mai multe directoare drawable, fiecare corespunztor pentru diferite rezoluii (dpi - dots per inch). Acestea sunt necesare pentru a crea aplicaii pentru ecrane de dimensiuni i rezoluii diferite. Rezoluia n dpi este o msur a claritii unei imagini i exprim cte puncte pot s ncap ntr-un inch (1 inch = 2.54cm). Dimensiunea punctului depinde de fiecare echipament n parte.

67

n fiierele xml fiierele icon se trec fr extensie, astfel:

Directoarele drawable corespunztoare diferitelor rezoluii nu sunt specificate n fiierele xml. De exemplu, mai sus nu se trece:

68

GridLayout este un container care se adaug la alt manager (de exemplu, LinearLayout) i permite aranjarea pe mai multe rnduri i coloane de dimensiune variabil, pe poziii diferite n fiecare celul.

69

ntr-un nou proiect se creeaz prin drag-and-drop un GridLayout din Toolbar-ul de Layout, 4 etichete TextView din Toolbar-ul FormWidgets, se aduce fiierul res/values/colors.xml, se seteaz n Properties (n partea de jos a ferestrei Eclipse, lng Console, Problems, etc.) culorile de Backgroud i TextColor. Apoi, se aaz cu mouse-ul componentele grafice n poziiile dorite n GridLayout. Codul rezultat este urmtorul:

71

android:text="@string/label1" />

72

android:layout_columnSpan="2"

android:layout_gravity="right"

android:layout_row="3"

android:background="@color/green"


android:textColor="@color/black"/>

74

android:layout_column="3"

android:layout_gravity="fill_horizontal"

android:layout_row="0" />

76

GridView aranjeaz o gril cu scroll, cu un anumit numr de rnduri i coloane definite. Se gsete n toolbar-ul Composite.

77

ScrollView - coloan de componente grafice cu scroll vertical. Se gsete n toolbar-ul Composite.

78

Spinner - afieaz o singur component dintr-o list ntr-un cmp de text cu un rnd.

79

TabHost - aranjeaz mai multe ecrane n mai multe tab-uri Google Map View Web View

http://developer.android.com/resources/tutorials/views/index.html

80

Componente grafice de control

Buton cu o stare stabil Button toolbar Form Widgets

Buton cu dou stri stabile ToggleButton toolbar Form

Widgets

Caset de validare CheckBox toolbar Form Widgets

Buton radio RadioButton toolbar Form Widgets Zon de text toolbar TextFields. Sunt de mai multe tipuri:

zon de text editabil pe unul (PlainText) sau mai multe

81

rnduri (Multiline Text), parola (Password), adres (Postal Address), dat (Date), timp (Time), nume (Person Name), email (E-mail), telefon (Phone), numeric (Number), autocompletare (Autocomplete).

Bar de cutare SeekBar toolbar Form Widgets

82

List ascuns Spinner toolbar Form Widgets

Picker selectare dat, timp toolbar Time&Date

83

Componente grafice pentru ieiri

Eticheta TextView toolbar Form Widgets

Toast (popup) - afieaz un mesaj ntr-un popup disponibil

pentru o perioad scurt de timp deasupra ferestrei principale care rmne vizibil i interactiv.

84

Evenimente

Sunt generate de subclasele clasei View. Metodele care trateaz evenimente (asculttoare de

evenimente) trebuie suprascrise n aplicaie. Cele mai comune metode sunt:

o onClick() este atins componenta grafic sau se d click pe aceasta.

o onLongClick() se apas mai mult pe componenta grafic

o onFocusChange() se intr/ies deasupra componente grafice

o onKey() se apas o tast a dispozitivului o onTouch() se apas, se elibereaz, se mic cursorul o onCreateContextMenu() se creeaz meniul

contextual

85

Exemplu ComponenteGrafice

86

res/layout/main.xml

87

android:layout_width="match_parent"

android:layout_height="wrap_content" >

89

android:id="@+id/textView1"


android:layout_height="wrap_content"

android:text="nimic introdus" />

90

android:id="@+id/tableRow4"



91

android:textAppearance="?android:attr/textAppearanceSmal

l" />

95

android:prompt="@string/spinner_prompt" />

96

android:background="@color/white"

android:layout_marginTop="5dip"

android:layout_marginBottom="5dip" />

98


99

res/values/strings.xml Hello World, ComponenteGraficeActivity! ComponenteGrafice Alege un element Element-1 Element-2 Element-3 Element-4 Element-5

100

src/example.curs/ComponenteGraficeActivity.java package example.curs;




import android.view.View.OnClickListener;


import android.widget.AdapterView.OnItemSelectedListener;

import android.widget.ArrayAdapter;

import android.widget.Button;

import android.widget.CheckBox;

import android.widget.EditText;

import android.widget.RadioButton;

import android.widget.Spinner;


101

import android.widget.ToggleButton;

public class ComponenteGraficeActivity extends Activity {

private Button button;

private EditText editText1, editText2;

private TextView textView1, textView2, textView3,

textView4, textView5;

private CheckBox checkBox;

private RadioButton radioButton1, radioButton2;

private Spinner spinner1;

private ToggleButton toggleButton1;





102

//o zona de text, al carei continut e afisat la apasarea

//unui buton intr-o eticheta

button = (Button)this.findViewById(R.id.button1);

editText1 = (EditText)this.findViewById(R.id.editText1);

textView1 =

(TextView)this.findViewById(R.id.textView1);

this.button.setOnClickListener(new OnClickListener() {

public void onClick(View v) {

textView1.setText(editText1.getText());

}

});

//o casuta de validare

checkBox =

(CheckBox)this.findViewById(R.id.checkBox1);

checkBox.setOnClickListener(checkBoxListener);

103

textView2 =


//un grup cu 2 butoane radio

radioButton1 =

(RadioButton)this.findViewById(R.id.radioButton1);

radioButton2 =

(RadioButton)this.findViewById(R.id.radioButton2);

radioButton1.setOnClickListener(radioButton1Listener);

radioButton2.setOnClickListener(radioButton2Listener);

textView3 =


//spinner- la selectie se afiseaza valoarea in eticheta

spinner1 = (Spinner)this.findViewById(R.id.spinner1);

ArrayAdapter adapterSpinner =

104

ArrayAdapter.createFromResource(

this, R.array.elements_array,

android.R.layout.simple_spinner_item);

adapterSpinner.setDropDownViewResource(android.R.layout

.simple_spinner_dropdown_item);

spinner1.setAdapter(adapterSpinner);

spinner1.setOnItemSelectedListener(new

MyOnItemSelectedListener());

textView4 =


//zona de text ptr scriere numar afisat la selectia

//butonului cu 2 stari in eticheta alaturata


toggleButton1 =

105

(ToggleButton)this.findViewById(R.id.toggleButton1);

textView5 =


toggleButton1.setOnClickListener(toggleButton1Listener);

}

//la click pe casuta de validare se afiseaza intr-o eticheta

selectia

OnClickListener checkBoxListener =

new OnClickListener() {


if(checkBox.isChecked())

textView2.setText("bifat");

else

textView2.setText("ne-bifat");

}

106

};

OnClickListener radioButton1Listener =



if(radioButton1.isChecked())

textView3.setText("selectat radioButton1");

}

};

OnClickListener radioButton2Listener =



if(radioButton2.isChecked())

textView3.setText("selectat radioButton2");

}

};

107

public class MyOnItemSelectedListener implements

OnItemSelectedListener {

public void onItemSelected(AdapterView

parent,View view, int position, long id) {

textView4.setText(spinner1.getItemAtPosition(position).toStri

ng());

}

public void onNothingSelected(AdapterView parent) {

// Do nothing.

}

}

108

OnClickListener toggleButton1Listener =



textView5.setText(editText2.getText());

}

};

}

109

ActionBar

afieaz titlul pentru Activity (aplicaia care ruleaza) i icon-ul aplicaiei n stnga sus,

ActionBar este cuprins n tema folosit pentru Activity Permite adugarea de butoane importante pentru aplicaie

(localizarea utilizatorului n aplicaie, moduri de navigare, cutare), un fel de meniu contextual,

Este mprit n:

1. Icon aplicaie 2. View control permite navigarea ntre diferite moduri

de vizualizare (exemplu, meniu drop-down, tab-uri). Dac

110

aplicaia nu are mai multe moduri de vizualizare, atunci este afiat numele aplicaiei

3. Action buttons cele mai importante butoane cu aciuni din cadrul aplicaiei. Pot fi mai multe butoane, dar nu toate sunt vizualizate la un moment dat. Cele nevizualizate sunt trecute n Action overflow. Poate fi creata i o bar cu butoane n partea de jos a ecranului.

4. Action overflow aciunile mai rar folosite sunt trecute aici. Programatorul poate include aici butoane particulare, care pot apare i la apsarea butonului Menu al dispozitivului (dac are).

111

ActionBar depinde de versiunea de Android: o pentru versiuni Android 3.1 sau mai mari ActionBar

este cuprins n tema Holo (sau n una descedent din aceasta) implicit pentru atributele targetSdkVersion sau minSdkVersion cu valoarea minim 11 n fiierul AndroidManifest.xml (din rdcin)

...

o pentru versiuni Android 2.1 sau mai mic cere includerea bibliotecii Android Support Library n aplicaie: n fiierul src/com.example.actionbarexample

/ActionBarExample.java:

112

public class MainActivity extends ActionBarActivity { ... }

n fiierul AndroidManifest.xml :

ActionBar poate fi personalizat prin res/values/styles.xml,

themes.xml.

113

Adugarea de butoane la ActionBar

se realizeaz n fiiere xml din directorul res/menu/. Se adaug elemente Item astfel:

MenuCategory determin prioritatea item-ului. Valoarea secondary, exprim opiuni secundare introduse de programator.

Icon determin imaginea asociat item-ului. Imaginea trebuie s existe n res/drawable.

114

orderInCategory determin ordinea de afiare n cadrul grupului.

showAsAction determin cnd i cum trebuie s apar. Valoarea never, nu va fi afiat niciodat. Valoarea always, va fi afiat ntotdeauna. Valoarea ifRoom, va fi afiat doar dac este spaiu, altfel este trecut la Action overflow.

http://developer.android.com/design/downloads/index.html#action-bar-icon-pack se poate face download pentru icon-uri butoanelor din ActionBar

Pentru a aduga butoane la ActionBar n fiierul principal java se creeaza metoda:

public boolean onCreateOptionsMenu(Menu menu) {

115

getMenuInflater().inflate(R.menu.action_bar_ex

ample, menu);

return true;

}

Tot n fiierul principal java se creeaz i metoda: public boolean onOptionsItemSelected(MenuItem

item) {

// Handle presses on the action bar items

switch (item.getItemId()) {

case R.id.action_edit:

doOnActionEditButton();

return true;

case R.id.action_done:

doOnActionDone();

return true;

116

default:

return super.onOptionsItemSelected(item);

}

}

117

Aplicaie ActionBarExample n ActionBar sunt trecute trei butoane: Ok (are ca efect preluarea irului de caractere din zona de text i afiarea acestuia n eticheta de mai jos), Done i Anything (deschid un mesaj de notificare de tip Toast n partea de jos a ecranului). n containerul principal este o zon de text, un buton Ok (care trateaz acelai eveniment ca i butonul Ok din ActionBar) i o etichet. n primele trei figuri ale aplicaiei, butonul Anything din ActionBar are proprietatea android:showAsAction="ifRoom", ceea ce arat c va fi afiat doar dac este loc. Dac nu este loc, va fi afiat la selectarea opiunii Menu (fig. 3). Fig.1 arat aciunea butonului Ok din ActionBar. Fig. 2 arat aciunea butonului Ok din containerul principal.

118

1. 2. 3. n fig. 4 butonul Anything din ActionBar are proprietatea android:showAsAction="always", ceea ce arat c va fi afiat ntotdeauna. Dac sunt efectuate operaii de editare a

119

zonei de text, atunci ActionBar afieaz implicit butoane de editare (Cut, Copy, Paste).

4. 5. 6.

120

Fiierul ActionBarExample.java import android.app.Activity;


import android.view.Menu;

import android.view.MenuInflater;

import android.view.MenuItem;


import android.view.View.OnClickListener;

import android.widget.Button;

import android.widget.EditText;



public class ActionBarExample extends Activity {

private Button button1;

121

private EditText editText1;

private TextView textView1;

@Override

protected void onCreate(Bundle savedInstanceState) {


setContentView(R.layout.activity_action_bar_example);

doOnButton1();

}

@Override

public boolean onCreateOptionsMenu(Menu menu) {

// Inflate the menu; this adds items to the action bar if

it is present.

122

getMenuInflater().inflate(R.menu.action_bar_example,

menu);

return true;

}

@Override

public boolean onOptionsItemSelected(MenuItem item) {

// Handle presses on the action bar items

switch (item.getItemId()) {

case R.id.action_edit:

doOnActionEditButton();

return true;

case R.id.action_done:

doOnActionDone();

return true;

case R.id.action_anything:

123

doOnActionAnything();

return true;

default:

return super.onOptionsItemSelected(item);

}

}

public void doOnButton1(){

button1 = (Button)this.findViewById(R.id.button1);


textView1 =


this.button1.setOnClickListener(new OnClickListener() {


textView1.setText("Button- "+editText1.getText());

}

});

124

}

public void doOnActionEditButton(){


textView1 =


textView1.setText("ActionBar- "+editText1.getText());

}

public void doOnActionDone(){

Toast.makeText(this, "selectat Done",

Toast.LENGTH_SHORT).show();

}

public void doOnActionAnything(){

Toast.makeText(this, "selectat Anything",

Toast.LENGTH_LONG).show();

}

125

}

Fiierul action_bar_example.xml

126

android:title="@string/action_edit"

android:icon="@drawable/ic_ok"

android:orderInCategory="1"

android:showAsAction="always"

android:menuCategory="secondary"/>

127

android:icon="@drawable/ic_anything"

android:orderInCategory="3"

android:showAsAction="always"

android:menuCategory="secondary"/>

128

Style

proprieti care definesc modul de vizualizare al unei componente grafice.

Sunt definite n res/values/styles.xml Se poate specifica nlimea, bordura, caracteristicile

fontului, culorile de background sau foreground, etc. Este predefinit cnd se creeaz un nou proiect, dar pot fi

definite de programator. Theme

Tema aleas pentru ntraga aplicaie Se definete atunci cnd se creeaz un nou proiect sau se

seteaz n fiierul AndroidManifest.xml

129

Exemplu de folosire a style/theme

1. 2.

130

Pentru exemplul de la ActionBar, n fiierul AndroidManifest.xml se modific AppTheme cu CustomThemeBlue/CustomThemeMagenta

Pentru exemplul de la ActionBar n fig.1 se modific n fiierul res/values/styles.xml #b0b0ff

131

@color/magenta

@color/magenta

Pentru exemplul de la ActionBar n fig.2 se modific n fiierul res/values/styles.xml #ff0000ff

132

@color/blue

@color/blue

curs gui android

Documents