Creați un editor ASCII Art Export și configurare utilizator

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.

În prima parte a acestei serii am creat elementele interfeței cu utilizatorul, inclusiv o activitate principală cu un câmp de text pentru ca utilizatorii să introducă caracterele lor și o activitate de configurare în care utilizatorul va putea alege setările de culoare. În această tranșă, vom implementa această alegere de configurare a utilizatorului, permițând utilizatorilor să își exporte lucrările sub formă de imagini PNG, iar fișierele rezultate vor fi salvate în directorul extern Imagini de pe cardul SD. În ultimele două părți ale seriei vom lucra cu o bază de date SQLite pentru salvarea, încărcarea și ștergerea operelor de artă ale utilizatorului.

Schița pentru această serie este următoarea:

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

Pasul 1: Răspundeți la butonul Setări Faceți clic pe

Să începem cu setările pentru configurația utilizatorului. În activitatea principală a aplicației, înainte de onCreate , adăugați o variabilă care să reprezinte câmpul de text editabil:

 private EditText textArea;

Va trebui să adăugați un import:

 importă android.widget.EditText;

Interior onCreate, după ce ați setat vizualizarea de conținut, preluați o referință la câmpul de text, astfel încât să putem aplica setările de afișare:

 textArea = (EditText) findViewById (R.id.ascii_text);

Acesta este ID-ul pe care l-am dat câmpului text editabil în fișierul de aspect XML. Apoi, extrageți o referință la butonul Setări și identificați clicurile:

 Butonul setBtn = (Buton) findViewById (R.id.set_colors_btn); setBtn.setOnClickListener (aceasta);

Veți avea nevoie de următorul import adăugat:

 import șiroid.widget.Button;

Extindeți linia de deschidere a declarației clasei de activitate pentru a gestiona clicurile după cum urmează:

 clasa publică MainActivity se extinde Activitatea implementează OnClickListener 

Modificați numele clasei dacă alegeți altul. Acest lucru necesită un alt import:

 importă android.view.View.OnClickListener;

Acum, clasa dvs. trebuie să furnizeze onClick metoda, deci adăugați-o după onCreate metodă:

 public void onClick (Vizualizare v) 

Această metodă va gestiona diferite clicuri de pe butoane, așa că vom adăuga un cod la ea în întreaga serie. Veți avea nevoie de următorul import:

 import șiroid.view.View;

În interiorul onClick , trebuie să adaptăm ceea ce se întâmplă cu orice buton a fost apăsat, deoarece vom fi manipulați mai mult de unul:

 dacă (v.getId () == R.id.set_colors_btn) 

Acesta este butonul Setări pe care l-am inclus ultima dată în fișierul principal de aspect.


Pasul 2: Porniți Activitatea de setări

Am creat activitatea de a gestiona ultima dată opțiunile de configurare ale utilizatorilor, deci începeți să o derulam acum din activitatea noastră principală, în interiorul onClick "if" bloc de declarație:

 Intenție colorIntent = intenție nouă (acest lucru, ColorChooser.class); this.startActivityForResult (colorIntent, COLOR_REQUEST);

Veți avea nevoie de acest import:

 import șiroid.content.Intent;

Inițiem intenția pentru activitatea pe care am creat-o pentru a gestiona alegerea schemei de culori a utilizatorilor. În acea activitate, vom lăsa utilizatorul să aleagă o opțiune și să returneze rezultatul activității principale, motiv pentru care o folosim startActivityForResult. Vom recupera rezultatul în onActivityResult metodă pe care o vom adăuga în continuare. Dar, în primul rând, trebuie să putem identifica din care activitate ne întoarcem, astfel încât să trecem constant ca al doilea parametru la startActivityForResult metodă. Adăugați constanta în partea de sus a declarației dvs. de clasă, înainte de onCreate metodă:

 finală privată int COLOR_REQUEST = 1;

Acum adaugati onActivityResult după metoda onClick metodă:

 protejat void onActivityResult (int requestCode, int resultCode, date de intenție) 

În cadrul acestei clase, vom gestiona datele returnate din Activitatea de selectare a setărilor (și mai târziu din Activitatea în care utilizatorul alege o imagine salvată pentru încărcare). În interiorul metodei, verificați dacă ne întoarcem din Activitatea de selectare a culorilor și că avem un rezultat valid:

 dacă (requestCode == COLOR_REQUEST) if (resultCode == RESULT_OK) 

