Android Layout Design Tutorial: Alt hvad du behøver at vide



Denne Android Layout Design Tutorial hjælper dig med at forstå, hvordan layouts kan designes ved hjælp af visningerne og visningsgrupperne med en demo.

Hvis du er ny til , er du landet på det perfekte sted at starte din læring om layoutdesignet. Denne artikel om Android layout design tutorial hjælper dig med at komme udnogle nyttige tip til at skabe et bedre UI-design og forklarer også, hvordan man designer et UI.

Jeg diskuterer nedenstående emner:





Så lad os komme i gang!

markørgrænseflade i java-eksempel

Android Layout Design Tutorial: Introduktion til UI-komponenter

Når vi taler om UI-komponenterne, består den typiske UI for enhver Android-applikation af disse komponenter:



  • Hovedaktionslinje
  • Vis kontrol
  • Indholdsområde
  • Split handlingslinje

Disse spiller en vigtig rolle, mens du udvikler en kompleks applikation. Du får et klart overblik over dette, når vi kommer til demo-sektionen i denne artikel.

En anden vigtig faktor, der hjælper med at tilpasse UI-designet, ville være visningskomponenten.

Lad os se, hvad der er en visning i



Vejledning til Android Layout Design: Visninger

TIL Udsigt betragtes som en grundlæggende byggesten til en korrekt brugergrænseflade, der faktisk oprettes fra Se klasse . Dette optager et rektangulært område på skærmen og tager sig til sidst af tegning og håndtering af begivenheder.

A View er basisklassen for widgets, som bruges til at oprette interaktive UI-komponenter som knapper, tekstfelter osv. Nu taler vi om rektangelområdet eller en boks. Det kan enten være et billede, et stykke tekst, en knap eller alt, hvad en Android-applikation kan vise. Rektanglet her er faktisk usynligt, men hver visning har en rektangelform.

Du har muligvis et spørgsmål, hvad kan størrelsen på dette rektangel være?

Svaret er, at du enten kan indstille det manuelt ved at angive den nøjagtige størrelse (med korrekte enheder) eller ved at bruge nogle foruddefinerede værdier. Disse foruddefinerede værdier er match_parentand wrap_content. Dette match_parent betyder, at det vil optage hele det ledige rum på enhedens display. Der henviser til, wrap_content henviser til, at det kun optager så meget plads, som det kræves for at dets indhold kan vises.

Lad os nu påpege de store forskelle mellem View og ViewGroup.

Udsigt

  1. Udsigt objekter er de grundlæggende byggesten i UI-elementerne i Android.
  2. En visning er et simpelt rektangelfelt, der svarer på brugerens handlinger.
  3. Visning henviser til android.view.View-klassen, som er basisklassen for alle UI-klasser.
  4. Eksempler er EditText, Button, CheckBox osv.

ViewGroup

  1. ViewGroup er den usynlige container, der indeholder View og ViewGroup.
  2. ViewGroup er basisklassen for Layouter .
  3. For eksempel er LinearLayout den ViewGroup, der indeholder Button (View), og andre Layouts også.

Lad os nu gå videre og forstå de nuværende layout.

Vejledning til Android Layout Design: Typer af layout

TIL layout definerer strukturen for en brugergrænseflade i applikationen. Alle elementer i layoutet er bygget ved hjælp af et hierarki af Udsigt og ViewGroup genstande.

Lad os nu se, hvordan layoutet erklæres.

Du kan erklære et layout på to måder:

  • Erklær UI-elementer i XML. Android leverer et ligetil XML-ordforråd, der svarer til visningsklasser og underklasser, såsom dem til widgets og layouts.

Bemærk: Du kan også bruge Android Studios Layout Editor til at opbygge dit XML-layout ved hjælp af en træk-og-slip-grænseflade.

  • Øjeblikkelig layoutelementer på driftstid . Applikationen kan oprette Udsigt og ViewGroup objekter og manipulere deres egenskaber programmatisk.

Lad os diskutere de forskellige typer layout.

