Tema 5: Concepte fundamentale referitor la grafică.

Grafica bi- și tridimensională în Android.

Grafica digitală este un domeniu al informaticii care acoperă toate aspectele legate de prelucrarea
imaginilor utilizând un computer.

Grafica digitală se divizează în mai multe categorii:

1) Grafica bidimensională (se constituie din 2 algoritmi de prezentare – grafică raster și grafică
vector);
2) Grafica tridimensională (este des utilizată în animație, spoturi publicitare, jocuri la computer etc.);
3) Grafica animată;
4) Grafica video etc.
Toate imaginile în format electronic se împart în două tipuri de bază și anume: imagini raster
(cunoscute și sub numele de "bitmap") - realizate cu ajutorul unor programe de tipul Corel PhotoPaint ori
Adobe PhotoShop și imagini vectoriale realizate cu programe cum ar fi CorelDraw sau Adobe Illustrator.
La baza lor, imaginile raster sunt formate din puncte legate între ele sub forma unei hărți de puncte
(pixeli), în timp ce imaginile vectoriale sunt compuse din linii interconectate. Cuvântul "vector" este
sinonim cu linie. Imaginile vectoriale pot fi obținute și printr-o conversie dintr-o imagine raster, conversie
realizată cu programe cum ar fi CorelTrace sau EuroVector.
Grafica rastru este folosită pentru design grafic, web design, retușare fotografii, etc. O imagine
raster este în general definită ca o matrice de valori cunoscute sub numele de pixeli. Fiecare pixel (picture
element) este un mic pătrat colorat. Acestuia îi este asociată una sau mai multe cifre, care definesc
culoarea pe care el trebuie să o afișeze. În cea mai simplă formă de descriere a unei imagini, fiecare pixel
este definit prin trei grupe de câte 8 biți (24 de biți în total), cu valori între 0 și 255, definind cantitatea de
roșu, verde și albastru care se combină pentru a obține o anumită culoare. În proporțiile corecte roșu,
verde și albastru pot fi combinate pentru a forma negru, alb, 254 de tonuri de gri și o mare varietate de
culori (16,777,216 în total).
Imaginile raster sunt dependente de rezoluția pe care o au. Aceasta se exprimă în puncte pe inch (dots
per inch) sau dpi. Redimensionarea unei imagini raster poate fi un proces înșelător. Micșorarea ei în
general nu ridică probleme. Are loc o reducere a dimensiunii pixelilor ceea ce face ca adeseori imaginea
să devină mai precisă. Imaginile bitmap/raster sunt alcătuite dintr-un număr fix de pixeli. Sporirea
dimensiunii acesteia duce la crearea mai multor pixeli de aceeași culoare și implicit la reducerea calității
imaginii. Datorită acestui fapt ele pot apărea zimțuite, pierzându-și din detalii în momentul în care sunt
mărite sau printate la o rezoluție mai mare decât cea pe care o au de fapt.
Grafica vectorială este folosită în principal pentru realizarea de desene, logo-uri, desene tehnice,
layout-uri pentru site-uri web, etc. Imaginile vectoriale reprezintă colecții de linii și curbe conectate între
ele. La crearea unei imagini într-un program de grafică vectorială, în pagină se inserează noduri conectate
între ele prin linii sau curbe. Fiecare nod, linie sau curbă e definită în desen prin coordonate matematice,
care implică poziția nodului, grosimea liniei etc.
Imaginile vectoriale sunt definite matematic și NU ca o hartă de pixeli. Ele pot fi mărite și micșorate
fără pierderi de calitate. Programul recalculează funcția matematică asociată obiectului modificându-i
dimensiunile fără pierderi. Spre deosebire de imaginile raster, calitatea nu este limitată de numărul de
puncte pe inch (dots per inch) sau de rezoluția scanării, motiv pentru care imaginile vectoriale sunt ideale
în activitatea de printare.
 DRAWABLES OVERVIEW
Când trebuie să afișați imagini statice în aplicația dvs., puteți utiliza clasa Drawable și subclasele
sale pentru a desena forme și imagini. O Drawable este o abstracție generală pentru ceva ce poate fi tras.
Diferitele subclase ajută la scenarii de imagine specifice și le puteți extinde pentru a defini propriile
obiecte trase care se comportă în moduri unice.
Există două moduri de a defini și instanțiza un Drawable pe lângă utilizarea constructorilor de clasă:
 o resursă de imagine (un fișier bitmap) salvat în proiectul dvs.
 o resursă XML care definește proprietățile trasabile.
 Creare desene din imaginile de resurse
