Componentele grafice corespund elementelor care vor permite utilizatorului să interacționeze cu sistemul, atunci când vorbim de GUI ne referim la interfețele grafice cu utilizatorul, prin urmare aceste interfețe sunt construite prin elemente grafice precum butoane, meniuri, pictograme, câmpuri de text, etichete etc. text printre altele, o GUI combină designul vizual și evenimentele asociate cu acel design, așa că dacă adăugăm un buton, trebuie să programăm evenimentul asociat cu acel buton atunci când este apăsat de un utilizator.
După cum am menționat, să ne concentrăm asupra componentelor grafice care sunt utilizate din fișierele XML, să vedem câteva dintre proprietățile menționate mai sus.
Proprietăți de bază.
Să vedem câteva proprietăți de bază folosite în componentele grafice, acestea pot fi aplicate oricărei componente indiferent de tipul acesteia, deoarece așa cum am menționat toate componentele sunt Vizualizări, astfel încât au aceleași proprietăți, unele dintre cele mai utilizate sunt:
android: id.
Proprietate foarte importantă deoarece permite definirea unui identificator pentru control, această proprietate este atribuită oricărei vizualizări, de exemplu dacă este atribuită unui câmp de introducere a datelor atunci aceasta va fi folosită pentru a capta informațiile utilizatorului, așa că trebuie să folosim un nume diferențiator. este clar.
Modul corect de a genera un identificator este următorul:
android:id="@+id/miTextField"
Simbolul @+id/ înseamnă că se generează un nou identificator, aceasta va face clasa R. din pachetul gen al proiectului, creați o referință la acest obiect, astfel încât să poată fi manipulat ulterior prin cod.
În exemplu, identificatorul „myTextField” pentru componenta.
android:layout_width.
Definește lățimea asociată vederii, este o proprietate obligatorie și valoarea acesteia poate fi definită în valori absolute sau prin indicarea uneia dintre următoarele două valori:
-
wrap_content (Ocupă spațiul conform conținutului său)
-
parinte potrivit (Ocupă tot spațiul disponibil)
Exemplu:
android:layout_width="match_parent"oriceandroid:layout_width="290dp"
android:layout_height.
Definește înălțimea asociată vederii, este o proprietate obligatorie și valoarea acesteia poate fi definită în valori absolute sau indicând una dintre următoarele două valori:
-
wrap_content (Ocupă spațiul conform conținutului său)
-
parinte potrivit (Ocupă tot spațiul disponibil)
Exemplu:
android:layout_height="wrap_content"oriceandroid:layout_height="58dp"
android:layout_margin.
Definește o marjă pentru componentă, permițând stabilirea unui spațiu deasupra, dedesubt și pe laturile acesteia, ca variante în cazul în care se dorește să se acorde spații independente, se poate face folosind proprietățile marginLeft, marginRight, marginTop sau marginBottom (sau toate)
Exemplu: android:layout_margin="20dp" | android:layout_marginTop="20dp" | android:layout_marginLeft="20dp" | android:layout_marginRight="20dp" | android:layout_marginBottom="20dp"
Android: pont.
Această proprietate permite ca textul să fie afișat în control ca ajutor în timp ce utilizatorul nu a introdus încă informații. (De preferință față de proprietatea text)
Exemplu: android:hint="Introduceți numele"
android:inputType.
Determină ce tip de intrare va fi permis pentru caseta de text, aceasta permite un fel de validare a datelor și, de asemenea, spune sistemului de operare ce tip de tastatură (virtuală) să folosească.
Printre opțiunile pe care le putem asocia cu această proprietate se numără unele precum:
- Text
- număr
- textură
- parola text
- telefon
- întâlnire
- TextEmailAddress
Există multe alte opțiuni care pot fi folosite în funcție de nevoie.
Exemplu: android:inputType="număr" | android:inputType="textEmailAddress"
android:textSize.
Definește o dimensiune pentru textul care urmează să fie afișat pe ecran, unitățile de măsură trebuie luate în considerare acolo unde sp este folosit pentru texte
Exemplu: android:textSize="25sp"
android:styletext.
Definește un stil pentru text, putând defini textul ca normal, bold, italic (sau ambele).
Exemplu: android:textStyle="bold" | android:textStyle="italic" | android:textStyle="bold|italic"
android:textColor.
Definește o culoare pentru text, putând adăuga o culoare din fișierul de proprietăți „culori” sau o valoare hexazecimală
Exemplu: android:textColor="@color/teal_700" | android:textColor="#9C27B0"
android:backgroundTint.
Definește o culoare de fundal pentru componentă, puteți obține și culoarea din proprietățile „culori” sau o valoare hexazecimală
Exemplu: android:backgroundTint="@color/teal_200" | android:backgroundTint="#FF5722"
android:text.
Definește conținutul textual asociat cu vizualizarea. Deși valoarea sa poate fi atribuită direct, este foarte recomandat să utilizați fișierul cu șiruri disponibil în folderul de resurse.
Exemplu: android:text="Bienvenidos" | android:text="@string/title"
Această proprietate este comună în vizualizările care afișează text în interfața dispozitivului. Următorul ecran arată fișierul de resurse strings.xml unde sunt adăugate diferite valori pentru texte
iar ulterior aceste valori sunt accesate din vizualizări
După ștergerea proprietăților anterioare, să vedem care sunt componentele grafice de bază.
Buton.
Acestea corespund butoanelor de bază pe care le cunoaștem, arată doar un buton cu textul său intern și o marjă definită.
Butonul ar îndeplini funcția de bază de așteptare a unui eveniment atunci când este apăsat.
buton de comutare
Tipul ToggleButton corespunde unui tip de buton care poate fi ținut în 2 stări posibile, apăsat sau neapăsat, pentru aceasta nu se definește doar o singură proprietate text, ci 2 în funcție de starea pe care o are în momentul de față, folosind proprietățile lui android: textOn și android:textOff.
La fel ca butoanele tradiționale, ToggleButton poate fi programat să răspundă la evenimentul de clic, dar probabil că trebuie doar să știți în ce stare se află. Acest lucru se poate face prin consultarea metodei isChecked(), care returnează valoarea true în cazul în care este apăsată și false în caz contrar.
naveta
Acest control poate simula un comutator foarte asemănător cu modul în care funcționează ToggleButton, dar cu un aspect vizual diferit.
Amintiți-vă că, în funcție de versiunea de Android pe care o folosim, aspectul vizual al componentelor noastre se poate schimba, în acest caz controlerul Switch pentru versiunile Android 5.0 și ulterioare ar arăta astfel:
ImageButton
Acest tip de buton vă permite să legați o imagine la aceasta pentru a fi afișată utilizatorului în loc de un text, așa cum este de obicei, pentru aceasta putem lua imaginea din folderele /res/drawable și o încărcăm folosind proprietatea android:src, în acest caz vom folosi o imagine direct din resursele Android.
TextView
Acestea corespund etichetelor de bază de text care sunt afișate utilizatorilor, acestea în alte limbi sunt cunoscute sub denumirea de etichete și permit afișarea unui text asociat proprietății android:text, aceste etichete au alte proprietăți care vă permit să le manipulați dimensiunea, fundalul culoare, culoare și tip de font, stil etc.
editează textul
Vizualizarea Android EditText este echivalentă cu ASP și C# Textbox sau JAVA JTextField, este un control care permite capturarea textului tastat de utilizator în timpul execuției.
caseta de selecție
Controlul casetei de selectare este utilizat pentru a verifica sau debifa opțiunile dintr-o aplicație. Modul de definire a acestuia în interfață și proprietățile disponibile pentru manipularea sa prin cod sunt analoge cu cele comentate în controlul ToogleButton.
Acest control moștenește din controlul TextView, astfel încât toate opțiunile de formatare deja menționate pentru acest control sunt valabile și pentru caseta de verificare.
În codul aplicației, puteți verifica dacă acest control este selectat sau nu prin metoda isChecked() care returnează valoarea lui ADEVĂRAT dacă ai fost selectat sau fals în caz contrar, puteți folosi și metoda setChecked(value) pentru a seta o stare specifică pentru control, unde valoare ADEVĂRAT ar fi pentru selectat și fals prin neselectat.
Evenimentul care este programat în mod normal pentru acest control și care este executat de fiecare dată când starea lui se schimbă (selectat/neselectat) este onCheckedChanged.
buton de radio
La fel ca controlul CheckBox, RadioButton servește pentru a bifa sau debifa o anumită opțiune, diferența este în tipul de selecție pe care doriți să o faceți. Butoanele Radio sunt utilizate în mod normal în grupuri pentru a defini un set de opțiuni din care puteți selecta doar una, adică fiecare opțiune se exclud reciproc, astfel încât atunci când selectați o opțiune, cea care a fost selectată anterior va fi debifată automat. Aceste grupuri sunt definite de elementul RadioGroup, care la rândul său va conține toate elementele RadioButton care reprezintă opțiunile.
RadioGroups poate seta proprietatea android:orientation la „Vertical” sau „Orizontal” pentru a determina cum vor fi ordonate butoanele Radio pe care le conține.
RadioButton, la rândul său, pe lângă lățime și înălțime, trebuie să definească proprietatea android:text pentru a asocia textul opțiunii reprezentate și android:id pentru a asocia un cod controlului astfel încât să poată fi manipulat din logica aplicației.
Pentru a manipula controlul din logica aplicatiei se pot folosi diferite metode, printre care gasim check(as merge) care este folosit pentru a seta butonul radio identificat cu id-ul care este transmis ca parametru așa cum este selectat, metoda clearCheck() este utilizată pentru a debifa toate butoanele radio din grup și metoda getCheckedRadioButtonId() este folosită pentru a obține id-ul butonul radio care se află în grupul selectat sau valoarea -1 dacă nu este selectat niciun element.
Cel mai important eveniment al acestui control este și onCheckedChanged, care este declanșat atunci când este selectat un element al grupului (rețineți că selectarea unui element al grupului indică deselectarea altuia).
Și gata, acestea sunt câteva dintre componentele grafice de bază pe care le vom folosi pe tot parcursul cursului, în postările următoare vom continua cu alte componente sau machete.
S-ar putea să te intereseze și pe tine.
Doriți să adăugați sau să comentați ceva despre această intrare? simte-te liber sa faci....Și dacă ți-a plăcut... te invit să distribui y Abonați-vă făcând clic pe butonul „Alăturați-vă acestui site” pentru a auzi mai multe postări ca aceasta 😉