Când utilizatorul face clic pe butonul Setări, se va începe activitatea de selectare. Utilizatorul va alege o schemă de culori, iar Activitatea de selecție va termina, returnând datele care reprezintă opțiunea utilizatorului la Activitatea principală, deoarece aici este locul unde a fost pornită Activitatea de selectare. La revenirea la activitatea principală, onActivityResult metoda va fi executată, astfel încât să putem implementa alegerea utilizatorului aici (pe care o vom face în curând).


Pasul 3: Detectați opțiunile pentru setările utilizatorului

Acum, să ne îndreptăm atenția asupra activității de selectare în care utilizatorul poate face o selecție a schemei de culoare. Deschideți activitatea "ColorChooser". onCreate metoda ar trebui să fie deja completă. Rețineți că atunci când am adăugat butoanele de imagine reprezentând fiecare schemă de culori fișierului de aspect XML "color_choice", am specificat "setColors" ca onClick atribut și a inclus o etichetă care reprezintă cele două culori HEX pentru text și fundal - aruncați o privire la marcajul "color_choice.xml" acum pentru a verifica acest lucru. Când utilizatorii dau clic pe butoanele Imagine, Android va executa metoda specificată în Activitatea care găzduiește aspectul. Adăugați metoda în activitatea dvs. "ColorChooser" după onCreate:

 public void setColors (Vizualizare vedere) 

Adăugați următoarele importuri la clasă:

 import șiroid.view.View; import șiroid.content.Intent;

În interiorul metodei "setColors", recuperați mai întâi eticheta din vizualizarea care a fost făcută clic pe:

 String tagInfo = (String) view.getTag ();

Eticheta are următorul format: "# 000000 #ffffff" - împărțiți cele două culori într-o matrice String:

 Șir [] tagColors = tagInfo.split ("");

Acum dorim să transmitem aceste date înapoi la activitatea principală, astfel încât să putem aplica setările schemei de culoare elementelor interfeței utilizator acolo. Pentru a face acest lucru folosim intenția:

 Intent backIntent = intenție nouă ();

Adăugați cele două culori ca date suplimentare:

 backIntent.putExtra ("textColor", tagColors [0]); backIntent.putExtra ("backColor", tagColors [1]);

Prima culoare reprezintă textul, iar cea de-a doua este pentru fundal. Stabiliți rezultatul Intent return:

 setResult (RESULT_OK, backIntent);

Reveniți la Activitatea care a numit-o pe aceasta terminând:

 finalizarea();

Cele două șiruri de culori HEX vor fi transmise către onActivityResult în clasa principală de activitate.


Pasul 4: Aplicați schema de culori

Înapoi în activitatea principală onActivityResult , în interiorul celor două blocuri de declarații "if" pe care le-am adăugat pentru a detecta returnările din activitatea de selectare Activitate, pentru a recupera Corzile pe care le-am trecut înapoi:

 Stringul alesTextColor = data.getStringExtra ("textColor"); Șirul alesBackColor = data.getStringExtra ("backColor");

Să folosim o metodă de ajutor pentru a seta culorile astfel încât să putem realiza același proces în altă parte:

 updateColors (selectTextColor, selectBackColor);

Adăugați metoda de ajutor după onActivityResult metodă:

 private void updateColors (String tColor, String bColor) 

În interiorul acestei metode, acum putem seta culorile pentru textul și fundalul textului editabil:

 textArea.setTextColor (Color.parseColor (tColor)); textArea.setBackgroundColor (Color.parseColor (bColor));

Acest lucru necesită un alt import:

 import șiroid.graphics.Color;

Pasul 5: Actualizați preferințele partajate

Am actualizat aspectul câmpului de text pentru a se potrivi cu alegerea utilizatorului, dar dorim să ne amintim alegerea, astfel încât să fie observată de fiecare dată când rulează aplicația. Să adăugăm o variabilă de instanță în partea de sus a clasei, astfel încât să putem face referire la preferințele partajate de oriunde:

 private SharedPreferences asciiPrefs;

Adăugați importul dacă este necesar:

 import android.content.SharedPreferences;

