Aan de slag met XML-lay-outs

In deze zelfstudie leer je de fundamenten van het bouwen van Android-interface-lay-outs met XML. Lees verder!

Wanneer u begint met het ontwikkelen van Android-apps met behulp van Eclipse en de ADT-plug-in, is de krachtige grafische lay-outeditor van Eclipse een geweldige plaats om visueel uw gebruikersinterface te ontwerpen. Echter, deze "wat je ziet is wat je krijgt" aanpak heeft zijn beperkingen, en op een gegeven moment moet je overschakelen naar XML.

Een van de belangrijkste voordelen van het verklaren van uw gebruikersinterface in XML is de mogelijkheid om de gebruikersinterface en het gedrag van uw app gescheiden te houden, waardoor u de vrijheid heeft om de presentatie van uw app aan te passen zonder de onderliggende functionaliteit te onderbreken.

In dit artikel laat ik je zien hoe je een eenvoudige XML-layout helemaal zelf kunt ontwerpen, inclusief het definiëren van het rootelement, het opgeven van hoogte- en breedteparameters en het toevoegen van enkele elementaire gebruikersinterface-elementen. Ten slotte zal ik deze basislay-out gebruiken om een aantal geavanceerde XML-opties te demonstreren, zoals het toewijzen van verschillende hoeveelheden ruimte aan verschillende objecten en aan de slag te gaan met tekenreeksen.

Notitie: In Android moeten XML-lay-outs worden opgeslagen in de map res / layout met de extensie .xml.

Deel 1: Basisbeginselen van XML-indeling

Ten eerste zullen we wennen aan XML door een zeer eenvoudige Android-gebruikersinterface te maken die de LinearLayout-weergavegroep gebruikt om een checkboxelement te behouden. Open het bestand res / layouts / activity_main.xml en laten we aan de slag gaan.

Stap 1: Specificeer uw basiselement

De gebruikersinterface moet een enkel basiselement bevatten dat fungeert als visuele container voor al uw andere items. Het rootelement kan een ViewGroup zijn (d.w.z. LinearLayout, ListView, GridView), een samenvoegelement of een weergave, maar het moet de XML-naamruimte bevatten. In dit voorbeeld gebruik ik LinearLayout, een ViewGroup die alle kinderen in een opgegeven richting uitlijnt.

Een LinearLayout bestaat uit het openen en sluiten van XML-tags:

 < LinearLayout… >

Op het tabblad Opening moet u de XML-naamruimte definiëren, een standaard die wordt aanbevolen door de W3C. Het definiëren van de XML-naamruimte in Android is eenvoudig, voer eenvoudig de volgende code en URL in als onderdeel van de eerste LinearLayout-tag:

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

Stap 2: breedte en hoogte

Geef vervolgens de parameters width en height op voor uw rootelement. In de meeste gevallen gebruikt u de waarde "fill_parent" voor het rootelement, omdat dit de opdracht geeft om het volledige scherm van het apparaat te gebruiken.

Voer de volgende XML in voor de hoogte / breedte parameters:

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

Je XML zou er nu als volgt uit moeten zien:

Stap 3: een selectievakje maken

Het is tijd om iets toe te voegen aan dat lege canvas! Voer de openingstag in voor uw selectievakje. Omdat dit een UI-element is, is enige aanvullende XML vereist:

1) Identificeer uw artikel

Eclipse gebruikt een integer ID om verschillende UI-elementen in een boom te identificeren. Hiernaar moet worden verwezen als een tekenreeks, met behulp van het kenmerk 'id' en de volgende syntaxis:

android: id = "@ + id / name"

In dit voorbeeld verwijzen we naar dit UI-element als 'CheckBox:'

 android: id = "@ + id / CheckBox"

2) Breedte / Hoogte Parameters: wrap_content

Nogmaals, u moet de hoogte / breedte-parameters invoeren. Als u dit kenmerk instelt op 'wrap_content', wordt het bijbehorende item groot genoeg weergegeven om de inhoud te resizen. We kunnen de syntaxisstructuur height / width van vroeger hergebruiken en 'fill_parent' vervangen door 'wrap_content:'

 android: layout_width = "wrap_content" android: layout_height = "wrap_content"

3) Stel uw tekst in

Ten slotte moet u de tekst opgeven die naast het selectievakje moet worden weergegeven. We zullen het selectievakje instellen om 'Ja' weer te geven:

 android: text = "Ja" />

Je XML zou er nu als volgt uit moeten zien:

Voer uw code uit in de Android Emulator om uw XML in actie te zien!

Deel 2: Maak uw tweede gebruikersinterface met XML

