Share
Het Android-platform biedt een breed scala aan opslagopties voor gebruik binnen uw apps. In deze tutorialserie gaan we een aantal van de gegevensopslagfaciliteiten van de Android SDK verkennen door een eenvoudig project te bouwen: een ASCII-kunsteditor.
Deze zelfstudiereeks over het maken van een eenvoudige ASCII Art Editor bestaat uit vier delen:
Aan het einde van deze zelfstudiereeks kan de gebruiker teksttekens invoeren om hun ASCII-illustraties te tekenen, de kunst in een database op te slaan of zelfs de aanmaak ervan als afbeeldingsbestand exporteren. De gebruiker kan ook kiezen om instellingen weer te geven die de tekst- en achtergrondkleuren bepalen voor het ASCII-canvas.
Om dit allemaal te bereiken, gebruikt de app gedeelde voorkeuren, een SQLite-database en externe opslag in de vorm van de SD-kaart van het apparaat (indien beschikbaar). In dit eerste deel van de serie zullen we de applicatie instellen en de meeste elementen van de gebruikersinterface bouwen. In deel 2 zullen we het exporteren van de afbeelding afhandelen en de gebruiker de weergave-instellingen laten kiezen. In de laatste twee delen werken we met de SQLite-database.
Hier is een voorbeeld van de app in actie terwijl de gebruiker ASCII-tekens invoert:
Start een nieuw Android-project in Eclipse. Kies uw applicatie- en pakketnamen evenals doel- en minimum SDK-versies. Als u de nieuwste versie van de ADT (Android Developer Tools) voor Eclipse gebruikt, kunt u ook een toepassingspictogram selecteren. We zullen niet te veel tijd besteden aan de decoratieve elementen van de app in deze serie, zodat we ons kunnen concentreren op de opslagopties. Laat Eclipse uw belangrijkste app-activiteit genereren terwijl u het nieuwe project bouwt, door een activiteits- en lay-outnaam naar keuze in te voeren:
Eclipse kan nu de lay-out voor uw nieuwe activiteit openen - als deze niet zelf wordt geopend, zodat we eraan kunnen werken. Afhankelijk van uw ADT kan Eclipse automatisch een relatieve lay-out genereren, maar we gebruiken een lineaire lay-out, dus vervang de bestaande inhoud door het volgende:
Wijzig zo nodig de context kenmerk om de hoofdnaam van de activiteit weer te geven die u heeft gekozen. Open het bronbestand van de app-tekenreeks ("res / values / strings.xml"). Voeg de volgende tekenreeks toe waarnaar we in het lay-outbestand hebben verwezen:
Voer hieronder uw ASCII-kunst in!
Als uw strings-bestand een tekenreeks bevat met "title_activity_main" als naamkenmerk, wijzigt u deze in de tekst die u in de titelbalk van de app wilt weergeven, omdat deze tekenreeks mogelijk automatisch als het activiteitslabel wordt ingesteld wanneer Eclipse een nieuw project genereert. We zullen items toevoegen aan de tekenreeks als we de lay-out maken, dus houd het bestand open.
Terug in het hoofdlay-outbestand, laten we het bewerkbare tekstgebied toevoegen zodat gebruikers hun ASCII-tekens kunnen invoeren. Na de inleidende TextView, voeg een EditText toe:
Neem even de tijd om over deze attributen te kijken. Met de ID kunnen we het tekstveld in Java identificeren. De tekstkleur en achtergrond hebben beginwaarden, maar we zullen de gebruiker toestaan deze later in te stellen. Het tekstveld is in eerste instantie leeg en heeft 10 regels voor gebruikersinvoer. De andere kenmerken zijn decoratief, dus u kunt ze wijzigen als u een ander ontwerp wilt gebruiken.
Vervolgens gaan we een reeks knoppen weergeven voor gebruikersbeheer, dus voeg een lay-out voor hen toe na de bewerkingstekst:
Plaats hierin de eerste drie knoppen:
Elke knop heeft een ID voor identificatie in Java en een tekstreeks die we binnenkort zullen definiëren. We hebben een tweede rij knoppen nodig, dus voeg na de Lineaire lay-out voor deze drie nog een rij toe:
Merk op dat de laatste knop enigszins anders is - het is voor het instellen van de gebruikersweergave-voorkeuren. Voeg de tekenreeksen toe die worden vermeld in het XML-waardenbestand van uw strings:
Opslaan Exporteren Laden nieuwe Verwijder instellingen
Hier is een voorbeeld van de hoofdactiviteit:
Zoals je ziet, besteden we niet al te veel aandacht aan het ontwerp voor de app, zodat we ons kunnen concentreren op het opslagaspect in deze tutorialserie, maar je kunt natuurlijk alle ontwerpfuncties bedenken die je leuk vindt.
Door op de knop Instellingen te drukken, kan de gebruiker tekst- en achtergrondkleuren kiezen voor het tekstgebied. Hiertoe maakt u een nieuwe activiteit in uw project door het hoofdpakket in Eclipse te selecteren en Bestand, Nieuw, Klasse te kiezen. Geef uw klas de naam "ColorChooser" en verleng de openingsverklaring als volgt:
public class ColorChooser breidt activiteit uit
U moet een import voor de klasse Activity toevoegen als Eclipse het niet automatisch toevoegt:
import android.app.Activity;
Voeg de toe onCreate methode binnen de klas:
public void onCreate (Bundle savedInstanceState) super.onCreate (savedInstanceState); setContentView (R.layout.color_choice);
Dit vereist de volgende import:
import android.os.Bundle;
Sla uw klas op en voeg het opgegeven lay-outbestand toe door de map "res / layout" te kiezen en Bestand, Nieuw, Bestand te selecteren. Voer "color_choice.xml" in als de bestandsnaam die overeenkomt met wat we in de klasse Activity hebben. Klik op Voltooien en Eclipse zou je bestand moeten openen. Deze lay-out gaat een Scroll View bevatten met een lineaire lay-out erin, dus voeg ze als volgt toe:
Voeg in de lineaire lay-out eerst een verklarend tekstveld toe:
Voeg de opgegeven tekenreeks toe aan het tekenbestand met tekenreeksen:
Kies een kleurenschema:
Terug in de lay-out voor de kleurkiezer, voegt u een afbeeldingsknop toe voor elk kleurenschema dat u wilt gebruiken. We zullen drie opties gebruiken:
Neem even de tijd om over deze code te kijken. Elke afbeeldingsknop heeft een ID met een steeds groter wordend achtervoegsel. De bij klikken attribuut geeft een methode aan die wordt uitgevoerd in de activiteit met deze lay-out wanneer gebruikers op een knop klikken. Elke knop heeft ook een tag die de twee kleuren voor het schema vertegenwoordigt als hexadecimale reeksen. Wanneer de gebruiker op een knop klikt, wordt de setColors methode wordt uitgevoerd (we zullen het later schrijven) - vanaf daar kan de Java-code de tag ophalen, die ons de kleuren vertelt die moeten worden ingesteld voor tekst en achtergrond. U kunt uw eigen knopafbeeldingen maken of deze gebruiken:
U hebt een kopie van elke afbeelding in elke map drawables in uw app-map nodig - u kunt deze naar elke map in uw Eclipse-werkruimtemap kopiëren. Als u uw eigen knopafbeeldingen maakt, kunt u ze aanpassen aan verschillende schermformaten. Zodra u de afbeeldingen in uw mappen met aantekeningen hebt, kunt u het project vernieuwen in Eclipse om het bij te werken. Voeg de drie aangegeven reeksen toe aan het tekenbestand met tekenreeksen:
Zwart op wit Wit op zwart Geel op blauw
We gaan een thema toepassen op de activiteit wanneer we het manifestbestand schrijven, dus het zal als volgt verschijnen:
Laten we deel 1 afsluiten door het manifestbestand Manifest te bewerken. Open het in Eclipse door erop te dubbelklikken in het toepassingspakket. Kies het tabblad XML om de code rechtstreeks te bewerken. We hebben gebruikersrechten nodig om naar externe opslag te schrijven, wat we gaan doen wanneer gebruikers hun tekeningen exporteren. Binnen het element Manifest maar buiten het applicatie-element, voeg het permissie-element toe:
De app krijgt drie activiteiten: de hoofdactiviteit, de kleurkiezer en een activiteit die wordt gestart wanneer de gebruiker een opgeslagen afbeelding wil laden. Na het bestaande activiteitselement in uw manifest, voegt u de andere twee in het toepassingselement toe:
Deze twee verschijnen als pop-upstijlschermen bovenop het hoofdactiviteitenscherm. We zullen de Activiteit en opmaak voor het "PicChooser" -scherm maken wanneer we de database-elementen van het project bouwen. De download van de broncode bevat het volledige manifestbestand als u het uwe moet controleren (het kan enigszins variëren, afhankelijk van welke ADT-versie u gebruikt en welke opties u hebt gekozen bij het maken van het project). Als u nu uw applicatie uitvoert, ziet u het bewerkbare tekstveld, maar geen enkele knop functioneert nog.
Dat is ons project opgezet en klaar voor het bouwen van de applicatielogica. Gebruik de bijgevoegde download van de broncode om uw code te controleren als u er niet zeker van bent. In het volgende deel zullen we omgaan met het exporteren van de ingevoerde illustraties van de gebruiker als een afbeeldingsbestand en de configuratie-functie van het kleurschema implementeren. In de volgende twee delen zullen we de functies voor opslaan, verwijderen en laden implementeren, die allemaal een SQLite-database gebruiken.
Accentsconagua