Puteți adăuga grafice în aplicația dvs. prin trimiterea unui fișier imagine din resursele proiectului.
Tipurile de fișiere acceptate sunt PNG (preferat), JPG (acceptabil) și GIF (descurajat). Pictogramele de
aplicații, logo-urile și alte elemente grafice, cum ar fi cele folosite în jocuri, sunt potrivite pentru această
tehnică.
Pentru a utiliza o resursă de imagine, adăugați fișierul în directorul res/drawable/ al proiectului dvs.
Odată ce vă aflați în proiect, puteți face referire la resursa imaginii din codul sau aspectul XML. Oricum,
se face referire la utilizarea unui ID de resursă, care este numele fișierului fără extensia de tip de fișier. De
exemplu, consultați my_image.png drept my_image.

Notă: Resursele de imagine plasate în directorul res/drawable/ pot fi optimizate automat prin
comprimarea imaginilor fără pierderi de către instrumentul aapt în timpul procesului de construire. De
exemplu, un PNG de culoare adevărată, care nu necesită mai mult de 256 de culori, poate fi convertit într-
un PNG pe 8 biți cu o paletă de culori. Acest lucru are ca rezultat o imagine de o calitate egală, dar care
necesită mai puțină memorie. Ca rezultat, binarele de imagine plasate în acest director se pot modifica la
momentul construirii. Dacă intenționați să citiți o imagine ca un bitstream pentru a o transforma într-un
bitmap, puneți-vă imaginile în directorul res/raw/, unde instrumentul aapt nu le modifică.

Următorul fragment de cod demonstrează cum se construiește un ImageView care utilizează o

imagine creată dintr-o resursă trasabilă și o adaugă la aspect:

private lateinit var linearLayout: LinearLayout

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

// Instantiate an ImageView and define its properties

val i = ImageView(this).apply {
setImageResource(R.drawable.my_image)

// set the ImageView bounds to match the Drawable's dimensions

adjustViewBounds = true
layoutParams = LayoutParams(LayoutParams.WRAP_CONTENT,
LayoutParams.WRAP_CONTENT)
}

// Create a LinearLayout in which to add the ImageView

linearLayout = LinearLayout(this).apply {

// Add the ImageView to the layout and set the layout as the content view
addView(i)
}

setContentView(linearLayout)
}
 Fragmentul XML de mai jos arată cum se poate adăuga o resursă drawable unui ImageView în
structura XML:
<ImageView
Android: layout_width = "wrap_content"
Android: layout_height = "wrap_content"
android: src = "@ trasabil / my_image" />

 Creare desene din resurse XML

Dacă există un obiect Drawable care doriți să îl creați, care nu depinde inițial de variabilele definite de
interacțiunea cu codul sau cu utilizatorul, definirea Drawable în XML este o opțiune bună. Chiar dacă vă
așteptați ca Drawable să își modifice proprietățile în timpul interacțiunii utilizatorului cu aplicația dvs.,
trebuie să luați în considerare definirea obiectului în XML, deoarece puteți modifica proprietățile după ce
a fost instanțiat.
După ce ați definit Drawable în XML, salvați fișierul în directorul res/drawable/ al proiectului dvs.

SHAPE DRAWABLES
Un obiect ShapeDrawable poate fi o opțiune bună atunci când doriți să desenați dinamic o grafică
bidimensională. Puteți programabil desena obiecte primitive pe un ShapeDrawable și puteți aplica stilurile
de care are nevoie aplicația dvs.
ShapeDrawable este o subclasă din Drawable. Din acest motiv, puteți utiliza un ShapeDrawable
ori de câte ori este așteptat un Drawable. De exemplu, puteți utiliza un obiect ShapeDrawable pentru a
seta fundalul unei imagini, trecând-o la metoda setBackgroundDrawable() din vizualizare. De asemenea,
puteți să vă desenați forma ca pe o vizualizare particularizată și să o adăugați într-un aspect în aplicația
dvs.
Deoarece ShapeDrawable are propria metodă draw(), puteți crea o subclasă de View care
desenează obiectul ShapeDrawable în timpul evenimentului onDraw() , după cum se arată în exemplul
următor de cod:

