I løpet av de neste par tutorials, vil vi se nærmere på de grunnleggende layout og grafisk grensesnitt aspekter av Android API. Hvis du har lest andre tutorials i denne serien, har du allerede vært å skape grunnleggende oppsett, knapper og menyer; nå vi kommer til å se i dybden på de tilgjengelige layout og UI alternativer, for å gi deg mer innsikt i hvordan du kan lage den beste visuelle brukeropplevelsen for appen.
Denne første opplæringen ser på LinearLayout, som vel som på noen grunnleggende begreper som element attributter. I de neste par tutorials vil vi også se på RelativeLayout, sjekk ut flere typer meny tilgjengelig, ta en titt på listene, rutenett, og rulle, og finne ut hvordan du kan lage knapper ser bedre.
utforminger og XML: Det grunnleggende
Den grunnleggende Android tilnærming til layout, er å sette den opp i XML, i en layout fil som vanligvis finnes i res /layout /. Det er også mulig å ta så og endre denne informasjonen layout programmatisk under kjøring som appen krever. (Det er også mulig rett og slett på å bruke layouten informasjon under kjøring, men det er mindre fleksibel og vedlikeholdsvennlig enn å bruke XML, og jeg vil ikke dekke det her.)
Strukturen i en XML-layout fil er lik strukturen i en HTML nettside - du kan tenke på det som en serie nestede elementer, eller som et tre. Hver layout fil har en enkelt root element, som må være en visning eller ViewGroup element (for eksempel LinearLayout, RelativeLayout, Listview ...). Begrensninger i arrangementer av de underordnede elementer (rutene, knapper, bilder, tekst ... alle de visuelle delene av programmet) vil variere i forhold til den spesifikke root element. La oss se på hva vi kan gjøre med en LinearLayout
LinearLayout. Det grunnleggende
En LinearLayout er en veldig enkel layout som bare arrangerer alle sine barn i enten en vertikal kolonne eller en horisontal rad , avhengig av hvordan det er spesifisert. En vertikal LinearLayout vil bare ha ett barn per rad (slik at det er en søyle av enkeltelementer), og en horisontal LinearLayout vil bare ha én enkelt rad av elementer på skjermen. Det er åpenbare ulemper til dette for mer kompliserte programmer - du sannsynligvis ikke vil at alle knappene for å stille opp en under den andre, for eksempel. For å sette opp mer kompliserte ordninger, vil du sannsynligvis ønske å bruke en RelativeLayout (som vi skal se på i en annen tutorial); Vi vil også ha en rask titt på hekkende LinearLayouts nederst i denne opplæringen.
Her er en grunnleggende vertikal LinearLayout. Opprett en ny Android-prosjektet, LayoutTest, og sette dette i res /layout /activity_layout_test.xml:?
< xml version = "1.0" encoding = "UTF-8" > < LinearLayout xmlns: android = "http://schemas.android.com/apk/res/android" android: layout_width = "fill_parent" android: layout_height = "fill_parent" android: orientering = "vertikal" > < TextView android: layout_width = "fill_parent" android: layout_height = "wrap_content" android: text = "@ streng /hallo" /> < EditText android: layout_width = "fill_parent" android: layout_height = "wrap_content" android: hint = "@ string /navn" /> < Button android: layout_width = "100dp" android: layout_height = "wrap_content" android: text = "@ streng /setName" /> < /LinearLayout >Som omtalt i tidligere tutorials, er det lurt å holde strenger i en ressurs fil, i stedet for hardkode dem i layouten. Dette gjør det enklere internasjonalisering, og er mer vedlikeholdsvennlig. Så du må også redigere res /verdier /strings.xml:?
< xml version = "1.0" encoding = "UTF-8" > < resources >? < string name = "APP_NAME" > LayoutTest < /string > < string name = "hallo" > Hei, verden <! /string > < string name = "navn" > Name < /string > < string name = "setName" > Set navn < /string > < /ressurser >Som du ser (og som ble brukt i tidligere tutorials), kan du referere til Android streng ressurser med @ streng /< i> streng
. Dette er et standard format som vi vil se brukt til andre ressurser på grunn av kurset.
For å gjøre dette dukker opp på skjermen, vil du også trenger å redigere src /no /eksempel /layouttest /LayoutTestActivity. java:
pakken com.example.layouttest; public class LayoutTestActivity strekker Aktivitet {beskyttet void onCreate (Bundle savedInstanceState) {super.onCreate (savedInstanceState); setContentView (R.layout.activity_layout_test); }}Kjør denne (på telefonen eller på emulator), og du bør få en utforming som den på venstre. Alle tre elementer er lagt ut en under den andre.
Element bredde og vekt
Du vil merke at de tre elementene i vår layout ovenfor meste har enten fill_parent eller wrap_content sett for sin høyde og bredde. Selv om du kan angi en pixel verdi (som med Button her), mye av tiden det er disse to meta-verdier som er brukt. fill_parent innretninger for å fylle den overordnede elementet i den retningen (bredde og høyde); wrap_content betyr at elementet skal være like bred eller høy som innholdet krever.
I eksempelet ovenfor, har alle de tre elementene wrap_content som deres høyde, slik at de er presset opp til toppen av skjermen. Prøv å sette høyden på EditText element til befill_parent, og du bør få bildet til høyre. Merk at du ikke kan se knappen i det hele tatt. Den EditText element har behørig fylt den overordnede element (den LinearLayout), og det er ikke plass til venstre for knappen.
For å komme forbi dette problemet, men fortsatt spre elementene ut litt bedre, kan du bruke android : layout_weight attributt. Dette tildeler en "vekt" til elementene. Standard vekt er 0, og et høyere tall betyr mer viktig element. Det viktigste elementet vil bli bevilget mer av skjermen plass. Prøv dette:
< LinearLayout ... > < TextView android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: text = "@ streng /hallo" /> < EditText android: layout_width = "fill_parent" android: layout_height = "wrap_content" android: layout_weight = "1" android: hint = "@ string /navn" /> < Button android: layout_width = "100dp" android: layout_height = "wrap_content" android: text = "@ streng /setName" /> < /LinearLayout >Nå The EditText element er utvidet til å fylle all tilgjengelig plass , som bildet til venstre nedenfor. Men hvis du øker vekten av EditText element til to, og gi de to andre elementene en vekt på 1, vil du få bildet til høyre nedenfor. Denne gangen, fordi alle vektene er ikke-null, når de har alle fått sin minimalt med plass (wrap_content, så høyden av deres innhold), de resterende plass på skjermen er delt i to. Den ene halvdelen går til det viktigste elementet, og den andre halvparten er delt mellom de to andre elementene.
Hvis du vil at alle dine underordnede elementer for å få akkurat den samme plassen på skjermen, bør du ikke bruke wrap_content , fordi det vil tildele plass til innhold først, og bare da dele opp den resterende plassen. I stedet angir høyde (eller bredde, for en horisontal layout) til 0DP, deretter sette vekten av hver visning til 1.
Layout attributter: Borders, padding, id ...
Det er en haug med andre layout attributter til videre kontrollere utseendet på layout. Her er noen ofte brukte alternativer:
android: tyngdekraften - justerer innhold
av elementet i selve elementet. Så kan settes til toppen, bunnen, senter, center_vertical, etc.
android: layout_gravity - justerer element
innenfor sin forelder. Så for å sentrere en knapp, kan du bruke dette; å sentrere tekst i en knapp, kan du bruke android: tyngdekraften. Brukbare verdiene er de samme
android: padding - sette padding i piksler for alle fire kanter.. Du kan også bruke paddingBottom, paddingLeft, etc.
android: textcolor - gjelder bare for tekstelementer, men du kan bruke den til å sette tekstfarge
I bildet. nedenfor, de to øverste elementene har både android: tyngdekraften og android: layout_gravity satt til sentrum; knappen har bare android: tyngdekraften satt til sentrum. Slik at teksten er sentrert i knappen, men selve knappen er ikke sentrert.
Når du setter farger, må du enten referere til Android innebygde farger (merk at mange av de mer interessante fargene ble bare introdusert med API 14, Ice Cream Sandwich):
< TextView ... android: textcolor = "@ android: farge /holo_green_dark" ... />eller å lage din egen farge med et res /verdier /colors.xml filen:?
< xml version = "1.0" encoding = "UTF-8" > < resources >? < farge name = "blue" > # 0000FF < /farge > < /ressurser >og viser til at:
< TextView ... android: textcolor = "@ farge /blue" ... />For den (veldig lang) liste over attributter for et gitt element, sjekk ut API for dette elementet. (Her er listen for TextView, for eksempel.) Du kan bruke XML-attributter for å sette et felt for å ha telefonnummer inngang (i stedet for standard tekst), eller for å vise prikker i stedet for bokstaver, som med et passordfelt, eller for å automatisk konvertere webadresser til klikkbare linker ... sjekke ut API for mye, mye mer
Et siste notat på android. id attributt, som vi allerede har brukt i tidligere tutorials. Når du oppretter en ID for et nytt element, er det vanlig format + id / navn
. Den + indikerer at det er en ny ID, og en ny ressurs heltall vil bli opprettet for det på neste kompilere. For eksempel:
< EditText android: id = "+ id /nameEditText" ... />Du trenger dette hvis du vil referere til elementet i koden din (for eksempel å få en verdi som brukeren innganger til en EditText boks).
Hekkende oppsett
Til slutt, er det mulig å reir LinearLayouts i hverandre. Dette vil få deg en horisontal rad med knapper på bunnen av en vertikal LinearLayout, som på bildet under koden:
< LinearLayout ... > < TextView ... /> < EditText ... /> < LinearLayout android: layout_gravity = "center" android: orientering = "horisontal" android: layout_width = "fill_parent" android: layout_height = "wrap_content" android: layout_weight = "1" > < Button android: layout_width = "150dp" android: layout_height = "wrap_content" android: layout_gravity = "center" android: layout_weight = "1" android: padding = "5dp" android: vekt = "center" android: text = " @ string /setName "/> < Button android: layout_width = "150dp" android: layout_gravity = "center" android: layout_height = "wrap_content" android: layout_weight = "1" android: padding = "5dp" android: vekt = "center" android: text = " @ string /clearName "/> < /LinearLayout > < /LinearLayout >Merk at for å sentrere knappene i nederste rad, den omkringliggende LinearLayout må være sentrert i den overordnede (med android: layout_gravity), samt knappene selv sentrert, og deres vekt både satt til 1. Med mer kompliserte oppsett som dette, vil du ofte behov for å eksperimentere litt med innstillingene for å få akkurat det utseendet du ønsker. Sørg for, selvfølgelig, for å sjekke oppsettet på flere enheter; i en senere opplæringen vil vi se på utviklingen for beste opptreden på flere enheter. Anmeldelser