În onCreate, după codul existent, obțineți Preferințele partajate, utilizând numele dorit (trebuie să utilizați același nume de fiecare dată când preluați preferințele în aplicația dvs.):

 asciiPrefs = getSharedPreferences ("AsciiPicPreferențe", 0);

Înapoi în onActivityResult , după ce apelați metoda de ajutor, obțineți editorul de preferințe partajate:

 SharedPreferences.Editor prefsEd = asciiPrefs.edit ();

Transmiteți datele care reprezintă opțiunea utilizatorului și comiteți-o în funcție de preferințele aplicației:

 prefsEd.putString ("culori", "+ selectTextColor +" "+ alesBackColor); prefsEd.commit ();

Vom specifica un nume pentru elementul de date de preferință și vom transmite cele două șiruri într-una, cu un spațiu între ele. Aceasta este o utilizare tipică a Preferințelor partajate, care sunt destinate perechilor cheie-valoare de valori primitive, așa că sunt utilizate în mod obișnuit pentru setările de configurare.


Pasul 6: Verificați preferințele partajate

Vrem ca utilizatorul să vadă schema de culori aleasă de fiecare dată când rulează aplicația în viitor, așa că trebuie să verificăm alegerea acestora atunci când începe activitatea. În onCreate , după preluarea Preferințelor partajate:

 Șirul alesColor = asciiPrefs.getString ("culori", "");

Transmitem șirul cheie pe care l-am utilizat la salvarea alegerii utilizatorului. Este posibil ca utilizatorul să nu fi salvat încă o preferință, deci aplicați setările de culoare în interiorul unei instrucțiuni condiționale:

 dacă (selectedColors.length ()> 0) String [] prefColors = selectColors.split (""); updateColors (prefColors [0], prefColors [1]); 

Împărțim din nou șirul de culori și sunăm metoda ajutorului pentru a aplica setările.


Pasul 7: Faceți clic pe butoanele Buton de export

Amintiți-vă că am inclus un buton Export pentru ca utilizatorii să-și salveze lucrările de artă ca fișiere imagine. În principalul tău Activitate onCreate metoda, detectați clicurile pe el:

 Buton saveImgBtn = (buton) findViewById (R.id.export_btn); saveImgBtn.setOnClickListener (aceasta);

Acum adăugați un "altceva dacă" înăuntru onClick metodă:

 altfel dacă (v.getId () == R.id.export_btn) saveImg (); 

Aceasta va fi o altă metodă de ajutor, deci adăugați-o la fișierul de clasă după metoda "updateColors":

 private void saveImg () 

Pasul 8: Disponibilitatea stocării externe

Sistemul Android rulează pe mai multe dispozitive diferite, și nu putem lua nimic pentru a acorda ce facilități are utilizatorul. Înainte de a încerca să scrie ceva pe un dispozitiv de stocare extern, trebuie să verificați mai întâi dacă este disponibil. În cadrul noii metode de ajutor, adăugați o verificare a stării de stocare a utilizatorului utilizând Mediul:

 Striză stare = Mediu.getExternalStorageState ();

Aveți nevoie de un import pentru aceasta:

 import android.os.Environment;

Acum adăugați un test condițional asupra rezultatului, astfel încât să putem adapta ceea ce se întâmplă în continuare:

 dacă (Environment.MEDIA_MOUNTED.equals (state))  altceva 

Blocul "if" va exporta imaginea în spațiul de stocare extern, cu situațiile de manipulare bloc "else" în care nu există stocare disponibilă. Într-un astfel de caz, tot ce vrem să facem este să scriem un mesaj de eroare utilizatorului care să-i lase să știe că nu putem exporta imaginea - în interiorul blocului "else":

 Toast.makeText (this.getApplicationContext (), "Ne pare rău - nu aveți un director de stocare extern" + "disponibil!", Toast.LENGTH_SHORT) .show ();

Adăugați importul necesar:

 importă android.widget.Toast;

Pasul 9: Exportați fișierul imagine

Acum, să abordăm situațiile în care este disponibil un spațiu de stocare extern. Adăugați următoarele importuri pentru operația de ieșire a fișierului:

 import java.io.File; import java.io.FileOutputStream; import java.util.Date; import șiroid.graphics.Bitmap; import șiroid.graphics.Bitmap.CompressFormat;

Înapoi în metoda ajutor pentru salvarea imaginilor, în interiorul blocului "if", preluați o referință la directorul Imagini:

 Fișierul picDir = Environment.getExternalStoragePublicDirectory (Mediu.DIRECTORY_PICTURES);

Acum avem prima parte a căii pe care o vom folosi pentru a crea fișierul imagine. Imaginea va conține conținutul vizibil al câmpului de text editabil, inclusiv culoarea de fundal - adică va afișa ceea ce puteți vedea în ecranul aplicației atunci când îl exportați. Pentru a realiza acest lucru, folosim cache-ul pentru View:

 textArea.setDrawingCacheEnabled (true); textArea.buildDrawingCache (true); Bitmap bitmap = textArea.getDrawingCache ();

Acest lucru creează câmpul de text editabil pentru a fi desenat, apoi salvează aspectul său curent ca bitmap utilizând memoria cache de desen.

Acum trebuie să dăm fișierului nostru un nume, deci să folosim data și ora curente pentru a face fiecare unic, adăugând un text informativ și extensia fișierului imagine:

 Data theDate = data nouă (); String fișierName = "asciipic" + theDate.getTime () + ".png";

Aici specificăm numele fișierului, acum să creăm fișierul împreună cu calea către directorul Pictures:

 Fișierul picFile = fișier nou (picDir + "/" + nume_fișier);

Din moment ce vom face unele fișiere I / O avem nevoie încerca și captură blocuri:

 încercați  captură (Excepție e) e.printStackTrace (); 

Acest lucru permite programului să continue să ruleze dacă ceva nu merge bine cu operațiile de intrare / ieșire. În interiorul încerca blocați, creați fișierul și treceți-l la un flux de ieșire:

 picFile.createNewFile (); FileOutputStream picOut = fișierul FileOutputStream (picFile) nou;

Comprimați Bitmap-ul și scrieți-l în fluxul de ieșire, salvând rezultatul ca boolean:

 boolean a lucrat = bitmap.compress (CompressFormat.PNG, 100, picOut);

Ieșiți un mesaj către utilizator în funcție de rezultatul operației de scriere:

 dacă (lucrat) Toast.makeText (getApplicationContext (), "Imaginea salvată în dispozitivul dvs. Pictures" + "director!", Toast.LENGTH_SHORT) .show ();  altceva Toast.makeText (getApplicationContext (), "Oops! File not saved", Toast.LENGTH_SHORT) .show (); 

Acum, închideți fișierul:

 picOut.close ();

Putem elibera resursele folosite pentru cache-ul de desen, după captură bloc:

 textArea.destroyDrawingCache ();

Aceasta este operația de ieșire a fișierelor completă. Utilizatorul poate vizualiza lucrările de artă exportate ca o imagine, navigând în folderul Imagini dispozitiv în orice moment.

Bacsis:Dacă rulați aplicația pe emulator în Eclipse, puteți să o configurați pentru a conține spațiu de stocare extern, editând AVD-ul și introducând spațiul de stocare în câmpul "Dimensiune" a cardului SD. După ce porniți AVD-ul, rulați aplicația pe acesta și exportați o imagine. În Eclipse, deschideți perspectiva DDMS din meniul Window, Open Perspective. Selectați dispozitivul și navigați la directorul Imagini (mnt / sdcard / Pictures). Ar trebui să vedeți toate imaginile scrise de aplicație în acest dosar. Pentru a trage unul de pe dispozitivul virtual, selectați-l și faceți clic pe butonul "Trageți un fișier de pe dispozitiv" pentru al salva și vizualiza pe computer.

Concluzie

Aceasta este configurația utilizatorului și partea de export a imaginii din aplicație. Dacă rulați aplicația acum, ar trebui să puteți seta schema de culori și să exportați imaginile pe cardul SD (atâta timp cât există unul). Verificați descărcarea codului sursă dacă nu sunteți sigur de nimic. Am folosit stocarea externă și preferințele partajate în acest tutorial. În următoarele părți vom construi o bază de date SQLite, folosind inserturi, interogări și actualizări pe care să le manipuleze salvarea, încărcarea, ștergerea și editarea lucrărilor de artă ASCII.

Cod