class CustodrawableView(context: Context) : View(context) {

private val drawable: ShapeDrawable = run {
val x = 10
val y = 10
val width = 300
val height = 50

ShapeDrawable(OvalShape()).apply {
// If the color isn't set, the shape uses black as the default.
paint.color = 0xff74AC23.toInt()
// If the bounds aren't set, the shape can't be drawn.
setBounds(x, y, x + width, y + height)
}
}

override fun onDraw(canvas: Canvas) {

mDrawable.draw(canvas)
}
}

Clasa ShapeDrawable, la fel ca multe alte tipuri din pachetul android.graphics.drawable, vă

permite să definiți diferite proprietăți ale obiectului utilizând metode publice. Unele exemple de
proprietăți pe care ați putea dori să le modificați includ transparența, filtrul de culoare, oscilarea,
opacitatea și culoarea.
 VECTOR OVERVIEW DRAWABLES
VectorDrawable este un vector definit într-un fișier XML ca un set de puncte, linii și curbe,
împreună cu informațiile de culoare asociate. Avantajul major al utilizării unui vector care poate fi tras
este scalabilitatea imaginii. Acesta poate fi scalat fără pierderea calității afișării, ceea ce înseamnă că
același fișier este redimensionat pentru diferite densități ale ecranului fără a pierde calitatea imaginii.
Acest lucru are ca rezultat fișiere mai mici APK și mai puțin întreținere a dezvoltatorilor. De asemenea,
puteți utiliza imagini vectoriale pentru animație utilizând mai multe fișiere XML în loc de mai multe
imagini pentru fiecare rezoluție a afișajului.
Android 5.0 (nivelul 21 al API) a fost prima versiune care acceptă în mod oficial VectorDrawable și
AnimatedVectorDrawable.
Clasa VectorDrawable definește un obiect VectorDrawable static. Similar cu formatul SVG, fiecare
grafic vectorial este definit ca o ierarhie, care este alcătuită din obiecte de path și de group . Fiecare path
conține geometria conturului obiectului, iar group conține detalii pentru transformare. Toate căile sunt
desenate în aceeași ordine în care apar în fișierul XML.

Exemplu XML
VectorDrawable XML care redă o imagine a unei baterii în modul de încărcare.

<!-- res/drawable/battery_charging.xml -->

<vector xmlns:android="http://schemas.android.com/apk/res/android"
<!-- intrinsic size of the drawable -->
android:height="24dp"
android:width="24dp"
<!-- size of the virtual canvas -->
android:viewportWidth="24.0"
android:viewportHeight="24.0">
<group
android:name="rotationGroup"
android:pivotX="10.0"
android:pivotY="10.0"
android:rotation="15.0" >
<path
android:name="vect"
android:fillColor="#FF000000"
android:pathData="M15.67,4H14V2h-4v2H8.33C7.6,4 7,4.6
7,5.33V9h4.93L13,7v2h4V5.33C17,4.6 16.4,4 15.67,4z"
android:fillAlpha=".3"/>
<path
android:name="draw"
android:fillColor="#FF000000"
android:pathData="M13,12.5h2L11,20v-5.5H9L11.93,9H7v11.67C7,21.4
7.6,22 8.33,22h7.33c0.74,0 1.34,-0.6 1.34,-1.33V9h-4v3.5z"/>
</group>
</vector>

Clasa AnimatedVectorDrawable adaugă animație proprietăților unui grafic vectorial.

 Manipularea bitmap-urilor
Există o serie de motive pentru care încărcarea bitmaps în aplicația dvs. Android este dificilă:
 Bitmap-urile pot foarte ușor să epuizeze bugetul de memorie al unei aplicații. De exemplu,
camera de pe telefonul Pixel face fotografii de până la 4048x3036 pixeli (12 megapixeli).
Dacă configurația bitmap este ARGB_8888 , implicit pentru Android 2.3 (API nivel 9) și mai
mare, încărcarea unei singure fotografii în memorie necesită aproximativ 48 MB de memorie
(4048*3036*4 octeți). O astfel de cerere mare de memorie poate să utilizeze imediat toată
memoria disponibilă pentru aplicație.
 Încărcarea bitmap-urilor pe firul UI poate degrada performanța aplicației dvs., determinând
