Komme i gang med XML Layouts

Denne opplæringen vil lære deg grunnleggende om å bygge Android-grensesnittoppsett med XML. Les videre!

Når du kommer i gang med å utvikle Android-apper med Eclipse og ADT-plugin, er Eclipse's kraftige grafiske layoutredigerer et flott sted å begynne å visuelt utforme brukergrensesnittet. Men dette "hva du ser er det du får" tilnærmingen har sine begrensninger, og på et tidspunkt må du bytte til XML.

En av de største fordelene ved å erklære brukergrensesnittet ditt i XML er evnen til å holde brukergrensesnittet og oppførselen til appen din skilt, noe som gir deg friheten til å finjustere appens presentasjon uten å forstyrre sin underliggende funksjonalitet.

I denne artikkelen vil jeg vise deg hvordan du utformer en grunnleggende XML-layout fra grunnen, inkludert definering av rotelementet, spesifisering av høyde- og breddeparametere og tilsetning av enkelte grunnleggende brukergrensesnittelementer. Til slutt vil jeg bruke dette grunnleggende layoutet til å demonstrere noen avanserte XML-alternativer, for eksempel å tildele forskjellig mengde plass til forskjellige objekter, og komme i gang med strengressurser.

Merk: I Android skal XML-oppsett lagres i res / layout-katalogen med .xml-utvidelsen.

Del 1: Grunnleggende om XML Layout

Først vil vi bli vant til XML ved å lage et svært grunnleggende Android-brukergrensesnitt som bruker LinearLayout-visningsgruppen til å holde et avkrysningsbokselement. Åpne res / layouts / activity_main.xml filen og la oss komme i gang.

Trinn 1: Angi ditt rotelement

Brukergrensesnittet må inneholde et enkelt rotelement som fungerer som en visuell beholder for alle dine andre gjenstander. Roterelementet kan enten være en ViewGroup (dvs. LinearLayout, ListView, GridView) et fletteelement eller en View, men det må inneholde XML-navneområdet. I dette eksemplet bruker jeg LinearLayout, en ViewGroup som justerer alle barn i en bestemt retning.

En LinearLayout består av å åpne og lukke XML-koder:

 < LinearLayout… >

I åpningsfanen må du definere XML-navneområdet, som er en standard som anbefales av W3C. Definere XML-navneområdet i Android er enkelt, bare skriv inn følgende kode og nettadresse som en del av åpningen LinearLayout-taggen:

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

Trinn 2: Bredde og høyde

Deretter angir du bredde- og høydeparametrene for rotelementet ditt. I de fleste tilfeller bruker du "fill_parent" -verdien for rotelementet, da dette instruerer det til å ta opp hele enhetens skjerm.

Skriv inn følgende XML for parameterne høyde / bredde:

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

XML-en din bør nå se slik ut:

Trinn 3: Opprette et avkrysningsboks

Det er på tide å legge til noe på det blanke lerretet! Skriv inn åpningskoden for avkrysningsruten. Fordi dette er et brukergrensesnitt, er det nødvendig med noen ekstra XML:

1) Identifiser varen din

Eclipse bruker et heltall-ID for å identifisere forskjellige UI-elementer i et tre. Dette bør refereres som en streng, ved hjelp av 'id' -attributtet og følgende syntaks:

android: id = "id @ + / navnet"

I dette eksemplet refererer vi til dette brukergrensesnittet som 'CheckBox:'

 android: id = "id @ + / boksen"

2) Bredde / Høyde Parametre: Wrap_content

Igjen må du angi parametrene for høyde / bredde. Hvis du angir dette attributtet til 'wrap_content', vises det tilsvarende elementet stort nok til å legge til innholdsformatet. Vi kan bruke syntaksstrukturen for høyde / bredde fra tidligere, erstatte 'fill_parent' med 'wrap_content:'

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

3) Sett inn teksten

Til slutt må du spesifisere teksten som skal vises ved siden av avmerkingsboksen. Vi merker av for å vise 'Ja':

 android: text = "yes" />

XML-en din bør nå se slik ut:

Kjør koden din i Android-emulatoren for å se XML-en i handling!