In het tweede deel van deze zelfstudie bekijken we wat meer geavanceerde XML voor het afstemmen van uw gebruikersinterface. We maken een lay-out die bestaat uit twee knoppen en gebruiken dan het kenmerk 'gewicht' om het percentage lay-outruimte dat aan elk is toegewezen te wijzigen voordat de basisbegrippen van de tekenreeksbronnen kort worden behandeld..

Stap 1: maak uw lay-out

De eerste stap is het maken van de barebones van uw lay-out. We zullen het LinearLayout-rootelement uit het vorige voorbeeld hergebruiken, samen met de parameters width / height en natuurlijk de XML-naamruimte:

Stap 2: maak je knoppen

Als u de eerste knop wilt maken, voegt u de openingstag 'Knop' toe en de integer-ID met de elementnaam 'knop 1'.

Stap 3: Controleer de emulator

Als u wilt bekijken hoe dit eruit zal zien op een levensecht Android-apparaat, start u de emulator op en neemt u een kijkje!

Deel 3: Geavanceerde XML-opties

Nu hebt u uw basisgebruikersinterface, we zullen wat geavanceerdere XML gebruiken om deze eenvoudige lay-out te verfijnen.

Set Layout_Weight

Met het kenmerk 'android: layout_weight' kunt u de grootteverhouding tussen meerdere UI-elementen opgeven. Simpel gezegd, hoe hoger de gewichtswaarde, hoe groter de toegewezen hoeveelheid ruimte, en hoe meer het UI-element groter wordt. Als u geen gewicht opgeeft, neemt Eclipse aan dat het gewicht voor alle items nul is en verdeel de beschikbare ruimte gelijkmatig. De ruimteverhouding kan worden ingesteld met de volgende XML:

 android: "?" layout_weight =

In dit voorbeeld zullen we 'knop 1' toewijzen met een waarde van 1, en 'knop 2' met een waarde van 2.

Notitie, dit is puur een toevoeging; u hoeft de bestaande code niet te wijzigen.

De bovenstaande XML zal twee knoppen van verschillende groottes maken:

Een intro voor stringresources

Een tekenreeksbron kan tekstreeksen voor uw toepassing en bronbestanden bieden. In de meeste gevallen is het een goede gewoonte om al uw strings op te slaan in de speciale map 'strings.xml', die te vinden is op:

1) De map 'Res' openen in Eclipse's projectverkenner.

2) De map 'Waarden' openen.

3) Het bestand 'strings.xml' openen.

Om een nieuwe string in uw Android-project aan te maken:

1) Open het bestand 'strings.xml' en selecteer 'Toevoegen'.

2)Selecteer 'String' in de lijst en klik op 'OK'.

3) Selecteer uw nieuw gemaakte reeks in het menu 'Elementen van elementen'.

4) Voer in het rechterdeel 'Attributen voor tekenreeks' een naam voor de tekenreeks in en een waarde (Opmerking: het attribuut 'naam' wordt gebruikt om naar de tekenreekswaarde te verwijzen en de tekenreekswaarde is de gegevens die worden weergegeven. )

In dit voorbeeld geven we de tekenreeks de naam 'akkoord' en voer de waarde 'Ik ga akkoord met de algemene voorwaarden' in.

5) Sla deze nieuwe tekenreeksbron op.

6) Open uw 'activity_main.xml' bestand. Zoek het gedeelte met code dat 'knop 1' definieert en wijzig het attribuut 'android: text' om deze nieuwe tekenreeksbron aan te roepen. Bij het aanroepen van een tekenreeksbron wordt de volgende syntaxis gebruikt:

android: text = "@ string / name-of-resource"

In dit voorbeeld is de code dus:

 android: text = "@ string / mee eens"

Voor het gemak van het bekijken van de uitvoer, verwijder 'button2'. Uw code zou er nu als volgt uit moeten zien:

Controleer de visuele uitvoer van uw code - de tekst zou moeten zijn vervangen door de waarde van uw 'eens' string.

Dit is een zeer eenvoudige reeks, zonder enige aanvullende stijl- of opmaakkenmerken. Als u meer wilt weten over tekenreeksen, zijn de officiële Android-documenten een geweldige bron van verdere informatie.

Conclusie

In dit artikel hebben we de XML-essentials besproken van het maken van een rootelement voor uw lay-out en een aantal elementaire gebruikersinterface-elementen gecodeerd, voordat u doorgaat naar een meer geavanceerde XML die u meer controle geeft over uw gebruikersinterface. U moet nu klaar zijn om uw eigen eenvoudige gebruikersinterfaces te maken met behulp van XML!

Code