Share
In deze serie maken we een Galgje-spel voor het Android-platform. In de eerste zelfstudie hebben we de toepassing ingesteld op twee schermen voor de gebruiker en hebben we ook een begin gemaakt met de elementen van de gebruikersinterface, de afbeeldingen en de vormschetsen om precies te zijn. In de tweede tutorial zullen we inzoomen op de lay-out van de game.
Bij het maken van de lay-out van de game wordt een adapter gebruikt om letterknoppen te maken en de lichaamsdelen te positioneren die we weergeven wanneer gebruikers onjuiste letters selecteren. We slaan ook de antwoorden van de speler op in XML, halen deze op en kiezen een willekeurig woord met behulp van Java.
Om je geheugen op te frissen, is dit hoe het uiteindelijke spel eruit zal zien.
In de vorige tutorial maakten we afbeeldingen voor de galg en voor de zes lichaamsdelen. We plaatsen deze in de lay-out van de game in deze tutorial. De posities die u voor deze elementen instelt, moeten worden bepaald door de afbeeldingselementen die u gebruikt. Eén benadering is om de afbeeldingen in een afbeeldingseditor te importeren, zoals Adobe Photoshop, ze handmatig te plaatsen en vervolgens hun X en Y posities ten opzichte van het galgbeeld om de juiste posities uit te werken die op elke afbeelding in de XML-lay-out moeten worden toegepast. Als u begint met de demo-afbeeldingen die we in de vorige zelfstudie hebben opgenomen, kunt u de waarden gebruiken die in deze zelfstudie worden vermeld.
Begin met het openen van activity_game.xml. Binnen de lineaire lay-out die we in de vorige zelfstudie hebben toegevoegd, voert u een relatieve lay-out in om de zeven afbeeldingen te bevatten die deel uitmaken van het galgengebied.
Binnen de relatieve lay-out die u zojuist hebt gemaakt, begint u met het toevoegen van de afbeelding van de galg, zoals hieronder weergegeven.
Vergeet niet om de naam die kan worden getekend aan te passen als de afbeelding die u gebruikt, anders wordt genoemd. We hebben de linker en bovenste padding van de afbeelding ingesteld op 0 zodat we de andere afbeeldingen ten opzichte van de positie kunnen positioneren. We zullen stringresources toevoegen voor de beschrijvingen van de inhoud iets later in deze tutorial. Het volgende is het hoofd.
Als u uw eigen afbeeldingen gebruikt, moet u de linker en bovenste opvulling dienovereenkomstig wijzigen. We gebruiken een ID kaart attribuut zodat we naar de afbeelding in code kunnen verwijzen. Dit is nodig om het te laten verschijnen en verdwijnen, afhankelijk van de invoer van de gebruiker. De volgende afbeelding die we toevoegen is het lichaam.
Dit lijkt erg op wat we deden voor het hoofd en, zoals je hieronder kunt zien, zijn de armen en benen vrij gelijkaardig.
Open het XML-bestand res / values strings van het project en voeg de tekenreeksen voor de beschrijving van de inhoud toe die we in de bovenstaande codefragmenten hebben gebruikt.
De galg Het hoofd Het lichaam Een arm Een been
Ga terug naar het lay-outbestand en schakel over naar de Grafische lay-out tab om het resultaat van ons werk te zien. Pas de boven- en linkerpadding van elke afbeelding aan om zo nodig hun positie aan te passen.
Wanneer een nieuw spel wordt gestart, moeten de lichaamsdelen worden verborgen. Elk lichaamsdeel wordt onthuld als de speler een letter kiest die niet aanwezig is in het doelwoord.
De game gebruikt een verzameling vooraf gedefinieerde woorden die we in XML opslaan. Voeg in de map met projectresourceswaarden een nieuw bestand toe en noem het arrays.xml.
Schakel over naar de XML tab, maak een array aan en voeg er enkele woorden aan toe.
Voor deze zelfstudie gebruiken we een reeks woorden met betrekking tot computers. Om het spel interessanter te maken, kunt u echter met verschillende categorieën werken, waarbij elke categorie woorden bevat die gerelateerd zijn aan een specifiek thema. Wanneer de gebruiker op de knop Afspelen klikt, kunt u hem vragen een categorie te kiezen en de relevante woordenreeks te lezen.- CHARGER
- COMPUTER
- TABLET
- SYSTEEM
- TOEPASSING
- INTERNET
- STYLUS
- ANDROID
- TOETSENBORD
- SMARTPHONE
Terug in het lay-outbestand van uw game-activiteit voegt u een lineaire lay-out toe onmiddellijk na de relatieve lay-out die we hebben toegevoegd voor het galggebied. De lineaire lay-out is gereserveerd voor het antwoordgebied.
We slaan elk teken van het doelwoord op in zijn eigen tekstweergave, zodat we elke letter afzonderlijk kunnen onthullen. We zullen de gebruiken ID kaart van de lineaire lay-out in code om de tekstweergaven toe te voegen elke keer dat een nieuw woord wordt gekozen.
Open de GameActivity klasse en begin door de volgende importinstructies bovenaan toe te voegen.
import android.content.res.Resources; importeer android.graphics.Color; import android.view. Gravity; import android.view.ViewGroup.LayoutParams; import android.widget.LinearLayout; import android.widget.TextView;
Voeg in de klasseverklaring een onCreate methode zoals hieronder getoond.
@Override protected void onCreate (Bundle savedInstanceState) super.onCreate (savedInstanceState); setContentView (R.layout.activity_game);
We hebben de inhoudsweergave ingesteld op het lay-outbestand dat we zojuist hebben gemaakt.
Voordat we verder gaan, moeten we enkele instantievariabelen declareren. Voeg de verklaring onmiddellijk vóór de onCreate methode.
private String [] woorden; privé Willekeurige rand; private String currWord; privé LinearLayout wordLayout; private TextView [] charViews;
De verzameling woorden wordt opgeslagen in een array en de applicatie gebruikt de rand object om een woord uit de array te selecteren telkens wanneer de gebruiker een nieuw spel start. We houden een verwijzing naar het huidige woord (currWord), de lay-out die we hebben gemaakt om het antwoordgebied te houden (wordLayout) en een reeks tekstweergaven voor de letters (charViews). Terug in onCreate, nadat u de inhoudsweergave hebt ingesteld, vraagt u de bronnen van de toepassing aan, leest u de verzameling woorden en slaat u ze op in de woorden instantievariabele.
Bronnen res = getResources (); woorden = res.getStringArray (R.array.words);
Merk op dat we de naam gebruiken die we het woord array in XML hebben gegeven. Initialiseer de rand object en currWord draad.
rand = nieuw Willekeurig (); currWord = "";
Krijg een verwijzing naar het lay-outgebied dat we hebben gemaakt voor de antwoordbrieven.
wordLayout = (LinearLayout) findViewById (R.id.word);
Er moet een aantal taken worden uitgevoerd telkens wanneer een nieuwe game door de speler wordt gestart. Laten we een hulpmethode maken om alles georganiseerd te houden. Na de onCreate methode, voeg de volgende methode-omtrek toe.
private void playGame () // speel een nieuw spel
Binnen in de spel spelen methode, begin met het kiezen van een willekeurig woord uit de array.
String newWord = words [rand.nextInt (words.length)];
Omdat het spel spelen methode wordt aangeroepen wanneer de gebruiker ervoor kiest om opnieuw te spelen na het winnen of verliezen van een spel, het is belangrijk dat we ervoor zorgen dat we niet twee keer achter elkaar hetzelfde woord kiezen.
while (newWord.equals (currWord)) newWord = words [rand.nextInt (words.length)];
Werk het currWord instantievariabele met het nieuwe doelwoord.
currWord = newWord;
De volgende stap is om één tekstweergave te maken voor elke letter van het doelwoord. Nog steeds in onze hulpmethode, maakt u een nieuwe array om de tekstweergaven op te slaan voor de letters van het doelwoord.
charViews = new TextView [currWord.length ()];
Verwijder vervolgens eventuele tekstweergaven van de wordLayout lay-out.
wordLayout.removeAllViews ();
Gebruik een eenvoudige voor lus om elke letter van het antwoord te herhalen, een tekstweergave voor elke letter te maken en de tekst van de tekstweergave in te stellen op de huidige letter.
Accentsconagua
voor (int c = 0; c < currWord.length(); c++) charViews[c] = new TextView(this); charViews[c].setText(""+currWord.charAt(c)); De tekenreeks wordt opgeslagen als een reeks tekens. De charAt methode stelt ons in staat om de karakters op een specifieke index te benaderen. Nog steeds binnen de voor loop, stel de weergave-eigenschappen in de tekstweergave in en voeg deze toe aan de lay-out.
voor (int c = 0; c < currWord.length(); c++) charViews[c] = new TextView(this); charViews[c].setText(""+currWord.charAt(c)); charViews[c].setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT)); charViews[c].setGravity(Gravity.CENTER); charViews[c].setTextColor(Color.WHITE); charViews[c].setBackgroundResource(R.drawable.letter_bg); //add to layout wordLayout.addView(charViews[c]); We stellen de tekstkleur in op wit, zodat de gebruiker deze niet tegen de witte achtergrond kan zien. Als ze de letter correct raden, wordt de eigenschap text color in zwart weergegeven om deze aan de speler te laten zien. Terug in de onCreate methode, bel de helpermethode die we zojuist hebben gemaakt.
spel spelen();
We zullen beide uitbreiden onCreate en de helper-methode een beetje later.
De volgende stap is om een gebied te creëren waar de speler letters kan kiezen om te raden. Herzie de activiteitenlay-out van de game opnieuw en voeg de volgende rasterweergave toe om de letterknoppen te houden. Voeg de rasterweergave onmiddellijk in na de lineaire lay-out die we hebben toegevoegd voor het antwoordwoord.
We gaan een adapter gebruiken om de letters van het alfabet aan knoppen in de rasterweergave toe te wijzen. We geven zeven knoppen per rij weer, zoals u kunt zien op de aantalKolommen attribuut.
Elke letter wordt een knop toegevoegd aan de lay-out met behulp van een adapter. Voeg een nieuw bestand toe aan uw projectlay-outmap, noem het letter.xml en vul het met het volgende codefragment.
We gebruiken een van de mogelijke vormen die we de vorige keer hebben gemaakt als achtergrond en hebben een bij klikken methode die we de volgende keer zullen implementeren. Als u de toepassing verbetert om verschillende schermdichtheden te targeten, kunt u overwegen om het kenmerk height aan te passen.
Voeg een nieuwe klasse toe aan het src-pakket van uw project, noem het LetterAdapter, en kies android.widget.BaseAdapter als zijn superklasse.
Zoals u zult zien, omvat een adapterklasse een reeks standaardmethoden die we zullen implementeren. Voeg de volgende importinstructies toe aan de nieuwe klasse.
importeer android.content.Context; import android.view.LayoutInflater; importeer android.widget.Button;
Voeg in de klasseverklaring twee exemplaarvariabelen toe, zoals hieronder wordt weergegeven.
private String [] letters; private LayoutInflater letterInf;
De brieven array slaat de letters van het alfabet op en de layout-inflater past de knoplay-out toe die we hebben gedefinieerd voor elke weergave die door de adapter wordt verwerkt. Voeg na de instantievariabelen een constructormethode toe voor de adapter.
public LetterAdapter (Context c) // setup-adapter
In de constructor plaatst u de alfabetarray en wijst u de letters A-Z toe aan elke positie.
letters = nieuwe reeks [26]; voor (int a = 0; a < letters.length; a++) letters[a] = "" + (char)(a+'A');
Elk teken wordt weergegeven als een cijfer, zodat we de letters A tot Z in een lus kunnen instellen die begint bij nul door de waarde van het teken A toe te voegen aan elke array-index. Binnen de constructormethode geeft u de context op waarin we de lay-out willen opblazen, die later van de hoofdactiviteit zal worden doorgegeven.
letterInf = LayoutInflater.van (c);
Eclipse had een moeten maken getCount methode schets. Werk de implementatie als volgt bij.
@Override public int getCount () return letters.length;
Dit vertegenwoordigt het aantal views, één voor elke letter. We noemen de methoden in de adapterklasse niet expliciet in de toepassing. Het is het besturingssysteem dat ze gebruikt om het gebruikersinterface-element te bouwen waar we de adapter op toepassen, wat in dit geval de rasterweergave zal zijn.
Update de implementatie van getView zoals weergegeven in het onderstaande codefragment.
@Override openbaar View getView (int position, View convertView, ViewGroup parent) // maak een knop voor de letter op deze positie in het alfabet Knop letter Btn; if (convertView == null) // blaas de lay-out van de knop opBtn = (Button) letterInf.inflate (R.layout.letter, parent, false); else letterBtn = (Button) convertView; // stel de tekst in op deze letterBtn.setText (letters [positie]); return letterBtn;
Neem even de tijd om alles te laten bezinken. In essentie bouwt deze methode elke weergave die via de adapter is toegewezen aan het gebruikersinterface-element. We blazen de lay-out van de knop op die we hebben gemaakt en stellen de letter in op basis van de positie in het alfabet dat de weergave vertegenwoordigt. We hebben aangegeven dat er 26 views in kaart worden gebracht, waarbij de positie van elk zijn positie in de alfabet array weergeeft. U kunt de andere methoden in de adapterklasse laten zoals ze zijn.
@Override public Object getItem (int arg0) return null; @Override openbare lange getItemId (int arg0) return 0;
Herzie de activiteitsklasse van de game opnieuw en voeg een instantievariabele toe voor de rasterweergave en de adapter.
privé GridView-brieven; private LetterAdapter ltrAdapt;
U moet ook nog een importinstructie toevoegen.
importeer android.widget.GridView;
In de onCreate methode, vóór de regel waarin u de spel spelen helpermethode, krijg een verwijzing naar de rasterweergave.
letters = (GridView) findViewById (R.id.letters);
Voeg de toe spel spelenhuidige implementatie met het volgende fragment. In dit fragment brengen we de adapter tot stand en stellen deze in op de rasterweergave.
ltrAdapt = nieuwe LetterAdapter (this); letters.setAdapter (ltrAdapt);
Start de applicatie in de emulator en u zou de gebruikersinterface moeten zien. U kunt echter nog niet communiceren met de knoppen. Dat is waar we ons in het derde en laatste deel van deze serie op zullen richten.
Als u uw applicatie op dit moment uitvoert, wordt de interface van de game weergegeven, maar deze reageert nog niet op gebruikersinteractie. We zullen de resterende functionaliteit in het laatste deel van deze serie implementeren.
Wanneer een speler op de letterknoppen klikt, moet de toepassing controleren of de geselecteerde letter in het doelwoord is opgenomen en het antwoord en galgen dienovereenkomstig bijwerken. We zullen ook een dialoog presenteren aan de speler als deze wint of verliest, en we zullen ook een helpknop toevoegen. Ten slotte voegen we de basisnavigatie toe via een actiebalk.
