Android UI Design Tutorial

I dette kapittelet vil vi se på de forskjellige UI komponenter av android skjermen. Dette kapittelet dekker også tips for å gjøre en bedre UI design og forklarer også hvordan å designe en UI.

UI skjermkomponenter

En typisk brukergrensesnittet til en Android-applikasjon består av handlingen bar og søknad innholdsområdet.

Hoved Handling Bar

Visningskontroll

Content-området

< p> Split Handling Bar

Disse komponentene har også blitt vist på bildet nedenfor −

Forstå Skjermkomponenter

Den grunnleggende enhet android søknad er aktiviteten. En UI er definert i en xml fil. Under kompilering, er hvert element i XML kompilert inn tilsvarende Android GUI klasse med attributter representert av metoder.

Se og ViewGroups

En aktivitet er består av synspunkter. En visning er bare en widget som vises på skjermen. Det kan være knapp e.t.c. En eller flere visninger kan grupperes sammen i en Groupview. Eksempel på ViewGroup inkluderer oppsett.

Typer layout

Det er mange typer layout. Noen av disse er listet opp nedenfor:

Linear Layout

Absolute Layout

Tabelloppsett


Frame Layout

Relativ Layout

Linear Layout

Lineær layout er videre delt inn horisontal og vertikal utforming. Det betyr at det kan ordne visninger i en enkelt kolonne eller i en enkelt rad. Her er koden for lineær layout (vertikal) som inneholder en tekstvisning
< 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" /> < /LinearLayout >
AbsoluteLayout

AbsoluteLayout lar deg angi den nøyaktige plasseringen av sine barn. Det kan bli erklært som dette
< AbsoluteLayout android. Layout_width = "fill_parent" Android: layout_height = "fill_parent" xmlns: android = "http://schemas.android.com/apk/res/android" > < Button android: layout_width = "188dp" android: layout_height = "wrap_content" android: text = "Button" android: layout_x = "126px" android: layout_y = "361px" /> < /AbsoluteLayout >
TableLayout

De TableLayout grupper utsikt inn rader og kolonner. Det kan bli erklært som dette
< TableLayout xmlns:. Android = "http://schemas.android.com/apk/res/android" android: layout_height = "fill_parent" android: layout_width = "fill_parent" > < TableRow > < TextView android: text = "Brukernavn:" android: width = "120dp" /> < EditText android: id = "+ id /txtUserName" android: width = "200dp" /> < /TableRow > < /TableLayout >
RelativeLayout

RelativeLayout kan du angi hvordan utsikt barnet er plassert i forhold til hverandre other.It kan bli erklært som dette
< RelativeLayout android. id = "@ + id /RLayout "android: layout_width =" fill_parent "Android: layout_height =" fill_parent "xmlns: android =" http://schemas.android.com/apk/res/android "> < /RelativeLayout >
FrameLayout

FrameLayout er en plassholder på skjermen som du kan bruke til å vise en enkelt visning. Det kan bli erklært som dette
< xml version = "1.0" encoding = "utf-8" > < FrameLayout android:.? Layout_width = "wrap_content" android: layout_height = "wrap_content" android: layout_alignLeft = "@ + id /lblComments" android: layout_below = "+ id /lblComments" android: layout_centerHorizontal = "true" > < Imageview android: src = "@ teikne /droid" android: layout_width = "wrap_content" android: layout_height = "wrap_content" /> < /FrameLayout >

Bortsett form disse attributtene, er det andre egenskaper som er felles i alle visninger og ViewGroups. De er listet opp nedenfor −
Sr.NoView & description1 layout_width

Angir bredden på visning eller ViewGroup
2 layout_height

Angir høyden på visning eller ViewGroup
3 layout_marginTop

Angir ekstra plass på oversiden av Se eller ViewGroup
4 layout_marginBottom

Angir ekstra plass på undersiden av Se eller ViewGroup
5 layout_marginLeft

Angir ekstra plass på venstre side av Se eller ViewGroup
6 layout_marginRight

Angir ekstra plass på høyre side av visning eller ViewGroup
7 < b> layout_gravity

Angir hvordan barnet Visninger er plassert
8 layout_weight

Angir hvor mye av den ekstra plassen i oppsettet skal allokeres til Vis

Måleenheter

Når du angir størrelsen på et element på en Android UI, bør du huske følgende måleenheter.
Sr.NoUnit &description1 dp

Tetthet uavhengig piksel. En dp tilsvarer en piksel på en 160 dpi-skjermen.
2 sp

Scale uavhengig piksel. Dette ligner på DP og anbefales for å angi skriftstørrelser
3 pt

Point. Et punkt er definert til å være 1/72 av en tomme, basert på den fysiske skjermstørrelsen.
4 px

Pixel. Tilsvarer faktiske piksler på skjermen

Skjerm tettheter
Sr.NoDensity & Ppt1 Lav tetthet (ldpi)

120 dpi
2 Medium tetthet (mdpi)

160 dpi
3 Høy tetthet (hdpi)

240 dpi
4 med ekstra høy tetthet (xhdpi)

320 dpi

Optimalisere oppsett

Her er noen av de retningslinjer for oppretting effektive planløsninger.

Unngå unødvendig hekkende

Unngå å bruke for mange Visninger

Unngå dyp hekkende Anmeldelser