Del 2: Opprett ditt andre brukergrensesnitt med XML

I den andre delen av denne opplæringen ser vi på noe mer avansert XML for finjustering av brukergrensesnittet ditt. Vi oppretter en layout bestående av to knapper, og bruker deretter vektvektypen til å endre prosentdelen av layoutplassen som er tildelt hver, før de kortfattes dekker grunnleggende om strengressurser.

Trinn 1: Lag din layout

Det første trinnet er å skape barebenene i oppsettet ditt. Vi vil bruke LinearLayout-rotasjonselementet fra det forrige eksempelet, sammen med bredde / høydeparametrene og, selvfølgelig, XML-navneområdet:

Trinn 2: Opprett knappene dine

For å opprette den første knappen legger du til "Knapp" -åpningstaggen og integer-ID-en ved hjelp av elementnavnet'-knappen1. '

Trinn 3: Kontroller emulatoren

For å forhåndsvise hvordan dette vil se ut på en virkelig Android-enhet, start opp emulatoren og ta en titt!

Del 3: Avanserte XML-alternativer

Nå har du ditt grunnleggende brukergrensesnitt, vi bruker noe mer avansert XML for å forfine dette enkle layoutet.

Sett Layout_Weight

Attributtet 'android: layout_weight' lar deg spesifisere størrelsesforholdet mellom flere grensesnittelementer. Enkelt sagt, jo høyere vektverdien, desto større andel av tildelt plass, og jo mer UI-elementet utvides. Hvis du ikke angir en vekt, antar Eclipse vekten for alle elementer er null, og deler den tilgjengelige plassen opp på samme måte. Mellomforholdet kan settes med følgende XML:

 android: "" layout_weight =

I dette eksemplet vil vi tildele 'button1' med en verdi på 1 og 'button2' med en verdi på 2.

Merk, dette er bare et tillegg; du trenger ikke å endre noen av eksisterende kode.

Ovennevnte XML vil opprette to knapper av forskjellige størrelser:

En Intro til String Resources

En strengressurs kan gi tekststrenger for din søknad og ressursfiler. I de fleste tilfeller er det god praksis å lagre alle strengene dine i den dedikerte mappen 'strings.xml', som kan finnes av:

1) Åpner 'Res'-mappen i Eclipse's prosjektutforsker.

2) Åpner mappen 'Verdier'.

3) Åpner filen 'strings.xml'.

Slik lager du en ny streng i Android-prosjektet ditt:

1) Åpne filen 'strings.xml' og velg 'Legg til'.

2)Velg 'String' fra listen og klikk 'OK'.

3) Velg din nylig opprettede streng fra menyen Ressurserelementer.

4) I menyen til høyre for attributter for streng, skriv inn et navn for strengen, og en verdi (Merk, attributten "navn" brukes til å referere til strengverdien, og strengverdien er dataene som skal vises. )

I dette eksemplet vil vi gi strengen navnet 'agree' og angi verdien 'Jeg godtar vilkårene.'

5) Lagre denne nye strengressursen.

6) Åpne filen 'activity_main.xml'. Finn delen av koden som definerer 'button1' og endre 'android: text' -attributtet for å ringe til denne nye strengressursen. Kaller en strengressurs, bruker følgende syntaks:

android: text = "@ snor / navnet-på-ressursen"

Så i dette eksemplet vil koden være:

 android: text = "@ snor / enig"

For å enkelt vise utgangen, slett 'button2'. Koden din skal nå se slik ut:

Sjekk visuell utgang av koden din - teksten skulle ha blitt erstattet med verdien av din "enig" streng.

Dette er en veldig grunnleggende streng, uten noen ekstra styling eller formatering attributter. Hvis du vil lære mer om strengressurser, er de offisielle Android-dokumentene en god kilde til ytterligere informasjon.

Konklusjon

I denne artikkelen har vi dekket XML-essensialene for å opprette et rotelement for oppsettet ditt og kodet noen grunnleggende brukergrensesnittelementer, før du flytter inn på noe mer avansert XML som gir deg større kontroll over brukergrensesnittet ditt. Du bør nå være klar til å lage dine egne enkle brukergrensesnitt ved hjelp av XML!

Kode