Noțiuni de bază cu layout-uri XML

Acest tutorial vă va învăța fundamentele construirii interfețelor Android cu XML. Citește mai departe!

Când începeți să dezvoltați aplicații Android care utilizează Eclipse și pluginul ADT, editorul puternic de aspect grafic al Eclipse este un loc minunat pentru a începe proiectarea vizuală a interfeței dvs. de utilizator. Cu toate acestea, această abordare "ceea ce vedeți este ceea ce obțineți" are limitările sale și, la un moment dat, va trebui să treceți la XML.

Unul dintre avantajele majore ale declarării interfeței UI în XML este capacitatea de a păstra separat interfața de utilizare și comportamentul aplicației dvs., oferindu-vă libertatea de a modifica prezentarea aplicației fără a perturba funcționalitatea acesteia.

În acest articol, vă vom arăta cum să proiectați un layout de bază XML de la zero, inclusiv definirea elementului rădăcină, specificarea parametrilor de înălțime și lățime și adăugarea unor elemente UI de bază. În cele din urmă, voi folosi acest aspect de bază pentru a demonstra unele opțiuni XML avansate, cum ar fi alocarea unor cantități diferite de spațiu obiectelor diferite și pornirea cu resursele de șir.

Notă: În Android, layout-urile XML ar trebui să fie stocate în directorul res / layout cu extensia .xml.

Partea 1: Elementele de bază ale layoutului XML

În primul rând, ne vom obișnui cu XML, creând un UI foarte util pentru Android care utilizează grupul de vizualizare LinearLayout pentru a ține un element de casetă de selectare. Deschideți fișierul res / layouts / activity_main.xml și să începem.

Pasul 1: Specificați elementul dvs. rădăcină

UI trebuie să conțină un singur element rădăcină care să funcționeze ca un container vizual pentru toate celelalte elemente. Elementul rădăcină poate fi fie un ViewGroup (adică LinearLayout, ListView, GridView) un element de îmbinare sau un View, dar trebuie să conțină spațiul de nume XML. În acest exemplu, voi folosi LinearLayout, un grup de vizualizare care aliniază toți copiii într-o anumită direcție.

Un LinearLayout constă în deschiderea și închiderea etichetelor XML:

 < LinearLayout… >

În fila de deschidere, va trebui să definiți spațiul de nume XML, care este un standard recomandat de W3C. Definirea spațiului de nume XML în Android este ușor, introduceți pur și simplu următorul cod și adresa URL ca parte a tagului de deschidere LinearLayout:

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

Pasul 2: Lățime și înălțime

Apoi, specificați parametrii de lățime și înălțime pentru elementul rădăcină. În cele mai multe cazuri, veți utiliza valoarea "fill_parent" pentru elementul rădăcină, deoarece acest lucru îl instruiește să preia întregul ecran al dispozitivului.

Introduceți următorul text XML pentru parametrii înălțime / lățime:

 android: layout_width = "fill_parent" șiroid: layout_height = "fill_parent">

XML-ul dvs. ar trebui să arate astfel:

Pasul 3: Crearea unei casete de selectare

E timpul să adăugați ceva la pânza asta goală! Introduceți eticheta de deschidere pentru caseta de selectare. Deoarece acesta este un element UI, este necesar un XML suplimentar:

1) Identificați elementul dvs.

Eclipse utilizează un ID întreg pentru a identifica diferite elemente de interfață într-un copac. Aceasta ar trebui să fie menționată ca un șir folosind atributul "id" și următoarea sintaxă:

android: id = "@ + id / nume"

În acest exemplu, vom face referire la acest element UI ca "CheckBox:"

 android: id = "@ + id / CheckBox"

2) Parametrii latime / înălțime: wrap_content

Încă o dată, va trebui să introduceți parametrii înălțime / lățime. Setarea acestui atribut la 'wrap_content' va afișa elementul corespunzător suficient de mare pentru a închide redimensionarea conținutului. Putem re-folosi structura de sintaxă înălțime / lățime de mai devreme, înlocuind 'fill_parent' cu 'wrap_content:'

 android: layout_width = "wrap_content" șiroid: layout_height = "wrap_content"

3) Setați textul

În cele din urmă, va trebui să specificați textul care ar trebui să apară alături de caseta de selectare. Vom seta caseta de selectare pentru a afișa "Da":

 android: text = "Da" />

XML-ul dvs. ar trebui să arate astfel:

