Etter fra forrige måneds tutorial på grunnleggende layout, og spesielt LinearLayout, i denne opplæringen vil vi se på RelativeLayout, og på hvordan du kan gjenbruke layouter lett med theinclude direktivet. Å få et fast grep om hvordan Android layout fungerer er en stor hjelp til å gjøre ditt nybegynner app til noe som ser bra ut og har stor UI. Sjekk ut siste måneds tutorial for det grunnleggende XML og ressursforvaltning om det er noe her du ikke kjenner. Vi vil bruke den grunnleggende kodestruktur fra at opplæringen. (Se Android App Development for nybegynnere. Layout og UI alternativer, Part One)
RelativeLayout
Med LinearLayout, du kan bare vise ulike elementer stablet ved siden av hverandre eller over hverandre (selv om du kan neste LinearLayouts å gjøre begge disse i samme layout). RelativeLayout er mye mer fleksibel, slik at du kan angi posisjonen til hvert barn element i forhold til den overordnede eller til en annen navngitt element. En av de store fordelene med å bruke RelativeLayout løpet nestede LinearLayouts er at nestede vise grupper har en forestilling innvirkning. Hvis du kan oversette din nestet LinearLayout i en enkelt RelativeLayout, er det nesten alltid en god idé å gjøre det.
Først opp, la oss erstatte vår nestet LinearLayout fra siste tutorial med et enkelt RelativeLayout. Det vi ønsker er en TextView, en EditText under den, og to knappene under det. Bruke samme aktivitet som forrige tutorial, opprette en fil activity_relativelayout.xml:?
< xml version = "1.0" encoding = "UTF-8" > < RelativeLayout xmlns:? Android = " http://schemas.android.com/apk/res/android "xmlns: verktøy =" http://schemas.android.com/tools "android: layout_width =" match_parent "android: layout_height =" match_parent "> < TextView android: id = "+ id /helloTextView" android: layout_width = "fill_parent" android: layout_height = "wrap_content" android: layout_alignParentTop = "true" android: text = "@ streng /hallo" /> < EditText android: id = "+ id /nameEditText" android: layout_width = "fill_parent" android: layout_height = "wrap_content" android: layout_below = "@ id /helloTextView" android: hint = "@ string /navn" /> < Button android: layout_width = "150dp" android: layout_height = "wrap_content" android: layout_below = "@ id /nameEditText" android: layout_alignParentLeft = "true" android: text = "@ streng /setName" /> < Button android: layout_width = "150dp" android: layout_height = "wrap_content" android: layout_below = "@ id /nameEditText" android: layout_alignParentRight = "true" android: text = "@ streng /clearName" /> < /RelativeLayout >Du må også endre oppsettet referanse i LayoutTestActivity til vår nye layout filen:
public class LayoutTestActivity strekker Aktivitet {beskyttet void onCreate (Bundle savedInstanceState) {super.onCreate (savedInstanceState); setContentView (R.layout.activity_relativelayout); }}Kjør dette, og du skal se en layout som bildet nedenfor.
Alle elementene har høyde "wrap innhold", så de er like høye som deres innhold. Knappene har en bestemt bredde (som du kan spille rundt med den for å finne ut hva som ser bra ut).
De viktige nye layout attributter er layout_alignParentTop, layout_alignParentRight, layout_alignParentLeft, og layout_below. Navnene gjøre det ganske klart hva de gjør: er det disse layout attributter som gjør at du kan beskrive justeringen av elementer i forhold til andre elementer. En hoved element her er RelativeLayout selv; alle andre elementer i dette oppsettet er dens barn. Den layout_below (eller layout_above, etc) attributtet kan du angi et oppsett i forhold til en annen navngitt barn element. Det er en bunke med flere alternativer tilgjengelig, også -. Sjekk ut de RelativeLayout.LayoutParams API for å se dem alle
Sentrering og distribusjon av elementene
Du vil merke at TextView ovenfor isn ' t sentrert. For å sentrere det, har du to alternativer. Den første er å gjøre element fylle forelder, så sentrere teksten i element:
< TextView android: layout_width = "fill_parent" android: vekt = "center" />Den andre er å gjøre elementet en bestemt størrelse (her, innpakning dens innhold), deretter sentrere hele element innen den overordnede:
< TextView android: layout_width = "wrap_content" android: layout_centerHorizontal = "true" />.Du må kanskje kombinere disse hvis du ønsker et element å ha en bestemt bredde som er bredere enn sitt innhold, men også ønsker å sentrere element i moder
Du kan ikke bruke vekten eiendom (som vi brukte i forrige tutorial) i en RelativeLayout. Det betyr at du ikke kan spre dine elementer over hele ordnede beholderen ved å tildele dem en vekt. I stedet, hvis du ønsker å spre dine elementer ut, må du angi en bredde /høyde i dp. Hvis du bruker vekt er viktig for din layout, må du bruke en LinearLayout
Justere kantene
Her er en annen måte å legge ut elementene for å oppnå den samme effekten.
< pre> < TextView android: id = "+ id /helloTextView" android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: layout_centerHorizontal = "true" android: layout_alignParentStart = "true" android: text = "@ string /hallo "/> < EditText android: id = "+ id /nameEditText" android: layout_width = "fill_parent" android: layout_height = "wrap_content" android: layout_below = "@ id /helloTextView" android: hint = "@ string /navn" /> < Button android: id = "+ id /setNameButton" android: layout_width = "150dp" android: layout_height = "wrap_content" android: layout_below = "@ id /nameEditText" android: layout_toEndOf = "@ id /nameEditText" android: text = "@ streng /setName" /> < Button android: layout_width = "150dp" android: layout_height = "wrap_content" android: layout_below = "@ id /nameEditText" android: layout_toRightOf = "@ id /setNameButton" android: text = "@ streng /clearName" />attributter som ser ut som layout_toEndOf justere starten kanten av det elementet til slutten kanten av elementet referert. (layout_toStartOf justerer lementets endekant til starten kanten av elementet refereres til). Sjekk API docs for spesifikke detaljer som kant justerer til hvilke. Dette oppsettet vil se ut omtrent som den forrige layout, men knappene er litt til venstre for midten. Dette er fordi andre knappen er innrettet til høyre for den første knappen, i stedet for på linje med den overordnede høyre kant slik det var før. Du kan leke seg med å legge padding eller margin for å se hvordan det påvirker posisjon, også.
Hvis du fjerner layout_below linje fra de to knappene, får du dem kledde på forrige element. Dette skyldes at kantene vil bli justert, men uten å flytte dem nedover under referanseelementet.
Prøv ut de ulike layout alternativer for å få et inntrykk av hvordan de arbeider med hverandre. Den fullstendige listen over parametre er tilgjengelig på RelativeLayout.LayoutParams API referanseside.
Gjenbruk oppsett
Til slutt, en rask kommentar at du kan gjenbruke oppsett ved hjelp av blant annet tag. La oss si at vi ønsker å gjenbruke RelativeLayout ovenfor. Det må se ut akkurat som du ønsker å bruke den uansett hvor du er i ferd med å ta den med. Nå la oss sette opp en LinearLayout (include_layout_test.xml) for å slippe den inn?
< xml version = "1.0" encoding = "UTF-8" > < LinearLayout xmlns:? Android = "http : //schemas.android.com/apk/res/android "android: layout_width =" match_parent "android: layout_height =" match_parent "android: orientering =" vertikal "> < TextView android: id = "+ id /helloTextView" android: layout_width = "fill_parent" android: layout_height = "wrap_content" android: vekt = "center" android: layout_alignParentStart = "true" android: text = "@ streng /includetest "/> < inkluderer layout = "@ layout /activity_relativelayout" /> < /LinearLayout >.Som du ser i skjermbildet, dette gjør akkurat hva du vil den skal, inkludert RelativeLayout under TextView
< p>
Å kunne bruke XML-oppsett som dette har åpenbare fordeler i form av å gjøre en konsekvent (og maintainably konsekvent) se og føle på tvers av appen. Sett opp din gjentatte ganger brukt tekstlinjen eller knappen gruppe i sin egen XML-fil, og ta den med dit du vil at den skal vises
For flere Android app utvikling tutorials i denne serien kan du se:.
Android App Development for nybegynnere: Layout og UI alternativer, Part One
Android App Development: Håndtering Ekstra kamera evner
Android App Development: Hvordan Fange Video Anmeldelser