UI i Android er et hierarki af Views og ViewGroups. ViewGroups vil være mellemnoder i hierarkiet, og visningerne vil være terminalnoder.

  • Lineært layout
  • Absolut layout
  • Relativt layout
  • Tabellayout
  • Rammelayout

Lad os diskutere dem detaljeret.

Lineært layout

Det lineære layout bruges til at placere et element på hver linje. Så alle elementerne placeres ordentligt fra top til bund. Dette er et meget udbredt layout til oprettelse af formularer på Android. Det kan også henvises til som en synsgruppe, der justerer alle børn i en enkelt retning, lodret eller vandret.

Absolut layout

I absolut layout kan du angive de nøjagtige koordinater for hver kontrol, du vil placere. I denne type layout kan du angive de nøjagtige X- og Y-koordinater for hver kontrol. Det giver dig mulighed for at specificere den nøjagtige placering af sine børn.

Relativt layout

Et relativt layout er en ViewGroup der viser børns synspunkter i relative positioner. Dukan angive placeringen af ​​elementerne i forhold til andre elementer eller i forhold til den overordnede container.

Tabellayout

Ved hjælp af tabellayoutet kan du oprette en tabel med rækker og kolonner og placere elementer i dem. I hver række kan du angive et eller flere elementer. Du kan bruge denne kommando til at oprette et nyt tabellayout.

Rammelayout

Rammelayoutet bruges, når du vil vise et element på hver skærm. Ved hjælp af rammelayoutet kan du have flere emner.Dette rammelayout er en pladsholder på skærmen, som du kan bruge til at vise en enkelt visning.

Vejledning til Android Layout Design: Måleenheder

Når du angiver størrelsen på et element i en Android UI, skal du helt sikkert huske følgende måleenheder.

Enhed Beskrivelse
dp Densitetsuafhængig pixel. 1dp svarer til en pixel på en 160dpi skærm.
sp Skaler uafhængig pixel. Dette svarer meget til dp, men bare det anbefales at angive skriftstørrelser.
pt Punkt. Et punkt er defineret til at være 1/72 tomme.
px Pixel. Svarer til faktiske pixels på skærmen

Lad os nu gå videre til det sidste emne i denne artikel.

Vejledning til Android Layout Design: Demo

I denne demo-sektion skal vi forstå, hvordan man arbejder med layouts i Android Studio .

Se til Android Studio.

Sådan ser layoutet ud. Vælg bare tegningen, så finder du et par klasser, vælg en hvilken som helst anden klasse under denne tegning. Du kan enten kode layoutstrukturen, eller du kan se designet og bare trække og slippe komponenterne i designområdet.

Demo - Android Layout Design Tutorial - Edureka

Du kan se de komponenter, du har valgt, under komponenttræet.

Du kan også finde disse i layoutet.

  1. Palette : Dette indeholder listen over visninger og grupper, som du kan trække til dit layout.
  2. Komponent Træ : Består af visningshierarkiet for dit layout.
  3. Værktøjslinje : Knapper til at konfigurere layoutudseendet i editoren og til at ændre et par layoutattributter.
  4. Design editor : Layout i visningen Design eller Blueprint eller begge dele. Også betragtet som designområdet.
  5. Egenskaber : Det styrer den valgte visnings attributter.

Med dette kommer vi til slutningen af ​​denne artikel om 'Android Layout Design Tutorial'. Håber I er klare med hvad der er delt med jer i denne vejledning.Hold øje med andre blogs og held og lykke med din Android-udviklingskarriere.

Nu hvor du har forstået det grundlæggende i Android Layout Design, skal du tjekke af Edureka, et pålideligt online læringsfirma med et netværk på mere end 250.000 tilfredse elever spredt over hele kloden.

Edurekas kursus i certificering af Android-appudvikling er designet til studerende og fagfolk, der ønsker at være en Android-udvikler. Kurset er designet til at give dig et forspring i Java-programmering og træne dig til både kerne- og avancerede koncepter sammen med et projekt, hvor du forventes at oprette en app i Android.

Har du et spørgsmål til os? Nævn det i kommentarfeltet i denne 'Android Layout Design Tutorial' -blog, og vi vender tilbage til dig hurtigst muligt.