Creați un editor de artă ASCII Configurarea interfeței

Platforma Android oferă o gamă largă de opțiuni de stocare pentru utilizarea în aplicațiile dvs. În această serie de tutori, vom explora unele dintre facilitățile de stocare a datelor furnizate de SDK-ul Android construind un proiect simplu: un editor de artă ASCII.


rezumatul proiectului

Această serie de tutori despre crearea unui editor ASCII simplu de artă este în patru părți:

  • Construirea interfeței utilizator
  • Image Export & Configurare utilizator
  • Crearea și interogarea bazelor de date
  • Salvarea și ștergerea imaginilor ASCII

Până la sfârșitul acestei serii de tutorial, utilizatorul va putea introduce caractere text pentru a desena o lucrare de artă ASCII, a salva arta într-o bază de date sau chiar a exporta creația lor ca fișier imagine. De asemenea, utilizatorul va putea alege să afișeze setările care determină culorile textului și fundalului pentru panza de artă ASCII.

Pentru a realiza toate acestea, aplicația va utiliza Preferințele partajate, o bază de date SQLite și un spațiu de stocare extern sub forma cardului SD al dispozitivului (dacă este disponibil). În această primă parte a seriei vom obține aplicația creată și construită majoritatea elementelor de interfață cu utilizatorul. În partea a doua, vom gestiona exportul imaginii și permițând utilizatorului să aleagă setările de afișare. În ultimele două părți vom lucra cu baza de date SQLite.

Iată o previzualizare a aplicației în acțiune în timp ce utilizatorul introduce caractere ASCII:


Pasul 1: Creați un proiect Android

Începeți un nou proiect Android în Eclipse. Alegeți numele aplicației și al pachetelor, precum și versiunile SDK minime și cele minime. Dacă utilizați cea mai nouă versiune a ADT (Tools Developer Tools) pentru Eclipse, puteți selecta și o pictogramă a aplicației. Nu vom petrece prea mult timp pe elementele decorative ale aplicației din această serie, pentru a ne concentra asupra opțiunilor de stocare. Lăsați Eclipse să genereze aplicația dvs. principală Activitate în timpul construirii noului proiect, introducând un nume de activitate și aspect după alegerea dvs.:


Pasul 2: Construiți aspectul principal

Eclipse poate deschide acum aspectul pentru noua ta Activitate - dacă nu o deschide singur pentru a putea lucra la ea. În funcție de ADT-ul dvs., Eclipse poate genera automat un aspect relativ, totuși folosim un layout liniar, înlocuind astfel conținutul existent cu următoarele:

   

Dacă este necesar, modificați context atributul va reflecta numele principal de activitate pe care l-ați selectat. Deschideți fișierul de resurse al șirurilor de aplicații ("res / values ​​/ strings.xml"). Adăugați următorul șir, la care am făcut referire în fișierul de aspect:

 Introduceți arta ASCII de mai jos!

Dacă fișierul dvs. de fișiere conține un șir cu numele de "title_activity_main", modificați-l pentru a reflecta orice text doriți să apară în bara de titlu a aplicației, deoarece acest șir poate fi setat automat ca etichetă Activity când Eclipse generează un nou proiect. Vom adăuga elemente la resursa string-urilor pe măsură ce construim aspectul, deci păstrează fișierul deschis.

Înapoi în fișierul de aspect principal, să adăugăm zona de text editabilă pentru ca utilizatorii să introducă caracterele lor ASCII. După introducerea TextView, adăugați un text Edit:

 

Ia-ți un moment să te uiți peste aceste atribute. ID-ul ne va permite să identificăm câmpul de text din Java. Culoarea și fundalul textului au valori inițiale, dar le vom permite utilizatorului să le stabilească mai târziu. Câmpul de text va fi inițial gol și va avea 10 linii pentru introducerea de către utilizator. Celelalte atribute sunt decorative, astfel încât să le puteți modifica dacă doriți să folosiți un design diferit.

Apoi vom afișa o serie de butoane pentru controlul utilizatorului, deci adăugați un aspect pentru ele după EditText:

  

În interiorul acestuia, plasați primele trei butoane:

 

Fiecare buton are un ID pentru identificare în Java și un șir de text pe care îl vom defini în curând. Avem nevoie de un al doilea rând de butoane, așa că după Layoutul liniar pentru aceste trei, adăugați un alt rând:

  

Observați că ultimul buton este puțin diferit - este pentru setarea preferințelor de afișare a utilizatorului. Adăugați șirurile de butoane listate fișierelor cu valori XML ale șirurilor de caractere:

 Salvați Export Sarcină Nou Șterge Setări

Iată o previzualizare a activității principale:

După cum puteți vedea, nu dedicăm prea mult efort pentru proiectarea aplicației, astfel încât să ne putem concentra pe aspectul de stocare din această serie de tutorial, dar, desigur, puteți să veniți cu orice caracteristici de design care vă plac.