Rulați codul în Emulator Android pentru a vedea XML în acțiune!

Partea 2: Creați al doilea UI cu XML

În cea de-a doua parte a acestui tutorial, vom examina XML mai avansate pentru ajustarea interfeței dvs. UI. Vom crea un aspect format din două butoane și apoi vom folosi atributul "greutate" pentru a modifica procentajul spațiului de dispunere alocat fiecăruia înainte de a acoperi pe scurt elementele de bază ale resurselor de coarde.

Pasul 1: Creați aspectul

Primul pas este să creați barele goale ale aspectului dvs. Vom re-folosi elementul rădăcină LinearLayout din exemplul anterior, împreună cu parametrii lățime / înălțime și, desigur, spațiul de nume XML:

Pasul 2: Creați butoanele

Pentru a crea primul buton, adăugați eticheta de deschidere "Buton" și ID-ul întregului folosind numele elementului "button1".

Pasul 3: Verificați emulatorul

Pentru a previzualiza cum va arăta acest lucru pe un dispozitiv Android real, încărcați emulatorul și aruncați o privire!

Partea 3: Opțiuni XML avansate

Acum, aveți interfața dvs. de bază, vom folosi unele XML mai avansate pentru a rafina acest aspect simplu.

Setați Layout_Weight

Atributul 'android: layout_weight' vă permite să specificați raportul de mărime dintre mai multe elemente ale UI. Puneți pur și simplu, cu cât este mai mare valoarea greutății, cu atât este mai mare proporția spațiului alocat și cu cât elementul UI se extinde mai mult. Dacă nu specificați o greutate, Eclipse va presupune că greutatea pentru toate elementele este zero și împărți spațiul disponibil în mod egal. Raportul de spațiu poate fi setat cu următoarea valoare XML:

 Android: "?" layout_weight =

În acest exemplu, vom atribui "button1" cu o valoare de 1 și "button2" cu o valoare de 2.

Notă, aceasta este pur și simplu o adăugare; nu este necesar să modificați codul existent.

XML-ul de mai sus va crea două butoane de dimensiuni diferite:

Un intro la resursele de coarde

O resursă de șir poate furniza șiruri de text pentru fișierele de aplicație și de resurse. În cele mai multe cazuri, este bine să stocați toate șirurile în folderul dedicat "strings.xml", care poate fi găsit de:

1) Deschiderea dosarului "Res" în exploratorul proiectului Eclipse.

2) Deschiderea dosarului "Valori".

3) Deschiderea fișierului "strings.xml".

Pentru a crea un șir nou în proiectul Android:

1) Deschideți fișierul "strings.xml" și selectați "Adăugați".

2)Selectați "String" din listă și faceți clic pe "Ok".

3) Selectați șirul nou creat din meniul Resurse Elemente.

4) În meniul "Atribuiri pentru șir" din dreapta, introduceți un nume pentru șir și o valoare (Notă, atributul "nume" este utilizat pentru a face referire la valoarea șirului, iar valoarea șirului este datele care vor fi afișate. )

În acest exemplu, vom da șirului numele de "acord" și introduceți valoarea "Sunt de acord cu termenii și condițiile".

5) Salvați această nouă resursă de șir.

6) Deschideți fișierul "activity_main.xml". Găsiți secțiunea de cod care definește 'button1' și modificați atributul 'android: text' pentru a apela această resursă de șir nouă. Apelarea unei resurse de șir, utilizează următoarea sintaxă:

Android: text = "@ string / nume-resurse"

Deci, în acest exemplu, codul va fi:

 Android: text = "@ string / sunt de acord"

Pentru a ușura vizualizarea ieșirii, ștergeți "butonul2". Codul dvs. ar trebui să arate astfel:

Verificați ieșirea vizuală a codului dvs. - textul ar fi trebuit înlocuit cu valoarea șirului "de acord".

Acesta este un șir de bază, fără atribute suplimentare de formatare sau de formatare. Dacă doriți să aflați mai multe despre resursele de șir, documentele oficiale Android sunt o sursă excelentă de informații suplimentare.

Concluzie

În acest articol, am acoperit esențele XML de a crea un element rădăcină pentru aspectul dvs. și a codificat câteva elemente UI de bază, înainte de a trece la un XML mai avansat care vă oferă mai mult control asupra interfeței dvs. UI. Acum ar trebui să fiți gata să vă creați propriile interfețe simple de utilizator folosind XML!

Cod