reacții rapide sau chiar mesaje ANR (Aplicația Nu Răspunde). Prin urmare, este important să
gestionați firele în mod corespunzător atunci când lucrați cu bitmap-uri.
 Dacă aplicația dvs. încarcă mai multe bitmap-uri în memorie, trebuie să gestionați cu pricepere
memoria și cache-ul de discuri. În caz contrar, reacția și fluiditatea interfeței UI a aplicației
dvs. pot suferi.
În majoritatea cazurilor, este recomandabil să utilizați biblioteca Glide pentru a prelua, decoda și
afișa fișiere bitmaps în aplicația dvs. Glide abstractizează cea mai mare parte a complexității în
gestionarea acestor și alte sarcini legate de lucrul cu bitmap-uri și alte imagini pe Android. De asemenea,
putem opta pentru lucrul direct cu API-urile de nivel inferior încorporate în cadrul Android.

RESURSE COLOR
Pentru definirea unei resurse de tip culoare, este necesară utilizarea tag-ului <color>, specificarea
numelui, precum şi a codului potrivit utilizând una dintre notaţiile:
 #RGB
 #RRGGBB
 #ARGB
 #AARRGGBB,
unde A desemnează gradul de transparenţă, iar R, G, B valorile culorilor roşu, verde şi albastru.
<color name="opaque_blue">#00F</color>

OPENGL ES
Android include suport pentru grafica 2D și 3D de înaltă performanță cu OpenGL (OpenGL®), în
special OpenGL ES API. OpenGL este un API grafic cross-platform care specifică o interfață software
standard pentru hardware-ul de procesare grafică 3D. OpenGL ES este o ”aromă” a specificației OpenGL
destinată dispozitivelor încorporate. Android acceptă mai multe versiuni ale OpenGL ES API:
 OpenGL ES 1.0 și 1.1 - Această specificație API este acceptată de Android 1.0 și versiuni
ulterioare.
 OpenGL ES 2.0 - Această specificație API este susținută de Android 2.2 (API nivel 8) și mai
mare.
 OpenGL ES 3.0 - Această specificație API este acceptată de Android 4.3 (API nivel 18) și mai
mare.
 OpenGL ES 3.1 - Această specificație API este susținută de Android 5.0 (nivel 21 API) și mai
mare.
Android acceptă OpenGL atât prin API-ul său cadru, cât și prin Kitul Nativ de Dezvoltare (NDK).
Acest subiect se concentrează pe interfețele cadru Android.
Există două clase fundamentale în cadrul Android care vă permit să creați și să manipulați grafice cu
OpenGL ES API: GLSurfaceView și GLSurfaceView.Renderer. Dacă obiectivul dvs. este de a utiliza
OpenGL în aplicația dvs. Android, înțelegerea modului de implementare a acestor clase într-o activitate ar
trebui să fie primul dvs. obiectiv.
 GLSurfaceView
Această clasă este o View în care puteți desena și manipula obiecte folosind apeluri API OpenGL
și este similară funcției cu un SurfaceView. Puteți folosi această clasă creând o instanță a
GLSurfaceView și adăugând Renderer la ea.
 GLSurfaceView.Renderer
Această interfață definește metodele necesare pentru desenarea grafică într-un GLSurfaceView .
Trebuie să furnizați o implementare a acestei interfețe ca o clasă separată și să o atașați la
GLSurfaceView dvs. GLSurfaceView folosind GLSurfaceView.setRenderer().
Interfața GLSurfaceView.Renderer necesită implementarea următoarelor metode:
 onSurfaceCreated(): Sistemul numește această metodă o singură dată, la crearea
GLSurfaceView. Utilizați această metodă pentru a efectua acțiuni care trebuie să se
întâmple o singură dată, cum ar fi setarea parametrilor de mediu OpenGL sau inițializarea
obiectelor grafice OpenGL.
 onDrawFrame(): Sistemul numește această metodă la fiecare redesenare GLSurfaceView.
Utilizați această metodă ca punct principal de execuție pentru desenarea (și re-desenarea)
obiectelor grafice.
 onSurfaceChanged(): Sistemul numește această metodă atunci când se modifică geometria
GLSurfaceView, inclusiv modificările dimensiunii GLSurfaceView sau orientarea
ecranului dispozitivului. De exemplu, sistemul apelează această metodă atunci când
dispozitivul se schimbă de la portrait la orientare landscape. Utilizați această metodă
pentru a răspunde la modificările din containerul GLSurfaceView.