Pasul 3: Construiți aspectul setărilor

La apăsarea butonului Setări, utilizatorul va putea alege culori de text și de fundal pentru zona de text. În acest scop, creați o nouă activitate în proiect prin selectarea pachetului principal din Eclipse și alegerea File, New, Class. Oferiți clasei dvs. numele "ColorChooser" și extindeți declarația de deschidere după cum urmează:

 clasa publica ColorChooser extinde Activitatea 

Va trebui să adăugați o importanță pentru clasa de activitate dacă Eclipse nu o adaugă automat:

 importă android.app.Activity;

Adaugă onCreate metoda din interiorul clasei:

 public void onCreate (bundle savedInstanceState) super.onCreate (savedInstanceState); setContentView (R.layout.color_choice); 

Aceasta necesită importul următor:

 import android.os.Bundle;

Salvați clasa și adăugați fișierul de aspect specificat, selectând folderul "res / layout" și selectând File, New, File. Introduceți "color_choice.xml" ca nume de fișier pentru a se potrivi cu ceea ce avem în clasa Activitate. Faceți clic pe Finalizare și Eclipse ar trebui să deschideți fișierul. Acest aspect va include o vedere derulantă cu o dispunere liniară în interiorul acesteia, deci adăugați-o după cum urmează:

    

În interiorul layoutului liniar, adăugați mai întâi un câmp text explicativ:

 

Adăugați șirul specificat în fișierul cu valori de fișiere:

 Alegeți o schemă de culori:

Înapoi în planul pentru selectorul de culori, adăugați un buton Imagine pentru fiecare schemă de culoare pe care doriți să o utilizați. Vom folosi trei opțiuni:

   

Ia-ți un moment să te uiți peste acest cod. Fiecare buton Imagine are un ID cu un sufix intreg de incrementare. onClick atributul specifică o metodă care se va executa în Activitate utilizând acest aspect ori de câte ori utilizatorii dau clic pe un buton. Fiecare buton are, de asemenea, o etichetă care reprezintă cele două culori pentru schemă ca siruri de caractere hexazecimale. Când utilizatorul face clic pe un buton, setColors metoda se va executa (o vom scrie mai tarziu) - de acolo codul Java va putea prelua eticheta, care ne spune culorile pentru setarea pentru text si fundal. Puteți să creați propriile imagini ale butoanelor sau să le utilizați:

Aveți nevoie de o copie a fiecărei imagini în fiecare folder desenat în directorul aplicației - le puteți copia în fiecare folder din directorul spațiului de lucru Eclipse. Dacă creați propriile imagini ale butoanelor, le puteți personaliza la diferite dimensiuni ale ecranului. Odată ce aveți imaginile din folderele desenate, puteți reîmprospăta proiectul în Eclipse pentru ao actualiza. Adăugați cele trei șiruri indicate în fișierul cu valori de șiruri:

 Negru pe alb Alb pe negru Galben pe Albastru

Vom aplica o temă activității când vom scrie fișierul Manifest, așa că va apărea după cum urmează:


Pasul 4: Editați Manifestul de proiect

Să rotunjim partea 1 prin editarea fișierului Manifest al proiectului. Deschideți-o în Eclipse făcând dublu clic pe ea în pachetul de aplicații. Alegeți fila XML pentru a edita direct codul. Avem nevoie de permisiunea utilizatorului de a scrie în memoria externă, ceea ce vom face atunci când utilizatorii își vor exporta desenele. În interiorul elementului Manifest, dar în afara elementului de aplicație, adăugați elementul de permisiune:

 

Aplicația va avea trei activități - activitatea principală, selectorul de culori și cea care se va lansa când utilizatorul dorește să încarce o imagine salvată. După elementul de activitate existent din Manifest, adăugați celelalte două elemente din elementul de aplicație:

  

Aceste două vor apărea ca ecrane de tip pop-up în partea de sus a ecranului principal de activitate. Vom crea activitatea și aspectul pentru ecranul "PicChooser" atunci când vom construi elementele bazei de date ale proiectului. Descărcarea codului sursă conține întregul fișier Manifest dacă trebuie să verificați al tău (poate varia ușor în funcție de versiunea ADT pe care o utilizați și de opțiunile pe care le-ați ales la crearea proiectului). Dacă executați aplicația acum, veți vedea câmpul de text editabil, dar niciunul dintre butoane nu va funcționa încă.

Concluzie

Acesta este proiectul nostru creat și pregătit pentru construirea logicii aplicației. Utilizați descărcarea codului sursă atașat pentru a vă verifica codul dacă nu sunteți sigur de oricare dintre acestea. În partea următoare vom gestiona exportul lucrării de artă introduse de utilizator ca fișier imagine și vom implementa funcția de configurare a schemei de culori. În următoarele două părți vom implementa funcțiile de salvare, ștergere și încărcare, toate acestea urmând să utilizeze o bază de date SQLite.

Cod